by
Dec 06. 2019
서비스 기획서 가이드 3편
성공한 기획의 과거 동력을 끌고 와서 다시 성공의 관성으로 들어가는 방법
서비스 기획서 가이드 2편이 매우 뜨거운 반응을 보여서 가이드 공유하는데 책임감과 부담감이 함께 오네요. 그래도 마음은 즐겁습니다. ^^
남은 주제는 아래와 같습니다.
벤치마킹
IA 및 파일 명세
플로우 차트
사용자 시나리오
스토리보드 페이지별 Tip
그 외 체크해야 할 포인트
한 꼭지당 정리해야 할 자료가 많아서 꼼꼼히 보다 보니 주제 하나 소화도 어렵긴 하지만 최대한 3개 정도 꼭지는 소화해보려고 합니다. ^^
벤치마킹
사전적으로는 토목 분야에서 강물 등의 높낮이를 측정하기 위해 기준점인 벤치마크(benchmark)를 표시하는 행위이지만, 기획자에게는 현재 만들어져 있지 않는 산출물의 모습을 보여주고 싶을 때, 요구사항을 분석하거나, 기능 명세를 할 때 등 이미 만들어진 다른 서비스, 기능 등과 비교 분석하여 평가하고 그 장점을 배우고 인사이트를 얻는 단계를 말합니다.
무작정 벤치마킹을 하는 것은 아니고, 프로젝트의 목표와 기능에 따라서 어떤 정책을 정하고자 할 때나 최근의 동향을 바탕으로, 기준을 잡거나 인사이트를 공유할 때 활용합니다.
제가 교육분야에 있다 보니 벤치마크도 자연스럽게 교육부문을 많이 보긴 하지만, 가입-검색-상세보기-리스트-결제-MY페이지 등 공통적인 요소들은 전체적으로 해당 고민을 많이 한 포털이나 쇼핑몰사이트들을 참조하기도 합니다.
정책결정에 필요한 벤치마킹은 대체로 필요한 목록을 기준으로 나열하고 다른 서비스들과 비교합니다.
아래 벤치마킹은 영상 저작툴 예시입니다.
아예 처음 플랫폼을 만드는 경우는 서비스를 통째로 계정을 구입해서 기능을 모두 확인하기도 합니다. 아래 내용은 교육 플랫폼 신규 사이트 기획을 위해서 유데미(UDEMY) 사이트를 벤치 마크한 자료입니다.
전체 기능과 메뉴 트리 벤치마킹아래는 저희 회사 사이트 콘탠츠 메인 페이지 개편 시에 벤치마크를 했던 부분인데요. 3가지 기준으로 진행을 했었습니다
1) 약 30여 개 사이트를 벤치마킹하고, 메인 페이지를 기준으로 살펴본다.
2) 현재 메인에서 주로 사용되고 있는 기능들의 특징과 UI를 파악한다.
3) 다양한 서비스/판매 형태의 사이트 & 스토리가 있는 사이트로 구분하여 자사 서비스와 비교, 분석한다.
IA에 따른 기능이나 페이지 구성에 참고하기 위해 각각을 벤치마크 하기도 합니다.
서비스의 현재 위치와 지향점을 표현하는데도 유용합니다.
아래는 콘탠츠 구독모델 내 오리지널 제작의 필요성을 어필하기 위해 조시한 자료입니다.
구독 서비스의 포지션을 설정하기 위한 벤치마킹다시 한번 강조하지만 용도에 따라 본인이 기획하는 방향에 맞게 기준을 수립하고, 벤치마킹 후에는 반드시 인사이트를 끌어내야 합니다. 인사이트 없이 맹목적으로 따르거나 서비스들의 숨겨진 의도를 파악하지 못하면 벤치마킹은 시간낭비가 될 수 있기 때문에 매우 신중히 접근해야 합니다.
IA 및 파일 명세
IA (Information Architecture)는 정보구조설계라고 표현하는데요. 기획자라면 당연히 업무를 시작할 때 꼭 첨부해야 하는 요소입니다. 메뉴 트리, 마인드맵 등 다양한 형태로 IA 정의를 하는데요. 그럼에도 불구하고 MECE(Mutually Exclusive Collectively Exhaustive - 겹치지 않으면서 빠짐없이 나누기) 규칙은 준용하여야 합니다. MECE는 플로우차트를 그리거나 WBS 작성, 유저 경험 MAP 등 다양하게 활용됩니다. 제가 신규 입사자를 대상으로 오리엔테이션 할 때 가장 중요하게 얘기하는 개념이 MECE입니다.
전체 산출물의 범위를 확인하고, 전략 수립할 때도 빠뜨림 없이 모든 것이 정의되었는지 확인하는 기준 문서이기도 합니다.
화면 기준, 기능 기준, 경험 맵 기반 등 다양하게 자신들의 방식으로 만들기도 하는데요. 보통 IA 한 줄당 페이지 1개 정도가 됩니다. 프로토타이핑 툴처럼 입체적으로 확인하기 어려운 PPT의 특성상 IA와 이따 설명드릴 플로우차트가 정교하게 만들어지면 서비스에 대한 고객의 경험을 자연스럽게 연결해 상상할 수 있게 됩니다.
일반적인 IA 예제
일부 기능 개선 시에 활용하는 메뉴 트리 예제
전체 메뉴 IA 예제
사이트 맵형 IA 예제파일 명세는 기존에 운영하던 사이트나 앱 신규, 수정, 삭제 부분 또는 한 화면 내 링크가 많거나, 메뉴 트리 링크 등의 신규, 수정, 삭제를 개발자분들이 구분하기 좋도록 제공합니다.
아시죠? 필수는 아니지만 개발자들이 궁금해할 만한 요소는 최대한 TMI 스럽게 하고, 리뷰를 통해 조정하는 거 ^^
링크 파일 명세 예제
메뉴별 파일 명세 예제플로우차트
구슬이 서 말이라도 꿰어야 보배
IA에도 해당되지만 특히 플로우차트는 단순한 프로모션, 안내 페이지가 아닌 한
반드시 그려야 놓치는 부분이 없어집니다.
개발 진행 시 누락될 수 있는 부분을 최대한 고객의 경험 또는 기능이 구현되는 선에서 확인하는 부분입니다. 놓치기 쉬운 알럿이나 알림메일, 앱푸쉬 등에 대해 플로우차트를 통해 정리할 수 있습니다. 단일 페이지 또는 여러 페이지에 걸쳐 정책 또는 기능을 반영해야 하는 경우도 유용하게 확인 가능합니다. 페이지상에 뜬금없이 들어있는 페이지가 어떻게 꿰어지는지를 보여주는 매우 중요한 페이지입니다. 여러 페이지의 경우는 화면 ID를 기재해서 바로 찾아가기 좋도록 합니다. (시중의 파워포인트 목업을 설치하시면 훨씬 그리기가 쉬워집니다. ^^ 저의 경우 Power Mockup을 씁니다. )
파워 목업 사용 예제플로우차트를 그리다 보면, 방식적으로 더 편리하거나 단계를 줄이는 것도 가능하게 되고, 특히 업무 요청자나 클라이언트분들께 쉽게 설명도 가능하고, 기획, 개발 공수가 왜 많이 들어가는지를 명확히 보여줄 수 있는 장점도 있습니다.
사용자 경험 기반의 플로우차트 예제
브라우저 버전 제약 공지 플로우차트 예제보안상 브라우저가 낮은 버전 접속이 불가함을 안내하는데, 내일 당장 해달라는 요청을 왜 시간이 걸리는지 플로우차트로 명확히 정리해서 보여주어 일주일 시간을 확보받은 사례이기도 합니다.
모 대학의 동문 앱 회원가입 플로우차트 사례
모 사이트 로그인 시 플로우차트 사례 - 화면 ID까지 명기되어 있어 개발자분들로부터 칭찬받은 사례
파일 업로드 기능 구현 내에 간단한 alert 플로우차트 예제
달력 기능 구현 시 필요한 알럿 정의 플로우차트 예제 