화면 설계 사례 : 채팅 구조도 (Screen Flow Map)

이 그림은 2003년 채팅서비스를 개발하며 제작한 화면설계 구조도이다. (머리 좀 아팠음 ㅠㅠ)

채팅서비스를 이용하기 위해서는 여러 경로를 거치게 되며, 인접한 관련 서비스와의 연결관계를 고려해 설계해야 한다. 대화할 사용자를 직접 검색하거나, 현재 대화방 상황을 살펴보는 등의 외부 메뉴와 1:1 대화, 쪽지, 신고, 2인 이상이 입장 가능한 일반 대화방 등이 심리적으로 가깝게 느껴지도록 통합 설계, 디자인해야 한다.

'채팅' 메뉴에 필요한 주요 페이지들은 중앙의 회색블록(■)에 해당하며, 채팅이 이루어지는 대화방은 중앙 하단의 진분홍 블록(■)이다.
쪽지메뉴에 해당하는 것은 하늘색 블록(■)이며, 신고는 녹색 블록(■)으로 표시했으며 각각의 메뉴, 화면들과 어떻게 연결되어 있는지를 살펴볼 수 있다.

채팅이 끝난 이후의 정보에 대한 관리 영역은 대화 상태와 친구등록, 초대 수신여부 등을 포함한다.
최근 대화한 상대의 목록이나 친구 리스트, 블랙리스트 등을 기록하는 곳은 '마이페이지'이며, 내 아바타 설정이나 쪽지 수신여부 등을 관리하는 것도 여기에 해당한다. 마이페이지는 기존에 있는 기능이며 여기에 추가, 변경되는 내용이 들어가야하기 때문에 신규 개발하는 채팅 서비스와의 연결은 매우 중요하다. 마이페이지는 상단 노란색 블록(■)에 해당한다.

채팅 개발을 진행하며 미니홈피의 축소판을 함께 개발하였다.

채팅신청하기 전에 상대에 대하여 좀 더 상세한 정보를 얻고자 하는 심리가 있을 것으로 기대하였고, 대화를 진행한 후에도 상대의 홈피에 글을 남기는 등의 비동시적 대화창구가 필요하기 때문이다. 미니홈피 서비스가 강화될 것이 예상되었기 때문에 우선 소규모로 오픈하여 회원들에게 사용을 유도하고 이를 익히게 한 다음 더욱 확장할 것을 기획하였다. 미니홈피에 해당하는 페이지는 좌측 하단 보라색 블록(■)에 해당한다.

이 구조도는 Information Architecture 중 Screen Flow Map에 해당하는 것으로, 화면에 각 기능이 배치한 상태로, 그 링크를 함께 파악할 수 있다는 장점이 있다. 개발파트와 디자인, 기획파트가 동일한 구조를 인식하기 위해 제작하였으며, 필요한 요소들에 무엇이 있는지 파악하는데에도 매우 용이하였다.

개별 페이지로 구성된 '페이지 시나리오' 1차 작업과 동시에 작업되었으며, 페이지 레이아웃에 대한 스케치 이후 바로 구조도 작업에 들어가게 된다. 구조도는 링크설계와 디자인 레이아웃 통일성을 위한 기초작업에도 큰 도움이 되는 편이다.