상세 페이지 (Product Detail)

개요

shadcn/ui 기반 제품/서비스 상세 페이지 설계·생성 전문 스킬입니다. 전환율 극대화 전략으로 네이버 스마트스토어, 쿠팡, 카카오 커머스 규격에 맞는 상세 페이지를 설계하고 HTML 또는 Next.js+shadcn/ui React 컴포넌트를 생성합니다.

지원 영역:

• 이커머스 상세 페이지 설계 (스마트스토어, 쿠팡, 카카오)
• SaaS 제품 상세 페이지 (가격 플랜, 기능 비교, 데모 CTA)
• 서비스 소개 페이지 (컨설팅, 교육, 구독 서비스)
• 모바일 퍼스트 상세 페이지 (375px 기준 숏폼 스타일)
• shadcn/ui 컴포넌트 기반 테마 일관성 (Light/Dark 동시 산출)

기본 스택

| 레이어 | 기본값 | 비고 | |--------|-------|------| | 자사몰·SaaS | Next.js 15 + Tailwind v4 + shadcn/ui | Radix 접근성 자동 확보 | | 스마트스토어·쿠팡 | 단일 HTML + Tailwind CDN + shadcn CSS 변수 | 플랫폼 업로드 규격 준수 | | 아이콘 | Lucide React | 또는 SVG inline | | 차트(가격 비교 등) | Recharts | 인터뷰 Q5에서 선택 시 |

트리거 키워드

상세페이지, 제품 페이지, 상세 설계, 쇼핑몰 상세, 제품 상세, 스마트스토어 상세, 쿠팡 상세, 카카오 상세, 상품 설명, 제품 소개 페이지, 상세 기획, 제품 기획, 상품 페이지, 상세 디자인, 제품 설명 페이지

워크플로우

0단계: shadcn 테마 인터뷰 (HARD)

코드·디자인 스펙 산출 직전에 반드시 수행합니다.

Q1: 베이스 팔레트 선택
- Neutral (기본) / Zinc / Stone / Slate

Q2: 컬러 모드 선택
- System+Toggle (기본) / Light / Dark / Auto

Q3: 모서리 반경 선택
- Balanced 0.5rem (기본) / Sharp / Soft / Pill

Q4: 효과 선택 (복수)
- Fade-up / Scroll Reveal / Parallax / Chart

Chart 선택 시 Q5 차트 라이브러리 선택 (Recharts/Chart.js/Tremor/ECharts)

1단계: 제품 분석 및 타겟 파악

제품 분석

• 카테고리별 업계 평균 전환율 확인 (뷰티 1.5-2.5%, 전자 0.8-1.5%)
• FAB(Feature-Advantage-Benefit) 변환표 작성
• 경쟁 제품 대비 차별화 포인트 3가지 도출

타겟 분석

• 페르소나 1개 정의 (이름, 나이, 직업, 고통점)
• 구매 결정 요인 우선순위 (가격/품질/브랜드/후기/배송)
• 구매 여정에서 가장 높은 이탈 지점 파악

2단계: 페이지 구조 설계

2026 트렌드를 반영한 구조:

• 숏폼 스타일: 1스크롤 1메시지 원칙
• 모바일 퍼스트: 375px 기준 설계 후 데스크톱 확장
• 동영상 우선: 제품 소개 30초 영상을 히어로에 배치
• 인터랙티브 요소: 360도 제품 뷰, 터치 스와이프 갤러리

필수 섹션 8개:

[1] 히어로/메인 이미지 갤러리 (제품 사진 + 영상)
[2] 제품 기본 정보 (가격, 재고, 평점, 옵션 선택)
[3] 탭 메뉴 (상세정보 | 후기 | FAQ)
[4] 상세정보 탭 (기능 목록, 스펙 테이블, 배송/반품)
[5] 후기 섹션 (평점 분포, 필터, 이미지 후기)
[6] FAQ 아코디언
[7] 관련 제품 추천
[8] 최종 CTA (장바구니 + 바로구매)

3단계: 섹션별 카피 작성

AIDA 공식 적용

• Attention(0-3초): 숫자/형용사 + 핵심 benefit 헤더
• Interest(3-15초): 고객 pain point 공감 + 해결책 제시
• Desire(15-40초): 5감 시나리오 + 라이프스타일 연결
• Action(40-60초): 긴급성 + 사회적 증명 + CTA

FAB 공식 적용

• 모든 기능(Feature)을 이점(Advantage)으로 변환
• 모든 이점을 고객 혜택(Benefit)으로 변환
• 혜택 중심으로 카피 작성 (기능 나열 금지)

심리 트리거 체크리스트

• 스카시티(한정성): 수량/시간 제한 표시
• 사회적 증명: 판매량, 평점, 전문가 추천
• 긴급성: 카운트다운, 재고 경고
• 권위성: 인증, 수상, 특허
• 가격 심리: 앵커링, 손실회피

4단계: 디자인 시스템 정의 (shadcn 토큰 기반)

색상 (shadcn OKLCH 변수 매핑)

• --primary → CTA 버튼, 구매 유도 지점
• --destructive → 할인율·한정수량 배지
• --muted-foreground → 보조 정보
• --background / --card → 섹션 배경 위계
• 브랜드 컬러 오버라이드 시 --primary, --accent, --ring만 교체

폰트

• 본문: Pretendard 400 (16px/1.6)
• 제목: Pretendard 700 (24-32px)
• 가격: Pretendard 800 (28-36px, --primary 색상)
• 할인가: line-through + text-muted-foreground

레이아웃

• 모바일: 1컬럼, 좌우 패딩 16px
• 태블릿(768px~): 2컬럼 그리드
• 데스크톱(1024px~): 최대 860px 콘텐츠 영역

5단계: 코드 생성

출력 형식 선택

• HTML 패키지(스마트스토어/쿠팡): index.html + style.css + script.js
• React/Next.js(자사몰/SaaS): 컴포넌트 분리 + components.json + app/globals.css

플랫폼별 규격 적용

• 스마트스토어: 860px 폭, 이미지 기반 상세 (HTML 모드)
• 쿠팡: 780px 폭, 최대 9장 이미지 (HTML 모드)
• 카카오: 모바일 최적화, 375px 기준
• 자사몰: 반응형 자유 설계 (Next.js + shadcn 모드)

6단계: QA 체크리스트

기능 검증

• 이미지 갤러리 스와이프/줌 정상 작동
• 옵션 선택 시 가격 변동 반영
• 탭 전환 정상 작동
• FAQ 아코디언 열기/닫기
• CTA 버튼 클릭 이벤트 연결

반응형 검증

• 모바일(375px) 레이아웃 정상
• 태블릿(768px) 레이아웃 정상
• 데스크톱(1280px) 레이아웃 정상
• CTA 버튼이 모든 해상도에서 가시적

사용 예시

• "스마트스토어 가습기 상세페이지 만들어줘"
• "쿠팡에 올릴 화장품 상세 페이지 기획해줘"
• "SaaS 제품 상세 페이지 React로 만들어줘"
• "카카오 선물하기용 상품 상세 설계해줘"
• "건강식품 상세페이지 카피 + 디자인 + 코드 전부 만들어줘"
• "기존 상세페이지 전환율 개선해줘"
• "모바일 전용 상세페이지 숏폼 스타일로 만들어줘"

출력 형식

카피 JSON 구조

json
{
  "page_type": "product-detail",
  "platform": "smartstore|coupang|kakao|custom",
  "theme": {
    "system": "shadcn/ui",
    "base": "neutral",
    "mode": "system+toggle",
    "radius": "0.5rem",
    "effects": ["fade-up"],
    "chart_lib": null
  },
  "sections": [
    {
      "id": "hero",
      "headline": "10시간 지속 가습으로 아침 피부 촉촉",
      "subheadline": "초음파식 4.5L 대용량 가습기",
      "visual_direction": "제품 정면 + 미스트 연출 이미지"
    },
    {
      "id": "product-info",
      "price": "89,900",
      "original_price": "129,000",
      "discount_rate": "30%",
      "rating": "4.8",
      "review_count": "3,241",
      "options": ["화이트", "그레이", "민트"],
      "badges": ["무료배송", "당일출고"]
    }
  ]
}

주의사항

핵심 규칙: 카피 무결성

디자인/개발 단계에서 카피 텍스트를 수정하지 않습니다.

• 원본 카피를 그대로 구현
• 텍스트 수정이 필요하면 카피 작성 단계로 반려
• 줄바꿈, 강조, 순서 변경만 허용 (내용 변경 금지)

AI 생성 콘텐츠 주의

AI가 생성한 상세 페이지 카피에 포함된 판매량, 평점, 고객 후기 등 실증적 주장은 반드시 실제 데이터로 교체하세요. 허위 수치를 그대로 사용하면 전자상거래법 및 표시광고법 위반에 해당합니다.

문제 해결

| 증상 | 원인 | 해결 | |------|------|------| | 이미지가 플랫폼 규격 초과 | 해상도/용량 미확인 | 플랫폼별 규격 참조, 이미지 리사이즈 | | 모바일에서 레이아웃 깨짐 | 고정 폭 사용 | max-width + 퍼센트 기반 레이아웃 적용 | | 전환율이 업계 평균 이하 | CTA 위치/문구 미최적화 | A/B 테스트 항목 순서대로 개선 | | 과대광고 경고 | 식약법/의료법 위반 표현 | 금지 표현 체크리스트 확인 |

관련 스킬

• moai-content:landing-page — 랜딩 페이지 (단독 전환 목적)
• moai-marketing:sns-content — 소셜미디어 콘텐츠
• moai-content:copywriting — 광고 카피

이 스킬을 사용하지 말아야 할 때

• 블로그 포스팅/리뷰 글: moai-content:blog 스킬 사용
• SNS 포스팅: moai-marketing:sns-content 스킬 사용
• 랜딩 페이지: moai-content:landing-page 스킬 사용
• 광고 카피 단독 작성: moai-content:copywriting 스킬 사용
• 카탈로그/리스트 페이지: 이 스킬의 범위 아님