User Flow #1 : 유저 플로우란?

 

얼마 전 디자인시스템 시리즈를 다 마치고 나서

돌아온 새로운 UIUX 방법론 시리즈!

 

이번 시리즈에서는 User Flow에 대해 알아보려 한다.

User Flow는 어려운 개념이 있는 것도 아니고

시작하기 어렵지도 않아서 비교적 할 만하다.

 

그래도 정말 많은 칼럼을 뒤져보며 혼자

정리해본 내용들을 가공해 올려보려고 한다.

 

---

 

💬 User Flow는 언제 시작하면 될까?

내가 처음에 User Flow라는 개념을 접하고 난 뒤, 떠오른 생각이었다. User Flow는 언제 시작하는 것이 좋을까? 만약 내가 아이디어 기획부터 디자인 완성까지 주도하는 개인 프로젝트라면, 서비스에 관한 내용들을 모두 정한 후 대략적인 메인 화면 구성과 함께 시작하는 것이 좋다. 유저 플로우는 기초 OF 기초이기 때문에 초기 단계에 시작해야 한다. 만약에 팀 작업으로 이루어진다면, 브랜딩이 어느정도 구상된 후에 진행하는 것이 좋겠다.

 

😇 User Flow와 헷갈리는 개념들 ...

유저 플로우가 뭔지에 대해 알아가기 위해서는 비슷한 개념들과 구분하는 것이 필수겠다. 아마 유저플로우를 이제 막 알게 되었다면 와이어프레임, 프로토타입, 사이트맵, 저니맵에 관한 개념을 들어봤거나 곧 들어볼 예정일 것이다. 특히 와이어프레임과 유저 플로우는 헷갈리는 개념이기 때문에 여기서 확실히 정립하고 지나가야 나중에 헷갈리지 않는다.

 

📕 와이어프레임이란 : 한 화면 내에서 어떤 부분이 어떻게 채워져야 할 지에 초점을 둔 화면 기획

📗 유저플로우란 : 사용자가 해당 화면에서 어디로 넘어갈 것인지 예측하며 설계하는 화면 기획

 

그러니까 와이어프레임은 UI에 가까운 기획이고, 유저플로우는 UX에 가까운 기획이라고 생각하면 쉬울 것이다.

와이어프레임 기획

위 예시가 바로 와이어프레임이다. 와이어프레임은 어디에 이미지가 배치되어야 하며, 어디에 글이 있어야 하는지를 구성하고 블록 넣듯이 구성요소를 넣어보는 것이다. 인터페이스에 맞춰졌기 때문에 UI에 가까운 것이다. 와이어프레임은 보통 유저플로우를 하기 전이나 하고난 후에 바로 시작하게 된다. 와이어프레임도 나중에 다룰 개념이긴 하지만, 따로 배울 개념은 없고 UI 레퍼런스를 많이 찾아보며 스스로 비주얼적으로 예쁜 UI, 사용자가 편한 UI를 구상해 나가야 하기 때문에 언제 다룰지는 모르겠다.

유저플로우 기획

반면 유저플로우는 와이어프레임과는 달리 여러 구체적인 설명과 제목들이 따라 붙는다. 왜냐하면 사용자가 첫 번째 화면에서 어떤 행동을 할 것인지, 그 행동을 하고나면 어떤 페이지와 행동으로 넘어갈 것인지를 순서에 따라 배치하기 때문이다. 위 이미지에서 Step1으로 유저는 웰컴 스크린에 진입한다. 그리고 아래 로그인 버튼이 있다. 그렇다면 유저는 그 로그인 버튼을 누를 것이다. Step2에서는 유저가 소셜 로그인을 했다. 그럼 Step3에서는 유저가 드디어 홈화면으로 진입하게 되었다. 이런 일련의 흐름을 Register for product라고 이름 붙인 것이다. 사용자의 행동과 움직임에 집중하여 구성했기 때문에 UI보다는 UX에 더 집중되어 있는 기획이다.

 

📘 사이트맵 : 사이트맵은 홈 화면에 어떤 버튼이 있는지 간단하게 보여주는 지도(지표)이다. 당장은 알 필요 없다.

📙 저니맵 : 유저의 경험을 흐름에 따라 기록한 지도이다. 지금은 관계가 없으니 나중에 더 알아보도록 하자.

 

😎 User Flow의 구성요소

이제 유저플로우에 대해 대략 감이 잡혔..을까? 유저플로우의 구성요소는 두가지이다.

 

1. User Goal : 목표 설정

2. Task Flow : 유저의 행동 흐름

 

그러니까 유저가 어떠한 목표를 갖고 있고, 그 목표를 위해 어떠한 과정을 거치는지를 나타낸 것이 유저 플로우인 것이다.

유저플로우의 구성요소

다만 유저 플로우를 만들 때에 경로가 3개가 넘어가면 안 된다. 경로가 너무 많다면 아예 분리해서 새로운 목표로 넘기는 것이 좋다. 유저플로우는 항상 간결하게 정리되어야 한다. 또한 유저플로우는 정보가 구체적이어야 한다. 유저가 정확히 어떤 행동을 했는지를 기록해야 하고, 그 결과가 정확히 무엇인지 서술해야 한다. 유저플로우는 사용자의 행동 흐름을 구체적으로 상상해야 하므로 세심하게 작업해야 한다.

 

1. 유저의 목표가 무엇인가?

2. 유저가 목표를 위해 어떤 움직임을 보이는가?

 

---

 

다음 포스팅에서는 유저플로우에서 놓치지 말아야 할

중요한 점을 알아보고, 실제로 내가 유저플로우를

어떻게 구축했는지 사례를 통해 구체적으로 분석해 볼 것이다.

 

그러면 아마 포스팅이 끝날 것 같다 🤔

의외로 쓸 게 없는...