[UX 기획] 화면설계서 전 필수 단계: 1장으로 정리하는 사용자 플로우(User Flow) 전략

-
결제 사용자 플로우(User Flow) 1장 예시: 화면설계서 전 필수 동선 설계

[UX 기획] 화면설계서 전 필수 단계: 1장으로 정리하는 사용자 플로우(User Flow) 전략

기획서 작성, 혹시 '지도 없이 도시부터 그리는 모험'을 하고 계시진 않나요?

제출 기일이 촉박할 때면 저도 모르게 화면 설계부터 시작하곤 했습니다. 하지만 설계도 없이 벽돌부터 쌓은 집은 결국 무너질 수밖에 없더군요. 동선이 꼬인 기획서 앞에서 "이 기능은 왜 여기 있나요?"라는 날카로운 질문을 받을 때의 당혹감은 지금 생각해도 아찔합니다.

그래서 저는 이제 아무리 급해도 반드시 '사용자 플로우'부터 챙깁니다.
화면설계서라는 상세 지도를 그리기 전, 목적지까지의 가장 빠른 길을 찾는 과정이죠. 복잡한 기획을 단 1장으로 압축해 논리의 뼈대를 세우는 법, 지금부터 하나씩 짚어보겠습니다.

화면설계서 전 필수 단계

화면부터 그리면 벌어지는 3가지 삽질

많은 UX 기획자가 의욕적으로 화면설계서(Storyboard)부터 시작합니다. 하지만 논리가 정립되지 않은 상태에서 화면부터 그리면, 다음 문제가 빈번하게 터집니다.

  • 동선 질문 폭탄: “이 버튼 누르면 어디로 가죠?”라는 개발자 질문에 흐름이 흔들립니다.
  • 예외 케이스 누락: Error / Empty flow / 결제 실패 같은 Edge Case 때문에 설계를 갈아엎습니다.
  • 화면 증식의 저주: 화면 수가 늘수록 전체 서비스 구조가 머릿속에서 미로가 됩니다.

이 모든 문제를 “한 번에” 잡아주는 것이 사용자 플로우(User Flow)입니다. 핵심은 “어떤 화면이 필요한가”가 아니라 사용자가 목표를 달성하기 위해 어떤 경로를 밟는가입니다.

사용자 플로우(User Flow) vs 화면설계서(Storyboard) 차이

둘 다 중요하지만, 순서가 중요합니다. User Flow를 먼저 확정하면 화면설계서가 빨라지고, 수정이 줄어듭니다.

구분 사용자 플로우 (User Flow) 화면설계서 (Wireframe/Storyboard)
관점 사용자 경험의 흐름(Logic) 화면의 구성과 기능(Layout)
목적 논리적 결함 발견, 동선 최적화 상세 기능 정의, UI 가이드
시점 화면 설계 전(필수) User Flow 확정 후

1장으로 끝내는 사용자 플로우 작성 4단계

복잡하게 그릴 필요 없습니다. 핵심은 논리의 흐름입니다. 아래 4단계를 따르면 “1장짜리 High-level User Flow”가 만들어집니다.

1) 목표(Happy Path) 설정

사용자가 서비스에 진입해서 가장 성공적으로 작업을 마치는 경로를 먼저 그립니다. 이것이 플로우의 척추입니다.

예시: [홈] → [상품 선택] → [상세 보기] → [결제] → [결제 완료]

2) 진입점과 분기점(Decision) 찾기

사용자가 어디서 들어오는지(진입점), 어떤 조건에 따라 갈라지는지(분기점)를 표시합니다. 이 단계에서 “조건문”이 들어가며, 개발 질문의 70%가 사라집니다.

  • Decision Diamond 예시: “로그인이 되어 있는가?”, “재고가 있는가?”, “배송 가능 지역인가?”
  • 분기에서는 Yes/No 라벨을 붙여 흐름이 읽히게 만드세요.

3) 예외 경로(Edge Case) 추가

가장 중요하지만 가장 자주 놓치는 단계입니다. “실패의 길”을 먼저 그려두면, 화면설계서에서 재작업이 급감합니다.

  • 결제 실패(카드 오류, 한도 초과)
  • 네트워크 오류(타임아웃, 재시도)
  • Empty flow(검색 결과 없음, 장바구니 비어 있음)
  • 권한 문제(로그아웃 상태, 접근 권한 없음)

4) 1장으로 압축하기(High-level View)

모든 상세 기능을 넣으려 하면 플로우가 “문서”가 아니라 “미로”가 됩니다. 1장에서는 핵심 액션 중심으로 정리하세요. 상세한 기능 설명은 다음 단계인 화면설계서의 몫입니다.

복붙용: 1장 사용자 플로우 템플릿(High-level)

아래 템플릿은 문서에 그대로 붙여넣고 서비스명/화면명만 바꾸면 됩니다. “한 장의 지도”가 생기면, 화면설계서는 지도 위에 건물을 올리는 작업이 됩니다.

텍스트 플로우(빠른 버전)

[진입점]
- 홈 / 딥링크 / 푸시 / 검색 / 광고

[Happy Path]
홈 → 목록 → 상세 → 결제 → 완료

[Decision]
- 로그인 여부? (Yes: 결제 / No: 로그인 → 결제)
- 재고 여부? (Yes: 결제 / No: 품절 안내 → 대체 상품/알림신청)
- 결제 성공? (Yes: 완료 / No: 실패 안내 → 재시도/다른 결제수단)

[Edge Case]
- 네트워크 오류: 재시도 / 고객센터 / 임시저장
- Empty flow: 추천/검색/홈 복귀

Mermaid(다이어그램 도구 사용 시)

Mermaid를 지원하는 위키/노션/개발문서라면 아래 코드로 바로 시각화할 수 있습니다.

flowchart TD
  A[요금제 안내/Paywall] --> B[플랜 선택]
  B --> C[로그인/회원가입]
  C --> D[결제수단 등록/선택]
  D --> E{무료체험/프로모션?}
  E -- Yes --> E1[무료체험/쿠폰 적용] --> F[자동결제 안내/동의]
  E -- No --> F[자동결제 안내/동의]

  F --> G[구독 확인(주기/금액/갱신일)]
  G --> H{결제 플랫폼?}
  H -- PG --> I[결제 인증/승인(PG)]
  H -- 인앱 --> I2[인앱 결제 시트]
  I --> J{최초 결제 성공?}
  I2 --> J{최초 결제 성공?}

  J -- Yes --> K[구독 활성 완료] --> L[구독 관리]
  J -- No --> M[결제 실패 안내] --> D

  %% Renewal cycle
  L --> N[갱신 D-7 알림(선택)]
  N --> O[자동 청구 시도]
  O --> P{갱신 성공?}
  P -- Yes --> Q[구독 유지 + 영수증/청구서] --> L
  P -- No --> R[갱신 실패 안내] --> S[결제수단 관리/업데이트] --> T[재청구 시도]
  T --> U{재청구 성공?}
  U -- Yes --> Q
  U -- No --> V[유예기간(Grace Period)] --> W[서비스 제한/일시중지] --> X[미납 해지]
  X --> Y[해지 완료(종료일 안내)] --> Z[재구독/복구]
  Z --> B

성공적인 User Flow 체크리스트(Dead-end 방지)

기획의 구멍을 막는 3가지 질문입니다. 플로우를 보며 체크해 보세요.

  1. 되돌아갈 수 있는가? 사용자가 이 단계에서 이전 단계로 돌아갈 수 있나요?
  2. 막다른 길(Dead-end)은 없는가? 모든 끝은 홈 또는 다음 액션으로 연결되나요?
  3. 비즈니스 목표까지 최단거리인가? 구매/구독/신청으로 가는 길이 불필요하게 길지 않나요?

팁: Dead-end를 없애는 가장 쉬운 장치는 “다음 선택지 2개”입니다. 예를 들어 오류 화면이라면 [재시도]와 [홈으로] 같은 출구를 꼭 두세요.

마치며: 1장의 힘

화면설계서 100장을 그리는 시간보다, 사용자 플로우 1장을 완벽하게 다듬는 1시간이 기획의 퀄리티를 결정합니다.

논리가 탄탄한 UX 기획은 개발자와 디자이너에게도 강력한 신뢰를 줍니다. 오늘 바로 여러분이 기획 중인 서비스의 핵심 동선 1장을 그려보세요.

FAQ: 사용자 플로우(User Flow) 실무 질문 모음

Q 사용자 플로우는 어디까지 상세하게 그려야 하나요?

A 1장 플로우에서는 핵심 액션과 핵심 분기, 그리고 치명적인 예외 흐름까지만 넣는 것이 안전합니다. 세부 UI 요소(버튼 위치, 문구)는 화면설계서에서 다루는 편이 효율적입니다.

Q 화면설계서(스토리보드)랑 중복되지 않나요?

A 중복이 아니라 역할 분담입니다. User Flow는 “논리와 동선(Logic)”, 화면설계서는 “구성과 기능(Layout)”에 집중합니다. 플로우가 탄탄할수록 스토리보드는 빠르게 완성됩니다.

Q 예외 케이스(Edge Case)는 어디까지 넣어야 하나요?

A 우선순위는 “발생 가능성 × 영향도”입니다. 결제 실패, 네트워크 오류, 데이터 없음(Empty flow), 권한 문제처럼 사용자 경험과 매출에 직격탄인 케이스부터 넣으세요.

참고 자료(공식/권위 출처)