20장.실전-상품 상세(PDP)

상세/리뷰/갤러리

화면 구조

Desktop (1440×900)

헤더 (80px)
├─ 브레드크럼 (48px)
└─ 본문 영역
├─ 좌측 갤러리 (600px)
│ ├─ 메인 이미지 (600×600)
│ └─ 썸네일 리스트 (5개, 100×100)
└─ 우측 정보 영역 (520px)
├─ 브랜드명 + 상품명
├─ 가격 (정가/할인가/할인율)
├─ 리뷰 요약 (별점/리뷰 수)
├─ 옵션 선택 (색상/사이즈)
├─ 수량 선택
├─ 배송 정보
├─ CTA 버튼 (장바구니/바로구매)
└─ 찜/공유 버튼
─────────────────────────
상품 정보 탭 영역 (1200px)
├─ 탭 내비게이션 (상세/리뷰/문의/배송)
├─ 상세 정보 콘텐츠
├─ 리뷰 섹션
└─ 추천 상품
푸터

Mobile (390×844)

헤더 (56px)
├─ 갤러리 (390×390, 스와이프)
│ └─ 페이지 인디케이터 (하단 중앙)
├─ 상품 정보 영역
│ ├─ 브랜드명 + 상품명
│ ├─ 가격 + 할인율
│ ├─ 리뷰 요약 (탭 시 리뷰 섹션 이동)
│ ├─ 옵션 선택 (탭 시 바텀시트)
│ ├─ 배송 정보 (접힘 가능)
│ └─ 상세/리뷰/문의 탭
└─ 하단 고정 CTA 바 (68px)
├─ 찜 버튼
├─ 장바구니 담기
└─ 바로 구매
바텀 내비게이션 (56px)

Figma Make 프롬프트

Desktop 전체 레이아웃

1440픽셀 너비의 이커머스 상품 상세 페이지를 만들어주고, 메인, 카테고리에서 상품 클릭시 링크 걸어줘.

상단 헤더 80픽셀 높이, 로고와 검색창, 장바구니 아이콘 배치.
헤더 아래 브레드크럼 48픽셀 높이, 좌측 정렬로 "홈 > 의류 > 상의 > 티셔츠" 텍스트 표시.
본문 영역 1200픽셀 중앙 정렬, 좌우 여백 120픽셀.

좌측 갤러리 영역 600픽셀 너비:
- 메인 이미지 600×600픽셀, 모서리 8픽셀 라운드, 테두리 1픽셀 연한 회색
- 메인 이미지 좌우에 화살표 버튼 40×40픽셀, 반투명 흰색 배경
- 메인 이미지 아래 썸네일 5개 가로 배치, 각 100×100픽셀, 간격 12픽셀
- 현재 선택된 썸네일은 파란 테두리 2픽셀

우측 정보 영역 520픽셀 너비, 좌측 갤러리와 80픽셀 간격:
- 브랜드명 "나이키" 14픽셀 회색, 상단
- 상품명 "에어맥스 97 실버불릿 남성 운동화" 28픽셀 굵게, 브랜드명 아래 8픽셀
- 가격 영역: 정가 "189,000원" 16픽셀 취소선 회색, 할인가 "129,000원" 32픽셀 굵게, 할인율 "32%" 18픽셀 빨간 배경 흰색 글씨 패딩 8×4픽셀
- 리뷰 요약: 별 아이콘 5개 노란색 20픽셀, "4.8" 텍스트, "(1,234개 리뷰)" 파란 밑줄
- 구분선 1픽셀 연한 회색, 상하 24픽셀 여백

옵션 선택 영역:
- "색상 선택" 라벨 15픽셀 굵게
- 컬러 칩 5개 (흰색, 검정, 빨강, 파랑, 회색), 각 40×40픽셀 원형, 간격 12픽셀
- 선택된 색상은 파란 테두리 3픽셀, 체크 아이콘 중앙
- "사이즈 선택" 라벨 15픽셀 굵게, 상단 20픽셀 여백
- 사이즈 버튼 6개 (250, 260, 270, 280, 290, 300), 각 60×44픽셀, 간격 8픽셀
- 선택된 사이즈 파란 배경 흰색 글씨
- 품절 사이즈 회색 배경 취소선 비활성화
- "사이즈 가이드" 링크 14픽셀 파란색 밑줄

수량 선택 영역 상단 20픽셀 여백:
- "수량" 라벨 15픽셀 굵게
- 마이너스 버튼 40×40픽셀, 수량 숫자 "1" 20픽셀, 플러스 버튼 40×40픽셀
- 버튼 테두리 1픽셀 회색, 숫자 영역 너비 60픽셀 중앙 정렬

배송 정보 영역 상단 20픽셀 여백, 연한 회색 배경 #F8F8F8, 패딩 16픽셀, 모서리 8픽셀:
- 트럭 아이콘 20픽셀, "무료배송" 15픽셀 굵게
- "내일 (수) 도착 예정" 14픽셀 회색
- "3만원 이상 구매 시 무료" 13픽셀 회색

CTA 버튼 영역 상단 24픽셀 여백:
- "장바구니 담기" 버튼 240×56픽셀, 흰색 배경 파란 테두리 파란 글씨
- "바로 구매" 버튼 240×56픽셀, 파란 배경 흰색 글씨
- 버튼 간 간격 16픽셀, 가로 배치

찜/공유 버튼 영역 상단 16픽셀 여백:
- 하트 아이콘 "찜하기" 버튼 80×40픽셀 투명 배경
- 공유 아이콘 "공유" 버튼 80×40픽셀 투명 배경
- 버튼 간 간격 8픽셀

구분선 1픽셀 연한 회색, 상단 40픽셀 여백.

탭 내비게이션 영역 1200픽셀 너비:
- 탭 4개 (상품 정보, 리뷰 1,234, 상품 문의 56, 배송/교환/반품)
- 각 탭 너비 균등 분할, 높이 52픽셀
- 현재 선택 탭 "상품 정보" 파란 글씨, 하단 파란 테두리 3픽셀
- 비선택 탭 회색 글씨

상세 정보 콘텐츠 영역:
- 상품 상세 이미지 3개 세로 배치, 각 1200×800픽셀
- 이미지 간 간격 0

추천 상품 섹션 상단 60픽셀 여백:
- "함께 보면 좋은 상품" 제목 24픽셀 굵게
- 상품 카드 4개 가로 배치, 각 280×380픽셀
- 카드 간 간격 16픽셀

푸터 영역.

전체 배경 흰색.

Desktop 갤러리 확대 모달

상품 상세 상품 이미지를 클릭했을 때 나타나는 확대 모달을 만들어줘.
화면 전체를 덮는 검정 오버레이 opacity 0.9.

중앙에 모달 컨테이너 1200×800픽셀:
- 좌측 이미지 영역 900×800픽셀
- 메인 이미지 900×800픽셀, 고해상도 상품 사진
- 이미지 좌우에 화살표 버튼 60×60픽셀, 흰색 배경 모서리 30픽셀 원형

우측 썸네일 영역 280픽셀 너비, 좌측 이미지와 20픽셀 간격:
- 썸네일 세로 배치 5개, 각 100×100픽셀, 간격 12픽셀
- 현재 선택 썸네일 파란 테두리 3픽셀
- 스크롤 가능, 스크롤바 표시

상단 우측 닫기 버튼 48×48픽셀, 흰색 X 아이콘, 모달 바깥 상단 우측.

하단 이미지 카운터 "3 / 10" 16픽셀 흰색, 중앙 정렬.

확대/축소 버튼 우측 하단:
- 확대 + 버튼 44×44픽셀
- 축소 - 버튼 44×44픽셀
- 버튼 간격 8픽셀, 흰색 배경 반투명

Desktop 옵션 선택 상태들

상품 상세 옵션 선택 영역의 여러 상태를 만들어줘.

상태 1 - 옵션 미선택:
- 색상 칩 5개 모두 기본 상태, 테두리 1픽셀 연한 회색
- 사이즈 버튼 6개 모두 기본 상태, 흰색 배경 회색 테두리
- CTA 버튼 비활성화, 회색 배경, "옵션을 선택해주세요" 텍스트
- 버튼 아래 "색상과 사이즈를 선택해주세요" 14픽셀 빨간색

상태 2 - 색상만 선택:
- 검정 색상 칩 선택됨, 파란 테두리 3픽셀, 체크 아이콘
- 사이즈 버튼 기본 상태
- CTA 버튼 비활성화
- "사이즈를 선택해주세요" 14픽셀 빨간색

상태 3 - 모든 옵션 선택 완료:
- 검정 색상 칩 선택됨
- 270 사이즈 선택됨, 파란 배경 흰색 글씨
- CTA 버튼 활성화, "장바구니 담기" 파란 테두리, "바로 구매" 파란 배경
- 선택 요약: "검정 / 270 / 1개" 14픽셀 회색, CTA 버튼 위

상태 4 - 품절 옵션 포함:
- 검정 색상 선택됨
- 280, 290 사이즈 품절 표시: 회색 배경, 텍스트 취소선, 클릭 불가
- 280 호버 시 툴팁 "품절된 사이즈입니다"

Desktop 재고 상태 표시

상품 상세에서 재고 상태에 따른 다양한 표시를 만들어줘.

상태 1 - 재고 충분:
- 배송 정보 영역에 "재고 있음" 초록 텍스트 14픽셀
- 수량 선택 최대 10개까지 가능

상태 2 - 재고 부족 (5개 이하):
- 수량 선택 영역 옆 "남은 수량 3개" 빨간 텍스트 14픽셀
- 수량 최대 3개로 제한
- 플러스 버튼 3 이상에서 비활성화

상태 3 - 해당 옵션 품절:
- 선택한 옵션 조합 아래 "선택하신 옵션은 품절되었습니다" 빨간 텍스트
- CTA 버튼 "재입고 알림 받기" 노란 배경 검정 글씨로 변경
- "바로 구매" 버튼 비활성화 회색

상태 4 - 전체 품절:
- 상품명 옆 "SOLD OUT" 배지 빨간 배경 흰색 글씨
- 모든 옵션 비활성화
- CTA 버튼 영역 전체 "재입고 알림 받기" 버튼만 표시
- "이메일로 재입고 알림을 받으시겠습니까?" 안내 문구

Desktop 가격 변동 알림

상품 상세에서 가격 변동 알림 배너를 만들어줘.

본문 영역 상단에 알림 배너 1200×56픽셀:
- 노란 배경 #FFF8E1, 테두리 1픽셀 #FFE082
- 좌측 종 아이콘 24픽셀
- "가격이 20% 인하되었습니다! 기존 159,000원 → 현재 129,000원" 텍스트 15픽셀
- 우측 닫기 X 버튼 24×24픽셀

또는 가격 영역에 인라인 표시:
- 할인가 옆 "가격 인하" 배지 빨간 배경 흰색 글씨
- 아래 "3일 전 대비 30,000원 인하" 12픽셀 빨간색

Desktop 리뷰 요약 섹션

탭 영역의 리뷰 섹션을 상세하게 만들어줘.

탭 "리뷰 1,234" 선택된 상태.

리뷰 요약 카드 1200×200픽셀, 연한 회색 배경, 모서리 12픽셀:
- 좌측 평균 별점 영역 200픽셀 너비:
- "4.8" 숫자 48픽셀 굵게
- 별 5개 아이콘 28픽셀 노란색
- "1,234개 리뷰" 14픽셀 회색
- 중앙 별점 분포 막대 그래프 400픽셀 너비:
- 5점 막대 80%, 4점 막대 12%, 3점 막대 5%, 2점 막대 2%, 1점 막대 1%
- 각 막대 높이 20픽셀, 파란 배경
- 우측 필터 영역 400픽셀 너비:
- "사진 리뷰만" 체크박스
- "최신순" 드롭다운 120×40픽셀

리뷰 리스트:
- 각 리뷰 카드 1200픽셀 너비, 상하 패딩 24픽셀
- 좌측: 프로필 아이콘 40×40픽셀, 닉네임 14픽셀 굵게, 구매옵션 "검정/270" 12픽셀 회색
- 중앙: 별점 5개 16픽셀, 리뷰 텍스트 15픽셀 최대 3줄
- 우측: 작성일 "2025.01.15" 12픽셀 회색
- 리뷰 이미지 있으면 텍스트 아래 이미지 3개 가로 배치, 각 100×100픽셀

리뷰 카드 간 구분선 1픽셀 연한 회색.
"리뷰 더보기" 버튼 200×48픽셀, 중앙 정렬, 흰색 배경 파란 테두리.

Desktop 리뷰 없음 상태

리뷰가 0개인 상태를 만들어줘.
탭 "리뷰 0" 표시.

리뷰 영역 중앙에 Empty 상태:
- 빈 말풍선 일러스트 120×120픽셀 회색
- "아직 리뷰가 없습니다" 18픽셀 중앙
- "첫 번째 리뷰를 작성해 보세요!" 14픽셀 회색 중앙
- "리뷰 작성하기" 버튼 160×48픽셀 파란 배경 중앙

전체 높이 400픽셀, 연한 회색 배경 #F8F8F8.

Mobile 전체 레이아웃

390픽셀 너비의 모바일 상품 상세 페이지를 만들어주고, 메인, 카테고리에서 상품 클릭시 링크 연결해줘.

상단 헤더 56픽셀 높이:
- 뒤로가기 화살표 아이콘 24픽셀
- 중앙 빈 공간
- 우측 검색 아이콘, 장바구니 아이콘 (배지 숫자 "2")

갤러리 영역 390×390픽셀 전체 너비:
- 상품 이미지 스와이프 가능
- 하단 중앙 페이지 인디케이터 점 5개, 현재 페이지 파란색, 나머지 회색
- 인디케이터 점 각 8픽셀, 간격 8픽셀

상품 정보 영역 좌우 패딩 16픽셀:
- 브랜드명 "나이키" 13픽셀 회색
- 상품명 "에어맥스 97 실버불릿 남성 운동화" 20픽셀 굵게 2줄
- 가격 영역: 할인율 "32%" 16픽셀 빨간 배경, 할인가 "129,000원" 24픽셀 굵게, 정가 "189,000원" 14픽셀 취소선 회색
- 리뷰 요약: 별 아이콘, "4.8", "리뷰 1,234개 >" 탭 가능 영역

옵션 선택 버튼 358×52픽셀:
- "옵션 선택" 텍스트 16픽셀
- 우측 아래 화살표 아이콘
- 테두리 1픽셀 연한 회색, 모서리 8픽셀
- 옵션 선택 완료 시 "검정 / 270 / 1개" 표시

배송 정보 영역 358픽셀 너비, 연한 회색 배경, 패딩 12픽셀:
- 트럭 아이콘 "무료배송" 14픽셀 굵게
- "내일 도착 예정" 13픽셀 회색
- 접기/펼치기 가능, 아래 화살표 아이콘

탭 내비게이션 고정:
- 탭 4개 (상품 정보, 리뷰, 문의, 배송)
- 현재 탭 파란 글씨, 하단 파란 선

상세 콘텐츠 영역 스크롤.

하단 고정 CTA 바 68픽셀 높이, 흰색 배경, 상단 그림자:
- 좌측 하트 아이콘 버튼 48×48픽셀
- "장바구니" 버튼 140×48픽셀 흰색 배경 파란 테두리
- "구매하기" 버튼 140×48픽셀 파란 배경 흰색 글씨
- 버튼 간 간격 8픽셀

바텀 내비게이션 56픽셀 (CTA 바 아래 숨김 또는 CTA 바가 바텀 내비 위에 위치).

Mobile 옵션 선택 바텀시트

상품상세 모바일 옵션 선택 바텀시트를 만들어줘.

화면 전체 390×844픽셀을 덮는 반투명 검정 오버레이 opacity 0.5.

하단에서 올라오는 바텀시트 패널:
- 너비 390픽셀, 높이 560픽셀
- 흰색 배경, 상단 모서리 16픽셀 라운드
- 상단 핸들바 32×4픽셀 회색 중앙

바텀시트 헤더 56픽셀 높이:
- 좌측 닫기 X 아이콘 24×24픽셀
- 중앙 "옵션 선택" 제목 18픽셀 굵게
- 우측 빈 공간

바텀시트 콘텐츠 스크롤 영역:
- 상품 요약: 썸네일 60×60픽셀, 상품명 15픽셀, 가격 16픽셀 굵게

색상 선택 섹션:
- "색상" 라벨 15픽셀 굵게
- 컬러 칩 5개 가로 배치, 각 48×48픽셀 원형, 간격 12픽셀
- 선택된 색상 파란 테두리 3픽셀, 체크 아이콘

사이즈 선택 섹션:
- "사이즈" 라벨 15픽셀 굵게
- 사이즈 버튼 6개, 2행 3열 그리드, 각 108×48픽셀
- 선택된 사이즈 파란 배경 흰색 글씨
- 품절 사이즈 회색 배경 취소선

수량 선택 섹션:
- "수량" 라벨 15픽셀 굵게
- 마이너스 버튼, 숫자 "1", 플러스 버튼, 가로 배치

선택 요약 영역:
- "선택: 검정 / 270 / 1개"
- "129,000원" 굵게

하단 고정 버튼 영역 80픽셀 높이:
- "선택 완료" 버튼 358×52픽셀 파란 배경 중앙

Mobile 갤러리 풀스크린

상품 상세 모바일 이미지 풀스크린 모드를 만들어줘.

전체 화면 390×844픽셀 검정 배경.

상단 헤더 56픽셀:
- 좌측 닫기 X 아이콘 흰색
- 중앙 "3 / 10" 이미지 카운터 흰색
- 우측 빈 공간

중앙 이미지 영역:
- 상품 이미지 전체 너비 390픽셀
- 핀치 줌 가능 표시 아이콘 우측 하단 40×40픽셀

하단 썸네일 스트립 80픽셀 높이:
- 썸네일 가로 스크롤, 각 60×60픽셀, 간격 8픽셀
- 현재 선택 썸네일 흰색 테두리 2픽셀

스와이프 제스처 힌트:
- 좌우 화살표 반투명 흰색, 첫 진입 시 2초 표시 후 페이드아웃

Loading 상태 (Desktop)

Desktop 레이아웃에서 로딩 중인 상태를 만들어줘.

좌측 갤러리 영역:
- 메인 이미지 600×600픽셀 스켈레톤 회색 #F0F0F0
- 썸네일 5개 스켈레톤

우측 정보 영역:
- 브랜드명 스켈레톤 80×16픽셀
- 상품명 스켈레톤 400×32픽셀, 2줄
- 가격 스켈레톤 200×40픽셀
- 옵션 영역 스켈레톤 박스 520×150픽셀
- CTA 버튼 스켈레톤 2개

탭 영역 스켈레톤.

shimmer 효과: 그라디언트 애니메이션 좌에서 우로.

Error 상태 (Desktop)

Desktop 레이아웃에서 에러 상태를 만들어줘.

본문 영역 중앙에 Error 상태:
- 느낌표 원형 아이콘 100×100픽셀 빨간색
- "상품 정보를 불러올 수 없습니다" 20픽셀 굵게 중앙
- "네트워크 연결을 확인하고 다시 시도해 주세요" 15픽셀 회색 중앙
- "다시 시도" 버튼 160×48픽셀 파란 배경 중앙
- "이전 페이지로" 버튼 160×48픽셀 흰색 배경 파란 테두리

전체 높이 500픽셀 연한 빨강 배경 #FFF5F5, 테두리 1픽셀 #FFE0E0, 모서리 8픽셀.

장바구니 담기 성공 토스트

장바구니 담기 성공 시 나타나는 토스트 메시지를 만들어줘.

Desktop 버전:
- 화면 상단 중앙에서 슬라이드 다운
- 토스트 400×64픽셀, 흰색 배경, 그림자, 모서리 8픽셀
- 좌측 초록 체크 원형 아이콘 32픽셀
- "장바구니에 담았습니다" 16픽셀 중앙
- 우측 "장바구니 보기" 버튼 100×36픽셀 파란 글씨
- 3초 후 자동 사라짐 또는 X 버튼 클릭

Mobile 버전:
- 화면 하단 CTA 바 위에서 슬라이드 업
- 토스트 358×56픽셀 가로 전체
- 초록 체크 아이콘, "장바구니에 담았습니다", "보기" 버튼
- 3초 후 자동 사라짐

바로 구매 확인 모달 (Desktop)

바로 구매 클릭 시 나타나는 확인 모달을 만들어줘.

반투명 검정 오버레이.

중앙 모달 480×400픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼 24×24픽셀

모달 헤더 60픽셀:
- "주문 확인" 제목 20픽셀 굵게 중앙

모달 콘텐츠:
- 상품 요약: 이미지 80×80픽셀, 상품명, 옵션 "검정 / 270", 수량 "1개"
- 구분선

결제 금액 요약:
- 상품 금액: 129,000원
- 배송비: 무료
- 구분선
- 총 결제금액: 129,000원 (굵게)

모달 하단 버튼 영역:
- "취소" 버튼 200×48픽셀 흰색 배경 회색 테두리
- "결제하기" 버튼 200×48픽셀 파란 배경
- 버튼 간 간격 16픽셀

상태 정의

Idle (정상)

옵션 미선택: 모든 옵션 기본 상태, CTA 버튼 비활성화

옵션 선택 완료: 선택 옵션 표시, CTA 버튼 활성화

재고 충분: 수량 선택 가능, 배송 정보 정상 표시

Loading

페이지 진입: 갤러리, 정보 영역 스켈레톤

이미지 로딩: 개별 이미지 로더

리뷰 로딩: 탭 전환 시 리뷰 영역 스피너

Empty

리뷰 없음: Empty 상태 + 리뷰 작성 유도

문의 없음: Empty 상태 + 문의 작성 유도

Error

API 실패: Error 상태 + 다시 시도 버튼

이미지 로드 실패: 대체 이미지 표시

재고 조회 실패: "재고 확인 불가" 메시지

NOTE 문서화

N.기능.PDP갤러리.01

목적: 고객이 상품 외관을 여러 각도에서 확인
대상: 모든 고객
이미지: 최대 10장, 정사각형 1:1 비율 권장
썸네일: 5개 표시, 나머지는 화살표로 탐색
확대: 클릭 시 모달, 핀치 줌 지원 (Mobile)

N.상태.PDP갤러리.02

조건: 이미지 개수에 따라 표시 변경
1개: 썸네일 영역 숨김, 화살표 숨김
2-5개: 썸네일 전체 표시, 화살표 활성화
6개 이상: 썸네일 5개 + 스크롤/화살표
이미지 로드 실패: 대체 이미지 "이미지를 불러올 수 없습니다"

N.데이터.PDP이미지.03

형식: WebP 압축 85%, 대체 JPEG
크기: 메인 800×800px, 썸네일 200×200px, 확대 1600×1600px
Lazy loading: Intersection Observer, 뷰포트 100px 전 로드
CDN: CloudFront, 캐시 24시간

N.이벤트.PDP갤러리.04

Desktop: 썸네일 클릭 → 메인 이미지 전환 Dissolve 300ms
Desktop: 메인 이미지 클릭 → 확대 모달 열림 Fade 200ms
Mobile: 스와이프 → 이미지 전환 Slide 300ms
Mobile: 더블탭 → 줌 인/아웃

N.기능.PDP옵션.01

목적: 고객이 원하는 색상·사이즈 조합 선택
옵션 유형: 색상(컬러 칩), 사이즈(버튼), 기타(드롭다운)
필수 선택: 모든 옵션 선택 완료 시 CTA 활성화
선택 순서: 색상 → 사이즈 (사이즈별 재고가 색상에 따라 다름)

N.상태.PDP옵션.02

기본: 옵션 미선택, CTA 비활성화, 안내 문구 표시
부분 선택: 선택된 옵션 표시, 미선택 옵션 안내
완료: 선택 요약 표시, CTA 활성화
품절 옵션: 회색 비활성화, 취소선, 클릭 불가, 툴팁 "품절"

N.데이터.PDP옵션.03

옵션 조합: product_id + color_id + size_id = option_sku
재고 조회: GET /products/{id}/options/{sku}/stock
응답: { available: boolean, quantity: number, max_quantity: number }
실시간 체크: 옵션 변경 시 + 장바구니 담기 직전

N.이벤트.PDP옵션.04

색상 선택: 클릭 → 테두리 변경 + 사이즈 재고 재조회
사이즈 선택: 클릭 → 배경 변경 + 가격 업데이트 (옵션별 추가금)
품절 옵션 클릭: 시도 시 툴팁 "품절된 옵션입니다" 2초 표시
Mobile 옵션 선택: "옵션 선택" 탭 → 바텀시트 슬라이드업

N.기능.PDP가격.01

목적: 상품 가격과 할인 정보 명확히 전달
표시 요소: 정가, 할인가, 할인율, 적립금
할인가 계산: sale_price가 있으면 표시, 없으면 price만
할인율: (price - sale_price) / price × 100, 정수 표시
적립금: 결제금액 × 적립률 (등급별 상이)

N.상태.PDP가격.02

정가만: 할인율 숨김, 정가 굵게 표시
할인 중: 정가 취소선, 할인가 굵게, 할인율 배지
옵션 추가금: 기본가 + 추가금 표시 "129,000원 (+5,000원)"
가격 변동: 이전 가격 대비 변동 표시 배너

N.데이터.PDP가격.03

price: 정수, 원 단위
sale_price: 정수 또는 null
discount_rate: 계산값, 소수점 버림
price_changed_at: 최근 가격 변경 일시
previous_price: 변경 전 가격 (비교용)

N.기능.PDPCTA.01

목적: 구매 의사 결정 후 즉각적인 행동 유도
버튼: "장바구니 담기" (보조), "바로 구매" (주요)
비활성화 조건: 옵션 미선택, 전체 품절
활성화 조건: 모든 필수 옵션 선택 완료

N.상태.PDPCTA.02

비활성화: 회색 배경, 클릭 불가, "옵션을 선택해주세요"
활성화: 장바구니 파란 테두리, 구매 파란 배경
품절: "재입고 알림 받기" 노란 배경으로 변경
로딩: 버튼 내 스피너, 텍스트 "처리 중..."

N.이벤트.PDPCTA.03

장바구니 담기:
- 클릭 → 로딩 → API POST /cart/items → 성공 토스트 3초
- 헤더 장바구니 배지 숫자 증가 애니메이션
- 실패 시 "다시 시도해 주세요" 에러 토스트

바로 구매:
- 클릭 → 확인 모달 (Desktop) / 바텀시트 (Mobile)
- 확인 → 체크아웃 페이지로 이동
- 취소 → 모달 닫기, PDP 유지

N.기능.PDP리뷰.01

목적: 구매 결정에 도움이 되는 실사용 후기 제공
표시: 평균 별점, 총 리뷰 수, 별점 분포
필터: 사진 리뷰만, 별점별, 정렬 (최신/평점/도움순)
페이지네이션: 10개씩 로드, "더보기" 버튼

N.상태.PDP리뷰.02

리뷰 있음: 요약 카드 + 리스트
리뷰 없음: Empty 상태 + 리뷰 작성 유도
로딩: 스켈레톤 3개 항목
에러: "리뷰를 불러올 수 없습니다" + 재시도

N.데이터.PDP리뷰.03

review_id, customer_id, rating (1-5), content (최대 500자)
images: 배열, 최대 5개
created_at, helpful_count, purchase_option
API: GET /products/{id}/reviews?page=1&sort=latest&filter=photo

N.이벤트.PDP리뷰.04

리뷰 탭 클릭: 스크롤 위치 저장 → 리뷰 섹션으로 스무스 스크롤
필터 변경: 리스트 재로드 500ms 디바운스
이미지 클릭: 리뷰 이미지 확대 모달
"도움이 됐어요" 클릭: helpful_count 증가, 버튼 비활성화

N.데이터.PDP분석.01

GA4 이벤트:
- view_item: PDP 진입 시, item_id/name/price/category
- select_item_option: 옵션 선택 시, option_type/value
- add_to_cart: 장바구니 담기, item_id/quantity/price
- begin_checkout: 바로 구매 클릭
- scroll_depth: 25%/50%/75%/100% 스크롤

컴포넌트화

갤러리 컴포넌트

Gallery/Desktop/Main → 메인 이미지 + 화살표

Gallery/Desktop/Thumbnails → 썸네일 리스트

Gallery/Desktop/Modal → 확대 모달

Gallery/Mobile/Swiper → 스와이프 갤러리

Gallery/Mobile/Fullscreen → 풀스크린 모드

옵션 선택 컴포넌트

OptionSelector/ColorChip/Default → 기본 컬러 칩

OptionSelector/ColorChip/Selected → 선택된 상태

OptionSelector/ColorChip/Disabled → 품절 상태

OptionSelector/SizeButton/Default

OptionSelector/SizeButton/Selected

OptionSelector/SizeButton/Disabled

OptionSelector/Quantity → 수량 조절

OptionSelector/Mobile/BottomSheet → 모바일 옵션 시트

가격 컴포넌트

Price/Default → 정가만

Price/Discounted → 할인 적용

Price/WithBadge → 할인율 배지 포함

Price/Changed → 가격 변동 알림

CTA 컴포넌트

CTA/Desktop/Active → 활성화 상태

CTA/Desktop/Disabled → 비활성화

CTA/Desktop/SoldOut → 품절 (재입고 알림)

CTA/Mobile/Sticky → 하단 고정 바

리뷰 컴포넌트

Review/Summary → 평균 별점, 분포 그래프

Review/Card → 개별 리뷰 카드

Review/Empty → 리뷰 없음 상태

Review/ImageModal → 리뷰 이미지 확대

90_Spec_Components 페이지 구성

Section: PDP Components

├─ Subsection: Gallery

│ ├─ Gallery/Desktop/Main

│ ├─ Gallery/Desktop/Thumbnails

│ ├─ Gallery/Desktop/Modal

│ ├─ Gallery/Mobile/Swiper

│ └─ Gallery/Mobile/Fullscreen

├─ Subsection: Options

│ ├─ OptionSelector/ColorChip (3 variants)

│ ├─ OptionSelector/SizeButton (3 variants)

│ ├─ OptionSelector/Quantity

│ └─ OptionSelector/Mobile/BottomSheet

├─ Subsection: Price

│ ├─ Price/Default

│ ├─ Price/Discounted

│ └─ Price/Changed

├─ Subsection: CTA

│ ├─ CTA/Desktop (3 variants)

│ └─ CTA/Mobile/Sticky

├─ Subsection: Review

│ ├─ Review/Summary

│ ├─ Review/Card

│ └─ Review/Empty

└─ Subsection: States

├─ PDP/Loading/Desktop

├─ PDP/Loading/Mobile

├─ PDP/Error/Desktop

└─ PDP/Error/Mobile

Figma 프로토타입 설정

갤러리 인터랙션

Desktop 썸네일 클릭
- 썸네일 클릭 → 메인 이미지 전환 Smart animate 300ms
Desktop 화살표 클릭
- 좌/우 화살표 클릭 → 이미지 슬라이드 Smart animate 300ms
Desktop 메인 이미지 클릭
- 이미지 클릭 → 확대 모달 열림 Fade 200ms
- 모달 내 화살표로 이미지 탐색
- X 클릭 또는 오버레이 클릭 → 모달 닫기 Fade 200ms

Mobile 스와이프
- 좌/우 드래그 → 이미지 전환 Smart animate 300ms
- 인디케이터 점 자동 업데이트
Mobile 풀스크린
- 이미지 탭 → 풀스크린 모드 전환 Smart animate 400ms
- X 탭 → 풀스크린 닫기

옵션 선택 인터랙션

Desktop 색상 선택
- 컬러 칩 클릭 → 테두리 파란색 + 체크 아이콘 Instant
Desktop 사이즈 선택
- 사이즈 버튼 클릭 → 배경 파란색 전환 Instant
- 품절 버튼 클릭 → 툴팁 표시 Dissolve 200ms → 2초 후 사라짐
Desktop 수량 변경
- +/- 버튼 클릭 → 숫자 증감 Instant

Mobile 옵션 바텀시트
- "옵션 선택" 탭 → 바텀시트 슬라이드업 Smart animate 400ms
- 옵션 선택 → 버튼 상태 변경 Instant
- "선택 완료" 탭 → 바텀시트 닫기 + 선택 요약 표시
- 오버레이 탭 → 바텀시트 닫기

CTA 인터랙션

장바구니 담기 (활성화 상태)
- 버튼 클릭 → 버튼 로딩 상태 → 성공 토스트 슬라이드다운 Smart animate 300ms
- 토스트 3초 후 자동 사라짐 Dissolve 300ms
- 토스트 "장바구니 보기" 클릭 → 장바구니 페이지 Navigate
바로 구매 (활성화 상태)
- Desktop: 버튼 클릭 → 확인 모달 열림 Dissolve 200ms
- 모달 "결제하기" 클릭 → 체크아웃 페이지 Navigate
- Mobile: 버튼 탭 → 확인 바텀시트 슬라이드업
비활성화 상태
- 버튼 클릭 → 반응 없음 또는 안내 문구 하이라이트 Smart animate
탭 내비게이션 인터랙션

탭 클릭

- 탭 클릭 → 해당 탭 파란색 + 하단 선 Smart animate 200ms
- 콘텐츠 영역 스크롤 또는 전환
리뷰 탭 클릭
- 탭 클릭 → 리뷰 섹션으로 스무스 스크롤 Smart animate 500ms

체크리스트

디자인 검증

[ ] Desktop 갤러리 600×600px 메인 이미지

[ ] Desktop 썸네일 5개 100×100px 간격 12px

[ ] Mobile 갤러리 390×390px 전체 너비

[ ] 컬러 칩 40×40px 원형, 선택 시 파란 테두리 3px

[ ] 사이즈 버튼 60×44px, 간격 8px

[ ] CTA 버튼 240×56px (Desktop), 140×48px (Mobile)

[ ] 하단 고정 CTA 바 68px (Mobile)

[ ] 가격 영역 할인율 배지 빨간 배경

[ ] 리뷰 별점 아이콘 노란색

콘텐츠 검증

[ ] 브랜드명 최대 20자

[ ] 상품명 최대 50자, 2줄 말줄임

[ ] 가격 천 단위 콤마 + "원"

[ ] 할인율 정수 표시 "%"

[ ] 옵션명 최대 10자

[ ] 배송 정보 "무료배송" / "유료배송 3,000원"

[ ] CTA 버튼 "장바구니 담기" / "바로 구매"

[ ] 품절 시 "재입고 알림 받기"

인터랙션 검증

[ ] 썸네일 클릭 시 메인 이미지 전환

[ ] 화살표 클릭 시 이미지 탐색

[ ] 메인 이미지 클릭 시 확대 모달 (Desktop)

[ ] 스와이프로 이미지 전환 (Mobile)

[ ] 컬러 칩 클릭 시 선택 상태 변경

[ ] 사이즈 버튼 클릭 시 선택 상태 변경

[ ] 품절 옵션 클릭 시 툴팁 표시

[ ] 수량 +/- 버튼 동작

[ ] 옵션 선택 바텀시트 열기/닫기 (Mobile)

[ ] CTA 버튼 클릭 시 토스트/모달

[ ] 탭 클릭 시 콘텐츠 전환

상태 검증

[ ] Idle: 옵션 미선택 시 CTA 비활성화

[ ] Idle: 옵션 선택 완료 시 CTA 활성화

[ ] Loading: 스켈레톤 shimmer 효과

[ ] Empty: 리뷰 없음 상태 + 작성 유도

[ ] Error: API 실패 시 에러 메시지 + 재시도

[ ] 품절: 해당 옵션 비활성화, 재입고 알림 버튼

[ ] 전체 품절: 모든 옵션 비활성화, SOLD OUT 배지

[ ] 재고 부족: 남은 수량 표시, 수량 제한

프로토타입 검증

[ ] 갤러리 이미지 전환 애니메이션 300ms

[ ] 확대 모달 열림/닫힘 Fade 200ms

[ ] 옵션 바텀시트 슬라이드 400ms (Mobile)

[ ] 토스트 메시지 슬라이드다운 300ms

[ ] 토스트 3초 후 자동 사라짐

[ ] 탭 전환 애니메이션 200ms

[ ] 리뷰 섹션 스무스 스크롤 500ms

[ ] 확인 모달 열림/닫힘 (Desktop)

---

마찬가지로 프롬프트를 그대로 복사, 붙혀넣기해도 프로토타입이 만들어진다. 자신의 브랜드가 있으면 컨셉에 맞게 수정해 보는 것을 권장한다.

https://ide-python-61918998.figma.site/

Desktop E-commerce Header