서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

기획이라고 다 같은 기획이 아니다

@이미준 서비스기획자_도그냥 re-make by @DeepwideStudio

하나의 서비스를 만들어나가기 위한 '기획'도 이렇게 각양 각색 다르다. '기획'이라고 묶어버리는 일이 얼마나 모호하고 위협적인 일인지 알아야 한다. 어떤 단계의 기획을 하고 있고, 뭘 해야하는지 이해하는 것이 중요하겠다. '서비스 기획자에 포커싱해서, 기획 과정과 필요한 산출물들에 대해 알아보도록 하겠다.

Before we Start, 

그 흔한 애자일 업무에 대한 환상에서 빠져나와, 워터폴 방식부터 제대로 숙지해야 한다는 것을 깨달았다. 워터폴 방법론은 각 단계가 명확히 구분되어 있고, 산출물 문서가 명확해 관리가 용이하다는 장점이 있다. 다만, 앞 단계에서 잘못된 기획이나 설계가 이뤄졌을 때, 되돌리는 것에 오랜 시간이 걸린다. 워터폴 방법론의 흐름과 각 단계에서 필요한 Task와 기획 산출물을 보자.

 

Waterfall Development Model 

워터폴 개발 기획 과정과 산출물/ @이미준 서비스기획자_도그냥 re-make by @DeepwideStudio

디자인 단계의 업무

1) 드래프트

2) 기본 시안과 Variation

3) 프로토타이핑

4) 스타일가이드 작성

 

개발자라고 다 같은 개발자가 아니다!

*개발자라고 다 같은 개발자가 아니다!*

-SW 형상 관리 빌드 담당자
-TA(Techninal Architecture)
-DBA(Database Administrator)
-시스템 프로그래머
-보안 프로그래머
-웹 프로그래머
-앱 프로그래머
-임베디드 프로그래머

Agile Development Model 

애자일 개발 기획 과정과 산출물/ @이미준 서비스기획자_도그냥 re-make by @DeepwideStudio

여기서 살펴볼 중요 산출물 키워드들만 꼽아보자면 다음과 같다. 

 

서비스 정책서
요구사항 정의서
IA
UI 기획 산출물
SB(StoryBoard)

__________________

User Story
Backlog

---

서비스 정책서란? 

서비스의 용어 및 기본 운영 정책을 정의한 프로젝트 산출물을 의미한다. '정책 정의'를 위해서는 서비스의 비즈니스 구조와 운영 프로세스에 대한 정의가 먼저 이루어져야 한다. 왜냐하면, 정책 설정은 회사의 서비스 방향과 전략을 반영하기 때문이다. 서비스 정책은 이후 화면 UI와 IT설계의 기본 구조를 결정하게 되지만, 정책 마련 시에는, '비즈니스' 중심으로 고려하며 화면 UI에 대해 생각하지 않는다. 

---

(사전)요구사항 정의서

개념

-서비스 전략을 토대로, 기술적으로 필요한 부분을 정리 & 개발에 협업 요청을 하기 위한 문서다.

-보통 엑셀 형태로 정리를 많이 하는데, 모든 정책을 세분화해, 기술로 구현하기 위한 모든 범위의 개발 항목 단위로 작성한다. 

-'요구사항 정의서'에서 '요구'란 '개발 요건'을 의미한다. 개발자들이 판단하기 쉬운 형태로 개발 내용이 정리되어 있다. 

-요구사항 정의서는 개발단과의 첫 번째 커뮤니케이션 도구다. 이 문서를 보고, 개발 단의 PL이 가능한 범위와 불가능한 범위를 판별해내고, 개발 인력을 계획하거나 하는 선행 작업을 진행한다. 

 

 

목적

• 프로젝트 전체 규모를 파악
• 구현 가능 여부에 대한 논의
• 커뮤니케이션 비용 절약
• 프로젝트 일정 계획 수립

 

인터넷에 '웹 기획 요구사항정의서'라고 검색하니 굉장히 다양한 양식과 예시들이 등장하는 것을 볼 수 있었다.

이해를 돕는 좋은 글을 발견했다. 

요구사항 명세서 (Requirements Specification)

•주요 작성 항목

1) 구분: Front/ Admin/ 기타
2) 신규 여부: 신규/기존수정
3) 요구사항번호 : 모듈명 + 숫자 (ex. Order001)
   -> 화면설계서를 만들 때, 요구 사항이 어떻게 반영되었는지 표시할 수 있음
4) 요구사항명
5) 요구 사항 상세 설명, 분석 
6) 비고: 다른 요구사항과 연결여부 등
7) 개발 수용여부: Y/N 보류
8) 완료여부: Y/N

 

한 번에 완성할 수 없다는 것을 인지하고, 개발팀과 계속 상호피드백을 주고받으며 완성도를 높여가야 한다. 이걸 만들 수 있는 것인지 아닌지 개발팀과 최초의 커뮤니케이션을 하는 것이고, 프로젝트가 진행되면서는 최초 현업의 요구 사항이 누락되지 않고 화면 설계에 들어갈 수 있도록 체크하는 역할을 한다.

---

IA(Information Architecture)

1) 사용자별 플로우차트(마인드맵/트리) / 화면흐름도/ Screen Flowchart

 

개념:

고객의 Task 동선별 화면 구조 정의로, '동선설계구조'라고 할 수 있다. 

(※유저저니맵은 화면 없이도 그릴 수 있지만, 이 마인드맵/트리는 철저하게 화면과 기능 단위로 작성된다.)

 

참고할 만한 글을 첨부한다.

화면흐름도 (Screen Flow chart)와 IA(Information Architecture)

 

목표:

한 화면 내 통합할 수 있는 기능들을 하나의 화면 내에서 통합하고, 우리가 대체 몇 개의 화면을 만들지에 대해 정한다.

플로우차트

 

 

2) 엑셀 형태의 IA 문서 작성

 

-화면 간의 상하관계를 정의하고, 고객 동선을 관리한다. ★ ★ ★

-과거 PC 위주의 페이지 단위 사이트와 달리, 모바일 서비스가 많아지면서, 한 페이지가 더 많은 역할을 하게 되었다. 그러면서 IA문서가 이제는, 개발 페이지 목록 확인으로서의 역할이 더 강해졌다. (IA를 작성해서 화면설계를 한다기 보다, 대체로 이런 페이지들이 있겠다 정도를 파악하기 위해 IA를 만든다.)

IA문서 주요 작성 항목

•화면의 Depth: 트리 구조 내 구조 깊이
•페이지명 또는 화면 코드 cf(화면코드는 규칙으로 정의_ ex. Order001B
•페이지 설명
•담당자 구분: 디자인/개발/어드민
•개발 완료 여부 Y/N

 

출처: https://philosophiren.com/292

 

웹기획은 정보구조 설계가 절반이다, https://philosophiren.com/292?category=530896.

웹기획은 정보구조(I.A. Information Architecture) 설계가 절반이다.

---

UI기획 관련 산출물

* 와이어프레임: UI 중심의 화면 레이아웃 (내용이 중요한 게 아니라, 위치/구성-> UI 설계 작업을 위해 각 UI 영역의 위치에 대해 콘텐츠 없이 아웃라인만 네모박스 형태로 정의_모바일로 넘어오면서 UI 표준화 돼서 목업 툴들 활용해도 됨)

 

* 목업(Mockup): 실물과 흡사한 정적인 형태의 모형

 

* 프로토타입(Prototype): 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형 -> 디자인 진행 후 진행

 

* 화면설계서 (보통 Storyboard와 혼용해서 사용하는 듯 싶다)

: 정책, 프로세스, 와이어프레임, 디스크립션(기능명세서) 등이 모두 포함된 설계 문서

 

기획 작업의 총집합!

화면 설계서의 구성 요소

• 수정 이력 관리 (오픈할때까지 계속 수정되면서 버전 업이 됨)
• 기획의도/KPI(기획 의도대로 전후 파악할 수 있도록 KPI 설정 필요)_비즈니스 관점
• 프로세스 플로우차트 (IA에서 봤던 흐름과 또 다름. 화면 단위가 아니라, 개발 단위 로직임=> 디자이너, 개발자, 기획자 협업 문서) 화면 로직에 관련된 것(화면 개수는 2개지만, 그 화면 이면의 로직은 몇 단계 더 있을 수 있음)
• 수정 및 신규 화면 목록(IA) – 개발 범위 화면 목록 (IA)->프로젝트 에 포함되어 있는 개발 범위를 페이지 단위 목록, 트리구조로 표시. 화면 개수에 관련된 것
• UI
• 와이어프레임/ 목업 인터랙션(케이스별로 별도 도출. Ex. 미성년이 들어왔을 때/ 성인이 들어왔을 떄)
• 디스크립션 –노출 로직, 디자인, 솔루션 사용 등 설명

 

다음 글을 참고해보면 좋을 것 같다.

화면설계서 (Wireframe)와 기능명세서 (Functional Specification)

.

.

.

.

DEEP WIDE STUDIO

스피노자는 말했습니다. "나는 깊게 파기 위해 넓게 파기 시작했다."

저는 '철학'을 전공하며 인간의 근본에 대해 탐구했고, 

인간의 일상을 기술적으로 혁신하는  'IT 업계'에 관심을 갖게 되었습니다.

깊어지기 위해, 천천히 넓은 물로 나아가는 중입니다. 

인스타그램으로 더 가까이 소통해요!

Instagram @skyblueyekk