depict는 간소화된 와이어프레임인 빵판(breadboards)을 빠르게 그릴 수 있는 웹 기반 소프트웨어입니다.
이 문서는 depict를 써서 모바일 메신저 앱을 설계하는 과정을 보여줍니다.
주요 화면과 요소, 화면 사이의 연결을 빠르게 설계하기
빵판의 가장 큰 장점은 와이어프레임에 비해 형식이 간소하기 때문에 작성이 간편하다는 점입니다.
모바일 메신저의 주요 화면은 다음과 같습니다.
- 기존 대화 목록을 보여주는 첫 화면
- 새 대화 시작하기
- 기존 대화 이어가기
각 화면이 어떻게 생겼는지, 독립된 화면인지 기존 화면 위에 나타나는 대화상자인지 등 구체적인 사항에는 신경쓰지 않고 일단 세 가지 주요 화면이 있다는 사실만 나타낼 수 있습니다.
화면 좌측의 편집기에 아래 텍스트를 입력하면 우측에 빵판이 그려집니다.
Home
Start new conversation
Conversation첫 화면에는 대화 목록과 새 대화를 시작하는 버튼이 있어야 합니다. “Conversation”
옆의 별표(*)는 대화가 여러개 있다는 표시입니다. “Start new conversation” 옆의
화살표(=>)는 화면 사이의 연결을 뜻합니다.
Home
Start new conversation =>
Conversation*
Start new conversation
Conversation빈 대화창에는 받을 사람의 전화번호를 넣는 입력란, 메시지를 적는 입력란, 보내기
버튼이 있습니다. 보내기 버튼을 누르면 메시지가 발송되고 다시 홈으로 갑니다. 항목
이름과 목적지 이름이 다르면 Send => Home 형식으로 화살표 옆에 목적지 이름을
적어주세요.
Home
Start new conversation =>
Conversation*
Start new conversation
Recipient
Message
Send => Home
Conversation첫 화면을 조금 더 구체화하면 좋겠습니다. 첫 화면에 나타나는 대화 목록의 각 항목은 프로필 이미지와 가장 최근 메시지에 대한 미리보기로 구성됩니다. 이걸 표현혀려면 들여쓰기를 하면 됩니다.
Home
Start new conversation =>
Conversation*
Profile pic
Latest message
Start new conversation
Recipient
Message
Send => Home
Conversation메시지를 클릭하면 대화창으로 이동하고, 프로필 이미지를 클릭하면 프로필 정보를 보여주는 화면으로 이동하면 좋겠습니다.
Home
Start new conversation =>
Conversation*
Profile pic => Profile
Latest message => Conversation
Start new conversation
Recipient
Message
Send => Home
Conversation“Profile” 화면은 처음 계획에 없던 화면이라서 빨간색으로 표시됩니다. 해당 글자
위에서 Cmd+. (윈도는 Ctrl+.) 단축키를 누르거나 다이어그램에서 링크 추가하기
아이콘을 클릭하면 직접 글자를 입력하지 않아도 쉽게 새 창을 만들 수 있습니다.
Home
Start new conversation =>
Conversation*
Profile pic => Profile
Latest message => Conversation
Start new conversation
Recipient
Message
Send => Home
Conversation
Profile생각해보니 “Start new conversation”에서 “Send”를 누른 이후에도 “Home”으로 가기 보다는 “Conversion”으로 가는 편이 더 좋겠습니다. 그리고 각 화면에서 홈으로 이동할 수 있는 버튼이 있으면 좋겠습니다. 빵판은 형식이 간소하기 때문에 변경 비용이 매우 낮아서 빠르게 다양한 아이디어를 실험해볼 수 있습니다.
Home
Start new conversation =>
Conversation*
Profile pic => Profile
Latest message => Conversation
Start new conversation
Home =>
Recipient
Message
Send => Conversation
Conversation
Home =>
Profile
Home =>화살표가 많아졌지만 특정 항목을 선택하면 해당 항목과 연결된 화살표만 강조해서 볼 수 있으므로 문제가 없습니다. 예를 들어 Home으로 향하는 화살표만 강조하려면 “Home”을 클릭하거나 편집기에서 “Home” 부분에 커서를 옮기면 됩니다.
점진적으로 구체화하기
“Home”과 “Start new conversation”에 담길 요소들은 어느 정도 구체화되었으나 “Conversation”과 “Profile”에 담길 내용은 아직 덜 채워졌습니다.
보통은 하나의 디자인 문서에 담긴 여러 화면들의 정밀도(fidelity)를 동일한 수준으로 맞추려고 하지만, 꼭 그래야 하는 건 아닙니다. 필요한 부분에 대하여, 필요한 수준의 정밀도를, 필요한 시점에 달성하는 게 더 효율적입니다.
각 화면이 독립된 화면인지 기존 화면 위에 나타나는 대화상자인지 등 구체적인 사항을 아직 정하지 않았으니 이제 고민해보면 좋겠습니다.
“Home”, “Start new conversation”, “Conversation”은 각각 별도의 화면이고,
“Profile”은 대화상자이면 좋겠습니다. .page 또는 .dialog 어노테이션을
추가하면 의도를 쉽게 나타낼 수 있습니다.
Home .page
Start new conversation =>
Conversation*
Profile pic => Profile
Latest message => Conversation
Start new conversation .page
Home =>
Recipient
Message
Send => Conversation
Conversation .page
Home =>
Profile .dialog
Home =>“Start new conversation”에 대해서만 정밀도를 조금 더 높여보겠습니다.
“Recipeint”와 “Message”는 텍스트 입력창이고 “Send”는 버튼이라는 의도를 명시하면
좋겠습니다. 각 항목에 .input, .button 어노테이션을 추가하면 됩니다.
Home .page
Start new conversation =>
Conversation*
Profile pic => Profile
Latest message => Conversation
Start new conversation .page
Home =>
Recipient .input
Message .input
Send .button => Conversation
Conversation .page
Home =>
Profile .dialog
Home =>마지막으로 “Start new conversation”의 레이아웃을 조금 더 명확하게 표현하기 위해
:row, :col 등의 스타일 어노테이션을 추가하겠습니다.
Home .page
Start a new conversation =>
Conversation*
Profile pic => Profile
Latest message => Conversation
Start a new conversation .page
Header :row
Home =>
:fill
About
Help
Main :col
Recipient .input
Message .input
-
Send .button => Conversation
Conversation .page
Home =>
Profile .dialog
Home =>간단한 브레드보드에서 시작해서 점진적으로 정밀도를 높여가며 디자인을 구체화할 수 있었습니다. 정밀도가 높은 부분과 낮은 부분이 섞여 있는 혼합 피델리티mixed-fidelity 프로토타입을 만들 수 있었고, 이를 통해 빠르게 기획을 구체화하고 기획 의도를 명확하게 담아낼 수 있게 되었습니다.