주소/결제 요약/동의
결제는 구매 전환의 최종 관문이다. 장바구니에서 넘어온 고객이 배송 정보를 입력하고, 결제 수단을 선택하며, 약관에 동의한 뒤 결제를 완료하는 단계다. 이 화면의 이탈률이 곧 매출 손실로 직결된다.
Desktop (1440×900)
헤더 (80px) - 간소화 버전 (로고 + 단계 표시만)
├─ 단계 인디케이터 "1.장바구니 > 2.주문/결제 > 3.완료"
└─ 본문 영역 (1200px 중앙 정렬)
├─ 좌측 입력 영역 (720px)
│ ├─ 배송 정보 섹션
│ │ ├─ 배송지 선택 (기본배송지/신규입력/배송지목록)
│ │ ├─ 수령인 정보 (이름/연락처)
│ │ ├─ 주소 입력 (우편번호/기본주소/상세주소)
│ │ └─ 배송 메모 선택
│ ├─ 주문 상품 섹션 (접힘 가능)
│ │ └─ 상품 리스트 요약
│ ├─ 쿠폰/적립금 섹션
│ │ ├─ 쿠폰 적용
│ │ └─ 적립금 사용
│ ├─ 결제 수단 섹션
│ │ ├─ 신용카드
│ │ ├─ 계좌이체
│ │ ├─ 네이버페이
│ │ ├─ 카카오페이
│ │ └─ 휴대폰 결제
│ └─ 약관 동의 섹션
│ ├─ 전체 동의
│ ├─ [필수] 구매조건 확인
│ ├─ [필수] 개인정보 수집 동의
│ └─ [선택] 마케팅 수신 동의
└─ 우측 결제 요약 영역 (400px, Sticky)
├─ 주문 상품 요약
├─ 금액 상세
│ ├─ 총 상품 금액
│ ├─ 상품 할인
│ ├─ 쿠폰 할인
│ ├─ 적립금 사용
│ ├─ 배송비
│ └─ 총 결제 금액
├─ 적립 예정 포인트
└─ CTA 버튼 "결제하기"
푸터 (간소화)
Mobile (390×844)
헤더 (56px)
├─ 뒤로가기 + "주문/결제" + 단계 (2/3)
├─ 배송 정보 섹션
│ ├─ 배송지 선택 탭
│ ├─ 수령인/연락처
│ ├─ 주소
│ └─ 배송 메모
├─ 주문 상품 (접힘, 탭하여 펼침)
├─ 할인 적용 (접힘)
├─ 결제 수단 (가로 스크롤 탭)
├─ 약관 동의
└─ 하단 고정 결제 바 (140px)
├─ 금액 요약
└─ "결제하기" 버튼
Desktop 전체 레이아웃
결제 페이지를 만들어줘. 장바구니에서 주문하기 버튼 클릭 시 이동하는 페이지야.
상단 헤더 80픽셀 높이, 흰색 배경, 하단 테두리 1픽셀 연한 회색:
- 좌측 로고 120×32픽셀
- 중앙 단계 인디케이터: "장바구니" 회색 14픽셀 → 화살표 → "주문/결제" 파란색 16픽셀 굵게 → 화살표 → "완료" 회색 14픽셀
- 우측 여백 유지 (장바구니/검색 아이콘 없음)
본문 영역 1200픽셀 중앙 정렬, 상단 여백 32픽셀.
페이지 제목 "주문/결제" 28픽셀 굵게, 좌측 정렬.
좌측 입력 영역 720픽셀 너비:
배송 정보 섹션:
- 섹션 제목 "배송 정보" 20픽셀 굵게, 하단 여백 20픽셀
- 배송지 선택 탭 3개 가로 배치:
- "기본 배송지" 탭 활성화, 파란 배경 흰색 글씨 120×40픽셀
- "새 배송지" 탭 비활성화, 흰색 배경 회색 테두리
- "배송지 목록" 탭 비활성화
기본 배송지 선택 시 표시되는 정보 카드 720×160픽셀, 연한 회색 배경 #F8F8F8, 모서리 8픽셀, 패딩 20픽셀:
- 상단 "기본 배송지" 배지 파란 테두리 파란 글씨 12픽셀
- 수령인 "홍길동" 16픽셀 굵게
- 연락처 "010-1234-5678" 15픽셀
- 주소 "(12345) 서울시 강남구 테헤란로 123, 456호" 15픽셀
- 우측 상단 "변경" 링크 14픽셀 파란색
새 배송지 입력 폼 (새 배송지 탭 선택 시):
- 수령인 입력 필드 340×48픽셀, 라벨 "수령인 *" 14픽셀
- 연락처 입력 필드 340×48픽셀, 라벨 "연락처 *", placeholder "010-0000-0000"
- 우편번호 입력 필드 200×48픽셀 + "주소 검색" 버튼 120×48픽셀 파란 테두리
- 기본 주소 입력 필드 720×48픽셀, 읽기 전용
- 상세 주소 입력 필드 720×48픽셀, placeholder "상세 주소 입력"
- "기본 배송지로 저장" 체크박스 + 라벨 14픽셀
배송 메모 드롭다운 720×48픽셀:
- 라벨 "배송 메모" 14픽셀
- 선택값 "배송 메모를 선택해주세요"
- 우측 화살표 아이콘
구분선 1픽셀 연한 회색, 상하 32픽셀 여백.
주문 상품 섹션:
- 섹션 제목 "주문 상품 (3개)" 20픽셀 굵게 + 우측 접기/펼치기 화살표
- 펼침 상태: 상품 카드 3개 세로 배치
- 상품 카드 720×80픽셀:
- 이미지 60×60픽셀, 모서리 4픽셀
- 상품명 "에어맥스 97 실버불릿" 15픽셀, 1줄 말줄임
- 옵션 "검정 / 270 / 2개" 13픽셀 회색
- 우측 가격 "258,000원" 15픽셀 굵게
구분선 상하 32픽셀.
쿠폰/적립금 섹션:
- "할인 적용" 섹션 제목 20픽셀 굵게
쿠폰 영역:
- "쿠폰" 라벨 15픽셀 + 우측 "사용 가능 3장" 파란 링크
- 쿠폰 입력 필드 560×48픽셀 + "적용" 버튼 120×48픽셀
- 적용된 쿠폰 표시: "첫 구매 10% (-51,600원)" 초록 배경 카드
적립금 영역 쿠폰 아래 20픽셀:
- "적립금" 라벨 15픽셀 + 우측 "보유 5,000원" 회색
- 적립금 입력 필드 560×48픽셀, placeholder "사용할 적립금 입력"
- "전액 사용" 버튼 120×48픽셀 회색 테두리
구분선 상하 32픽셀.
결제 수단 섹션:
- 섹션 제목 "결제 수단" 20픽셀 굵게
결제 수단 라디오 버튼 5개 세로 배치, 간격 12픽셀:
- 각 항목 720×56픽셀, 테두리 1픽셀 연한 회색, 모서리 8픽셀, 패딩 16픽셀
- 선택된 항목: 파란 테두리 2픽셀, 연한 파란 배경 #F0F7FF
신용/체크카드:
- 라디오 버튼 20픽셀 + 카드 아이콘 24픽셀 + "신용/체크카드" 15픽셀
- 선택 시 하단 확장: 카드사 선택 드롭다운 + 할부 선택 드롭다운
계좌이체:
- 라디오 버튼 + 은행 아이콘 + "계좌이체" 15픽셀
네이버페이:
- 라디오 버튼 + 네이버페이 로고 80×24픽셀 + "네이버페이"
카카오페이:
- 라디오 버튼 + 카카오페이 로고 80×24픽셀 + "카카오페이"
휴대폰 결제:
- 라디오 버튼 + 폰 아이콘 + "휴대폰 결제"
구분선 상하 32픽셀.
약관 동의 섹션:
- 섹션 제목 "약관 동의" 20픽셀 굵게
전체 동의 영역 720×56픽셀, 연한 회색 배경, 모서리 8픽셀:
- 체크박스 20×20픽셀 + "전체 동의합니다" 16픽셀 굵게
개별 약관 리스트 패딩 좌측 36픽셀:
- "[필수] 구매조건 확인 및 결제 진행 동의" 체크박스 + 라벨 14픽셀 + 우측 "보기" 링크
- "[필수] 개인정보 수집·이용 동의" 체크박스 + 라벨 + "보기" 링크
- "[필수] 개인정보 제3자 제공 동의" 체크박스 + 라벨 + "보기" 링크
- "[선택] 마케팅 정보 수신 동의" 체크박스 + 라벨 + "보기" 링크
우측 결제 요약 영역 400픽셀 너비, 좌측과 40픽셀 간격:
- position sticky, 상단 100픽셀 고정
- 흰색 배경, 테두리 1픽셀 연한 회색, 모서리 12픽셀, 패딩 24픽셀
주문 상품 요약:
- "주문 상품" 16픽셀 굵게 + 우측 "3개" 회색
- 대표 상품 이미지 48×48픽셀 3개 겹쳐서 표시
구분선 상하 16픽셀.
금액 상세:
- "총 상품 금액" / "636,000원" 15픽셀, 좌우 정렬
- "상품 할인" / "-120,000원" 15픽셀 빨간색
- "쿠폰 할인" / "-51,600원" 15픽셀 빨간색
- "적립금 사용" / "-5,000원" 15픽셀 빨간색
- "배송비" / "무료" 15픽셀 초록색
- 구분선 1픽셀, 상하 16픽셀
- "총 결제 금액" / "459,400원" 22픽셀 굵게
적립 예정:
- "구매 시 4,594원 적립 예정" 13픽셀 파란색
CTA 버튼 "459,400원 결제하기" 352×56픽셀 파란 배경 흰색 글씨 18픽셀 굵게, 상단 24픽셀 여백.
안내 문구 "위 주문 내용을 확인했으며 결제에 동의합니다" 12픽셀 회색 중앙, 버튼 아래 12픽셀.
Desktop 새 배송지 입력 폼
결제페이지에서 새 배송지 탭 선택 시 표시되는 입력 폼을 만들어줘.
배송지 선택 탭:
- "기본 배송지" 비활성화, 흰색 배경 회색 테두리
- "새 배송지" 활성화, 파란 배경 흰색 글씨
- "배송지 목록" 비활성화
입력 폼 영역 720픽셀 너비, 상단 여백 20픽셀:
첫 번째 행 2열:
- 수령인 필드 340×48픽셀:
- 라벨 "수령인 *" 14픽셀, 라벨 아래 8픽셀
- 입력 필드 테두리 1픽셀 회색, 모서리 6픽셀
- placeholder "이름 입력"
- 연락처 필드 340×48픽셀, 좌측 필드와 20픽셀 간격:
- 라벨 "연락처 *"
- placeholder "010-0000-0000"
두 번째 행:
- 우편번호 필드 200×48픽셀 읽기 전용 회색 배경
- "주소 검색" 버튼 120×48픽셀 파란 테두리 파란 글씨, 좌측 필드와 12픽셀 간격
세 번째 행:
- 기본 주소 필드 720×48픽셀, 읽기 전용 회색 배경
- 라벨 "주소"
네 번째 행:
- 상세 주소 필드 720×48픽셀
- 라벨 "상세 주소 *"
- placeholder "동/호수, 건물명 등"
다섯 번째 행:
- 체크박스 20×20픽셀 + "기본 배송지로 저장" 14픽셀
- 상단 여백 16픽셀
Desktop 배송지 목록 모달
결제페이지에서 배송지 목록 선택 모달을 만들어줘.
반투명 검정 오버레이 opacity 0.5.
중앙 모달 560×600픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼 24×24픽셀
모달 헤더 60픽셀 높이, 하단 테두리 1픽셀:
- "배송지 목록" 제목 20픽셀 굵게 중앙
- 우측 "+ 새 배송지 추가" 링크 14픽셀 파란색
배송지 리스트 스크롤 영역 높이 440픽셀, 패딩 20픽셀:
배송지 카드 512×120픽셀, 테두리 1픽셀 연한 회색, 모서리 8픽셀, 간격 12픽셀:
- 좌측 라디오 버튼 20×20픽셀
- 배송지 정보:
- 첫 줄: "홍길동" 16픽셀 굵게 + "기본" 배지 파란 배경 흰색 12픽셀
- "010-1234-5678" 14픽셀 회색
- "(12345) 서울시 강남구 테헤란로 123, 456호" 14픽셀, 2줄 허용
- 우측 "수정" / "삭제" 링크 13픽셀 회색
선택된 배송지 카드:
- 파란 테두리 2픽셀
- 라디오 버튼 파란 채워짐
모달 하단 버튼 영역 패딩 20픽셀:
- "취소" 버튼 240×48픽셀 흰색 배경 회색 테두리
- "선택 완료" 버튼 240×48픽셀 파란 배경
- 버튼 간격 16픽셀
Desktop 주소 검색 모달
결제페이지에서 우편번호/주소 검색 모달을 만들어줘.
반투명 검정 오버레이 opacity 0.5.
중앙 모달 480×520픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼
모달 헤더 60픽셀:
- "주소 검색" 제목 20픽셀 굵게 중앙
검색 입력 영역 패딩 20픽셀:
- 검색 필드 360×48픽셀 + "검색" 버튼 80×48픽셀
- placeholder "도로명, 건물명, 지번 검색"
- 검색 아이콘 필드 좌측 내부 20픽셀
검색 결과 없을 때:
- "검색어를 입력해주세요" 중앙 회색 15픽셀
- 예시: "예) 테헤란로 123, 삼성동 45-1"
검색 결과 있을 때 리스트:
- 주소 항목 440×72픽셀, 하단 테두리 1픽셀
- 우편번호 "[12345]" 13픽셀 회색
- 도로명 주소 "서울특별시 강남구 테헤란로 123" 15픽셀
- 지번 주소 "(삼성동 45-1)" 13픽셀 회색
- 클릭 시 파란 배경 #F0F7FF
Desktop 배송 메모 드롭다운
결제페이지에서 배송 메모 드롭다운 펼침 상태를 만들어줘.
드롭다운 필드 720×48픽셀:
- 선택값 "배송 메모를 선택해주세요" 15픽셀
- 우측 위 화살표 아이콘 (펼침 상태)
- 파란 테두리 2픽셀 (포커스 상태)
드롭다운 옵션 리스트 720픽셀 너비, 필드 바로 아래:
- 흰색 배경, 테두리 1픽셀 회색, 모서리 8픽셀, 그림자
- 각 옵션 720×48픽셀, 패딩 좌우 16픽셀:
- "문 앞에 놓아주세요" 15픽셀
- "경비실에 맡겨주세요"
- "택배함에 넣어주세요"
- "배송 전 연락 부탁드립니다"
- "직접 입력" + 우측 연필 아이콘
hover 상태: 연한 회색 배경 #F8F8F8
선택된 항목: 파란 배경 #F0F7FF + 체크 아이콘
직접 입력 선택 시:
- 드롭다운 아래 텍스트 입력 필드 720×48픽셀 나타남
- placeholder "배송 메모를 입력해주세요 (최대 50자)"
- 우측 글자 수 "0/50" 12픽셀 회색
Desktop 결제 수단 선택 상태들
결제페이지에서 결제 수단 선택의 여러 상태를 만들어줘.
상태 1 - 신용카드 선택됨:
결제 수단 카드 720×120픽셀, 파란 테두리 2픽셀, 연한 파란 배경:
- 라디오 버튼 선택됨 파란색
- 카드 아이콘 24픽셀 + "신용/체크카드" 15픽셀 굵게
확장된 옵션 영역 패딩 좌측 44픽셀:
- 카드사 선택 드롭다운 320×44픽셀, 라벨 "카드사 선택"
- 할부 선택 드롭다운 160×44픽셀, 라벨 "할부 기간"
- 옵션: 일시불, 2개월, 3개월...12개월
- "5만원 이상 결제 시 무이자 할부 가능" 안내 12픽셀 파란색
상태 2 - 네이버페이 선택됨:
결제 수단 카드 720×56픽셀, 파란 테두리:
- 라디오 버튼 선택됨
- 네이버페이 로고 80×24픽셀
- "네이버페이로 결제" 15픽셀
하단 안내:
- "네이버 앱 또는 웹에서 간편하게 결제합니다" 13픽셀 회색
상태 3 - 카카오페이 선택됨:
결제 수단 카드 720×56픽셀, 파란 테두리:
- 라디오 버튼 선택됨
- 카카오페이 로고 80×24픽셀 노란 배경
- "카카오페이로 결제"
하단 안내:
- "카카오톡에서 간편하게 결제합니다" 13픽셀 회색
상태 4 - 계좌이체 선택됨:
결제 수단 카드 720×80픽셀, 파란 테두리:
- 라디오 버튼 선택됨
- 은행 아이콘 + "계좌이체"
확장 영역:
- "은행 선택" 드롭다운 320×44픽셀
- "현금영수증 발급" 체크박스 + "개인소득공제용" / "사업자지출증빙용" 라디오
상태 5 - 휴대폰 결제 선택됨:
결제 수단 카드 720×56픽셀, 파란 테두리:
- 라디오 버튼 선택됨
- 폰 아이콘 + "휴대폰 결제"
하단 안내:
- "통신사 확인 후 결제가 진행됩니다" 13픽셀 회색
Desktop 약관 동의 상태들
결제페이시에서 약관 동의 영역의 여러 상태를 만들어줘.
상태 1 - 미동의 상태:
전체 동의 영역:
- 체크박스 빈 상태 20×20픽셀 회색 테두리
- "전체 동의합니다" 16픽셀
개별 약관 모두 미체크:
- 체크박스 빈 상태 + 라벨 14픽셀
상태 2 - 전체 동의 체크:
전체 동의 영역:
- 체크박스 파란 배경 흰색 체크 아이콘
- "전체 동의합니다" 16픽셀 굵게
개별 약관 모두 자동 체크:
- 모든 체크박스 파란 배경 체크
상태 3 - 일부만 동의:
전체 동의 체크박스:
- 대시(-) 표시, 파란 배경 (부분 선택 상태)
필수 약관만 체크:
- [필수] 3개 체크됨
- [선택] 미체크
상태 4 - 필수 약관 미동의 시 에러:
CTA 버튼 클릭 시:
- 미체크된 필수 약관 라벨 빨간색 변경
- 약관 영역 상단 에러 메시지:
- 경고 아이콘 + "필수 약관에 동의해주세요" 빨간 14픽셀
- 미동의 약관으로 스크롤 이동
Desktop 약관 상세 모달
결제페이지에서 약관 상세 보기 모달을 만들어줘.
반투명 검정 오버레이 opacity 0.5.
중앙 모달 640×560픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼
모달 헤더 60픽셀:
- "개인정보 수집·이용 동의" 제목 18픽셀 굵게 중앙
약관 내용 스크롤 영역 높이 400픽셀, 패딩 24픽셀:
- 본문 텍스트 14픽셀 줄간격 1.6
- 표 형태 수집 항목:
- "수집 항목" / "수집 목적" / "보유 기간" 헤더
- "이름, 연락처, 주소" / "주문/배송" / "5년"
- "결제 정보" / "결제 처리" / "5년"
모달 하단 버튼 영역:
- "확인" 버튼 592×48픽셀 파란 배경 중앙
Desktop 쿠폰 선택 모달
결제페이지에서 쿠폰 선택 모달을 만들어줘. 장바구니 쿠폰 모달과 유사하지만 주문 금액 기준 적용.
반투명 검정 오버레이 opacity 0.5.
중앙 모달 520×600픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼
모달 헤더 60픽셀:
- "쿠폰 선택" 제목 20픽셀 굵게 중앙
주문 금액 안내 패딩 20픽셀, 연한 파란 배경:
- "현재 주문 금액: 516,000원" 15픽셀
쿠폰 입력 영역:
- 입력 필드 380×48픽셀 + "등록" 버튼 80×48픽셀
"보유 쿠폰 3장" 라벨 14픽셀 회색.
쿠폰 리스트:
- 사용 가능 쿠폰 파란 테두리
- 조건 미달 쿠폰 회색 처리 + "최소 주문 금액 미달" 빨간 텍스트
모달 하단:
- "취소" / "적용하기" 버튼
Desktop 적립금 사용 상태들
결제페이지에서 적립금 사용 영역의 여러 상태를 만들어줘.
상태 1 - 적립금 미사용:
적립금 영역:
- "적립금" 라벨 15픽셀 + 우측 "보유 5,000원" 회색
- 입력 필드 560×48픽셀 빈 상태, placeholder "사용할 적립금 입력"
- "전액 사용" 버튼 120×48픽셀 회색 테두리
상태 2 - 적립금 입력 중:
- 입력 필드에 "3000" 입력됨
- 필드 하단 안내 "3,000원 사용 / 잔여 2,000원" 13픽셀 회색
상태 3 - 전액 사용 클릭:
- 입력 필드에 "5000" 자동 입력
- "전액 사용" 버튼 파란 배경 흰색 글씨로 변경
- 필드 하단 "5,000원 사용 / 잔여 0원"
상태 4 - 보유 적립금 초과 입력:
- 입력 필드에 "10000" 입력
- 필드 빨간 테두리
- 에러 메시지 "보유 적립금을 초과했습니다" 빨간 13픽셀
상태 5 - 최소 사용 금액 미달:
- 입력 필드에 "500" 입력
- 에러 메시지 "최소 1,000원부터 사용 가능합니다" 빨간 13픽셀
상태 6 - 적립금 없음:
- "적립금" 라벨 + 우측 "보유 0원" 회색
- 입력 필드 비활성화 회색 배경
- "전액 사용" 버튼 비활성화
Desktop 결제 요약 고정 영역
결제페이지 우측 결제 요약 영역 상세를 만들어줘.
결제 요약 컨테이너 400×520픽셀:
- 흰색 배경, 테두리 1픽셀 #E5E5E5, 모서리 12픽셀
- 패딩 24픽셀
- position sticky, top 100픽셀
주문 상품 요약:
- "주문 상품" 16픽셀 굵게 + 우측 "3개" 14픽셀 회색
- 상품 이미지 3개 겹침 표시:
- 첫 번째 48×48픽셀 z-index 3
- 두 번째 48×48픽셀 좌측으로 -16픽셀 z-index 2
- 세 번째 48×48픽셀 좌측으로 -16픽셀 z-index 1
- "상품 정보 보기" 링크 13픽셀 파란색
구분선 1픽셀 #E5E5E5, 상하 20픽셀.
금액 상세 리스트 줄 간격 12픽셀:
- "총 상품 금액" 15픽셀 / "636,000원" 15픽셀 우측 정렬
- "상품 할인" 15픽셀 / "-120,000원" 15픽셀 빨간색
- "쿠폰 할인" 15픽셀 / "-51,600원" 15픽셀 빨간색
- "적립금 사용" 15픽셀 / "-5,000원" 15픽셀 빨간색
- "배송비" 15픽셀 / "무료" 15픽셀 초록색
할인/적립금 미적용 시:
- 해당 라인 표시 안함 또는 "0원" 회색 표시
구분선 상하 20픽셀.
총 결제 금액:
- "총 결제 금액" 16픽셀 / "459,400원" 24픽셀 굵게 빨간색
적립 예정:
- 코인 아이콘 16픽셀 + "구매 시 4,594원 적립 예정" 13픽셀 파란색
CTA 버튼 영역 상단 24픽셀:
- "459,400원 결제하기" 352×56픽셀
- 파란 배경 #2563EB, 흰색 글씨 18픽셀 굵게
- 모서리 8픽셀
안내 문구:
- "위 주문 내용을 확인했으며 결제에 동의합니다" 12픽셀 회색 중앙
- CTA 버튼 아래 12픽셀
Desktop 필드 검증 에러 상태
결제페이지에서 입력 필드 검증 에러 상태들을 만들어줘.
수령인 필드 에러:
- 입력 필드 빨간 테두리 2픽셀
- 라벨 "수령인 *" 빨간색
- 필드 아래 에러 메시지 "수령인을 입력해주세요" 빨간 13픽셀
- 경고 아이콘 16픽셀 + 메시지
연락처 필드 에러 - 형식 오류:
- 입력값 "01012345678" (하이픈 없음)
- 빨간 테두리
- 에러 메시지 "연락처 형식이 올바르지 않습니다 (010-0000-0000)"
상세 주소 필드 에러:
- 빈 필드 빨간 테두리
- 에러 메시지 "상세 주소를 입력해주세요"
여러 필드 동시 에러 시:
- 에러 있는 모든 필드 빨간 테두리
- 화면 상단 요약 에러 배너 720×48픽셀, 연한 빨강 배경:
- 경고 아이콘 + "입력 정보를 확인해주세요"
- "수령인, 연락처, 상세 주소" 빨간 텍스트
Desktop CTA 버튼 상태들
결제페이지에서 결제하기 버튼의 여러 상태를 만들어줘.
상태 1 - 기본 활성화:
- 버튼 352×56픽셀 파란 배경 #2563EB
- "459,400원 결제하기" 흰색 18픽셀 굵게
상태 2 - 호버:
- 파란 배경 #1D4ED8 (더 진한 파란)
- 커서 pointer
상태 3 - 비활성화 (필수 정보 미입력):
- 버튼 회색 배경 #D1D5DB
- 글씨 회색 #9CA3AF
- 클릭 불가
상태 4 - 로딩 (결제 처리 중):
- 파란 배경 유지
- 텍스트 대신 흰색 스피너 24×24픽셀
- "결제 처리 중..." 텍스트 스피너 우측
상태 5 - 필수 동의 미체크:
- 버튼 클릭 시 약관 영역으로 스크롤
- 버튼 일시적 빨간 배경 flash 200ms
- 툴팁 "필수 약관에 동의해주세요"
Mobile 전체 레이아웃
모바일 결제페이지를 만들어줘. 장바구니에서 주문하기 클릭했을때 이동해줘.
상단 헤더 56픽셀 높이:
- 뒤로가기 화살표 아이콘 24픽셀
- 중앙 "주문/결제" 18픽셀 굵게
- 우측 단계 표시 "2/3" 14픽셀 회색
배송 정보 섹션 패딩 16픽셀:
- 섹션 제목 "배송 정보" 18픽셀 굵게
배송지 선택 탭 3개 가로 배치, 각 116×40픽셀:
- "기본 배송지" 활성화 파란 배경
- "새 배송지" 비활성화
- "배송지 목록" 비활성화
기본 배송지 카드 358×140픽셀, 연한 회색 배경, 모서리 8픽셀:
- "기본 배송지" 배지
- "홍길동" 15픽셀 굵게
- "010-1234-5678" 14픽셀
- 주소 14픽셀, 2줄
- 우측 상단 "변경" 링크
배송 메모 드롭다운 358×48픽셀.
구분선 8픽셀 높이 회색 배경.
주문 상품 섹션 (접힘 상태):
- "주문 상품 (3개)" 16픽셀 굵게 + 우측 아래 화살표
- 탭 시 펼침
할인 적용 섹션 (접힘 상태):
- "할인 적용" 16픽셀 굵게 + 적용된 할인 "-56,600원" 빨간색 + 화살표
- 탭 시 펼침: 쿠폰/적립금 영역
결제 수단 섹션:
- "결제 수단" 18픽셀 굵게
- 결제 수단 가로 스크롤 탭:
- "카드" / "계좌이체" / "네이버페이" / "카카오페이" / "휴대폰"
- 각 탭 80×44픽셀
- 선택된 탭 파란 하단 테두리 2픽셀
선택된 결제 수단 옵션 영역:
- 카드 선택 시: 카드사/할부 드롭다운
약관 동의 섹션:
- 전체 동의 체크박스 영역 358×52픽셀 회색 배경
- 개별 약관 리스트
하단 고정 결제 바 140픽셀 높이:
- 흰색 배경, 상단 그림자
금액 요약 영역 60픽셀:
- 좌측 "총 결제금액" 14픽셀
- 우측 "459,400원" 22픽셀 굵게
- 아래 "적립 예정 4,594원" 12픽셀 파란색
버튼 영역:
- "결제하기" 버튼 358×52픽셀 파란 배경 중앙
바텀 내비게이션 숨김 (체크아웃에서는 불필요).
Mobile 새 배송지 입력 폼
모바일 결제페이시에서 새 배송지 입력 폼을 만들어줘.
배송지 선택 탭 "새 배송지" 활성화.
입력 폼 영역 패딩 16픽셀:
수령인 필드 358×48픽셀:
- 라벨 "수령인 *" 14픽셀
- 입력 필드 모서리 6픽셀
연락처 필드 358×48픽셀:
- 라벨 "연락처 *"
- placeholder "010-0000-0000"
주소 영역:
- 우편번호 필드 220×48픽셀 + "검색" 버튼 126×48픽셀
- 기본 주소 필드 358×48픽셀 읽기 전용
- 상세 주소 필드 358×48픽셀
"기본 배송지로 저장" 체크박스.
Mobile 배송지 목록 바텀시트
모바일 결제페이지에서 배송지 목록 바텀시트를 만들어줘.
반투명 검정 오버레이 opacity 0.5.
하단 바텀시트 390×520픽셀:
- 흰색 배경, 상단 모서리 16픽셀
- 상단 핸들바 32×4픽셀 회색 중앙
바텀시트 헤더 56픽셀:
- X 닫기 + "배송지 목록" 18픽셀 굵게
- 우측 "+ 추가" 링크
배송지 카드 리스트 스크롤:
- 각 카드 358×100픽셀
- 라디오 버튼 + 수령인/연락처/주소
- "기본" 배지 (해당 시)
하단 고정:
- "선택 완료" 버튼 358×52픽셀 파란 배경
Mobile 주소 검색 바텀시트
모바일 결제페이시에서 주소 검색 바텀시트를 만들어줘.
반투명 검정 오버레이 opacity 0.5.
하단 바텀시트 390×480픽셀:
- 흰색 배경, 상단 모서리 16픽셀
- 상단 핸들바
바텀시트 헤더 56픽셀:
- X 닫기 + "주소 검색" 18픽셀 굵게
검색 입력 영역:
- 검색 필드 358×48픽셀, 검색 아이콘 내부
- placeholder "도로명, 건물명, 지번 검색"
검색 결과 리스트:
- 각 항목 358×64픽셀
- 우편번호 + 도로명 주소 + 지번 주소
- 탭 시 선택 + 바텀시트 닫기
Mobile 주문 상품 펼침 상태
모바일 결제페이시에서 주문 상품 섹션 펼침 상태를 만들어줘.
주문 상품 헤더:
- "주문 상품 (3개)" 16픽셀 굵게 + 위 화살표
상품 리스트 펼침:
- 상품 카드 358×72픽셀 각각
- 이미지 56×56픽셀 + 상품명/옵션/가격
- 3개 세로 배치
"접기" 텍스트 링크 우측 정렬.
Mobile 할인 적용 펼침 상태
모바일 결제페이지에서 할인 적용 섹션 펼침 상태를 만들어줘.
할인 적용 헤더:
- "할인 적용" 16픽셀 굵게 + 위 화살표
쿠폰 영역:
- "쿠폰" 라벨 + "사용 가능 3장" 링크
- 적용된 쿠폰 카드 또는 "쿠폰 선택" 버튼 358×44픽셀
적립금 영역:
- "적립금" 라벨 + "보유 5,000원"
- 입력 필드 260×44픽셀 + "전액" 버튼 86×44픽셀
Mobile 결제 수단 탭 상세
모바일 결제페이지에서 결제 수단 가로 스크롤 탭을 만들어줘.
결제 수단 탭 영역 가로 스크롤:
- 각 탭 80×44픽셀
- "카드" 선택됨: 파란 하단 테두리 2픽셀, 굵은 글씨
- "계좌이체" 비선택: 회색 글씨
- "네이버페이" 비선택 + 로고 아이콘
- "카카오페이" 비선택 + 로고 아이콘
- "휴대폰" 비선택
카드 선택 시 옵션:
- 카드사 드롭다운 358×48픽셀
- 할부 드롭다운 358×48픽셀
- "5만원 이상 무이자 할부" 안내 12픽셀 파란색
간편결제 선택 시:
- 해당 결제 로고 중앙 표시
- "버튼 클릭 시 결제창으로 이동합니다" 안내
Mobile 약관 동의 영역
모바일 결제페이시에서 약관 동의 영역을 만들어줘.
전체 동의 영역 358×52픽셀:
- 연한 회색 배경, 모서리 8픽셀
- 체크박스 20×20픽셀 + "전체 동의합니다" 15픽셀 굵게
개별 약관 리스트 패딩 좌측 20픽셀, 간격 12픽셀:
- 각 항목: 체크박스 + 라벨 14픽셀 + "보기" 링크 우측
- "[필수] 구매조건 확인 및 결제 진행 동의"
- "[필수] 개인정보 수집·이용 동의"
- "[필수] 개인정보 제3자 제공 동의"
- "[선택] 마케팅 정보 수신 동의"
약관 보기 탭 시:
- 약관 상세 바텀시트 슬라이드업
Mobile 약관 상세 바텀시트
모바일 결제페이지에서 약관 상세 바텀시트를 만들어줘.
반투명 검정 오버레이 opacity 0.5.
하단 바텀시트 390×480픽셀:
- 흰색 배경, 상단 모서리 16픽셀
- 상단 핸들바
바텀시트 헤더 56픽셀:
- X 닫기 + 약관 제목 16픽셀 굵게
약관 내용 스크롤 영역:
- 본문 텍스트 14픽셀 줄간격 1.6
- 패딩 16픽셀
하단 고정:
- "확인" 버튼 358×48픽셀 파란 배경
Mobile 쿠폰 선택 바텀시트
모바일 결제페이지에서 쿠폰 선택 바텀시트를 만들어줘.
반투명 검정 오버레이 opacity 0.5.
하단 바텀시트 390×520픽셀:
- 흰색 배경, 상단 모서리 16픽셀
- 상단 핸들바
바텀시트 헤더 56픽셀:
- X 닫기 + "쿠폰 선택" 18픽셀 굵게
주문 금액 안내 연한 파란 배경 패딩 12픽셀:
- "현재 주문 금액: 516,000원" 14픽셀
쿠폰 입력:
- 입력 필드 268×44픽셀 + "등록" 버튼 78×44픽셀
쿠폰 리스트:
- 각 카드 358×80픽셀
- 라디오 + 쿠폰명 + 조건 + 할인 금액
하단 고정:
- "적용하기" 버튼 358×48픽셀 파란 배경
Loading 상태 (Desktop)
Desktop 결제페이지 로딩 상태를 만들어줘.
배송 정보 섹션 스켈레톤:
- 배송지 탭 스켈레톤 3개
- 배송지 카드 스켈레톤 720×160픽셀
주문 상품 섹션 스켈레톤:
- 섹션 제목 스켈레톤
- 상품 카드 스켈레톤 3개
결제 수단 섹션 스켈레톤:
- 결제 수단 카드 스켈레톤 5개
우측 결제 요약 스켈레톤:
- 상품 이미지 스켈레톤
- 금액 라인 스켈레톤 6줄
- CTA 버튼 스켈레톤 352×56픽셀
shimmer 효과: 그라디언트 애니메이션 좌에서 우로.
Loading 상태 (Mobile)
모바일 결제페이지 로딩 상태를 만들어줘.
배송 정보 스켈레톤:
- 탭 스켈레톤 3개
- 배송지 카드 스켈레톤 358×140픽셀
주문 상품 스켈레톤:
- 섹션 제목 스켈레톤
결제 수단 스켈레톤:
- 탭 스켈레톤 가로 배치
하단 결제 바 스켈레톤:
- 금액 스켈레톤
- 버튼 스켈레톤 358×52픽셀
shimmer 효과.
Error 상태 - 결제 실패
결페페이지에서 결제 실패 시 에러 모달을 만들어줘.
Desktop:
반투명 검정 오버레이.
중앙 모달 400×280픽셀:
- 흰색 배경, 모서리 12픽셀
- X 닫기 버튼
모달 콘텐츠:
- 빨간 X 원형 아이콘 64×64픽셀 중앙
- "결제에 실패했습니다" 20픽셀 굵게
- "카드 한도가 초과되었습니다.\n다른 결제 수단을 선택해주세요." 14픽셀 회색 중앙
버튼 영역:
- "다른 결제 수단 선택" 버튼 320×48픽셀 파란 배경
- "취소" 링크 14픽셀 회색 아래
Mobile:
바텀시트 390×260픽셀로 동일 구성.
Error 상태 - 재고 부족
결제페이지에서 결제 시도 중 재고 부족 발견 시 에러 모달을 만들어줘.
Desktop:
중앙 모달 440×320픽셀:
- 경고 삼각형 아이콘 56×56픽셀 노란색
- "일부 상품의 재고가 변경되었습니다" 18픽셀 굵게
재고 변경 상품 리스트:
- "에어맥스 97 (검정/270)" 14픽셀
- "주문 수량: 2개 → 재고: 1개" 빨간 14픽셀
버튼 영역:
- "수량 조정 후 계속" 버튼 파란 배경
- "장바구니로 돌아가기" 버튼 회색 테두리
Error 상태 - 쿠폰 만료
결제페이지에서 결제 시도 중 쿠폰 만료 발견 시 토스트를 만들어줘.
화면 상단 토스트 400×52픽셀:
- 연한 노란 배경 #FEF3C7
- 경고 아이콘 24픽셀 + "적용된 쿠폰이 만료되어 해제되었습니다" 14픽셀
- 우측 X 닫기
결제 요약 쿠폰 할인 라인 업데이트:
- 쿠폰 할인 "0원" 또는 라인 제거
- 총 결제 금액 재계산
결제 처리 중 오버레이
결제페이지에서 결제 처리 중 로딩 오버레이를 만들어줘.
전체 화면 반투명 흰색 오버레이 opacity 0.9.
중앙 로딩 컨테이너 200×160픽셀:
- 결제 아이콘 애니메이션 64×64픽셀 파란색
- "결제 처리 중입니다" 16픽셀 굵게
- "잠시만 기다려주세요..." 14픽셀 회색
- 로딩 프로그레스 바 160×4픽셀 (무한 루프)
"이 페이지를 닫지 마세요" 안내 12픽셀 하단.
Idle (정상)
배송지 선택됨: 기본 배송지 카드 표시
새 배송지 입력: 폼 필드 활성화
결제 수단 선택됨: 해당 옵션 확장
약관 동의 완료: 모든 필수 약관 체크
CTA 활성화: 모든 필수 정보 입력 완료
Loading
페이지 진입: 배송지/상품 스켈레톤
주소 검색 중: 검색 결과 로딩
쿠폰 적용 중: 쿠폰 영역 스피너
결제 처리 중: 전체 화면 오버레이
Empty
배송지 없음: 새 배송지 입력 폼 자동 표시
쿠폰 없음: "사용 가능한 쿠폰이 없습니다"
적립금 없음: 적립금 영역 비활성화
Error
필드 검증 실패: 빨간 테두리 + 에러 메시지
필수 약관 미동의: 약관 영역 하이라이트
결제 실패: 에러 모달 + 실패 사유
재고 부족: 재고 변경 안내 모달
네트워크 오류: 재시도 버튼
N.기능.결제 배송정보.01
목적: 주문 상품을 받을 배송지 정보 입력
방법: 기본 배송지 선택 / 새 배송지 입력 / 배송지 목록 선택
필수 정보: 수령인, 연락처, 주소(우편번호+기본+상세)
선택 정보: 배송 메모, 기본 배송지 저장
N.상태.결제 배송지.02
기본 배송지: 저장된 기본 배송지 자동 선택 표시
새 배송지: 입력 폼 활성화, 모든 필드 빈 상태
배송지 목록: 저장된 배송지 리스트 모달/바텀시트
배송지 없음: 새 배송지 입력 폼 자동 표시
N.데이터.결제 배송지.03
recipient_name: 문자열, 필수, 최대 20자
phone: 문자열, 필수, 010-0000-0000 형식
postal_code: 문자열, 필수, 5자리
address: 문자열, 필수, 최대 100자
detail_address: 문자열, 필수, 최대 50자
delivery_memo: 문자열, 선택, 최대 50자
is_default: 불린, 기본 배송지 저장 여부
N.이벤트.결제 주소검색.04
트리거: "주소 검색" 버튼 클릭
처리: 다음 우편번호 API 또는 자체 주소 검색 API 호출
결과:
- 선택: 우편번호, 기본 주소 자동 입력
- 취소: 모달/바텀시트 닫기
후속: 상세 주소 입력 필드 포커스
N.기능.결제 결제수단.01
목적: 결제 방법 선택
지원 수단: 신용/체크카드, 계좌이체, 네이버페이, 카카오페이, 휴대폰
선택 제한: 1개만 선택 가능
기본값: 이전 결제 수단 또는 신용카드
N.상태.결제 결제수단.02
미선택: 모든 옵션 기본 상태
선택됨: 해당 옵션 파란 테두리 + 확장 옵션
카드 선택: 카드사/할부 선택 드롭다운 표시
간편결제: 해당 서비스 안내 메시지
N.데이터.결제 결제수단.03
payment_method: 열거형, 필수
값: 'card', 'transfer', 'naverpay', 'kakaopay', 'phone'
card_company: 문자열, 카드 선택 시 필수
installment: 정수, 할부 개월 (0=일시불)
cash_receipt: 불린, 계좌이체 시 현금영수증 발급
N.기능.결제 약관동의.01
목적: 결제 진행을 위한 법적 동의 수집
필수 동의: 구매조건 확인, 개인정보 수집, 제3자 제공
선택 동의: 마케팅 수신
전체 동의: 모든 약관 일괄 체크/해제
N.상태.결제 약관동의.02
미동의: 모든 체크박스 빈 상태
전체 동의: 모든 체크박스 체크
일부 동의: 전체 체크박스 대시 표시
필수 미동의: 결제 버튼 비활성화 또는 에러
N.이벤트.결제 약관동의.03
전체 동의 클릭:
- 체크 → 모든 약관 체크
- 해제 → 모든 약관 해제
개별 약관 클릭:
- 해당 약관만 토글
- 전체 동의 상태 자동 업데이트
"보기" 클릭:
- 약관 상세 모달/바텀시트 열림
N.기능.결제 쿠폰.01
목적: 할인 쿠폰 적용
적용 방법: 코드 직접 입력 또는 보유 쿠폰 선택
적용 제한: 1회 주문 1장
검증: 최소 주문 금액, 유효 기간, 적용 대상
N.기능.결제 적립금.01
목적: 보유 적립금으로 결제 금액 차감
최소 사용: 1,000원
최대 사용: 보유 적립금 전액 또는 총 결제 금액 중 작은 값
적립금 0원: 영역 비활성화
N.이벤트.결제.01
트리거: "결제하기" 버튼 클릭
사전 검증:
- 필수 배송 정보 입력 확인
- 필수 약관 동의 확인
- 결제 수단 선택 확인
처리:
- 로딩 오버레이 표시
- PG 결제창 호출 (카드/계좌이체)
- 간편결제 리다이렉트 (네이버/카카오)
결과:
- 성공 → 주문 완료 페이지
- 실패 → 에러 모달 + 사유 표시
- 재고 부족 → 재고 변경 안내 모달
N.데이터.결제 주문.02
order_summary:
items: 주문 상품 배열
subtotal: 상품 금액
product_discount: 상품 할인
coupon_discount: 쿠폰 할인
point_used: 적립금 사용
shipping_fee: 배송비
total: 총 결제 금액
point_earn: 적립 예정 포인트
N.데이터.결제 분석.03
GA4 이벤트:
- begin_checkout: 체크아웃 진입
- add_shipping_info: 배송 정보 입력 완료
- add_payment_info: 결제 수단 선택
- purchase: 결제 완료
추적 데이터:
- items: 주문 상품 배열
- value: 총 결제 금액
- coupon: 적용 쿠폰 코드
- payment_type: 결제 수단
- shipping_tier: 배송 유형
배송 정보 컴포넌트
Shipping/Tab/Default → 탭 기본 상태
Shipping/Tab/Active → 탭 활성화
Shipping/AddressCard/Default → 배송지 카드
Shipping/AddressCard/Selected → 선택된 배송지
Shipping/Form/Desktop → 새 배송지 입력 폼
Shipping/Form/Mobile → 모바일 입력 폼
Shipping/Modal/AddressList → 배송지 목록 모달
Shipping/Modal/AddressSearch → 주소 검색 모달
Shipping/BottomSheet/AddressList → 배송지 목록 (Mobile)
Shipping/BottomSheet/AddressSearch → 주소 검색 (Mobile)
결제 수단 컴포넌트
Payment/Option/Card → 신용카드 옵션
Payment/Option/Transfer → 계좌이체 옵션
Payment/Option/NaverPay → 네이버페이 옵션
Payment/Option/KakaoPay → 카카오페이 옵션
Payment/Option/Phone → 휴대폰 결제 옵션
Payment/Tab/Mobile → 모바일 가로 탭
Payment/CardSelect → 카드사 선택 드롭다운
Payment/InstallmentSelect → 할부 선택 드롭다운
약관 동의 컴포넌트
Agreement/All/Unchecked → 전체 동의 미체크
Agreement/All/Checked → 전체 동의 체크
Agreement/All/Partial → 일부 동의
Agreement/Item/Required → 필수 약관 항목
Agreement/Item/Optional → 선택 약관 항목
Agreement/Modal/Detail → 약관 상세 모달
Agreement/BottomSheet/Detail → 약관 상세 (Mobile)
할인 적용 컴포넌트
Discount/Coupon/Input → 쿠폰 입력 필드
Discount/Coupon/Applied → 적용된 쿠폰 카드
Discount/Coupon/Modal → 쿠폰 선택 모달
Discount/Coupon/BottomSheet → 쿠폰 선택 (Mobile)
Discount/Point/Input → 적립금 입력
Discount/Point/Disabled → 적립금 없음
결제 요약 컴포넌트
Summary/Desktop → 데스크톱 결제 요약 (Sticky)
Summary/Mobile/Bar → 모바일 하단 고정 바
Summary/ProductPreview → 상품 이미지 미리보기
Summary/PriceDetail → 금액 상세 리스트
Summary/CTA/Active → 결제 버튼 활성화
Summary/CTA/Disabled → 결제 버튼 비활성화
Summary/CTA/Loading → 결제 처리 중
상태 컴포넌트
Checkout/Loading/Desktop → 로딩 스켈레톤 (Desktop)
Checkout/Loading/Mobile → 로딩 스켈레톤 (Mobile)
Checkout/Error/PaymentFailed → 결제 실패 모달
Checkout/Error/StockChanged → 재고 변경 모달
Checkout/Error/FieldValidation → 필드 검증 에러
Checkout/Overlay/Processing → 결제 처리 중 오버레이
90_Spec_Components 페이지 구성
Section: Checkout Components
├─ Subsection: Shipping
│ ├─ Tab (2 variants)
│ ├─ AddressCard (2 variants)
│ ├─ Form (2 variants)
│ └─ Modal/BottomSheet (4 variants)
├─ Subsection: Payment
│ ├─ Option (5 variants)
│ ├─ Tab/Mobile
│ └─ Dropdowns (2 variants)
├─ Subsection: Agreement
│ ├─ All (3 variants)
│ ├─ Item (2 variants)
│ └─ Modal/BottomSheet (2 variants)
├─ Subsection: Discount
│ ├─ Coupon (4 variants)
│ └─ Point (2 variants)
├─ Subsection: Summary
│ ├─ Desktop/Mobile
│ ├─ PriceDetail
│ └─ CTA (3 variants)
└─ Subsection: States
├─ Loading (2 variants)
├─ Error (3 variants)
└─ Overlay
배송지 탭 인터랙션
배송지 탭 클릭:
- "기본 배송지" 클릭 → 기본 배송지 카드 표시 Instant
- "새 배송지" 클릭 → 입력 폼 표시 Instant
- "배송지 목록" 클릭 → 모달/바텀시트 열림 Dissolve 200ms
배송지 카드 "변경" 클릭:
- 배송지 목록 모달 열림
배송지 목록 모달:
- 배송지 선택 → 라디오 체크 Instant
- "선택 완료" 클릭 → 모달 닫기 + 배송지 업데이트
주소 검색 인터랙션
"주소 검색" 버튼 클릭:
- Desktop: 모달 열림 Dissolve 200ms
- Mobile: 바텀시트 슬라이드업 400ms
검색어 입력 → "검색" 클릭:
- 검색 결과 리스트 표시 Fade 200ms
검색 결과 클릭:
- 선택된 항목 하이라이트 Instant
- 모달/바텀시트 닫기 300ms
- 우편번호, 기본 주소 자동 입력
- 상세 주소 필드 포커스
결제 수단 인터랙션
Desktop:
- 결제 수단 카드 클릭 → 라디오 선택 + 확장 옵션 Smart animate 200ms
- 다른 결제 수단 클릭 → 이전 옵션 접힘 + 새 옵션 확장
Mobile:
- 탭 클릭 → 탭 활성화 + 해당 옵션 영역 표시 Instant
- 좌우 스와이프 → 탭 스크롤
약관 동의 인터랙션
전체 동의 체크박스:
- 클릭 → 모든 약관 체크/해제 Instant
개별 약관 체크박스:
- 클릭 → 해당 약관 토글
- 전체 동의 체크박스 상태 자동 업데이트
"보기" 링크 클릭:
- Desktop: 약관 상세 모달 Dissolve 200ms
- Mobile: 바텀시트 슬라이드업 400ms
할인 적용 인터랙션
쿠폰 "적용" 버튼:
- 입력값 있음 → 로딩 → 성공/실패
- 성공: 적용된 쿠폰 카드 표시, 결제 금액 재계산
"사용 가능 N장" 클릭:
- 쿠폰 선택 모달/바텀시트 열림
- 쿠폰 선택 → "적용하기" → 모달 닫기 + 금액 업데이트
적립금 "전액 사용" 버튼:
- 보유 적립금 전액 입력 Instant
- 결제 금액 재계산
CTA 버튼 인터랙션
활성화 상태 클릭:
- 필수 검증 통과 → 로딩 오버레이 → PG 결제창
- 필수 정보 누락 → 해당 필드로 스크롤 + 에러 표시
- 필수 약관 미동의 → 약관 영역으로 스크롤 + 하이라이트
결제 실패:
- 오버레이 닫기 → 에러 모달 표시
- "다른 결제 수단 선택" → 모달 닫기, 결제 수단 영역 포커스
결제 성공:
- 주문 완료 페이지 Navigate
섹션 접기/펼치기 (Mobile)
주문 상품 섹션 헤더 탭:
- 접힘 상태 → 펼침: 상품 리스트 슬라이드다운 300ms
- 펼침 상태 → 접힘: 상품 리스트 슬라이드업 300ms
할인 적용 섹션 헤더 탭:
- 동일한 접기/펼치기 인터랙션
디자인 검증
[ ] Desktop 입력 영역 720px 너비
[ ] Desktop 결제 요약 400px 너비, Sticky
[ ] Desktop 입력 필드 높이 48px
[ ] Mobile 입력 필드 높이 48px
[ ] Mobile 하단 결제 바 140px 높이
[ ] 배송지 탭 3개 균등 분할
[ ] 결제 수단 카드 선택 시 파란 테두리 2px
[ ] 약관 전체 동의 영역 회색 배경
[ ] CTA 버튼 파란 배경 #2563EB
콘텐츠 검증
[ ] 수령인 최대 20자
[ ] 연락처 010-0000-0000 형식
[ ] 주소 최대 100자
[ ] 상세 주소 최대 50자
[ ] 배송 메모 최대 50자
[ ] 쿠폰명 최대 30자
[ ] 약관 제목 최대 40자
[ ] CTA 버튼 "[금액] 결제하기" 형식
인터랙션 검증
[ ] 배송지 탭 전환
[ ] 주소 검색 모달/바텀시트
[ ] 배송 메모 드롭다운
[ ] 결제 수단 라디오 선택
[ ] 결제 수단 옵션 확장/접힘
[ ] 약관 전체 동의 체크
[ ] 약관 개별 체크
[ ] 약관 상세 보기
[ ] 쿠폰 입력 및 적용
[ ] 쿠폰 선택 모달
[ ] 적립금 입력 및 전액 사용
[ ] CTA 버튼 → 결제 처리
상태 검증
[ ] Idle: 모든 정보 입력 완료 - CTA 활성화
[ ] Idle: 필수 정보 미입력 - CTA 비활성화 또는 검증 에러
[ ] Loading: 스켈레톤 shimmer 효과
[ ] Loading: 결제 처리 중 오버레이
[ ] Empty: 배송지 없음 - 새 배송지 폼 자동 표시
[ ] Empty: 쿠폰 없음 - "사용 가능한 쿠폰 없음"
[ ] Error: 필드 검증 - 빨간 테두리 + 에러 메시지
[ ] Error: 필수 약관 미동의 - 영역 하이라이트
[ ] Error: 결제 실패 - 에러 모달 + 사유
[ ] Error: 재고 부족 - 재고 변경 안내
프로토타입 검증
[ ] 배송지 탭 전환 Instant
[ ] 주소 검색 모달 Dissolve 200ms
[ ] 바텀시트 슬라이드업/다운 400ms
[ ] 결제 수단 확장 Smart animate 200ms
[ ] 약관 체크 Instant
[ ] 쿠폰 적용 후 금액 업데이트
[ ] CTA 버튼 로딩 상태
[ ] 에러 모달 표시
[ ] 섹션 접기/펼치기 300ms (Mobile)
[ ] 필드 에러 시 스크롤 이동
이 연재는 기획에 집중하기 때문에 디자인을 크게 신경쓰지 않아도 된다. 그래도 디자인 요소와 검증을 넣은 이유는 프로토타입이라고 해도 와이어프레임만 있는 것과 디자인적 요소가 있는 것과는 시각적으로 차이가 많이 나기 때문이다.
클라이언트에게 설득력있는 제안을 하려면 디자인적 요소가 있어야 반은 먹고 들어갈 수 있다.
https://ide-python-61918998.figma.site/