기획 산출물 #3 FlowChart
A to Z를 한눈에 볼 수 있게
어떻게 하면 전체 흐름을 쉽게 이해할 수 있을까?
기능 정의서와 화면 설계서가 하나하나의 기능, 화면들을 세부적으로 정리한 내용이라면 전체적인 큰 그림을 그려 넣은 무언가도 있어야 하지 않을까? 전체를 보아야 각각의 세부사항들이 존재해야 하는 이유와 어떤 사용자 경험을 만들어내게 되는지를 이해할 수 있을 테니 말이다. 전체적인 큰 그림을 그려보고자 한다면 오늘 소개하는 내용이 딱이다. 사실은 제일 처음에 시작해야 하는 과정이기도 한 FlowChart에 대한 내용이다.
이번 글은 기능이나 프로젝트의 큰 그림을 그리는 과정인 FlowChart에 대해 정리해 보았다.
글의 순서는 아래와 같다.
1. FlowChart는 무엇이며, 왜 작성하는 걸까?
2. FlowChart, 어떻게 작성하는 걸까?
FlowChart는 무엇인가요?
FlowChart는 한글로 번역하면 "순서도"라고 볼 수 있다. 이름에서 알 수 있듯 기능, 서비스 또는 프로젝트의 처음부터 끝까지를 한 번에 볼 수 있게 나타낸 문서다. 간단한 도형(상자)과 선 또는 화살표를 이용해서 어떤 문제에 대한 솔루션을 그려내는 작업이다. 전체적인 기능의 흐름, 작업 순서를 파악할 수 있기에 반드시 작성해야 할 문서 중 하나이다.
FlowChart는 왜 작성하는 거예요?
아무리 멋들어지게 말을 하거나, 열심히 그림을 그려도 일시적으로 "아~" 하면서 이해할 뿐이다. 모든 요소들을 기억해낼 수도 없을뿐더러 기획자가 의도한 방향으로 기능이나 서비스를 구축하려면 큰 그림을 보여줄 수 있어야 하기 때문이다. 그리고 그렇게 큰 그림을 그림에 있어서 서비스의 전체 흐름을 시각화하는 용도로 제작하는 것이 FlowChart다. 기획자가 구상한 제품의 Flow를 그려넣음으로써 이를 구현해내어야 하는 디자이너, 개발자에게 이해하기 쉽도록 전달하는 것이자, 내부 구성원에게 서비스를 공유하고 이해를 돕기 위해서도 필요하고, 기획자 스스로에게도 서비스의 구성을 정리하기 위해 필요하다.
어떻게 작성하는 걸까요?
사실 FlowChart 그리는 법은 매우 간단하며, 이를 도와주는 도구들도 많다. 보통 텍스트가 기재된 네모상자나 마름모(또는 다이아몬드 형태), 선(또는 화살표)으로 표현한다. 네모 상자는 일반적인 처리 단계, 또는 유저의 상태를 의미한다. 반면 마름모 상자는 유저가 의사결정을 내려야 하는 경우에 작성한다. 각각의 도형 안에는 각각의 상황을 텍스트로 기재한다. 선은 네모 상자에서 출발하는 경우에는 선(또는 화살표)만 그려 넣고, 마름모 상자에서 출발하는 경우는 선(또는 화살표)에 "Yes or No"와 같이 유저가 결정을 내려야 하는 요인들을 기재한다.
< FlowChart 예시 이미지>나는 FlowChart에 몇 가지 요소들을 추가하곤 하는데, 이러한 경우 반드시 해당 내용이 어떠한 것인지 기재를 해주어야 한다. 개인적인 생각으로 FlowChart를 그릴 때는 유저의 입장에서 겪을 수 있는 상황들을 가정해서 그려 넣는 것이 좋다고 생각한다. 실제 서비스를 이용하게 되는 것도 유저이고, 유저 입장에서의 순간순간들을 고민해야 어떤 기능, 어떤 화면이 필요한지, 각 의사결정 과정들에서 있어서 어디에서 어디로 가야 하는지를 파악하기 용이하기 때문이다. 그렇다 보니 위의 예시처럼 기존 FlowChart와 동일하게 유저가 도달하는 일반적인 단계에 대해서는 네모 상자로 표현하였지만, 유저가 의사결정을 내려야 하는 요인들을 3가지로 나누어 색깔별로 구분하였다. 아래는 FlowChart 작성 시 내가 주로 이용하는 2가지 방법이다.
1. 직접 그리기 : 직접 그리는 방식은 스케치나, XD와 같은 이미지 작업 툴을 이용해서 직접 도형을 그리고, 텍스트를 기재하고, 선을 그려서 작성하는 방법이다. 자유도가 높아 사용자가 원하는 대로 작업하기 좋다.
2. Draw.io(https://www.draw.io/) : 구글 드라이브에 있는 기능으로 왼쪽에 게시한 링크 외 드라이브 내에서는 우측 버튼 클릭 -> 더보기 -> diagrams.net으로 접속하면 된다. 구글 계정이 있다면 무료로 사용할 수 있다는 장점이 있다. 템플릿을 활용할 수도 있으며, 직접 그릴 때도 클릭 또는 드래그 앤 드롭으로 수월하게 그릴 수 있다. 완성한 플로우 차트는 PNG, JPEG, PDF 등 다양한 형식으로 내보내기를 할 수 있다.
정리
FlowChart를 완성했다면, 별도의 리뷰 시간을 가져 이를 구성원들 간 공유하거나 기획안의 제일 앞에 배치하여 전체적인 흐름을 공유할 수 있도록 하는 것이 좋다. 오늘 역시 철저히 주관적으로 그리고 개인적인 경험을 토대로 작성한 글이다. 내가 경험한 것들을 토대로 정리한 글이기 때문에 다른 의견이 얼마든지 있을 수 있고, 더 좋은 의견들도 있을 수 있다.
1. FlowChart는 서비스나 프로젝트, 제품의 전체적인 큰 그림이다.
2. FlowChart를 그려내는 방식은 간단하다. 몇 가지 도형과 선 또는 화살표, 텍스트로 충분하다.
3. FlowChart를 그릴 때는 유저 입장에서 겪을 수 있는 의사결정 순간들을 고민해서 그려 넣는 것이 좋다.
