18. Screen Plan

화면 기획서

LiveMD는 크게 Workspace Page와 Editor Page로 나누어 화면을 기획하였습니다.(Balsamiq 이용)

Workspace Page

우리 프로젝트의 초기에 구상했던 Workspace page입니다. 좌측에는 Side bar로 팀을 생성할 수 있습니다. "+" 아이콘이 위치한 자리는 문서를 생성할 수 있습니다.

문서는 팀 워크스페이스 혹은 개인 워크스페이스로 구분 지어지고 그에 맞게 우측에 문서들이 나열됩니다. 우측의 문서 중 하나를 클릭하면 Editor page로 이동된다.

Editor Page

초기에 구상했던 우리 프로젝트의 Editor page입니다.

Editor page는 크게 세 부분으로 나뉠 수 있습니다.

가장 좌측에는 Markdown을 활용하여 Editor를 편집할 수 있는 부분입니다.
가운데는 편집한 Editor의 preview를 나타내주는 부분입니다.
마지막으로 가장 오른쪽 부분은 동료들과 실시간으로 화상채팅 및 채팅이 가능한 부분이 있습니다.
추가적으로 우측 상단에는 비디오 및 오디오를 on/off 할 수 있는 버튼과 채팅 및 화상채팅 구역을 Hide/show할 수 있는 버튼이 있습니다.