[제로베이스 PM 스쿨 21기] 6주차 학습일지 3: 서비스 기획서 작성하기 3

서비스 기획서 작성하기

IA (Information Architecture)

• AS-IS의 문제점들을 정리
• 정보구조가 비체계적으로 구성된 서비스는 사용자가 헷갈린다(논리적이고 체계적 구조를 가져야 하는 이유).
• 개선 방향을 포함한 목적, 방향 설정
  • 서비스가 복잡할수록, 목적과 방향을 명확하게 설정하는 것이 필요하다.
• 벤치마킹을 통해 타사의 정보구조 참고
  • 동종업계, 리더그룹이 어떤 정보구조를 가져가고 있는가를 파악하는 것이 중요하다.
• 서비스의 전략과 방향을 반영한 구조
• 서비스 용어 및 운영 프로세스 구조 정의
  • 큰 프로젝트는 다양한 팀이 모듈별로 업무를 담당하여 같은 기능을 다른 용어로 사용하기도 한다.
• 이것이 사용자를 혼란스럽게 할 수 있음
  • 서비스 용어 정리한 용어집 제공 등의 방식으로 수행하지만 용어 통일을 하는 것을 권장한다.
• AS-IS의 IA 중 중복 및 불필요한 정보 정리
• TOBE의 개선 방향을 포함한 IA 설계

IA 예시

 

 

카카오 홈페이지 예시

카카오 홈페이지 IA 예시

 

• 그룹핑을 하기 때문에 one-depth가 기준이다.
• two-depth까지 화면 아이디를 내리지 않는다.
• depth 사이에 여백을 두어 위치 변경 시에 대비한다.
• 다크모드, 언어 변경, 관련 사이트 연동 등은 IA가 아니니 주의해야 한다.

카카오 예시

 

 

 

User Process 정의하기

• 서비스를 이용하는 사용자의 프로세스
  예시) 사이트에 회원가입을 수행하는 경우
  회원가입 클릭 → 본인 인증, 개인정보 작성 → 가입 완료의 과정
• IA를 기준으로 행동하는 사용자의 흐름
• 데이터의 이동 흐름과 저장 / 호출 프로세스
• 사용자의 특정 작업을 위한 경로
• 사용자 시나리오보다 구체적으로 정의
• UI(화면), 행동, 판단으로 표현

User Flow 구조

 

 

User Flow 예시

User Process를 정의할 때 장점

• 페이지의 주요 프로세스를 이해
• 인터페이스의 효율적인 설계
• 개선이 필요한 영역 정의
• 전체적인 흐름 이해 가능 → 개선이 요구되는 부분에 대한 보완 가능
• 서비스의 주요 흐름을 빠르게 파악
  • 상대적으로 긴 스토리보드/와이어프레임을 확인하지 않아도 서비스의 주요 흐름을 파악 가능
• 각 파트와의 커뮤니케이션 용이

User Flow Chart 예시

 

 

User Task 예시

 

• Flow Chart 또는 User Task로 도식화하기도 한다.

 

Flow Chart 작성하기

Flow Chart란?

전체적인 서비스의 흐름에 대한 이해 후 이에 맞게 작성
User Process를 도식화해서 보여주는 것이다.

 

기능 흐름(Logic Flow) 예시

 

 

프로세스별로 나눈 Flow Chart 예시

 

• 바뀔 수 있기 때문에 직접 해보는 것이 중요하다.

Wire Frame 작성하기

 

• 서비스 기획서 내에서 사용자들에 제공되는 화면의 형태로 작성
• UI를 어떻게 표현할지, 어떤 내용으로 구성할지 등을 그려놓은 화면 프로토타입
• 웹ㆍ앱 화면의 페이지 구조 / 레이아웃 / 정보 구조 / 유저 플로우 / 스크롤, 스와이프 등에 대한 정의

 

WireFrame 예시

WireFrame: 화면설계서로 분석과 벤치마킹을 통해 서비스의 목표와 방향성이 녹아져 있는 것

Sotry Board와 와이어프레임 예시

 

 

와이어프레임에는 4가지 컨셉이 녹아져 있어야 한다.

• Why: 왜 해당 서비스를 제공해야하는지가 명확해야 한다.
• Goal: 어떤 목표를 설정하는가에 따라 WireFrame이 달라질 수 있다(UI가 달라짐).
• What: 무엇을 통해 사용자와 커뮤니케이션을 할 것인가를 생각해야 한다.
• Concept:  목표를 정했으면 목표에 맞는 콘셉트를 잘 설정해야 한다.

 

와이어프레임이란 비즈니스를 하는데 있어서 웹을 도구로 하는 기획

• 웹 사용자에 대한 이해
  서비스의 주 타겟층의 라이프 스타일 등에 대한 파악
• 웹의 구조로 표현
  PC / 모바일 등 서비스를 제공하는 매체에 맞도록 구조화 필요 (ex. 반응형)
• 웹의 언어로 표현

웹/앱의 구조를 설계하고 화면 UI 설계

• 콘텐츠의 적절한 배치
• 서비스 화면 구조
• 설득 문서

서비스 기획자의 역할

전체적인 요건에 대한 분석, 방향과 목표 설정을 통해 일정 계획을 수립하고 화면을 설계, 커뮤니케이션, 팀별 의견 조율을 위한 설득, 최종 산출물 정리 등 프로젝트의 시작과 끝의 역할을 담당한다.

 

• 협업을 통한 WireFrame 완성하기
• 전체 요건에 대한 분석, 방향ㆍ목표 설정
• 일정 수립 후 화면 설계,
• 설계된 WireFrame을 바탕으로 커뮤니케이션 수행 및 팀 별 의견 조율을 위한 설득 수행
• 최종 산출물 정리

 

웹/앱 서비스 기획자

• 웹/앱에서의 서비스 기획자는 프로젝트의 요건 분석과 기술적인 검토가 반영된 서비스를 설계하고 이를 통해 서비스를 구축, 운영해 나가는 Role을 가진다.
• 국내 서비스 기획자는 Web Producer의 개념으로 프로젝트의 처음과 끝을 책임지며 다른 직군과의 커뮤니케이션이 가장 중요하다.

요건 분석

• • 서비스 설계
  • 테스트
  • 운영

서비스 기획자는 예외 케이스에 대해 많은 고민을 해야 한다. 또한 모든 채용 문서에 서비스 기획자는 반드시 커뮤니케이션에 대한 스킬을 요구받고 있다. 이번 강의에서는 이해 관계자 간 상호 소통을 위해 필요한 문서들을 예시를 통해 상세히 공부할 수 있었다. 해당 문서들 모두 '소통'을 용이하게 하기 위한 도구들이기 때문에 작성을 할 때에 내가 보기에 편한 문서가 아니라 보는 사람이 편한 문서를 작성해야 한다는 것 또한 알 수 있었다.