화면설계서(Storyboard) 작성
화면설계서는 앞에서 설계된 정보구조를 어떤 형태로 보이게될지 정하는 구간으로, 실제로 디자인이 구현되기 전 UI가 어떻게 보여지고 동작하는지 보여주는 문서입니다. 화면 설계서는 작성하는 방법에 따라 와이어프레임(wire frame), 스토리보드(storyboard)라는 용어로 불리기도 합니다. 와이어 프레임은 한 화면단위의 레이아웃을 설계하는데 초점을 맞추고 있으며, 스토리보드는 기능 정의와 서비스 정책 등 설명이 추가되어 있는 차이가 있습니다.
1. 화면설계서의 구성
화면설계서는 모든 요소와 그 요소들을 어떻게 배치할지 시각화 한것 입니다. 단순한 선과 프레임으로 표현된 화면설계서는 대체로 많은 주석을 수반하게 되며 이를 통해 읽는 사람이 정보구조 도표나 기타 인터랙션 디자인 문서, 콘텐츠 요구사항이나 기능 사양서 그리고 필요에 따라 다른 유형의 세부적인 문서를 참고하도록 합니다.*
화면설계서 ① 상단 역역에는 빠르게 화면을 찾고 구분하기 위해서 화면명을 작성합니다. ② 화면 영역은 디자인 요소를 생략하고 흑백의 프레임과 선 등을 이용하여 와이어프레임을 구성합니다. ③ 화면 설명을 화면 우측에 작성에 작성합니다. 다만 작성해야할 내용이 너무 많은 경우 별도의 문서를 참조하도록 할 수 있습니다.
심플한 구성의 화면설계서 예시2. 화면설계서 작성 tip
기획자는 새로운 기능에 대해 리뷰 할때 화면설계서로 이야기합니다. 때문에 화면설계서는 제품을 만드는 모든 참여자들이 이해하기 쉽도록 간결하고 명확한 용어를 활용하여 작성을 해야하며, 여러가지 경우의 수를 빠짐없이 작성해야합니다.
화면설계서를 작성하는 툴로 google workspace를 활용하는 것이 좋은 대안이 될 수 있습니다. google workspace로 문서 작성 후 프로젝트 관리도구 jira에 링크를 추가하면 화면설계서 업데이트 사항을 쉽게 확인할 수 있고 문서의 버전관리가 되는 등 다양한 장점이 있습니다. 다만 화면설계서는 개발자/디자이너가 보기쉬운 방식으로 전달하는 것이 중요하기 때문에 요청사항에 따라 작성 툴이나 공유하는 방식을 정할 수 있습니다.
[참고문헌]
*제시 제임스 개럿(2013). 사용자 경험의 요소; 변하지않는 UX 디자인 원리. 인사이트
