13장. 텍스트 플로우 다이어그램
장바구니→결제 해피패스/예외
12장 용어를 실제 시나리오에 적용하기
12장에서 정의한 용어와 라벨을 실제 사용자 플로우에 적용한다. 텍스트 플로우 다이어그램은 화면 간 이동 경로와 각 단계에서 표시되는 메시지·버튼·안내 문구를 시나리오로 정리한 문서다.
플로우 다이어그램을 작성하는 목적은 첫째, 화면 설계 전 텍스트 흐름을 검증해 누락이나 모순을 찾는다. 둘째, 정상 흐름(해피패스)과 예외 상황의 분기를 명확히 한다. 셋째, 개발팀이 각 화면에서 표시할 메시지를 정확히 구현할 수 있도록 사양을 제공한다.
이 장에서는 쇼핑몰의 핵심 전환 경로인 "장바구니 → 주문 → 결제 → 주문 완료"를 중심으로 해피패스와 주요 예외 시나리오를 작성한다.
플로우 작성 형식
각 단계는 다음 요소로 구성한다.
화면명
11장 사이트맵에서 정의한 화면 이름
화면 제목
화면 상단에 표시되는 제목 텍스트
핵심 메시지
사용자에게 현재 상태나 다음 액션을 안내하는 주요 문구
버튼
주요 액션 버튼의 텍스트와 동작
분기 조건
다음 화면으로 이동하는 조건과 예외 처리
해피패스: 장바구니 → 주문 완료
해피패스는 모든 조건이 정상적으로 충족되어 구매가 완료되는 경로다.
1단계: 장바구니
화면명: 장바구니
화면 제목: "장바구니"
URL: /cart
진입 조건
상품 상세에서 "장바구니 담기" 클릭
헤더 장바구니 아이콘 클릭
화면 구성
상품 목록 영역 :
상품명, 옵션, 수량, 가격 표시
각 상품별 "삭제" 버튼 수량 조절 버튼 (- / +)
금액 요약 영역 :
총 상품 금액: 35,000원
배송비: 3,000원
────────────────
총 결제 금액: 38,000원
안내 메시지 :
"3만 원 이상 구매 시 배송비 무료"
재고 부족 시: "[상품명]의 재고가 부족합니다. 수량을 조정해 주세요."
버튼
주요: "선택 상품 주문" (체크된 상품만 주문)
보조: "쇼핑 계속하기" (홈으로 이동)
다음 화면으로 이동 조건
최소 1개 이상 상품 선택
모든 선택 상품의 재고 충분
"선택 상품 주문" 클릭
분기
비로그인 상태 → 로그인 화면으로 이동
로그인 상태 → 체크아웃 화면으로 이동
2단계: 주문
화면명: 주문
화면 제목: "주문/결제"
URL: /checkout
진입 조건
장바구니에서 "선택 상품 주문" 클릭
상품 상세에서 "바로 구매하기" 클릭
화면 구성
주문 상품 영역:
선택한 상품 목록 표시 (수정 불가, 장바구니로 돌아가기만 가능)
배송 정보 영역:
배송지 정보
수령인 * : [입력 필드]
휴대폰 번호 * : [입력 필드] (010-1234-5678 형식)
주소 * : [우편번호 검색] [입력 필드]
상세 주소 * : [입력 필드]
배송 메모 (선택) : [드롭다운]
- 문 앞에 놓아주세요
- 경비실에 맡겨주세요
- 직접 받겠습니다
- 직접 입력
기본 배송지 체크박스:
"기본 배송지로 저장"
쿠폰 적용 영역:
"쿠폰 선택" 버튼 클릭 → 보유 쿠폰 목록 모달
선택한 쿠폰명과 할인 금액 표시
조건 미달 시: "이 쿠폰은 3만 원 이상 구매 시 사용 가능합니다."
결제 수단 영역:
결제 방법 선택 *
○ 신용카드
○ 계좌이체
○ 네이버페이
○ 카카오페이
금액 요약 영역:
총 상품 금액: 35,000원
쿠폰 할인: -5,000원
배송비: 3,000원
────────────────
총 결제 금액: 33,000원
약관 동의 영역:
□ [필수] 개인정보 수집·이용 동의
□ [필수] 구매 조건 확인 및 결제 진행 동의
□ [선택] 마케팅 정보 수신 동의
버튼
주요: "결제하기" (PG 결제창 호출)
보조: "장바구니로" (이전 화면)
다음 화면으로 이동 조건
모든 필수 필드 입력 완료
필수 약관 동의 체크
결제 수단 선택
"결제하기" 클릭
검증 메시지
필수 필드 누락 시: "[필드명]을(를) 입력해 주세요."
휴대폰 형식 오류 시: "휴대폰 번호 형식이 올바르지 않습니다."
약관 미동의 시: "필수 약관에 동의해 주세요."
3단계: PG 결제창
화면명: PG 결제
화면 제목: PG사 제공 화면 (이니시스)
진입 조건
체크아웃에서 "결제하기" 클릭
처리 과정
PG 결제창 팝업 또는 리다이렉트
고객이 결제 정보 입력 (카드 번호·비밀번호 등)
PG사 결제 처리
결과 반환 (성공·실패)
성공 시
주문 완료 화면으로 이동
주문 번호 생성
고객에게 주문 확인 이메일 발송
실패 시
체크아웃 화면으로 복귀
오류 메시지 표시 (하단 "결제 실패 시나리오" 참조)
4단계: 주문 완료
화면명: 주문 완료
화면 제목: "주문이 완료되었습니다"
URL: /order/complete?order_id=ORD-20250120-001
진입 조건
PG 결제 성공
화면 구성
완료 메시지:
주문이 완료되었습니다
주문번호: ORD-20250120-001
주문 정보 요약:
주문 상품 목록
배송지 정보
결제 금액
결제 수단
안내 메시지:
"주문 내역은 [마이페이지 > 주문 내역]에서 확인할 수 있습니다."
"배송은 영업일 기준 2~3일 소요됩니다."
버튼
주요: "주문 내역 보기" (/mypage/orders)
보조: "쇼핑 계속하기" (홈)
예외 시나리오
해피패스에서 벗어나는 주요 예외 상황과 처리 방법이다.
예외 1: 장바구니 재고 부족
발생 시점: 장바구니 화면
조건
고객이 담아둔 상품의 재고가 0이 되었거나
선택한 수량보다 재고가 적은 경우
화면 표시
해당 상품 영역에 경고 표시:
[경고 아이콘] 재고 부족
현재 재고: 3개
선택 수량: 5개
→ 수량을 3개 이하로 조정해 주세요.
수량 조절 버튼:
재고 범위 내에서만 증가 가능
재고 초과 시 증가 버튼 비활성화
처리
"선택 상품 주문" 버튼 비활성화
재고 내로 수량 조정 후 활성화
예외 2: 체크아웃 필드 오류
발생 시점: 체크아웃 화면에서 "결제하기" 클릭
조건
필수 필드 미입력
형식 오류 (휴대폰 번호·주소 등)
화면 표시
각 필드 아래 오류 메시지:
휴대폰 번호 *
[입력 필드에 빨간 테두리]
✗ 휴대폰 번호 형식이 올바르지 않습니다. (010-1234-5678)
화면 상단 요약 오류:
[오류 아이콘] 입력 정보를 확인해 주세요.
- 휴대폰 번호 형식 오류
- 주소 미입력
처리
"결제하기" 버튼 클릭 시 페이지 스크롤을 첫 번째 오류 필드로 이동
오류 필드에 포커스
예외 3: 쿠폰 조건 미달
발생 시점: 체크아웃 화면에서 쿠폰 선택
조건
최소 구매 금액 미달
적용 대상 카테고리 불일치
유효 기간 만료
화면 표시
쿠폰 목록 모달에서 비활성화:
첫 구매 5천 원 할인
사용 기한: 2025.02.01까지
최소 구매 금액: 30,000원
[비활성화 - 회색 처리]
✗ 이 쿠폰은 3만 원 이상 구매 시 사용 가능합니다.
현재 부족한 금액: 5,000원
처리
조건 미달 쿠폰은 선택 불가
조건과 부족 금액을 명확히 표시
예외 4: 결제 실패
발생 시점: PG 결제 처리 중
조건
카드 한도 초과
비밀번호 오류
잔액 부족
PG사 시스템 오류
화면 표시
체크아웃 화면으로 복귀하며 상단에 오류 메시지:
[오류 아이콘] 결제에 실패했습니다.
사유: 카드 한도가 초과되었습니다.
→ 다른 결제 수단을 선택하거나 카드사에 문의해 주세요.
PG사 오류 코드별 메시지:
한도 초과: "카드 한도가 초과되었습니다."
비밀번호 오류: "비밀번호가 올바르지 않습니다."
잔액 부족: "계좌 잔액이 부족합니다."
시스템 오류: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."
처리
입력한 배송지·쿠폰 정보는 유지
결제 수단만 다시 선택 가능
"결제하기" 버튼 재클릭 가능
예외 5: 중복 주문 방지
발생 시점: 주문 완료 화면에서 새로고침 또는 뒤로 가기
조건
주문 완료 후 브라우저 새로고침
주문 완료 후 뒤로 가기로 체크아웃 화면 복귀
화면 표시
주문 완료 화면 재진입 시:
[정보 아이콘] 이미 완료된 주문입니다.
주문번호: ORD-20250120-001
→ 중복 결제를 방지하기 위해 다시 주문할 수 없습니다.
처리
주문 완료 페이지에서 "결제하기" 버튼 숨김
뒤로 가기 시 체크아웃 화면이 아닌 주문 완료 화면으로 리다이렉트
예외 6: 비로그인 주문
발생 시점: 장바구니에서 "선택 상품 주문" 클릭
조건
로그인하지 않은 상태
화면 표시
로그인 모달 또는 페이지:
주문하려면 로그인이 필요합니다
[로그인하기] [회원가입]
또는
[비회원 주문하기]
비회원 주문 선택 시:
체크아웃에서 배송지 정보 입력 필드 추가
주문 조회용 비밀번호 입력 필드 추가
안내: "비회원 주문은 [주문 조회] 메뉴에서 주문번호와 비밀번호로 확인할 수 있습니다."
처리
로그인 → 기존 배송지 불러오기 가능
비회원 → 모든 정보 수동 입력
플로우 다이어그램 시각화
텍스트 플로우를 화살표 다이어그램으로 시각화하면 이해가 쉽다.
[장바구니]
↓ (상품 선택, 재고 충분)
[로그인 확인]
↓ (로그인 상태)
[체크아웃]
↓ (필수 정보 입력, 약관 동의)
[PG 결제]
↓ (결제 성공)
[주문 완료]
예외 분기:
- 장바구니 → 재고 부족 → 수량 조정
- 체크아웃 → 필드 오류 → 수정 요청
- 체크아웃 → 쿠폰 조건 미달 → 선택 불가
- PG 결제 → 실패 → 체크아웃 복귀
- 주문 완료 → 새로고침 → 중복 방지
기획, 설계 단계에서는 다이어그램을 많이 작성한다. 전체적인 흐름을 파악하고 맥락을 이해하기 위해서다. 텍스트만 있으면 한눈에 보이지 않기에 다이어그램 이미지로 그려놓으면 쉽게 전체 흐름을 파악할 수 있다.
14장까지 요구사항 분석부터 기획 초기 설계까지 진행했다. 이를 바탕으로 다음 장부터는 실제 프로토타입 화면 설계서를 작성할 예정이다. - 욕심 같아서는 UX 설계까지 진행하고 싶지만, 프로토타입을 만들면서 UX측면도 고려해 볼 생각이다. -
앞서 v0에서 프롬프트로 프로토타입을 만들고, Figma로 디자인으로 옮긴 뒤 note를 작성하기로 했다. 하지만, 조금 더 간편하고 편의성을 위해 v0대신 Figma make를 사용하려고 한다. Figma make는 올해까지는 토큰 한도 없이 무료로 사용할 수 있다. 다만, make로 만든 프로토타입을 디자인으로 전환은 유료버전을 사용해야 한다. - 프로토타입을 피그마 디자인 파일로 전환하는 방법도 소개할 예정이다. -
