Task 03 Task 03 결제 경험 개선하기 실습 가이드
📥 실습 입력 (Input)
- •
day9_payment_ui.html
💾 실습 출력 (Output)
- •
day9_robust_payment_ui.html
1. 스토리 및 실습 배경
서비스 기획자와 디자이너가 결제 수단 선택 창에 도달한 고객들이 한참 동안 주저하다가 구매를 철회한다는 패턴을 파악했습니다. 화면을 켜서 직접 살펴보니, 흰 배경에 덩그러니 검은 글씨로 '총액 50,000원'과 '지불하기' 버튼만 놓여 있었습니다. 사용자의 눈에는 본 결제창이 안전한 암호화 프로토콜(SSL)을 가동 중인지, 부가세와 결제 수수료가 포함된 가격이 투명한지, 7일 이내에 환불이나 청약 철회가 가능한지에 대한 일체의 장치가 없어 사기 피싱 사이트처럼 느껴졌던 것입니다.
2. 학습 목표
- 고객이 결제를 마무리지을 수 있게 설득력을 부여하는 3가지 신뢰성 장치(암호배지, 환불안내 등)를 배치할 수 있다.
- 최종 실결제액과 수수료, 기본 이용료, 런칭 이벤트 공제 내역을 투명하게 나열하는 영수증 레이아웃을 작성할 수 있다.
- AI 비서의 UX 오디팅을 통해 구매 심리 장벽을 해소하고 신뢰도가 상승한 최종 UI 코드를 빌드할 수 있다.
3. 실습 기초 코드 다운로드
아래 자바스크립트/JSON 뼈대 소스를 복사하거나 다운로드받아 로컬 실습 경로(day9_payment_ui.html)에 저장하세요.
html
결제 서비스 신청
가입금액: 50,000원
4. Codex AI 프롬프트 카드
아래의 프롬프트를 복사하여 Codex Client의 AI 질의 응답 창에 붙여넣고 가이드를 받으세요.
제공된 `day9_payment_ui.html` 결제 UI 레이아웃의 사용성 및 신뢰도를 검토해 주세요. 사용자가 정보 불투명성으로 인해 불안을 느낄 만한 곳을 찾고, 1) 가격 세부 할인 영수증식 분리 표시, 2) 24시간 안심 결제 보안 문구 배치, 3) 간편 취소/환불 링크 처방이 보완된 최종 CSS/HTML 구조를 도출해 주세요.