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

지난 주 스토리보드 작성방법에 대한 내용을 설명하다가 마무리를 짓지 못했는데요, 앞서 개요 및 정의에 대한 항목을 이야기했었는데.. 이 같이 기획의 목적과 정책적인 요소를 정리한 후, 사이트의 메뉴나 페이지 구성을 도식화한 사이트맵 페이지를 작성해야 합니다.

사이트맵은 식당의 메뉴판과도 유사한 구조와 개념을 가지고 있는데, 식당 메뉴판을 보면 탕 류라는 최상위 분류에 해물탕, 알탕, 설렁탕, 갈비탕과 같은 하위 분류가 구성되어 있는 경우를 많이 보셨을텐데, 이런 카테고리 분류없이 탕과 찌게, 주류를 마구잡이로 섞어 놓는다면 손님은 자신이 원하는 음식을 찾기 위해 많은 시간을 들일 수 밖에 없으며, 결과적으로 클레임이 유발될 수 밖에 없는데, 스토리보드 상에서의 사이트 맵 역시도 별반 차이가 없습니다..

즉, 사이트맵 작성을 통해, 만들고자 하는 서비스의 메뉴 구성을 생각해봐야 하고, 최상위 메뉴와 그 메뉴에 귀속된 하위 메뉴 간의 유사성을 판단하여 적절한 배치를 함으로써.. 메뉴와 메뉴간의 이동과정에서 유저의 이용 편의성을 높여야 합니다.  또한 이 과정에서 메뉴의 레이블도 충분히 고려해줌으로써 메뉴의 유사성을 보완해줘야 합니다.

[그림. 1] 사이트맵 화면의 예시.

참고로, 사이트맵을 작성 시 메뉴 간의 유사성을 판단할 때에 다음의 두 가지를 고려해야 하는데, 첫 번째는 기능적인 유사성. 두 번째는 사용자의 이용패턴에 따른 연계성 입니다. 예를 들어, 마이페이지에 대한 사이트 맵을 작성한다고 가정할 때.. 우선 기능적인 측면에서 어떠한 메뉴들을 마이페이지에 둘 것인가를 따져 본 후, 로그분석 데이터 등을 통해 사용자의 이동패턴을 고려하여, 개인정보 수정메뉴를 상단에 배치할 지 혹은 구매내역으로 이동할 수 있는 메뉴를 상단에 배치할 지 등을 고민해봐야 합니다.  여기에 회사에서 밀고자 하는 혹은 서비스 측면에서 더 중요하다고 판단되는 부분까지 고려한다면 더할 나위없이 좋은 사이트 맵에 될 듯 합니다.

사이트 맵은 기능적 유사성과 이용패턴을 고려해야...

이렇게 사이트맵을 작성한 후 프로세스를 작성해야 하는데 여기서의 프로세스는 디테일한 기능적인 프로세스가 아닌, 전반적인 흐름이 담긴 플로우 차트의 개념으로 이해하시면 될 듯 합니다.

예를 들어... 회원 가입을 하나의 서비스로 보고 대한 프로세스를 구성한다고 가정할 때, 일반적으로 개인정보 이용에 따른 동의절차및 실명인증 영역과, 아이디나 비밀번호 및 기타 정보를 입력을 받는 영역.. 그리고 회원가입 완료안내 영역 등으로 구성되어 있는데.. 이 세 단계의 영역을 간단하게 도식화 한 내용이 이 프로세스 영역에 포함되어야 하며, 보다 디테일한 프로세스. 즉, 개인정보이용 동의 체크박스에 체크를 했는가, 안했는가에 따라 어떤 경고창을 보여줘야 하는가 등과 같은 내용은 각 기능을 상세하게 설명하는 상세설명 영역에 포함시키면 됩니다..  이 프로세스에 대해서는 이 전에 작성했던 웹 기획자가 알아야 할 프로세스 편을 참고하시면 이해가 빠르실 듯 합니다.

[그림. 2] 전체화면 구성 작업물의 일부 페이지.

그 다음, 각 페이지 별 화면 레이아웃을 그리게 되는데, 이를 통해서 해당 페이지에 들어갈 컨텐츠적인 요소나 서비스의 전반적인 레이아웃을 정리하게 됩니다.  한 개의 웹 페이지 별로 이와 같은 전체화면 구성을 미리 정리해 놓으면 각 기능 별 상세설명을 정리할 때 보다 빠르게 정리할 수 있다는 장점이 있는데 스토리보드에 꼭 들어가야 할 표준 구성은 아니니, 작성여부에 대해서는 작업자가 판단하시면 되겠습니다.  참고로 제 경우엔, 파워포인트 세 장 정도에 걸친 한 페이지의 레이아웃을 출력해서 풀로 붙인 후 책상 파티션에 붙여놓곤 하는데, 전시효과로는 그것만큼 뛰어난 것도 없는 듯 합니다.  왠지 열심히 일하고 있다는 느낌이랄까?^^;

잠시 쓸데없는 사담이었구요.  이렇게 전체화면 구성을 마친 후, 전체화면 구성 내용을 근간으로 각 영역 별로 상세한 설명을 기술하면 되는데, 이 때 디자인적인 이슈나 개발적으로 전달할 이슈를 정리하면 되겠습니다..  참고로 필요할 경우 상세설명을 하는 시점에 디테일한 프로세스도 첨부해주시면 개발작업 진행 시, 수월하게 진행할 수 있습니다.

[그림. 3] 상세설명 작업 페이지.

대략 이 정도의 과정을 거치면 기본적인 스토리보드의 구성이 완료되었다고 할 수 있는데, 이렇게 작업한 결과물을 바탕으로 실무자들과의 작업 스케줄을 정리해야 합니다.

작업스케줄은 실무자들과의 커뮤니케이션으로..

작업스케줄은 기획/디자인/개발 등의 각 영역을 타임라인으로 쪼개어 정리하면 되는데, 예를 들어.. 기획파트 부분에서 컨셉 기획에 얼마. IA 설계에 몇 주 간의 시간이 걸릴거고, 스토리보드 작업에 얼마만큼의 시간이 걸릴 것이라는 내용이 수록되어야 합니다..  이런 식으로 기획과 디자인 및 개발의 세부 항목을 타임라인으로 정리하고, 알파나 베타 테스트 일정, 그리고 최종 런칭일정을 확정 지으면 스토리보드에 포함된 모든 내용이 완료됩니다.

여기서 스케줄을 정리할 때 기획자 임의대로 정리하는 것이 아니라 디자이너와 개발자간의 협의를 거쳐야 하며, 기획자는 프로젝트 시작일과 종료일자 정도를 확정짓고, 그 범위 내에서 협의를 통해 세부적인 일정을 조율하면 되겠습니다.

[그림. 4] 개략적인 진행스케줄의 예시.

지금까지, 스토리보드 작성하는 방법을 대략적으로나마 정리해 보았는데요. 그간의 경험에 미루어 봤을 때, 스토리보드를 능숙하고 빠르게 작성하기 위한 유일무이한 방법은 바로... '많이 해보는 것' 그리고 '어떻게 작업할 지에 대한 명확한 정의' 이며, 이 두 가지가 충족되지 않으면 절대로 능숙한 스토리보드 작업을 할 수가 없습니다.. 이 스토리보드를 통해 기획자는 자신이 기획하고자 하는 내용을 상대에게 명확히 전달 할 수 있어야 하며, 이 '명확한 전달' 이라는 화두를 위해서는 어떻게 작업하고 어떤 방식으로 내용을 전개해야 하는가를 충분히 고민해야 합니다.

물론, 웹 기획을 처음 시작한 기획자에게 이러한 내용을 모두 감당하게 하는 것은 너무나도 가혹한 일이기 때문에.. 사수나 혹은, 주위의 다른 선배 기획자들이 작업한 스토리보드를 살펴봄으로써, 웹 스토리보드에 대한 사전적인 이해를 높일 수 있도록 끊임없는 공부를 하셔야 한다는 것으로 스토리보드 잘 작성하는 방법 2편을 마치겠습니다.

 

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

  

야메군이 진행하는 "웹기획 마인드 강좌"는 오프라인 강좌 뿐만 아니라, 온라인 강좌로도 만나보실 수 있습니다. 지식 동영상 스토어 "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 "처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)" 출간.