이 글은 누구를 위한 것인가
- 개발팀에 "이 플로우가 어떻게 동작하나요?" 설명이 어려운 디자이너
- 요구사항 문서 대신 다이어그램으로 커뮤니케이션하고 싶은 팀
- 복잡한 분기 조건이 있는 플로우를 설계해야 하는 PO/PM
들어가며
"회원가입 → 이메일 인증 → 완료" 같은 단순한 플로우는 글로 써도 된다. 하지만 조건 분기가 5개 이상이면 다이어그램이 훨씬 빠르다. 플로우 다이어그램은 설계 도구가 아니라 커뮤니케이션 도구다.
이 글은 bluefoxdev.kr의 UX 문서화 가이드 를 참고하여 작성했습니다.
1. 플로우 다이어그램 기호 체계
[플로우 다이어그램 표준 기호]
○ 원형 (Start/End):
시작점과 종료점
플로우의 첫 번째와 마지막 노드
□ 직사각형 (Process/Screen):
화면, 단계, 액션
"장바구니 화면", "결제 폼"
◇ 마름모 (Decision):
분기 조건
"로그인 했나요? Yes/No"
[ ] 모서리 둥근 직사각형 (Sub-process):
하위 플로우 (별도 다이어그램)
"결제 프로세스 (상세 참조)"
// 원통형 (Data Store):
데이터 저장소, API 호출
"주문 DB 저장"
→ 화살표 (Flow):
다음 단계로 이동
레이블로 조건 표시 ("Yes", "실패")
[색상 코딩 규칙]
파랑: 정상 플로우
빨강: 오류 경로
노랑: 조건 분기
초록: 성공 종료
회색: 외부 시스템
[플로우 수준]
태스크 플로우: 하나의 태스크 (주문하기)
유저 플로우: 여러 태스크 포함 전체 여정
와이어플로우: 화면 + 플로우 결합
2. 복잡한 플로우 설계
[결제 플로우 예시]
시작: [상품 상세 페이지]
↓ "구매하기" 클릭
◇ 로그인 여부?
Yes → [결제 정보 입력]
No → [로그인/회원가입 화면]
↓ 로그인 완료
[결제 정보 입력]
[결제 정보 입력]
↓ 배송지, 결제 수단 입력
↓ "결제하기" 클릭
◇ 결제 수단?
신용카드 → [카드 인증] → [3DS 인증]
↓
간편결제 → [앱 전환 또는 팝업]
↓
[결제 처리 중] (로딩)
↓
◇ 결제 성공?
Yes → ○ [주문 완료 화면]
↓
- 주문 번호 표시
- 이메일 발송
- 계속 쇼핑 / 주문 추적
No → [오류 화면]
↓
◇ 재시도 가능?
Yes → [결제 정보 입력] (다시)
No → ○ [실패 종료]
- CS 안내
- 장바구니 보전
3. Figma 플로우 작성 팁
[Figma 플로우 다이어그램 팁]
1. 컴포넌트 라이브러리 사용:
FlowBase, Wireframe UI Kit 플러그인
→ 다이어그램 기호를 드래그앤드롭
2. 자동 연결선:
Figma의 Interactive Components 또는
화면 → Prototype 탭 → 연결
3. 레이어 구조:
Group 1: Happy Path (정상 플로우)
Group 2: Error States (오류)
Group 3: Edge Cases (예외)
4. 주석 활용:
각 분기에 조건 텍스트 추가
"A/B 테스트 여부", "권한 레벨"
5. 버전 관리:
페이지로 버전 분리 (V1, V2, Final)
또는 브랜치 기능 활용
[플로우 검토 체크리스트]
□ 모든 분기의 결과가 처리됨
□ 오류 경로가 명확함
□ 빈 상태 (Empty State) 포함됨
□ 로딩 상태 포함됨
□ 외부 시스템 의존성 표시됨
□ 모든 종료점 명확함
마무리
유저 플로우의 목적은 완벽한 문서화가 아니라 "이 플로우에 구멍이 없는지 확인"하는 것이다. 다이어그램을 그리다 보면 "이 경우에는 어떻게 되지?"를 발견하게 된다. 개발 착수 전에 플로우 다이어그램을 그리면 구현 중 나오는 "이런 경우는요?" 질문을 미리 해결할 수 있다.