저는 최근 반려동물 스타트업으로 이직 했습니다. 대부분의 스타트업들이 그러하듯 이곳도 젊은 직원들이 주축이 되어 시시각각 달라지는 트렌드와 비즈니스 환경에 대응하고자 24시간도 부족할만큼 몰려드는 스케줄을 소화하고 있습니다. 또 그간 근무했던 어떤 회사보다도 활발하고 역동적인 조직 분위기를 가진 회사라 저 역시도 그 활발함에 동화되어가고 있습니다. 저도 출근한 지 3일만에 기획서를 썼...
하지만 밝은 면이 있다면 어두운 면도 있겠죠? 빠른 변화에 대응하다보니 진행되는 많은 프로젝트의 히스토리나 레퍼런스 관리가 잘 이루어지지 않거나 업무가 입에서 입으로 전해지는 경우로 인해 특정 이슈가 발생했을 때 상황대처가 쉽지 않다는 문제점도 눈에 띕니다. 이러한 문제에 대응하기 위해서는 JIRA와 같은 툴을 통해 업무를 관리하고 구성원간의 능동적인 업무진행도 필요하지만, 프로젝트 진행과정에서 산출되는 표준화에 근간을 둔 기획서의 작성 및 관리도 필요합니다.
그 관점에서 다시 앞으로 돌아와 현 직장의 상황을 살펴보니, 툴을 통한 일정관리 및 업무의 공유는 잘 이루어지고 있으나, 언급했던 문서의 관리는 잘 이루어지지 않는다는 문제점은 여전히 남더군요. 그래서 이를 보완하고자 화면설계서, 혹은 스토리보드로 불리는 기획서 양식을 만들어봤습니다. 물론 기획서 양식을 처음 만들어보는 건 아니지만, 스타트업의 업무환경 상 번거롭고 형식적인 문서화보다는 꼭 필요한 내용만을 담는 것이 현실적이라는 판단이 들었습니다. 이에 기존에 통용되던 복잡한 양식을 조금 손 봤습니다.
그런데 혼자 쓰기는 조금 아쉬운지라 한 번 공유해볼까 합니다. 부족한 양식이지만 필요하신 분은 마음대로 이용하하시기 바랍니다. 아, 사용하시기 전에 아래 기획서 양식 사용설명서를 읽고 기획적 역량도 같이 높여보시기 바랍니다.
먼저 표지 입니다. 표지를 통해 기획서의 명칭을 정의하고 기획서의 버전(Version), 작성일자, 작성자 정보 등을 기록하게 됩니다. 아울러 문서의 보안성 정도에 따라 보안의 단계나 열람권한 등을 표기하기도 합니다. 하지만 문서의 보안을 목적으로 DRM(Digital Rights Management)을 사용하는 것이 아닌 이상 잘 지켜지지도 않는 관계로 비밀문서라는 의미의 Confidential 정도만 표지 중앙에 배치했습니다.
화면설계서 표지양식
2. History 양식
두 번째로 문서의 업데이트 내역을 기록하는 History 양식입니다. 우리가 작성하는 화면설계서 또는 스토리보드는 필연적으로 클라이언트, 사수, 팀장, 오너 또는 기획자 본인의 필요에 의해 수정이 이루어지게 됩니다. 이때 문서의 업데이트 내역이 관리되지 않는다면, 어떤 내용이 수정되었는지 기획자 본인은 물론 디자인/퍼블리싱/개발을 위해 문서를 보는 작업자들도 알 수가 없죠.
이를 위해 업데이트 기록을 관리하는 History 양식이 존재하며 버전, 업데이트 날짜, 변경 또는 추가된 내용, 해당 변경이 적용된 페이지, 작성자 정보를 기록합니다. 참고로 주니어 기획자를 위해 기획문서의 업데이트 팁 하나 알려드릴께요. 최초 기획서 작성 후 업데이트 이슈 발생 시, 문서를 복사하고 복사한 문서에 추가/변경된 내용을 작성합니다. 그 이후 업데이트 이슈 발생 시 이러한 과정을 반복합니다.
화면설계서 문서 히스토리 양식
그리고, 더 이상 문서의 업데이트 이슈가 없다면 기존 복사본을 모두 삭제하고 최종 문서만을 남기는 방식으로 문서를 관리하시면 진행과정에서 변경내역을 효율적으로 관리하실 수 있습니다.
3. 서비스 개요 양식
제 강의에서도 항상 언급하는 내용이지만, 기획자가 만드는 모든 문서에는 주제적 관점에 기인한 목적성이 있어야 합니다. 목적이 존재하지 않는 기획서는 마치 태어났기 때문에 사는 것과 다를 바 없는 것처럼 기획서를 왜 작성했고 무엇을 지향하고 있는지를 정의해줘야 기획서 본연의 존재감이 생기게 됩니다. 이를 위해서는 아래 그림에서 보는 것처럼 기획배경과 목적, 기획을 통해 얻고자 하는 기대효과, 기획에서 고려된 주요 기능요약, 기타 전달해야 할 이슈를 정의해줘야 합니다. 하지만 생각보다 많은 수의 기획자들이 기획 개요를 작성하지 않는 경향이 있습니다.
화면설계서 개요 양식
제가 기획 개요를 무엇보다도 중요하게 생각하는 이유는 기획서 전체를 훓터보지 않더라도 개요항목을 통해 기획서를 읽는 이에게 해당 기획의 방향성이 전달되기 때문입니다. 단순히 UI설계나 Flow만으로는 기획의 타당성이나 목적성을 충분히 전달되기가 어렵습니다. 기획의 방향성이 충분히 전달되지 않는다면 의사결정권자에 대한 설득이 쉽지 않을 겁니다. 또한 디자이너, 퍼블리셔, 개발자 등의 실무자들도 해당 기획을 구현하는데 있어 목적과 괴리감이 있는 결과물을 생산할 수도 있습니다. 때문에 개요항목을 통해 해당 기획의 목적과 방향성을 전달하는 것이 무엇보다도 중요합니다.
이것이 정의된 후 기획의 세부 과정과 그 과정의 진행일정을 개략적으로 정리하는 표를 추가하여 기획 스케줄을 공유할 수 있습니다. 물론 조직 내부에서 트렐로나 아사나와 같은 별도의 프로젝트 관리 툴을 사용한다면 생략하셔도 됩니다.
4. User flow 양식
그 다음으로 User flow 항목입니다. 아래 그림을 보면 각 단계로 구분된 표와 표 안에 논리 프로세스가 구성되어 있는 것을 확인할 수 있는데요. 이 문서를 통해 단위 서비스 별로 고객의 이용 흐름을 도식화함으로써 한 눈에 서비스의 시작과 종료까지의 전 과정을 파악할 수 있습니다. 서비스의 규모에 따라 통상 1개 이상의 User flow가 존재하는데, 만일 서비스를 도식화하는 과정이 생략된다면 세부 UI를 설계하는 과정에서 중요한 흐름이 누락될 수도 있습니다. 또한 개발 시 전제 구조를 파악하는데 어려움을 겪을 수도 있습니다.
User flow 양식
참고로 이 단계는 서비스의 전체적인 흐름을 정의하는 단계입니다. 때문에 상세한 흐름을 담기 보다는 개략적으로 "이런 식의 흐름이다." 정도를 전달해주면 되며, 서비스의 상세한 흐름은 아래의 Logic process를 통해 정의하게 됩니다.
5. Logic process 양식
앞선 User flow에서 단위 서비스의 단계 별 흐름을 개략적으로 정의했다면 Logic process는 단계 별로 상세한 흐름을 정의하는 문서입니다. 이를 통해 정보의 수집이나 사용, 상황 별 논리적 대처방안을 정리하게 됩니다. 해당 문서는 개발 시 참고하는 내용이며, 개발 완료 후 서비스 검증을 위한 QA(Quality Assurance)과정에서도 사용됩니다.
만일 Logic process가 잘 정리되어 있지 않은 경우라면 개발자가 의아한 표정으로 "이거 이렇게 되는 게 맞아요?"하는 질문을 하는 경우도 있는데, 경험이 부족한 개발자는 잘못 설계된 Logic process 그대로 개발하는 경우도 있으므로 보다 꼼꼼한 작성을 요하는 문서입니다. 참고로 Process 개념을 더 알고 싶으신 분은 링크를 통해 확인해보세요.
Logic process 양식
6. 메뉴 그룹 구분 양식
말 그대로 하나의 기획 문서에서 메뉴 별 그룹을 구분 지어주는 문서입니다. 다른 장표와 달리 중요한 목적이 있는 문서는 아니며, 문서 열람 시 다음 메뉴의 기획으로 넘어간다는 의미를 전달해주기 위해 필요에 따라 기획서 중간 중간에 추가해주시면 됩니다. 단, 메뉴 그룹 타이틀 명은 다음에 설명할 UI 설계 양식 상단에 위치한 Group Title에 기록되어, 해당 장표가 속한 위치를 확인할 수 있습니다.
메뉴 그룹 타이틀 양식
7. UI 설계 양식
UI 설계 양식은 기획자가 구현하고자 하는 서비스의 화면을 설계하고 이를 어떻게 만들어야 하는지 설명하는 문서로 통상 기획자가 가장 많은 시간을 투자허비하게 되는 영역입니다. 아래 그림을 기준으로 좌측 텅 빈 공간에 웹/모바일 페이지의 인터페이스 설계하고 디자인/퍼블리싱/개발요소에 ①②③④와 같은 표기를 한 후, 우측 Description 영역을 통해 해당 위치의 전달사항을 작성합니다.
UI 설계 양식
참고로 UI를 설계할 때, 마치 디자인을 하는 것처럼 다양한 색상을 사용하거나 그림, 디테일한 구조를 그리는 것은 디자인의 Creation을 방해하는 원인이 되기도 합니다. 때문에 UI를 설계할 때는 가급적 선과 면 그리고 텍스트만으로 이루어진 간결한 Wireframe 구조로 설계해야 합니다.
지금까지 화면설계서 양식에 대한 사용방법을 간단히 정리해봤는데요. SI나 에이전시에서 사용하는 화면설계서 양식의 경우 UI 설계 페이지 별로 Screen ID를표 형태로 작성, 화면의 위치 또는 해당 화면과 관련된 Screen ID를 표기하여 문서의 열람구조를 정리하기도 합니다. 하지만 파워포인트의 경우 워드와 달리 자동으로 업데이트되는 목차 기능이 존재하지 않습니다. 그래서 페이지나 기능이 추가될 때마다 매번 작성하는 번거로움이 있어 이번에 공유하는 양식에는 수록하지 않았습니다.
필요하신 분들이 있다면 언제든 마음껏 사용하시기 바라며, 본 양식과 관련해서 궁금하신 점이 있다면 아래 댓글을 통해 문의주시기 바랍니다. 아, 본 양식은 몇 개의 템플릿을 슬라이드 마스터로 만들었습니다. 장표 추가 시 마우스 우 클릭 후 팝업 메뉴에서 레이아웃 메뉴를 선택하시면 공통된 몇 개의 템플릿을 확인하실 수 있습니다. 참고하세요!!
야메군. Web와 Mobile, Digital 카테고리 SME(Subject Matter Expert). 웹기획 18년차로 네이버 웹기획자 커뮤니티 "웹(WWW)를 만드는 사람들"에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 민간 IT 원천기술 연구소 "Valhalla Lab"에서 Pattern recognition과 Machine learning, Natural Language Processing 기술의 상업적 이용방법에 대해 연구. 현재 반려동물 스타트업에서 서비스기획 총괄로 재직중. 2016년 7월 7일, 웹/모바일 기획자의 업무능력 향상으로 위한 Guide Book "처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)" 출간.
