2021. 2. 2.

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

Deep Wide Studio Deep Wide Studio 구독하기

Deep Wide School/💘Online Product Design

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

Deep Wide Studio 2020. 7. 29. 21:23

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

https://deep-wide-studio.tistory.com/96 1/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

Deep Wide Studio 구독하기

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

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

Before we Start
https://deep-wide-studio.tistory.com/96 2/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

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

랜 시간이 걸린다 워터폴 방법론의 흐름과 각 단계에서 필요한 Task와 기획 산출물을 보자

 

Waterfall Development Model

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

디자인 단계의 업무
1) 드래프트
2) 기본 시안과 Variation
3) 프로토타이핑
4) 스타일가이드 작성
 
개발자라고 다 같은 개발자가 아니다
https://deep-wide-studio.tistory.com/96 3/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

*개발자라고 다 같은 개발자가 아니다 * Deep Wide Studio 구독하기

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

Agile Development Model

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

여기서 살펴볼 중요 산출물 키워드들만 꼽아보자면 다음과 같다
https://deep-wide-studio.tistory.com/96 4/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

 
Deep Wide Studio 구독하기

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

User Story
Backlog

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

사전 요구사항 정의서
개념
https://deep-wide-studio.tistory.com/96 5/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

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

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

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

요구사항 정의서는 개발단과의 첫 번째 커뮤니케이션 도구다 이 문서를 보고 개발 단의 PL이 가능한 범위와 불가능한 범위를 판별해내고 개
발 인력을 계획하거나 하는 선행 작업을 진행한다
 
 
목적
프로젝트 전체 규모를 파악
구현 가능 여부에 대한 논의
커뮤니케이션 비용 절약
프로젝트 일정 계획 수립

 
인터넷에 웹 기획 요구사항정의서 라고 검색하니 굉장히 다양한 양식과 예시들이 등장하는 것을 볼 수 있었다
이해를 돕는 좋은 글을 발견했다
 
요구사항 명세서 (Requirements Specification)
요구사항 명세서는 요구사항을 분석하여 명확하고 완전하게 기록하는 것을 말합니다. 소프트웨어 시
스템이 수행해야 할 모든 기능과 구현상의 제약 조건에 대해 개발자와 관련자(클라이언트, �

medium.com

https://deep-wide-studio.tistory.com/96 6/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

Deep Wide Studio 구독하기

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

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

IA Information Architecture
1) 사용자별 플로우차트 마인드맵 트리 / 화면흐름도 Screen Flowchart
 
개념
https://deep-wide-studio.tistory.com/96 7/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

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

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

 
참고할 만한 글을 첨부한다
 
화면흐름도 (Screen Flow chart)와 IA(Informat…
IA는 메뉴를 분류/그룹화하여 Depth 구조로 설계한 것이고, 화면흐름도는 화면, 기능 단위로 사용 동
선을 설계하는 것입니다.

medium.com

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

https://deep-wide-studio.tistory.com/96 8/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

Deep Wide Studio 구독하기

플로우차트
 
 
2) 엑셀 형태의 IA 문서 작성
 
-화면 간의 상하관계를 정의하고, 고객 동선을 관리한다. ★ ★ ★
-과거 PC 위주의 페이지 단위 사이트와 달리, 모바일 서비스가 많아지면서, 한 페이지가 더 많은 역할을 하게 되었다. 그러면서 IA문서가 이제
는 개발 페이지 목록 확인으로서의 역할이 더 강해졌다. IA를 작성해서 화면설계를 한다기 보다, 대체로 이런 페이지들이 있겠다 정도를 파악
하기 위해 IA를 만든다.)
IA문서 주요 작성 항목
•화면의 Depth 트리 구조 내 구조 깊이
•페이지명 또는 화면 코드 cf(화면코드는 규칙으로 정의_ ex Order001B
•페이지 설명
https://deep-wide-studio.tistory.com/96 9/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

•담당자 구분: 디자인/개발/어드민

•개발 완료 여부 Y N Deep Wide Studio 구독하기

출처 https philosophiren com 292

https://deep-wide-studio.tistory.com/96 10/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

 
웹기획은 정보구조 설계가 절반이다 https philosophiren com 292 category=530896. Deep Wide Studio 구독하기

 
웹기획은 정보구조(I.A. Information Architectu…
웹 기획자라는 직업을 가지고 있는 동안 절대로 손에서 놓지 못할 문서가 두 가지 있다. 바로 - 정보 구
조 설계 (Information Architecture = I.A.) 와 - 화면 설계 (스토리보드 = Story Board = S/B = …

philosophiren.com

UI기획 관련 산출물
* 와이어프레임: UI 중심의 화면 레이아웃 (내용이 중요한 게 아니라, 위치/구성-> UI 설계 작업을 위해 각 UI 영역의 위치에 대해 콘텐츠 없이
아웃라인만 네모박스 형태로 정의_모바일로 넘어오면서 UI 표준화 돼서 목업 툴들 활용해도 됨)
 
* 목업 Mockup 실물과 흡사한 정적인 형태의 모형
 
* 프로토타입 Prototype 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형 -> 디자인 진행 후 진행
 
* 화면설계서 보통 Storyboard와 혼용해서 사용하는 듯 싶다
: 정책 프로세스 와이어프레임 디스크립션 기능명세서 등이 모두 포함된 설계 문서
 
기획 작업의 총집합!
https://deep-wide-studio.tistory.com/96 11/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

화면 설계서의 구성 요소 Deep Wide Studio 구독하기

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

 
다음 글을 참고해보면 좋을 것 같다
 
화면설계서 (Wireframe)와 기능명세서 (Functio…
화면설계서는 선(Wire)으로 이루어진 화면 구조(Frame)를 표현하는 문서입니다. 화면을 도식화하기
때문에 시각적인 이해도가 아주 높습니다.

medium.com

https://deep-wide-studio.tistory.com/96 12/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

 
Deep Wide Studio 구독하기

1 구독하기

' Deep Wide School > 💘Online Product Design' 카테고리의 다른 글

SOPT 기획팀 기특한 티타임 IT 프로덕트를 위한 디자인&기획 토크 메모  (0) 2020.11.07
웹개발 전반 개념 간단 정리 프론트엔드 백엔드 프레임워크  (0) 2020.10.14
서비스기획 전체 플로우와 기획산출물 뇌에 박제하기  (0) 2020.07.29
UX와 비즈니스 그리고 브랜딩 브랜딩   (0) 2020.07.26
Design Thinking Lean Startup Agile Design Sprint , 너희 대체 무슨 사이니 #2  (0) 2020.07.25
공부메모 UX와 비즈니스2_ 왜 사람들은 최초의 iPod와 iPhone에 열광했을까   (0) 2020.07.25

태그 #기능명세서, #서비스기획, #서비스기획스쿨, #애자일, #워터폴, #웹 프로덕트, #웹기획, #웹서비스 기획, #프로덕트 매니저,
#화면설계서

' Deep Wide School 💘Online Product Design Related Articles

https://deep-wide-studio.tistory.com/96 13/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

Deep Wide Studio 구독하기

NO IMAGE NO IMAGE NO IMAGE NO IMAGE

SOPT 기획팀 기특한 티타임 웹개발 전반 개념 간단 정리 프 UX와 비즈니스 그리고 브랜 Design Thinking Lean
IT 프로덕트를 위한 디자인&… 론트엔드 백엔드 프레임워크 딩 브랜딩 Startup Agile Design…

이름 암호 Secret

여러분의 소중한 댓글을 입력해주세요

댓글달기

1 ··· 109 110 111 112 113 114 115 116 117 ··· 202

https://deep-wide-studio.tistory.com/96 14/15
2021. 2. 2. 서비스기획 전체 플로우와 기획산출물 뇌에 박제하기

DESIGN BY TISTORY 관리자 Deep Wide Studio 구독하기

https://deep-wide-studio.tistory.com/96 15/15