스토리보드 기초

프로덕트 매니저와 기획자의 메인 업무 중 하나는 UI 설계입니다.

이를 업계에서는 화면설계서, 화면정의서, 스토리보드, MMI(Man Machine Interface)등 다양한 이름으로 부르고 있는데요. 고놈이 고놈이라고 이해하시면 됩니다.

 

화면설계서는 대부분 파워포인트, 피그마등 상황에 맞추어 제작합니다. 스토리보드는 모든 분석 및 정의 한 내용들이 정리되고 요약되며, 와이어프레임과 같이 표현되는 부분이라 제일 중요한 부분이라 생각합니다.

따라서 자세하게 설명을 하고자 주니어 레벨을 목표로 작성해 봅니다.

에이전시를 위한 항목도 있으니 이부분은 에이전시가 아닌 기획자분은 패스 할 항목으로 생각 해 주세요.

 

스토리보드의 양과 질

설계 문서인 스토리보드가 보기 좋게 잘 정리되어 있어야 하는 것도 중요합니다. 개발자나 디자이너의 내용 가독성에 도움이 되기 때문입니다. 그렇다고 내용이 없어도 된다는 것은 아닙니다. 말 그대로 스토리보드는 설계 문서이기에 내용이 없다면 개발을 위한 문서가 아닙니다.

때로는 스토리보드를 화면 설계 문서로 취급하는 경우도 있습니다. 그래서 일종의 피그마 같은 디자인 툴에 적용할 화면을 그대로 PPT 같은 문서 툴에 표현한 내용으로 작성되기도 합니다. 마치 화면만 있는 프로토타입 문서로 스토리보드를 인식하는 경우도 있습니다.

 

그러나 이는 잘못된 것입니다.

 

스토리보드는 앱(웹) 개발을 위한 문서이지, 앱 화면을 만들기 위한 문서가 아니기 때문입니다.

앱(웹) 개발 작업이 화면 작업이라면 굳이 많은 비용이 들어가는 개발자를 고용해서 앱 개발을 할 이유가 없습니다. 디자이너만으로 프로토타입핑 툴에 디자인을 입혀 작동시키면 되기 때문입니다.

 

그러므로 만약 화면 설계 스토리보드를 작성했다면 기능 개발 스토리보드도 있어야 합니다.

그리고 수 백 페이지 스토리보드를 열심히 일한 많은 작업 산출물로 과시하는 경우도 있습니다. 때로는 기획 분석을 해 왔던 입장에서 보면 이런 기획서로 개발된 앱은 대부분 문제가 있는 경우가 많습니다. 실제 너무 많은 페이지로 작성된 스토리보드 때문에 개발이 엉켜 있는 앱도 확인한 적이 있습니다.

 

무조건 적은 양의 스토리보드를 만들라는 의미가 아닙니다. 항상 적절한 양의 스토리보드가 작성되어야 합니다. 그럼 스토리보드의 적정한 양은 어느 수준일까 궁금할 수 있습니다. 이는 위의 기능정의서와 화면정의서를 작성했다면 알 수 있습니다.

양을 중시하는 스토리보드에는 항상 작성 내용이 중간에 끊겨 있거나, 의외의 페이지에서 중복되는 내용들이 너무 자주 나타나기도 하고 때로는 중복 내용을 다르게 표시하는 실수도 범해 놓는 경우도 생기게 됩니다.

 

개발자가 코드를 작성하는 데 중간에 논리가 끊겨 있다면, 수만 줄 작성했다는 것으로 의미를 찾을 수 없을 것입니다. 오히려 수만 줄 때문에 코드의 문제 부분을 찾기 어려울 수도 있습니다. 스토리보드도 마찬가지입니다.

 

좋은 코드는 간략하면서도 작동이 잘되는 것이라면 스토리보드도 같습니다. 반대로 나쁜 코드가 버그를 가지고 있는 너무 긴 코드라면 스토리보드 역시 문제가 있는 너무 양이 많은 문서라 할 수 있습니다.

 

스토리보드에 포함되어야 할 내용은 아래와 같습니다.

 

1. 표지

모든 문서의 첫 페이지는 표지로 시작하며, 표지는 프로젝트명, 고객사, PM, 현재문서버전, 최종작성일, 담당 등을 작성하고 하단에 문서개정이력을 작성 합니다.

제가 요즘 화면설계시 아래의 이유로 피그마를 선호하고 있습니다. 아래 내용은 나중에 별도 목차로 설명을 하겠습니다.

• 항상 최신 버전 1개의 파일만 존재하며 히스토리 추적도 가능하다.
• 리얼타임 공유가 되며 코멘트를 통해 의견수렴 및 토론이 가능하다. (코멘트의 질/답 시 이메일 알람도 됩니다)
• 화면설계에 필요한 여백이 넓다. PPT의 제한된 화면에 복잡한 내용을 넣으려면 화면설계를 위한 UI고민을 한적이 많습니다.
• 장표 프린트를 할 필요가 없다.

 

2. 메뉴 구조 (사이트맵)

프로덕트의 전체 구조를 시각화합니다. 대형 프로젝트의 처럼 메뉴단위 화면설계를 진행 시, 사이트맵 기준으로 업무 범위를 나눌 수도 있고, 문서 양이 많은 경우에도 메뉴 구조별로 분할하면 장표를 보고 이해하는데 큰 도움이 됩니다.

 

 

 

 

3. 기능별 플로우

 

 

 

 

4. 화면설계

화면설계는 개요영역, 드래프트영역, Description영역의 3분류를 두고 설계를 진행합니다.

• 개요영역에는 프로젝트명, 작성자, 작성일, 메뉴위치, 화면설명, 페이지넘버등을 기재합니다.
• 와이어프레임영역과 Description영역에는 이제 상세화면설계를 작성해 줍니다. (상세한 화면설계방법은 다음목차에서 이야기 하겠습니다. )
•  

 

 

 

 

 

 

위 순서가 가장 일반적인 화면설계서의 요소들 입니다.

이외에 정책목록, 메뉴별접근권한목록 등이 있는데 이 부분은 필요시 추가할 항목이지 필수는 아니라고 생각 됩니다.