UI정보구조 설계 / 4. 스토리보드 흐름 구체화

스토리보드 흐름 구체화

와이어프레임에 기반을 두어 표현되는 정보와 기능에 따른 상세 스토리보드 흐름 (flow)을 기획할 수 있다.

스토리보드의 정의

1. 스토리보드의 구성

스토리보드는 앱을 개발하기 위한 기초 설계 도면으로 디자이너 및 개발자가 참고하는 최 종적인 산출문서라고 할 수 있다. 화면 구성이 어떻게 보여 질것이며 다음 화면이 어떻게 전개될지 알려주는 것으로 각 화면에 대한 화면 정의서, 기능 정의서, 데이터베이스 연동 등 구축을 위한 모든 정보가 담겨 있는 문서이다. 앱 서비스 제작의 단계에서 스토리보드 는 실제 제작의 전단계이며 요구 분석, 정보구조 설계, 서비스 흐름도 작성 후 최종 문서 로서 해당 문서를 바탕으로 커뮤니케이션을 하게 된다.

2. 스토리보드 작성 단계

(1) 앱의 설명 및 개요

문서 명, 개정 이력, 디렉토리, 작성일자, 업데이트 기록, 기재해야 할 중요사항 등 앱 에 대한 전반적인 개요를 명시한다. 앱의 주요 목적과 타깃, 어떠한 기능을 제공하는 앱 인지 가장 핵심적인 콘셉트만 대표 화면과 함께 요약해서 작성한다.

(2) 시스템 구성도(system configuration diagram)

앱의 형태가 연동형 앱인 경우에는 단말기가 어느 위치에 있는 어떤 서버와 통신을 하는지 한눈에 볼 수 있는 시스템 구성도를 작성해야 한다. 시스템 구성도가 문서화되 어 있으면 향후, 향후 서비스에 문제가 발생하는 경우에 빠르게 대응할 수 있다.

(3) 서비스 흐름(service slow)

메인페이지로부터 각각의 서브 메뉴들이 어떤 화면들을 거쳐서 진행되는지 과정을 보 여주는 화면을 말한다. 예를 들어 어떤 특정 버튼을 누르면 어떤 이벤트가 발생하는 지, 다음 화면은 무엇인지, 어떤 화면에서 서버와 통신이 발생하여 공지사항 리스트를 가져오는지 등을 표시해 한 메뉴에 대한 전반적인 이용 과정의 흐름을 한 눈에 보여 주는 것이다. 와이어프레임 상에서 발견하지 못한 서비스 흐름상의 문제를 짚어볼 수 있다. 사용자가 앱을 이용하는 도중에 메뉴들의 구성이 엉키거나, 혹은 그 흐름이 끊 어지는 현상이 발생하지 않는지 확인하는 과정인 것이다.

(4) 메뉴별 화면 설계도 작성 및 상세 설명

메뉴에 대한 서비스 흐름도 작성이 완료되면, 각각의 화면에 대한 상세 설명 페이지를 작성한다. 상세 설명 페이지는 보통 이등분 해, 좌측에는 화면의 UI를 보여주고, 우측 에는 UI에 대한 설명을 기입한다. 설명은 디자이너에게 필요한 화면 설계에 대한 내용 을, 그리고 개발자나 알아야 할 개발 사항과 관련된 내용을 명시한다.

(5) 추가 관련 정보 작성

메뉴별 화면 설명은 구체적이고 이해하기 쉽게 설명하는 것이 바람직하며, 연결되는 서버가 있다면 해당 URL이나 관련 정보도 같이 작성한다. 그리고 프로그램 요소나 스 크립트 기능, ASP나 PHP 등의 프로그램 등을 표시하고, 그 기능에 대해 설명한다.

(6) 작업 스케줄 구성

앱 기획안의 초기 단계인 기획부터 개발 완료까지의 스케줄을 정리한다.

3. 스토리보드 작성 시 유의사항

(1) 일관된 기호의 표시

스토리보드 작성 시에는 많은 페이지를 다루기 때문에, 내용을 작성하는 방법이나 기 호, 번호 등에 일관된 방식을 사용하여 내용을 명확히 전달하여야 한다.

(2) 공통 영역의 정의

상단 메뉴나 하단 내용(푸터), 퀵 메뉴 등 화면내의 공통 영역에는 페이지마다 같은 표 식을 함으로써 중복해서 표현하지 않게 하는 것이 바람직하다.

(3) 영역별 세부 설계

스토리보드의 영역별 세부 설계 시, 각각의 영역을 명확히 구분한 다음 세부적인 설명 을 기술하여 해당 내용을 쉽게 이해할 수 있도록 한다.

(4) 버전업 관리

스토리보드는 작성 이후에 변경사항이 자주 발생하기 때문에, 갱신 시 버전과 날짜를 기록하여 효율적인 관리가 되도록 해야 한다.

스토리보드 작성 도구

1. 앱 스토리보드 제작 도구(storyboarding tool)

스토리보드 작성 방법은 와이어프레임과 같이 스케치를 이용하기도 하며, 제작 도구를 이 용하기도 한다. 웹과 모바일에 관련된 기획 업무에서 스토리보드를 작성하게 되는데, 파워 포인트나 이미지 편집툴을 사용하는 것에 비해 쉽고 빠르게 스토리보드를 작성할 수 있는 도구에는 파워 목업(http://www.powermockup.com), 발사믹(http://www.balsamiq.com) 등이 있다.