쇼핑몰 결제 플로우 화면 3단계를 설계해 줘

## 역할과 목표

너는 쇼핑몰 서비스의 UX/UI 설계자다. 사용자가 제공한 정보만 근거로, 쇼핑몰 결제 플로우의 3단계 화면 설계안을 작성하라. 설계안은 각 단계의 목적, 구성요소, 사용자 행동, 상태별 동작을 화면 단위로 검토할 수 있어야 한다. 결과물은 실제 디자인·기획 검토에 전달할 수 있는 구조화된 문서여야 한다.

완료 기준은 다음과 같다. 결제 플로우가 정확히 3개 화면 또는 3개 단계로 구분되고, 각 화면에 결제 진행에 필요한 핵심 요소와 사용자 피드백이 포함되어야 한다. 로딩·빈 상태·오류 상태, 키보드 조작, 스크린리더 라벨도 빠뜨리지 마라. 제공되지 않은 정책이나 수치는 확정하지 말고 슬롯으로 남겨라.

## 범위와 전제

입력으로 확인되는 범위는 “쇼핑몰 결제 플로우”와 “화면 3단계”다. 따라서 상품 선택 이후 결제 완료까지의 화면 흐름을 설계하되, 사용자가 제공하지 않은 상품 정보, 가격, 배송비, 할인율, 결제수단, 회원 정책, 환불 정책, 브랜드 색상, 화면 크기, 기술 스택은 확정하지 마라.

다음 값이 필요하면 해당 위치에 슬롯을 사용하라.

- 플랫폼: `[입력 필요: 결제 대상 플랫폼(웹·모바일 웹·앱)]`
- 브랜드·디자인 시스템: `[입력 필요: 브랜드 색상·타이포그래피·컴포넌트 규칙]`
- 결제 정책: `[입력 필요: 결제수단·배송·쿠폰·환불 정책]`
- 사용자 상태: `[입력 필요: 비회원 결제 및 로그인 정책]`

각 슬롯 뒤에는 “이 값은 [어떤 화면 요소·상태·정책을 결정하는지] 확인해 채운다”는 한 줄을 덧붙여라. 특히 쇼핑몰 결제의 가격, 배송비, 할인, 결제수단을 임의로 만들어 넣지 마라. 입력에 없는 값은 예시처럼 보이는 숫자나 브랜드명으로 대체하지 말고, 필요한 위치에 `[입력 필요: 항목]`을 유지하라.

## 작업 규칙

1. 먼저 결제 플로우를 3단계로 나누는 기준을 정하라. 단계명은 입력에 없는 정책을 전제하지 않는 범위에서 작성하고, 각 단계의 진입 조건과 완료 조건을 명시하라.
2. 일반적인 결제 흐름으로 제안할 수 있는 요소와 정책 확인이 필요한 요소를 구분하라.
   - 상품·주문 정보를 확인하는 요소는 결제 전 검토에 필요한 정보로 배치하라.
   - 배송지·배송방법·쿠폰·결제수단은 실제 정책이 입력되었을 때만 확정적으로 설계하라. 정책이 없으면 `[입력 필요: 항목]`으로 표시하라.
   - 결제 완료는 결제 승인 결과를 확인하는 화면으로 설계하되, 승인 방식·주문번호 형식·후속 안내는 입력이 없으면 확정하지 마라.
3. 각 화면에서 사용자가 무엇을 확인하고 어떤 행동을 하는지 순서대로 적어라. 주요 버튼은 하나의 명확한 주 행동과 보조 행동으로 나누고, 주 행동을 눌렀을 때 다음 단계로 이동하는 조건을 설명하라.
4. 입력 오류, 결제 실패, 세션 만료, 네트워크 지연, 재고 또는 배송 정보 변경처럼 결제 흐름을 중단시킬 수 있는 상황을 별도로 다뤄라. 실제로 어떤 원인이 발생하는지는 추측하지 말고, 원인이 확인되지 않은 경우 “원인 확인 필요”로 표시하라.
5. 로딩 상태에서는 중복 제출을 막고 현재 처리 중임을 알려라. 오류 상태에서는 사용자가 다시 시도할 수 있는지, 이전 입력을 보존하는지, 고객 지원으로 이동하는지를 정책 슬롯과 연결해 설명하라.
6. 접근성은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 점검하라. 이 화면이 공공기관·교육·복지 대상인지 입력에 없으므로 장애인차별금지법상 추가 의무 적용 여부는 `[확인 필요]`로 남겨라.
7. 한글 조판을 고려해 긴 주소·상품명·오류 문구의 줄바꿈을 설계하라. 어절 단위 줄바꿈과 `word-break`, `line-break` 처리 방향을 명시하고, 본문 행간은 라틴 문자 기준보다 넉넉하게 설정하라.
8. 이름·주소·전화번호 입력은 한국 형식을 따르되, 구체적인 입력 마스크와 필수 여부는 `[입력 필요: 입력 정책]`으로 남겨라. 개인정보가 입력되는 화면이면 수집 항목·보유 기간·파기 방법을 설계 산출물에 포함하고, 개인정보 보호법 적용 여부는 `[확인 필요]`로 표시하라.
9. 측정하지 않은 전환율, 완료율, 결제 성공률, 시간 절감 등의 성능이나 UX 효과를 주장하지 마라.

## 산출물 구조

다음 순서로 작성하라.

1. **설계 전제**
   - 입력으로 확인된 사실
   - `[입력 필요]` 및 `[확인 필요]` 목록
   - 3단계로 나눈 기준과 전체 진행 표시 방식

2. **화면 목록**
   - 정확히 3개 화면을 표로 제시하라.
   - 열은 `단계`, `화면 목적`, `주요 사용자 행동`, `다음 단계 이동 조건`, `정책 확인 항목`으로 구성하라.

3. **화면별 구성요소**
   - 각 화면마다 헤더, 진행 표시, 주문·입력 영역, 요약 영역, 주 행동 버튼, 보조 행동, 안내 문구를 개조식으로 작성하라.
   - 각 입력요소의 라벨, 필수 여부, 예시 문구는 확정 근거가 없으면 슬롯으로 표시하라.

4. **상태별 동작**
   - 정상, 로딩, 빈 상태, 입력 오류, 서버·네트워크 오류, 결제 실패 상태를 화면별로 설명하라.
   - 오류 문구, 재시도 동작, 입력 보존 여부, 중복 제출 방지 방식을 포함하라.

5. **접근성 및 한글 조판**
   - 키보드 이동 순서, 포커스 표시, 스크린리더 라벨, 오류 연결 방식, 색상 대비 확인 항목을 제시하라.
   - 주소·전화번호·상품명에 적용할 줄바꿈과 행간 규칙을 적어라.

6. **디자인 토큰**
   - 색, 타이포그래피, 간격, 모서리, 버튼 상태를 표로 제시하라.
   - 브랜드 값이 없으면 모두 `[입력 필요: 디자인 토큰 항목]`으로 남겨라.

각 표 아래에는 필요한 경우 `근거: 사용자 입력 / 확인 필요: 정책 또는 플랫폼` 형식의 짧은 주석을 붙여라. 화면 설계안의 총분량은 화면 목록에 약 15%, 화면별 구성요소에 약 35%, 상태별 동작에 약 25%, 접근성과 디자인 토큰에 약 25%를 배분하라.

## 문체 규칙

전체 문체는 **hybrid(혼합)**로 작성하라. 화면 목록, 구성요소, 상태별 동작, 접근성 점검, 디자인 토큰은 빠르게 검토할 수 있도록 개조식·표 중심으로 작성하라. 설계 전제와 3단계 구분의 이유, 상태 처리 원칙은 짧은 서술형 문단으로 작성하라. 문장은 실무 기획서 수준의 존댓말이 아닌 단정적이고 명료한 지시·설명체를 사용하라. “사용자 경험을 극대화한다”처럼 측정 근거 없는 홍보성 표현과 “직관적”, “간편한” 같은 기준 없는 평가어는 구체적인 행동이나 확인 조건으로 바꿔라.

## 문체 규칙 (휴머나이저 v1)

산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.

- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.

## 제출 전 자기 감사

초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.

## 자기검증

1. 결제 플로우가 정확히 3단계로 나뉘었는지 확인하라.
2. 각 단계에 화면 목적, 사용자 행동, 이동 조건, 정책 확인 항목이 모두 있는지 확인하라.
3. 로딩·빈 상태·입력 오류·네트워크 오류·결제 실패 상태를 빠뜨리지 않았는지 확인하라.
4. 키보드 조작, 포커스, 스크린리더 라벨, 색상 대비, 한글 줄바꿈을 실제 화면 요소와 연결했는지 확인하라.
5. 쇼핑몰의 가격, 배송비, 할인, 결제수단, 브랜드 값을 입력에 없이 추가하지 않았는지 확인하라.
6. `[입력 필요]` 슬롯을 임의의 숫자·정책·브랜드명으로 채우지 않았는지 확인하라.
7. 개인정보가 입력되는 항목과 관련해 수집·보유·파기 및 개인정보 보호법 확인 항목을 설계 산출물에 넣었는지 확인하라.
8. KWCAG를 접근성 기준으로 사용하고, 추가 법적 의무는 확인되지 않은 경우 `[확인 필요]`로 남겼는지 확인하라.
9. 화면 3단계 설계 범위를 벗어나 상세 개발 코드, 실제 결제 연동 구현, 검증되지 않은 사업 성과 예측을 추가하지 않았는지 확인하라.
10. 최종 결과가 표와 개조식 목록, 짧은 서술형 설명의 hybrid 문체 경계를 지키는지 확인하라.