[웹기획가이드] 스토리보드 잘 작성하는 방법?! 1편.

스토리보드.. 화면설계라고도 하는 이 하위기획서는 웹사이트를 구축하는데에 있어, 꼭 거쳐야 할 필수요소이자, 기획자라면 누구나 빈번하게 작성하게 되는 작업물 입니다만..  회사나 작성목적 혹은 기획자의 스타일에 따라 약간씩 다른 형태의 스토리보드가 작성 됩니다.

물론.. 기획의 개념이 그러한 것처럼 스토리보드의 형식이나 내용 역시도 정답은 없으며, 내용이 어떻든간에 최종적인 결과물인 웹사이트가 잘 개발 되었다면, 그것이 곧 잘 만들어진 스토리보드라 할 수 있는데요.  처음 웹기획을 시작하면 가장 먼저 접하게 되는 업무가 바로 파워포인트를 이용해 스토리보드를 작성하는 업무일텐데... 완전히 맨땅에 헤딩하다 싶히 만드는 경우는 거의 없으며, 대부분 리소스로 삼을만한 선배 기획자의 기획서를 받아볼 수 있습니다.

하지만... 그 마저도 여의치 않은 경우 네이버 웹을 만드는 사람들과 같은 전문 기획자 커뮤니티를 통해서도 샘플 자료를 얻으실 수 있는데, 이런 샘플자료들이 어떤 목차로 구성되어 있고, 각각의 페이지에 담긴 내용들을 살펴보다보면, 자연스럽게 스토리보드의 작성방법을 익히실 수 있습니다.  다만..  스토리보드 자체를 작성하는 것은 그리 어려운 일이 아닙니다만, 단지 들여다보는 것과 직접 따라해보는 것과는 분명한 차이가 있는 만큼.. 단순히 보고 끝낼 것이 아니라 파워포인트의 각 기능들도 익힐 겸.. 만들어진 스토리보드를 그대로 따라 만들어보는 것이 매우 효과적입니다...  이러한 과정은 대략 3개월에서 6개월 쯤 반복하다보면, 어느새 능숙한 솜씨로 스토리보드 작업을 하는 자신을 발견할 수 있는데요,

[그림. 1] 스토리보드(화면설계)의 상세설명 중 일부.

문제는, 단순히 스토리보드를 그대로 베끼는 것이 아닌, 스토리보드 내에 자신의 생각을 담아야 한다는 점인데 이를 간과하는 경우, 절대로 그 다음 스텝을 밟을 수가 없습니다..  때문에 스토리보드를 볼 때나 직접 만들어 나갈 때 '왜 이 버튼이 여기에 있는가?' 혹은 '왜 정보를 이렇게 배치했을까?' 와 같은 고민이 따라야 합니다..  단지 능숙하게 베끼는 수준의 작업물들이 많아서인지 흔히 아무나 데려다놔도 기획은 굴러간다는 소리가 있는데, 기획자로써 이러한 비아냥에 가까운 소리를 듣지 않기 위해서는 한 번 더 생각하고 '웹환경에 대한 경험과 지식'을 쌓아야하고 또 '사용자 환경'을 이해해야 합니다.

 

타인의 스토리보드는 독이 될 뿐이다.

앞서 올렸던 '웹기획자의 커뮤니케이션 능력 향상방법' 편에서 좋은 기획자가 되기 위해서는, 자신이 기획할 내용의 이해도가 높아야 한다고 설명했는데.. 이러한 이유는 스토리보드 작업 자체가 단순한 노가다 성 업무이기 때문이 아닌 사용자가 접하게 되는 화면을 그려나가고.. 이를 디자이너와 개발자를 통해 구현하는 과정을 거쳐야 하는 종합적이고도 최종적인 업무이기 때문입니다..  즉, 다시 말해서 자신이 기획해야 할 내용에 대해 이해도를 갖추지 않은 채 기획안을 작업할 경우, 왜 이런 기획이 나왔는지에 대해 디자이너나 개발자에게 올바로 설명할 수가 없으며, 그것은 곧 실패할 가능성이 높은 웹사이트나 서비스로 이어질 수 밖에 없으며.. 이를 방지하기 위해서는 별 것 아닌 것 처럼 느껴질 수 있는 버튼의 배치나 정보 노출순서 조차도, 왜 거기 있는가를 이해해야 합니다.

 

우선, 스토리보드의 디테일한 구성을 살펴보기에 앞서 스토리보드 페이지의 영역을 살펴보겠는데요.. 스토리보드는 크게 페이지의 제목을 기재하는 01번 영역과 페이지의 수를 표기하는 02번 영역, 그리고 실제 화면의 레이아웃을 정리하는 영역과 이 영역들의 각 요소를 디자인, 개발적인 측면에서 설명하는 상세설명 영역(Description)으로 구분됩니다.

 

각 페이지 별로 위의 네 가지 항목은 대부분 들어가야 하지만.. 이 영역들의 배치는 정형화된 것이 아니며, 스토리보드의 형태나 내용에 따라 가변적일 수 있으니, 너무 형식에 얽매일 필요는 없습니다.

 

[그림. 2] 스토리보드의 기본적인 영역.

대략 이와 같은 내용들을 기반으로 스토리보드를 작성하면 되는데, 어느정도의 이해도를 갖게되면 자연스럽게 스토리보드 내에 포함될 요소가 정리되게 되는데.. 그 순서는 회사의 업무양식이나 기획자의 특성에 따라 다소간의 차이는 있겠지만 대체적으로 이와 같은 내용의 항목들이 들어가게 됩니다.

[그림. 3] 스토리보드에 들어가야 할 내용.

스토리보드에 들어갈 항목은 대략 목차를 시작으로 작업 스케줄까지 모두 여덟가지 항목으로 구성되는데 내용을 살펴보면 다음과 같습니다. 

01. 목차 : 각 페이지 별 제목을 기재.

02. 업데이트 기록 : 언제 어떤 페이지에 어떤 내용이 수정되었으며, 해당 수정이슈의 작업을 진행할 포지션 기재.

03. 개요 및 정의 : 기획의 목적을 정의하고, 만들고자 하는 서비스의 운용정책을 기재.

04. 사이트맵 : 각 페이지의 메인 메뉴와 그 메뉴에 귀속된 하위 메뉴를 시각화해서 기재.

05. 프로세스 : 여기서 프로세스는 특정 서비스의 기본 흐름도와 세부 흐름도로 구분되며, 주로 기본 흐름도를 기재.

06. 전체화면 구성 : 만들고자 하는 페이지의 전체화면 레이아웃을 정리.

07. 영역 별 상세설명 : 06번에서 정리한 레이아웃을 바탕으로 영역 별로 디자인/기술적 상세설명을 기재.

08. 작업 스케줄 구성 : 해당 기획안의 기획부터 개발완료까지의 스케줄을 정리.

 

위의 내용을 좀 더 디테일하게 풀어보면, 보통 스토리보드를 만들 때 딱 만들어놓고 더 이상 수정할 것이 없을 듯 하지만.. 디자이너나 개발자 혹은 다른 연관 담당자들과 커뮤니케이션을 진행하다 보면, 수정해야 할 사항들이 빈번하게 발생합니다.  이 때, 수정사항의 명확한 전달을 위해 언제 어떤 페이지의 내용이 수정되었으며, 이 수정을 담당할 포지션이 디자인 파트인지, 혹은 개발 파트인지를 명시해줘야 합니다.

 

업데이트의 관리는 기획서 작성의 기본!!

 

만일 이와 같은 업데이트 기록이 잘 관리되지 않는다면 기획자 본인이 기획서를 수정해놓고도 어디서 수정했는지를 알 길이 없으며 수정사항이 명시되지 않음으로써 디자이너나 개발자 역시도 수정사항을 반영하기 위해 기획서 전체를 다 읽어야 하는 문제가 발생하게 됩니다.  이런 문제는 자칫 작업진행의 트러블 요소로 남을 수 있으니, 업데이트기록은 철저히 관리하는 것이 중요합니다.

 

[그림. 3] 개요와 사이트맵이 혼합된 형태의 정의자료.

 

그 다음 개요와 요소 별 정의는 어떤 기획서이던지 꼭 들어가야 하는 핵심적인 내용 입니다.  즉, '이 기획을 왜 해야 해는지' 를 정의함으로써 기획자 본인이 일관성 있는 기획을 할 수 있는 기본정의가 됩니다. 뿐만 아니라, 작업을 같이 진행하는 디자이너, 개발자, 마케터, MD 등 협업 대상자들과 공통된 정의를 공유함으로써 하나의 목표에 도달하기 위한 가이드의 역할을 가지고 있습니다. 

 

만일 기획의 목적이 정의되지 않은 상태에서 사이트 개편을 한다고 가정했을 때... 기획자는 A라는 방향으로 기획을 했는데, 디자이너는 B를 목표로 삼고 있고, 개발자는 C를 목표로 삼고 있다면 그 개편작업은 실패할 확률이 높아 집니다.  이러한 부분을 사전에 예방하기 위해서는 왜 개편을 해야하고 개편의 범위는 무엇인지.. 혹은 이 개편을 통해 얻고자 하는 기대효과는 무엇인지를 잘 정의함으로써 모두가 하나의 방향을 가지고 작업을 진행해야 프로젝트의 성공을 담보 할 수 있다는 점을 잊지 마시기 바라구요.. 다음 편에서는 오늘 마무리 하지 못한 스토리보드 작업의 세부적인 구성요소 더 이야기 하도록 하겠습니다.

 

아울러 이 글을 보시는 여러분들의 공감댓글 한마디가 더 좋은 글이 나오는 원동력이랍니다. 글을 통해 도움이 되셨거나 기획과 관련해 궁금하신 점이 있다면 언제든 댓글 남겨주세요..^^ 
 

야메군이 진행하는 "웹기획 마인드 강좌"는 오프라인 강좌 뿐만 아니라, 온라인 강좌로도 만나보실 수 있습니다. 지식 동영상 스토어 "AirKlass", 지구상 가장 큰 학교 "EDUCAST", 전문가의 지식노하우 플랫폼 "TOC6"에서 강좌를 확인해보세요!! 

야메군. Web와 Mobile, Digital 카테고리 SME(Subject Matter Expert). 웹기획 15년차로 네이버 웹기획자 커뮤니티 "웹(WWW)를 만드는 사람들"에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 현재는 민간 IT 원천기술 연구소 "Valhalla Lab"에서 Pattern recognition과 Machine learning, Natural Language Processing 기술의 상업적 이용방법에 대해 연구했으며, 2016년 7월 7일, 기획자의 업무능력 향상으로 위한 Guide Book "처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)" 출간.