Detail page planner

상세페이지 기획자 (Detail Page Planner)

책임 경계

단계	스킬	산출물
1. 기획·전략 (★ 본 스킬)	moai-content:detail-page-planner	Brief (원 메시지·오프닝·본문 뼈대·채널·이미지 체크리스트)
2. 카피	moai-commerce:detail-page-copy	13섹션 감정여정 JSON
3. 코드	moai-content:product-detail	shadcn/ui React 또는 HTML
4. 이미지	moai-commerce:detail-page-image	1080×12720 합성 PNG

본 스킬은 1번만 담당 — 카피·코드·이미지는 위임. Brief가 후속 3개 스킬의 입력.

트리거 키워드

상세페이지 기획, 상세페이지 구조, 원 메시지, 오프닝 4유형, 본문 뼈대, 유통 채널 분기, 펀딩 vs 커머스, 카테고리 사진 체크리스트, 상세페이지 전략, 상폐 기획

5대 기획 모듈

모듈 1 — One Message 프레임워크 ★ 핵심

원 메시지 = 상세페이지가 전달할 단 하나의 메시지. 모든 콘텐츠가 이걸 뒷받침해야 한다.

3단 정합 구조:

브랜드 컨셉  →  원 메시지  →  이미지·색·글 3요소

같은 제품이라도 타깃에 따라 원 메시지 분기:

원목 수납장 손잡이 예시:
  타깃 A "튼튼함 우선"  → "20kg를 견디는 손잡이"
  타깃 B "예쁨 우선"    → "방의 분위기를 바꾸는 손잡이"
  타깃 C "안전 우선"    → "아이가 매달려도 안전한 손잡이"

산출물: [원 메시지 - 카피 - 설명글] 세트

one_message:
  brand_concept: "{브랜드가 추구하는 본질 한 문장}"
  message: "{원 메시지 한 문장}"
  copy: "{메시지를 강화하는 헤드라인 카피}"
  description: "{메시지를 풀어 설명하는 본문 도입글}"

색 체계:

• 브랜드 색 (전체 일관성)
• 상품페이지 컨셉 색 (각 페이지 분위기)
• 두 색을 분리해 운영

이미지 선택 기준:

• 사진 이미지: 실제 보이는 특징 (텍스처·크기·색)
• 디자인 이미지: 보이지 않는 특징·컨셉(작동 원리·라이프스타일)

자세한 카테고리별 사진은 → references/photo-checklist.md

---

모듈 2 — 오프닝 4유형 분기 ★ 핵심

UX 데이터 근거: 3초 = 스크롤 3번. 어텐션 그래프상 "오프닝 > 본문 > 클로징" 순서로 우선순위.

유형 진단 트리

제품이 시장에 처음 나왔는가?
├─ YES → 첫 만남형
└─ NO ↓
    제품 자체가 시각적으로 강한가? (예쁨·독특함)
    ├─ YES → 스타형
    └─ NO ↓
        타깃의 페인포인트가 명확한가?
        ├─ YES → 공감형
        └─ NO  → 매력형 (혜택·가성비 강조)

유형별 인트로 3 step 템플릿

유형	Step 1	Step 2	Step 3	예시
첫 만남형	"이런 제품 본 적 있나요?"	핵심 USP 정의	가치 예고	3 in 1 마우스
스타형	제품 시각 임팩트	제품명·디자인 강조	사용 장면	빨아 입는 수트
매력형	매력 포인트 1	매력 포인트 2	"지금 결정해야 하는 이유"	(혜택·가성비)
공감형	"이런 고민 있죠?"	페인포인트 구체화	"이 제품이 해결"	(페인 해소)

총 12개 작성 패턴. 직접 LLM 프롬프트에 인용 가능.

---

모듈 3 — 본문 4단계 + 3 미션 체크

4단계 본문 기획 프로세스

[1] 인트로     → 모듈 2의 4유형 인트로 적용
[2] 요약 콘텐츠 → 한눈에 보는 USP 1~3개
[3] 소제목 뼈대 → 스캐너 + 검색 고객 동시 대응
[4] 시각 자료  → 모듈 1의 사진/디자인 분기

3 미션 체크리스트 (본문 작성 전)

• 진짜 차별점이 명확한가? (경쟁 제품 대비)
• 고객이 갈아타게 만드는 이유가 있는가?
• 생생한 간접 경험이 들어 있는가? (사용 장면·후기·실측)

본문 USP 정리 공식

본문 = 대표 USP 2~3개 + 좋은 제품 특징 2~3개 + 신뢰도/옵션 정보

"어려운 성분 → 사용자 시각 표현" 3단계 변환

[1] 성분 명사     → "히알루론산"
[2] 특징 키워드   → "수분 보유"
[3] 사용자 체감 문장 → "오후 4시에도 촉촉"

한국 광고 심의 가드 (카테고리 분기)

• 화장품: 재생·치료·세포 등 의약품 표현 금지 → references/category-beauty.md
• 식품: 효능 단정 표현 주의 → references/category-food.md
• 패션·생활: 비교 우위 단정 주의

---

모듈 4 — 유통 채널 분기 ★ 차별화

펀딩 vs 커머스(오픈마켓)의 사용자 행태가 다르다 — UX 데이터 근거:

• 커머스 사용자는 체류시간 1/3 단축
• 스크롤 도달률 2,000px 짧음

채널 분기 트리

채널	사용자 행태	본문 전략
펀딩(와디즈·텀블벅)	탐색형, 스토리 OK	인트로 길게, 공감·사회 이슈 OK, 4유형 모두 가능
커머스(스마트스토어·쿠팡·카카오)	목적형, 즉시 판단	딴소리 제거, 제품 특징 즉시 노출, 매력형/스타형 우선

커머스 상세페이지 뼈대 템플릿

[1] 특징 (USP 즉시 노출)
[2] 차별점 (3 in 3, 경쟁 제품 비교)
[3] 후기 (실사용·평점·이미지)
[4] CTA (구매·찜·문의)

4단계 타깃 재정의 프로세스

[1] 트렌드 파악         → 카테고리 시장 흐름
[2] 새 타깃 정의        → 구체 페르소나 1~2명
[3] 라이프스타일 매핑    → 일상 시나리오 5개
[4] 마케팅 플랜 일치    → 광고·SNS·검색 통합

---

모듈 5 — 카테고리별 사진 체크리스트

9 카테고리 × 가까운/먼 사진별 필수 항목 → references/photo-checklist.md

카테고리	가까운 (Close)	먼 (Wide)
패션	원단 클로즈업·부자재·디자인 디테일	전신 착장·코디 룩
푸드	단면·원물·조리예	식탁 컨텍스트
뷰티	제형·발색·흡수	사용 장면·전후
B2B/SaaS	UI 캡처·데이터 시각화	화면 전체·팀 사용 장면
구독	박스 개봉·내용물 클로즈업	월별 큐레이션·생활 컷
베이비/키즈	안전 인증·소재	연령별 사용 시나리오
디지털 콘텐츠	UI 미리보기·강의 캡처	학습 환경·결과물
펫	사료 알갱이·성분표	반려동물 사용 장면
여행	객실·메뉴 디테일	풍경·동선·체험 컷

추가 4종 (스포츠/명품 등)은 photo-checklist.md 참조.

사진 없이 상세페이지 기획 5단계 (사진 촬영 전)

[1] 원 메시지 결정 (모듈 1)
[2] 특징 3~5개 추출
[3] 각 특징별 사진 종류 결정 (가까운/먼/디자인)
[4] 사진 vs gif 결정
[5] 흐름 짜기 (PowerPoint 워크플로우)

---

워크플로우 (전체 흐름)

사용자 요청 입력
  ↓
[Step 1] 카테고리 진단 (패션/푸드/테크/뷰티/리빙/기타)
  ↓
[Step 2] 채널 진단 (펀딩 vs 커머스) → 모듈 4 분기
  ↓
[Step 3] 모듈 1: One Message 잡기
  ↓
[Step 4] 모듈 2: 오프닝 유형 진단 + 3 step 인트로 작성
  ↓
[Step 5] 모듈 3: 본문 4단계 뼈대 + 3 미션 체크 + 광고 심의 가드 적용
  ↓
[Step 6] 모듈 5: 카테고리별 사진 체크리스트
  ↓
[Step 7] Brief 산출 (YAML/Markdown) → 후속 스킬 입력

Brief 산출 형식

brief:
  category: "{패션|푸드|테크|뷰티|리빙}"
  channel: "{펀딩|커머스}"

  one_message:
    brand_concept: "..."
    message: "..."
    copy: "..."
    description: "..."

  opening:
    type: "{첫 만남형|스타형|매력형|공감형}"
    step1: "..."
    step2: "..."
    step3: "..."

  body_skeleton:
    intro: "(모듈 2 적용)"
    summary_usp: ["...", "...", "..."]
    sub_headings: ["...", "...", "..."]
    visual_notes: "(사진/디자인 분기)"

  three_missions:
    real_differentiation: true
    switch_motivation: true
    vivid_indirect_experience: true

  channel_strategy:
    funding_or_commerce: "..."
    body_template: "..."
    target_redefinition:
      trend: "..."
      persona: "..."
      lifestyle: "..."
      marketing_plan: "..."

  photo_checklist:
    close_shots: [...]
    wide_shots: [...]
    gif_or_static: "..."

  ad_compliance_warnings:
    - "..."

후속 스킬 호출:

1. brief 산출 후 → moai-commerce:detail-page-copy "Brief: <yaml>"
2. 카피 JSON 산출 후 → moai-content:product-detail "Brief + Copy"
3. 코드 산출 후 → moai-commerce:detail-page-image "Brief + Copy + Code"

사용 예시

예시 1 — 자연어 한 줄

"신규 비건 비누 상세페이지 기획해줘. 와디즈 펀딩으로 출시 예정."

→ Step 1: 카테고리 = 뷰티 (비누) → references/category-beauty.md 자동 로드 → Step 2: 채널 = 펀딩 → 인트로 길게 OK, 공감형/스타형 우선 → Step 3: One Message — "5가지 식물 추출물로 만든 24시간 보습 비누" → Step 4: 오프닝 = 공감형 ("건성 피부 한겨울 가려움" → 페인포인트 → 식물 추출물 해결) → Step 5-6: 본문 4단계 + 사진 체크리스트 → Step 7: Brief YAML 산출

예시 2 — 채널·카테고리 미정

"화장품 상세페이지 기획"

→ AskUserQuestion 1라운드:

• Q1: 카테고리 세부 (스킨케어·메이크업·헤어 등)
• Q2: 채널 (펀딩/커머스) → 답변 후 Step 1-7 진행

예시 3 — Brief만 받아서 후속 위임

"이 Brief로 카피랑 코드까지 다 만들어줘"
+ 첨부: 작성된 Brief YAML

→ Step 0: Brief 검증 (모듈 1-5 항목 누락 확인) → Brief 완성 후: moai-commerce:detail-page-copy → product-detail → moai-commerce:detail-page-image 순차 위임

페어 스킬과의 관계

본 스킬을 사용하지 않는 경우 (페어 위임)

• "상세페이지 카피 만들어줘" → moai-commerce:detail-page-copy (13섹션 JSON)
• "상세페이지 코드 만들어줘" → moai-content:product-detail (shadcn/ui 컴포넌트)
• "상세페이지 이미지 합성해줘" → moai-commerce:detail-page-image (1080×12720 PNG)
• "랜딩 페이지 만들어줘" → moai-content:landing-page (단독 전환 1페이지)

본 스킬을 사용하는 경우

• 위 페어 호출 이전 단계 — 무엇을 어떤 구조로 어떤 톤으로 만들지를 먼저 확정해야 할 때
• 카테고리·채널·타깃이 모호해서 한 번에 카피·코드로 가기 어려운 경우
• 와디즈/커머스 베스트 프랙티스를 일관 적용하고 싶을 때

References (분리 자료) — 9 카테고리 커버

공통

• references/photo-checklist.md — 9 카테고리별 사진 체크리스트 + 사진 없이 기획 5단계
• references/copy-patterns.md — 저관여/고관여 언어 + 가격 13전략 + 카피 100개 raw 예시

카테고리 분기 (9종)

#	references	적용
1	category-fashion.md	의류·가방·신발·잡화 — 페르소나 5단계 + 컬러/폰트
2	category-food.md	식품·음료·농수산물 — 목적/탐색형 + 식품 심의 + 4 스토리텔링
3	category-beauty.md	스킨케어·메이크업·헤어·바디 — 본문 4단계 + 화장품법 + 성분 변환
4	category-b2b-saas.md	SaaS·솔루션·B2B 제품 — 가격 페이지·기능 비교·데모 CTA·복수 의사결정자
5	category-subscription.md	구독 박스·정기 배송·멤버십 — LTV·첫 회 할인·이탈 방지
6	category-baby-kids.md	유아·아동용품 — 안전 인증·연령 분기·부모 페인포인트
7	category-digital-content.md	강의·e북·뉴스레터·소프트웨어 — 무형 상품·체험 데모·구매 후 흐름
8	category-pet.md	반려동물 사료·용품·서비스 — 보호자 신뢰·안전 성분
9	category-travel.md	여행·호텔·액티비티 — 무형 경험·계절 분기·예약 흐름
10	category-sports-leisure.md	캠핑·러닝·자전거·골프 — 활동 시나리오·기능 사양
11	category-luxury.md	명품·하이엔드 — 격식 톤·여백·간결·정통성

기타 카테고리(자동차·부동산·금융·의료기기 등)는 별도 도메인 스킬 권장.

제한

• 이 스킬은 코드·카피·이미지를 직접 산출하지 않음 — Brief 산출만. 후속 페어 스킬 호출 필수.
• 한국 시장 특화 (와디즈·스마트스토어·쿠팡·카카오 규격). 글로벌 시장은 별도 가이드 필요.
• 광고 심의 가드는 2024 시점 기준 — 변경될 수 있으므로 카테고리별 references/ 정기 업데이트 필요.

관련

• before: 사용자 자연어 발화 → 본 스킬 자동 호출
• after: moai-commerce:detail-page-copy → product-detail → moai-commerce:detail-page-image 순차 체이닝
• alternative: 빠른 단일 카피만 → moai-commerce:detail-page-copy 직접
• 가이드: moai-foundation-cc (Claude Code 스킬 작성), .claude/rules/moai/development/skill-authoring.md