서비스 기획서 작성하기 3: 기획자가 작성할 문서 알아보기

들어가며

이번 시간에는 기획자가 서비스를 기획할 때 작성하는 문서들을 알아보고 각각의 문서들을 어떻게 작성하는지 예시를 통해 살펴본다.

 

1. IA (Information Architecture)

서비스 전략과 방향을 반영한 구조로 서비스 용어 및 운영 프로세스 구조를 정의한다.

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

IA 예시

 

카카오 홈페이지 예시

카카오 홈페이 IA 예시

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

카카오 예

---

 

2. User Process

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

User Flow 구조

 

User Flow 예시

 

User Process를 정의할 때 장점

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

User Flow Chart 예시

 

User Task 예시

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

---

3. Flow Chart

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

 

기능 흐름(Logic Flow) 예시

 

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

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

---

4. Wire Frame

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

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

 

WireFrame 예시

Sotry Board와 와이어프레임 예시

 

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

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

 

 

Wire Frame이란 비즈니스를 하는데 있어서 웹을 도구로 하는 기획서이다.

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

---

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

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

---

서비스 기획자의 역할

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

 

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

 

웹/앱 서비스 기획자

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

요건 분석

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

 

서비스 기획자는 예외 케이스에 대해 많은 고민을 해야 한다.
모든 채용 문서에 서비스 기획자는 반드시 커뮤니케이션에 대한 내용을 요구받고 있다.

 

 

Summary
- IA는 ASIS의 문제점을 정리해 TOBE의 개선 방향을 포함은 정보 구조도이다.
   - 서비스 전략과 방향을 반영한 구조로 서비스 용어 및 운영 프로세스 구조를 정의한다.
- User Process는 서비스를 이용하는 사용자의 프로세스를 정의한 문서다.
   - 데이터의 이동 흐름과 저장, 호출 프로세스를 면밀히 확인할 수 있으며, UI, 해동, 판단으로 표현한다.
   - 전체적인 시나리오 흐름을 이해할 수 있어 개선이 요구되는 부분에 대한 보완이 가능하다.
- Flow Chart는 User process를 도식화해서 보여주는 문서다.
   - 전체적인 서비스의 흐름을 이해한 후 이에 맞게 작성하는 것이 중요하다.
- Wire Frame은 사용자들에게 제공되는 화면 형태로 제공하는 문서다.
   - UI를 어떻게 표현할지 어떤 내용으로 구성할지 등을 그려놓은 프로토타입이다.
- 서비스 기획자는 전체적인 요건에 대한 방향과 목표 설정을 진행하고 이에 맞는 일정을 계획해야 한다. 
- 커뮤니케이션을 통해 팀별 의견을 조율하고 설득하기 위해서 다음과 같은 산출물을 작성하고 정리한다.