by
May 13. 2024
6. 서비스 기획자를 위한 도식화 기초
플로우 차트
지식 공유를 위해 경험과 자료를 정리하며 작성한 글이다.
이번 글에선 아래 내용을 확인할 수 있다.
1. 플로우 차트의 개념
2. 종류
3. 작성 규칙
4. 툴
목차
플로우 차트? 도식화?
플로우 차트란?
작성 규칙
플로우 차트의 종류
관련 툴
실습: 회원가입 플로우 차트 그리기
이모저모
레퍼런스
플로우 차트? 도식화?
도식화란 사물의 구조, 개념, 관계를 그림이나 양식으로 표현한 걸 의미한다. 예를 들어 차트, 플로우 차트, 와이어 프레임을 말할 수 있다.
사실 대부분의 내용은 글만으로도 표현할 수 있다. (기획자라면 마땅히 할 수 있어야 한다.) 하지만 기획서를 보는 이해관계자들의 작문과 독해 수준이 모두 다르다. 여러 명이 힘을 합쳐 하나의 산출물이 나오기 위해선 동일한 수준의 이해가 필요하다. 그래서 우린 ‘시각 자료’를 활용한다. ‘백문이불여일견’을 생각하자.
플로우 차트란?
플로우 차트란 서비스를 사용하기 위한 ‘일련의 단계와 결정’을 미리 정의한 기호와 선을 사용해 시각적으로 표현한 자료를 의미한다. 순서도, 흐름도라고도 부르기도 한다. 서비스 기획자 내지 *PM의 주요 산출물을 검색하면 I.A, 스토리보드와 함께 빠지지 않고 나오는 개념이다.
*여기서 PM은 Product Manager를 의미한다.
이를 그리면서 경험한 장점을 크게 아래와 같다.
기획서를 보는 개발자나 이해관계자가 기획의 전체 구조를 빠르게 파악할 수 있다.
프로세스상 발생할 수 있는 문제나 누락된 프로세스를 사전에 파악할 수 있다.
사용자 경험을 미리 점검할 수 있다.
잘 그려진 플로우 차트는 서비스 로직의 흐름과 유사하다. 즉, 플로우 차트를 잘 그리면 개발자의 설계 초입을 도울 수 있다.
작성 규칙
도식이 가지는 개념은 사진과 같다. 하지만 개인의 성격과 조직 문화(관습)에 따라 생략하거나 대체하기도 한다.
플로우 차트 종류 ⓒ 위키피디아플로우 차트의 종류
일반적으로 플로우 차트의 종류까지 세세하게 구분해서 작성하지 않는다. 조직과 본인의 성격에 맞춰 작성하는 게 더 보편적이다. 그래도 종류를 알아두면 작성할 때 도식의 목적을 분명하게 보여줄 수 있으니, 개념 정도는 알아두는 걸 추천한다.
유저 플로우 차트
사용자 행동을 기준으로 흐름을 도식화하여 표현한 것을 의미한다. 단일 사용자의 행동을 표현하기도 하지만, 여러 명의 사용자가 서로 다른 태스크를 수행하는 것도 표현할 수 있다.
유저 플로우 차트 샘플 ⓒ 327roy태스크 플로우 차트
주요 태스크의 프로세스를 표현한다. 주로 복잡한 플로우를 설계하기 전 뼈대를 설계하기 위해 작성한다. 유저 플로우 차트가 사용자 여정에 초점을 맞춘다면, 태스크 플로우 차트는 단일 작업에 초점을 맞춘다.
태스크 플로우 차트 샘플 ⓒ 327roy시스템 플로우 차트
흐름에 따라 데이터를 어떻게 처리하는지 확인할 수 있는 플로우 차트다. 데이터의 입출력 흐름을 중심으로 작성하는 게 좋다. 가장 보편적이고 익숙할 것이다.
시스템 플로우 차트 샘플 ⓒ 연디자인어떤 플로우 차트든 글을 쓰는 것과 마찬가지로 목적과 맥락이 중요하다. 사용자 여정을 이해하기 위한 플로우를 그리고 싶은지, 시스템 설계를 돕기 위한 플로우를 그리고 싶은지 잘 생각하고 작성하자.
관련 툴
플로우 차트 등 도식화를 도와주는 다양한 툴이 존재한다. *화이트보드 툴에서 대부분 도식화를 지원하고 있으며, 플로우 차트, **UML을 그리는데 특화된 툴도 존재한다.
*화이트보드 툴: 피그잼, 미로, 윔지컬, 보드믹스, 드로우 등 화이트보드를 웹 기반으로 구현한 툴을 의미한다.
**UML: Unified Modeling Language(통합 모델링 언어)를 의미하며 시스템과 소프트웨어를 시각화하는 언어(방법)를 의미한다.
피그잼
피그잼 샘플 ⓒ 327roy피그마에서 만든 화이드보드 툴로써 플로우 차트를 만들거나 브레인스토밍 등 갖가지 템플릿을 활용할 수 있다. 필자의 경우 회사 내/외부로 피그마를 즐겨 쓰기 때문에, 피그마와 호환되는 것을 고려해 플로우 차트를 만들어야 할 때 피그잼을 주로 사용한다.
https://www.figma.com/figjam/
미로
미로 샘플 ⓒ 327roy팬데믹 때 몇 번 사용했던 화이트보드 툴이다. 제공하는 기능은 피그잼과 거의 동일하다. 마우스 휠 기능이 기본적으로 축소/확대로 지정돼 있어서 나한테는 불편한 편.
https://miro.com/ko
drawio
drawio 샘 ⓒ 327roy다이어그램을 그리는데 특화된 툴이다. 무료로 사용할 수 있고 플로우 차트를 포함해 다양한 UML 다이어그램을 그리는데 특화돼 있다.
https://www.drawio.com/
실습: 회원가입 플로우 차트 그리기
아래 조건을 참고해서 플로우 차트를 그려보자. 아래 조건을 보면 머릿속에 떠오르는 화면(프로세스)이 있을 것이다. 머릿속에서 이 화면을 먼저 정리하고, 이를 바탕으로 플로우 차트를 그리는 연습이다.
[조건]
회원가입 시 필수로 입력받는 정보: 아이디, 비밀번호, 이메일, 휴대폰 번호, 주소, 개인정보 수집 및 이용 약관
중복 아이디가 없어야 한다.
휴대폰 번호로 본인 인증을 완료해야 한다.
14세 이상만 회원가입할 수 있다.
1인 1계정을 원칙으로 한다.
