서비스 기획에서 중요한 작업 중 하나는 사용자 흐름(User Flow) 을 설계하는 것입니다. 사용자 흐름은 사용자가 특정 목표를 달성하기 위해 서비스 내에서 이동하는 경로를 시각적으로 표현한 것입니다. 기획 단계에서 User Flow를 미리 설계하면 개발 중에 발생하는 "이 경우엔 어떻게 해야 하지?" 같은 결정을 줄이고, 전체 서비스 구조를 팀 전체가 공유할 수 있습니다.
User Flow vs User Journey Map 차이
이 두 개념은 자주 혼동되지만 목적과 범위가 다릅니다.
User Journey Map(사용자 여정 지도): 사용자가 서비스를 인식하는 순간부터 사용 후기를 남기는 것까지 전체 경험을 시간 순서로 정리한 것입니다. 감정, 동기, 접점(터치포인트)을 포함하며 마케팅, 영업, 고객지원 등 서비스 외부까지 포함합니다. 주로 전략 수립과 문제 발견에 쓰입니다.
User Flow(사용자 흐름): 서비스 내부에서 특정 태스크를 수행할 때의 화면 이동 경로를 나타냅니다. "로그인 → 홈 → 상품 검색 → 상품 상세 → 장바구니 → 결제 → 완료"처럼 구체적인 화면과 화면 간 전환을 다이어그램으로 표현합니다. 주로 기획과 개발에 쓰입니다.
간단히 말해, User Journey Map은 "사용자 전체 경험의 큰 그림"이고, User Flow는 "서비스 안에서의 구체적인 이동 경로"입니다.
User Flow 다이어그램 그리는 방법
User Flow는 표준화된 도형을 사용해 그립니다.
- 직사각형: 화면 또는 상태 (예: 홈 화면, 상품 상세 화면)
- 마름모: 의사결정 포인트 (예: 로그인 여부, 재고 여부)
- 원형 또는 둥근 직사각형: 시작점과 종료점
- 화살표: 사용자의 이동 방향
그리는 순서
- 시작점 정의: 사용자가 어디서 흐름을 시작하는지 설정합니다. (앱 실행, 특정 링크 클릭, 알림 탭 등)
- 목표 정의: 흐름의 끝, 즉 사용자가 달성해야 하는 목표를 설정합니다.
- 주요 단계 나열: 시작에서 목표까지 거치는 주요 화면을 순서대로 나열합니다.
- 분기 추가: 각 단계에서 발생할 수 있는 선택지와 예외 상황을 분기로 추가합니다. (에러, 취소, 뒤로가기 등)
- 검토: 모든 분기가 어디론가 연결되는지 확인합니다. 막혀있는 경로가 없어야 합니다.
주요 흐름 유형
온보딩 흐름 (Onboarding Flow)
사용자가 처음 서비스에 접속했을 때 핵심 기능을 이해하고 가치를 경험하도록 안내하는 흐름입니다. 잘못 설계된 온보딩은 첫날 이탈률을 높입니다.
좋은 온보딩 흐름의 원칙:
- 3단계 이내로 완료 가능하게 합니다.
- 모든 정보를 한 번에 보여주지 않습니다.
- 가입 직후 즉시 핵심 가치를 경험하게 합니다.
- 선택적 항목과 필수 항목을 명확히 구분합니다.
예시: 음악 스트리밍 앱의 온보딩 앱 실행 → 소셜 로그인 → 좋아하는 장르 선택 (건너뛸 수 있음) → 첫 번째 추천 플레이리스트 바로 재생
결제 흐름 (Payment Flow)
결제는 서비스 전환율에 직결되는 가장 중요한 흐름입니다. 단계가 많을수록 이탈률이 높아집니다. 아마존의 원클릭 결제는 이 흐름을 극단적으로 단순화한 사례입니다.
최적화된 결제 흐름: 장바구니 확인 → 배송지 입력 (저장된 주소 자동 불러오기) → 결제 수단 선택 (저장된 카드 자동 선택) → 최종 확인 → 완료
핵심은 사용자가 이미 입력한 정보를 다시 입력하지 않게 하는 것입니다.
인증 흐름 (Authentication Flow)
로그인, 회원가입, 비밀번호 찾기를 포함하는 흐름입니다. 인증 흐름은 서비스의 첫인상에 큰 영향을 미칩니다. 어렵고 복잡한 인증 경험은 가입 자체를 포기하게 만듭니다.
현대적인 인증 흐름 설계:
- 소셜 로그인(Google, Kakao, Naver)을 기본으로 제공합니다.
- 이메일/비밀번호는 보조 수단으로 제공합니다.
- 비밀번호 찾기는 이메일 링크 방식이 가장 단순합니다.
- 매직 링크(이메일로 로그인 링크 발송)도 좋은 대안입니다.
Figma로 User Flow 만드는 방법
Figma에서 User Flow를 만드는 방법은 크게 두 가지입니다.
방법 1: 와이어프레임 + 프로토타입 연결 각 화면의 와이어프레임을 Figma에서 그린 뒤 Prototype 탭에서 화면 간 연결을 설정합니다. 이 방법은 흐름을 직접 클릭해서 경험할 수 있어서 사용성 테스트나 팀 내 공유에 좋습니다.
방법 2: FigJam + 흐름 다이어그램 FigJam의 플로우차트 도형을 사용해 텍스트 기반의 흐름 다이어그램을 그립니다. 빠르게 초안을 잡거나 여러 흐름을 한눈에 비교할 때 좋습니다.
또한 Figma 플러그인 중 "Autoflow"를 사용하면 화면 사이의 연결선을 자동으로 예쁘게 그려주어 흐름도를 시각적으로 표현하기 편합니다.
흐름에서 이탈 포인트 찾는 방법
User Flow를 설계했다면 어디서 사용자가 이탈하는지 찾아야 합니다. 이탈은 크게 두 가지로 나뉩니다.
의도된 이탈: 목표를 달성하고 나가는 것으로, 정상적인 흐름입니다.
비의도된 이탈: 혼란, 에러, 불만으로 이탈하는 것입니다. 이것을 줄이는 것이 UX 개선의 핵심입니다.
이탈 포인트를 찾는 방법:
- Google Analytics의 행동 흐름 보고서에서 어느 페이지에서 이탈이 많은지 확인합니다.
- Hotjar 세션 레코딩으로 사용자가 어느 단계에서 멈추거나 반복 행동을 하는지 봅니다.
- 사용성 테스트에서 직접 관찰합니다.
이탈이 많은 단계를 발견했다면 그 이유를 분석합니다. 정보가 부족한지, 단계가 너무 많은지, 에러 메시지가 불명확한지 등을 검토합니다.
실제 서비스의 User Flow 예시
소셜 로그인 → 메인 화면 → 핵심 기능 사용
다음은 새 서비스의 전형적인 첫 사용 흐름입니다.
앱 실행
↓
스플래시 화면 (0.5초)
↓
온보딩 여부 확인
├── 첫 방문 → 온보딩 화면 (서비스 소개 3장)
└── 재방문 → 로그인 화면
↓
로그인 방법 선택
├── 카카오 로그인 → 카카오 인증 → 완료
├── 구글 로그인 → 구글 인증 → 완료
└── 이메일 로그인 → 이메일/비밀번호 입력 → 완료
↓
메인 홈 화면
↓
핵심 기능 버튼 탭
↓
기능 사용 화면
이 흐름에서 개선할 수 있는 부분은, 재방문 사용자가 자동 로그인 상태라면 로그인 화면을 건너뛰어 곧바로 홈 화면으로 보내는 것입니다. 매번 로그인하게 만드는 것은 불필요한 마찰입니다.
흐름 검증 방법
User Flow를 설계했다면 출시 전에 반드시 검증해야 합니다.
동료 워크스루: 기획자 본인이 아닌 팀원이 흐름을 보고 "사용자 입장에서 걸어가며" 막히는 부분이 없는지 확인합니다.
프로토타입 테스트: Figma 프로토타입을 만들어 실제 사용자 3~5명에게 특정 태스크를 주고 완수할 수 있는지 확인합니다.
시나리오 기반 검토: "사용자가 비밀번호를 틀렸을 때", "인터넷 연결이 끊겼을 때", "페이지 새로고침을 했을 때"처럼 예외 시나리오를 모두 흐름에 포함했는지 체크리스트로 확인합니다.
User Flow는 기획 단계에서 한 번 만들고 끝나는 것이 아닙니다. 서비스가 발전하면서 흐름도 함께 업데이트되어야 합니다. 팀 전체가 항상 최신 흐름을 공유하고 있을 때, 더 빠르고 일관성 있는 개발이 가능합니다.