User Flow Diagram 그리는 방법

플로우 다이어그램?

앞서서 Flow chart, Flow Diagram, Task Flow, User Flow의 개념에 대해서 알아보았다. 사실상 모두 같은 맥락의 단어라는 것을 이제는 이해했다. 통칭해서 Flow Diagram이라고 지칭하겠다. 이 포스팅에서는 보다 디테일하게 어떻게 플로우 다이어그램을 그리는 지에 대해서 다뤄보고자 한다. 

 

플로우 다이어그램의 개념에 대해서는 이전 포스팅에서 정리했기 때문에, 개념에 대한 설명은 생략하고 바로 다음의 유튜브 영상 내용을 참고하여 '구체적인 방법'에 대해 정리하겠다. 

 

How to Create a User Flow Diagram youtu.be/_kPuHPKpCP0

How to Create a User Flow Diagram

 

플로우 다이어그램 만드는 법

구성요소 

플로우다이어그램을 그리기 위해서는, 이 세가지 요소가 기본이 된다. 

 

플로우 다이어그램을 이루는 세 가지 요소/ 유튜브 How to Create a User Flow Diagram 화면 캡쳐

 

바로 네모, 다이아몬드, 화살표다. 

1) 네모 : Screen (ex. 홈 스크린, 로그인 스크린, 등등)
2) 다이아몬드 : Decision (ex. 로그인 버튼 클릭하기, 왼쪽으로 스와이프하기, 이미지 줌인하기 등)
3) 화살표 : 네모와 다이아몬드를 이어주는 화살표

이 세가지를 기반으로 유저 플로우 다이어그램을 만들게 된다. 

 

 

트위터 앱을 통해 이해하기

영상에서는 플로우다이어그램을 그리는 방법을 이해하기 위해 먼저, 트위터 앱을 보여주며 설명을 진행한다. 

 

트위터 화면/ 유튜브 How to Create a User Flow Diagram 화면 캡쳐

 

왼쪽의 이미지는, 트위터 앱을 켰을 때 보이는 트위터의 홈 스크린이다. 오른쪽 이미지는 왼쪽 이미지 상단의 "New Tweet"버튼을 눌렀을 때 이동하게 되는 화면이다. 이 화면에서는 글을 올릴지 말지 'Action'을 취해야 한다. 취소하고 밖으로 나가기 위해 오른쪽 이미지 상단의 X버튼을 누르거나, 작성한 글을 올리기 위해 하단의 Tweet 버튼을 눌러야 한다. 

 

1) 트위터에 들어가서
2) 새 트윗을 작성하고
3) 취소하거나 올리기로 결정하기

 

간단하게 이 세가지 요건에 대한 유저 플로우 다이어그램을 만들어보면 다음과 같다.

 

'트윗하기' 유저 플로우 다이어그램 간단 ver. /유튜브 How to Create a User Flow Diagram 화면 캡쳐

 

1) 트위터 앱을 켰을 때 보이는 홈 스크린, 즉 Feed가 네모로 위치하고,

2) 클릭이라는 액션을 결정해야하는 "New Tweet"는 다이아몬드가 된다.

3) New Tweet을 눌렀을 때 보이는 첫 'Compose' 스크린은 네모로,

4) 글을 작성한 뒤 'Cancel' 할 것인지, 'Tweet'할 것인지 액션을 결정해야하는 두 가지 선택지가 다이아몬드가 된다. 

 

이런 식으로, 한 웹사이트 전체에 대한 플로우다이어그램을 만들어보면 다음과 같은 이미지로 표현될 수 있다. 

 

유저 플로우 다이어그램/ 유튜브 How to Create a User Flow Diagram 화면 캡쳐

 

그러나, 처음부터 이렇게 모든 것을 그리는 것은 복잡하고 어렵기 때문에, 한 개의 시나리오에 해당하는 플로우 다이어그램을 하나씩 그려나가는 것을 추천한다. 예를 들어, 위 flow diagram의 첫 단계인 Welcome 스크린 이후에 Log in with Facebook/ Log in with Goole을 거친 후 'Home Screen'으로 오게 되는데, 여기서 네 갈래로 가지가 쳐진다. 이때, 애초부터 이 중 한 개의 갈래에 해당하는 시나리오만 생각해보라는 것이다. 다음과 같다. 

 

 

유저 플로우 다이어그램 일부/ 유튜브 How to Create a User Flow Diagram 화면 캡쳐

 

 

---

Flow Diagram을 써야만 하는 이유

포토샵으로 가서 디자인을 한다거나, 바로 코딩을 한다거나 하면 안 되는 이유가 있을까? 이렇게 플로우다이어그램을 꼭 그려야만 하는 이유가 뭘까? 

플로우 다이어그램에서는, '최적의 사용자 경험'을 위한 논리를 찾아 다양하게 변형해보는 것이 쉽고 빠르기 때문이다. 간단한 변경이라도, 포토샵이나 코딩에서 구현하는 중에 변경을 해야 한다면 몇 시간, 심지어는 며칠이 걸리게 된다. 시간과 돈, 에너지를 효율적으로 사용하기 위해 유저 플로우 다이어그램이 꼭 필요한 이유다. 유저 플로우 다이어그램에서 아주 탄탄한 기반을 다지지 않는다면, 이후에 아주 힘들어지고 시간을 훨씬 많이 소요하게 될 것이다. 

---

나도 한 번 해보기

이 영상에서, 끝으로 시청자에게 Hands-on 과제를 제공한다. '레시피 앱'의 간단한 플로우 다이어그램을 그려보라는 것이다! 이 앱에서 수행할 두 가지 간단한 액션에 대해서 제시해주었다.

 

1) 레시피들을 둘러본다.
2) 나중에 레시피를 살펴보기 위해, 마음에 드는 레시피를 저장/즐겨찾기에 넣는다.

 

 

잠깐 영상을 정지하고, 이 여정에 대해 유저 플로우다이어그램을 그려보라고 했다. 조금 응용해서 다음과 같이 그려보았다. 

 

내가 그린 레시피 앱 플로우다이어그램1, 2

 

영상 앞쪽에서 학습한 것들을 나름 활용해봤다. 두 가지 버전을 만들어봤다.

왼쪽 첫번째 플로우 다이어그램은 다음과 같다.

 

1. 앱을 켰을 때 Welcome Screen이 뜨고,
2. '로그인 안한 채로 사용하기/Face book으로 로그인 하기/Google로 로그인 하기'라는 세 가지 Decision을 만들었다.
3. 이후 메인 페이지에 해당하는 'Home Screen'으로 이동한다.
4. 홈 스크린 안에 '레시피 피드'로 넘어갈 수 있는 '레시피 브라우징' 버튼이 있다고 생각했다. 그래서 '레시피 브라우징'을 다이아몬드로 배치했다.
5. 레시피 피드가 보여질 테니, 네모 안에 'Recipes Feed'를 배치했다. 
6.  '레시피 저장하기'를 다이아몬드에 배치했다.
7. 나의 저장된 레시피들이 모여있는 '레시피 저장 페이지'가 보여질 것이라 생각하고, 'Recipe Saving Page'를 네모에 배치했다. 
8. 저장하기/ 취소하기라는 두가지 Decision 옵션을 제안했고, 두 가지의 옵션이 완료됐을 때 둘다 Recipe Feed로 돌아가도록 했다. 

오른쪽에 위치한 두번 째 플로우 다이어그램은, 주어진 정보만으로는 무용해보이는 Home Screen을 제거하고, 로그인 절차를 마치면 바로 'Recipes Feed'가 보이도록 했다. 이렇게 표현하면 굳이 'Browse Recipes'라는 결정 과정이 필요 없어진다. 그 차이가 있고, 나머지는 첫번째 플로우 다이어그램과 같다.

 

와우 생애 첫 유저 플로우 다이어그램을 만들어본 것이다! 두근두근.. 제대로 한 것일까? 정지해뒀던 영상을 다시 플레이 해본다. 띠용? 예시 답안이 있을거라 생각했는데 아니었다. ㅎㅎ 긴가민가하며 그리면서 기존의 앱들을 가지고 그려보는 연습을 하면 좋겠다는 생각을 했다. 무에서 유를 상상해가며 그리려니 생각보다 쉽지 않았다. 평소에 앱을 사용할 때 어떤 식으로 User Flow를 구성하고 있는지 더 주의 깊게 보게 될 것 같다. 내가 자주 사용하고 있는 앱을 가지고 User Flow Diagram을 분석해보는 연습을 포스팅해야겠다고 다짐했다. 좋은 User Flow를 많이 학습하고 익혀두면 나중에 내가 구현하려는 서비스를 디자인할 때 도움이 많이 되겠다는 생각을 했다. 

 

다음 포스팅은, '기존의 앱으로 User Flow 분석하기'로 돌아오겠다!