---
name: detail-page-core
description: 커머스 상세페이지를 브랜드 프로파일 기반으로 Figma에 만들거나 수정하는 디자인 시스템 스킬. 색·조형·타이포·카피·섹션·이미지의 결정 규칙을 "값"이 아니라 "상대·조건 패턴"으로 정리했다. "상세페이지", "detail page", "상세페이지 만들어줘", "섹션 만들어줘", "리뷰 섹션", "개성 섹션", "장점 요약 섹션", "기능 설명 섹션", "FAQ 섹션", "성분표 섹션", "소개 메인페이지", "피그마로 상세", "피그마 상세페이지" 같은 요청에서 발동. Figma MCP(use_figma)로 실제 캔버스에 프레임을 생성·편집한다.
---

# Detail Page Core (커머스 상세페이지 디자인 시스템)

이 스킬은 상세페이지 디자인을 **측정값이 아니라 원리**로 정리한 디자인 시스템이다. 두 층으로 나뉜다:

- **브랜드 무관 패턴** (`design-dna/*`) — 색·조형·타이포·카피·페이지·이미지의 결정 규칙을 채도/명도/색조·위계·역할 같은 **상대·조건 규칙**으로. 어느 브랜드에도 적용된다.
- **브랜드별 값** (`brands/<이름>.md`) — 그 패턴의 슬롯에 들어가는 실제 색 HEX·서체·규격 등. 브랜드마다 다르다. 이 값 묶음을 **브랜드 프로파일**이라 부른다.

**작업은 항상 브랜드 프로파일을 지정해서 시작한다.** 유저가 어느 브랜드/제품인지 말하면 그 프로파일(`brands/<이름>.md`)을 연다. 색·서체를 정할 땐 `design-dna`(패턴) + `brands/<이름>`(값) 둘을 합친다.

**이 SKILL.md는 라우터다.** 지금 하려는 일에 맞는 문서만 그때그때 연다. 전부 미리 읽지 않는다.

## 브랜드 프로파일 (작업 착수 시 반드시 확정)

작업할 브랜드의 프로파일이 `references/brands/`에 있으면 그것을 연다. **없으면 온보딩**:

1. `references/brands/_template.md`를 `references/brands/<브랜드이름>.md`로 복사한다.
2. 기존 상세페이지가 있으면 `design-dna/01-color.md` §5 절차로 실측해 슬롯을 채운다.
3. 실측만으로 안 정해지는 값(브랜드 대표색·톤·서체)은 **유저에게 확인**해 확정 후 기록한다.
4. **패턴만으로 HEX·폰트를 지어내지 않는다.** 값 미정 슬롯은 "미정"으로 표기하고 그 부분 제작을 보류한다.

## 라우팅 — 지금 하려는 일 → 열 문서

| 지금 하려는 일 | 열 문서 |
|---|---|
| **제작 착수 전** 확인/질문 (브랜드 프로파일 확정·레퍼런스 페이지 해독 포함, 필수 선행) | `references/00-interview.md` (레퍼런스 상세페이지 있으면 §1.5 실측 해독) |
| **이 브랜드의 실제 색·서체 값** | `references/brands/<이름>.md` |
| **색을 정하는 원리**(채도·명도·색조 패턴, 배경 대비, 강조) | `references/design-dna/01-color.md` (+ 값은 brands) |
| **묶고 배치**(오토레이아웃·계층·그룹화, 왜 fill/stroke/round) | `references/design-dna/02-grouping-layout.md` |
| **그릇의 사이징 계약**(hug/fixed/fill·넘침 방지·리스트 마커 정렬·기계 판정식) | `references/design-dna/08-hierarchy-contract.md` |
| **요소 역할·블록 유형 판정**(역할 사전 R01~R22·크기 사다리·색 배타성·블록 카탈로그 B1~B33·네이밍) | `references/design-dna/09-role-taxonomy.md` |
| **글자 크기·굵기·서체 역할** 위계 | `references/design-dna/03-typography.md` (+ 폰트 값은 brands) |
| **카피의 길이·역할** | `references/design-dna/04-copy.md` |
| **어떤 섹션을 왜** 넣을지·순서·구성 | `references/design-dna/05-page-purpose.md` |
| **사진**(삽입방식·블렌드·거리·크기) | `references/design-dna/06-image-treatment.md` |
| **이미지 배치 의도**(자료이미지 판독·모방요소 추출 / **자르기**=대상 강조·전경 vs **채우기**=배경 무드·후경) | `references/design-dna/07-image-placement.md` |
| **실제 제작 순서·재사용 코드**(말풍선·강조·카드·블렌드) | `references/build-recipes.md` |
| **use_figma API** 규칙·읽기전략 | `references/figma-mcp.md` |
| **에러·이상 렌더 발생 시** 증상→해법 색인 | `references/troubleshooting.md` |
| **서브에이전트 병렬 제작·감독**(웨이브·프롬프트 템플릿·재배치) | `references/orchestration.md` |
| **새 브랜드 프로파일 만들기** | `references/brands/_template.md` (+ 도출 절차 `design-dna/01` §5) |

design-dna(01~07)=**"무엇을/왜"(브랜드 무관 패턴)**, brands=**"값"(브랜드별)**, build-recipes·figma-mcp=**"어떻게"(제작·API)**. 색·서체는 패턴+값을 합쳐 결정한다.

**이 스킬의 산출은 Figma 캔버스까지다** — export/슬라이싱/플랫폼 업로드는 스코프 밖(파생 채널 프레임 제작은 `build-recipes.md` §4c).

## 하드 게이트 — 완료 전 반드시 전수 확인하는 수치 규칙

> **오토레이아웃은 잘 지켜지는데 그 외 수치 규칙이 생성 중 자주 무시된다.** 아래는 "그때 문서를 열면 나오는" 값이 아니라, **매 섹션 자가검증(절대규칙 4·작업흐름 3d)에서 `get_metadata`+`get_screenshot`으로 전수 대조하는 하드 게이트**다. 하나라도 위반이면 완료가 아니다. 상세 근거는 괄호 안 ref. (면적·비율 기준이라 브랜드·아트보드가 바뀌어도 그대로 적용.)
>
> **이 표가 수치 상수의 정본(SSOT)이다.** design-dna 본문은 같은 수치의 근거(왜)를 설명하며, 값이 바뀌면 이 표와 함께 바꾼다(불일치 시 이 표 우선). 각 문서의 체크리스트류는 값을 재서술하지 말고 이 표를 참조한다. (예외: `orchestration.md` §2 빌더 프롬프트 템플릿은 복붙용 자기완결 블록이라 값을 인라인한다.)

- [ ] **모바일 최소 폰트 — 카피 등급으로 구분**(2026-09-02 유저 확정): ① **스캔 카피**(대충 읽어도 보여야 할 문장 — 헤드라인·핵심 소구) = 본문 ≥ 캔버스폭 **4.5%**(860→39px), 마켓플레이스 게재용 **4.7%↑**. ② **집중 독해 카피**(살짝 집중해서 읽는 문장 — 카드/텍스트박스 안 설명·리스트 본문) = **4%**(34px) 권장, 최저 **3.25%**(28px)까지 허용 — 스캔 카피 크기를 카드 본문에 그대로 쓰면 오히려 촌스럽고 padding이 죽는다. ③ 캡션·출처 ≥ **3%**(26px). 폭에 못박은 절대 px·레거시값(30/24px) 금지. 리스트의 아이콘-텍스트 간격 ≥ 20px. (→`03` §0)
- [ ] **히어로 세로 ≤ 3000px** 하드 상한. 넘으면 내부 압축. (→`05` §1-15)
- [ ] **히어로 텍스트 점유 = 면적 12~20%**(세로 아님·**면적** 기준, 하한 12·상한 20). 오프닝/클로징도 예외 없음 — 카피를 **사진에 베이크하지 말고 라이브 텍스트 노드**로. (→`05` §0.5·§1-15)
- [ ] **프레임 하단 클리어런스 ≥ 100px**(전경 텍스트·조형 대상, 풀블리드 배경은 예외). (→`02`)
- [ ] **반복·동일소속 요소는 상위 그룹화 + 그룹 간 ≥ 50px**. (→`02`)
- [ ] **텍스트 컨테이너 최대폭 ≤ 캔버스폭 84%**(860→725px) — 이 폭 초과 full-bleed는 순수 시각물(사진·목업·색밴드)만. (→`02` §7)
- [ ] **오토레이아웃 필수**(절대좌표 흩뿌리기 금지)·정렬 래퍼 흰배경 fills 비우기·모든 노드 역할 한글명. (→`02`·절대규칙 4)
- [ ] **인접 블록 템포** — 인접 텍스트 블록이 크기·굵기 **모두 동일**한 채 나열되면 위반(둘 중 하나 이상 점프), CTA는 대형 앵커. (→`03` §3)
- [ ] **2줄 타이틀 줄바꿈 균형** — 제목·강조문구·라벨이 2줄로 넘어가면 ① **어절 중간 절단 0건**(Figma 한글 자동 줄바꿈은 음절 사이를 끊는다), ② 두 줄 폭 균형, ③ **따옴표·괄호 묶음과 결합 표현**(`“수확 시기”`·`몇 px인지`·`안 건드리고`)**은 가르지 않고 묶음째 넘김**. U+2028 수동 개행으로 처리하며 **카피 확정 후 마지막 공정**. 3줄 이상 본문은 대상 아님. (→`03` §6, `build-recipes` §3-F, `troubleshooting` T16)
- [ ] **임의색 0**: 페이지 테마 팔레트 + 브랜드 프로파일 **둘 다** 대조해 어디에도 없는 색만 임의색(있으면 위반). (→`01` §1.5)
- [ ] **이미지 배치 의도**: 대상 강조=자르기(전경) / 배경 무드=채우기(후경), 배경 위 텍스트는 스크림 대비. (→`07`)
- [ ] **그림자(drop-shadow) 0 (기본)** — 누끼·주인공 사진엔 무조건 금지(촌스러움); UI 조형은 브랜드가 섀도 시그니처를 선언한 경우만. 부양은 회전·겹침·여백. (→`06` §3)
- [ ] **섀도 클리핑 0 (절대 — 예외 없음)** — 섀도를 넣었으면 그 섀도가 상위 컨테이너·마스크 경계에 깎여 안 보이는 일은 무슨 일이 있어도 용납 불가(2026-09-02 유저 절대 지시). 이펙트는 오브젝트가 아니라서 레이아웃 영역으로 안 잡혀 이렇게 잘린다. 해법: ① 자식 하나하나(pill 개별)가 아니라 **그 그룹 래퍼 전체에 섀도를 1회** 적용, 또는 ② 래퍼에 섀도 오프셋+블러만큼 padding 확보·clipsContent 해제. 검증: 섀도 가진 모든 노드의 렌더 경계를 스크린샷으로 전수 확인.
- [ ] **마스크/클리핑 잘림 0** — 스탬프·배지 등 걸치기 장식이 컨테이너 clipsContent에 걸려 일부만 잘려 렌더되면 위반. 걸치기 연출은 clipsContent 해제 또는 잘리지 않는 상위 레벨 배치로. (→`06` §3)
- [ ] **섹션 프레임 = hug**(2026-09-02 유저 지시) — 최상위 섹션 프레임도 고정 높이 금지: 세로 오토레이아웃 + hug 높이 + 명시적 상하 패딩으로 만들어 내부 콘텐츠 증감 시 스스로 늘고 줄게 한다. **단 섹션 프레임들을 "페이지_전체" 같은 상위 래퍼 하나로 묶는 것은 금지**(2026-09-02 유저 격노 — 유저는 프레임 "내부"의 오토레이아웃을 요구한 것이지 프레임들의 통합 틀이 아니다; 최상위 섹션은 캔버스 직속 개별 프레임으로 두고 y 적층·re-flow로 관리).
- [ ] **시그니처 조형 남용 0** — pill·배지 등 포인트 조형을 정보 없는 자리까지 반복하면 진짜 포인트가 죽고 단조로워진다(2026-09-02 유저 질책: 표 옆에 같은 축 이름 pill 중복). 같은 조형은 **고유 정보를 담는 곳에만**, 인접 콘텐츠와 중복되는 장식 반복 금지.
- [ ] **리스트 항목 = 타이틀 + 한 줄 설명** — 세로 공간 있는 리스트(목차·스텝·구성)에 타이틀만 두면 공간 낭비. 항목마다 보조 설명 1줄을 동반한다(설명 카피는 원문 근거로). 반대로 **plain 리스트에 카드 박스·마커를 습관적으로 두르지 않는다** — 박스 없는 리스트가 더 맞는 자리가 많고, 마커를 쓰면 텍스트 첫 줄과 광학 정렬 필수(좌상단에 뜬 무의미한 점 금지).
- [ ] **글자 그릇 세로 hug — 잠금 0**: 텍스트를 담는 모든 그릇(영역·카드·행·텍스트컬럼)은 세로 hug. 높이 잠금은 배경 연출 캔버스뿐이며 이름에 의도 선언(정본 실측: 잘림 사고 전건이 잠금 그릇, hug 그릇 0건). (→`08` §0·§2·§6)
- [ ] **넘침 0 — 수치 전수 판정**: 완료 전 `08` §7 `auditHierarchy()`를 섹션 루트에서 실행해 세로·가로 넘침 0건 확인 — 스크린샷으로는 잘린 글을 발견할 수 없다. (→`08` §7, `build-recipes` §1-6)
- [ ] **리스트 마커 첫 줄 정렬 — 레시피로**: 여러 줄 가능 리스트는 마커를 본문과 같은 크기·행간의 텍스트로(레시피 A, 보정값 불필요). 도형 마커면 래퍼높이=글자크기×행간비율·마커y=(래퍼−마커)÷2, 글자·행간 변경 시 재계산(B). 행 세로 가운데 정렬은 한 줄 항목 전용(C). (→`08` §4)
- [ ] **역할 판정 후 제작**: 텍스트·이미지·칩은 `09` 역할 사전(R01~R22)으로 역할부터 판정 — 증거 이미지=라운드+테두리+그림자 3종 세트(하나라도 빠지면 장식으로 판정), 배지·칩은 티어 분리(채움=강조/아웃라인=보조), 회색은 각주·출처·부가정보 전용(비교 진영색 사용 불가), 색 하강과 크기 하강은 한 쌍. (→`09` §1·§2·§4·§5)
- [ ] **▶순서 블록 준수**: `09` §6에서 ▶ 표시된 블록은 자식 순서가 규칙(예: 증거형 = 출처행→증거물→마커→해설→인용, 마커는 증거물의 직후 형제). (→`09` §6)
- [ ] **네이밍 = 역할+티어**: 노드명 접두는 `09` §1 사전 어휘만, 컴포넌트명에 조형어 단독 금지({역할}_{티어} 형식), 원고 문장을 노드 이름으로 쓰지 않는다. (→`09` §7)
- [ ] **full-bleed 텍스트는 사진 여백존에만** — 텍스트가 피사체(오브젝트)와 겹치지 않는가. (→`06` §6)
- [ ] **추측 금지 3종**: 법정 고지문·리뷰 콘텐츠·미확정 카피 — 지어내지 말고 원문/유저 확인. (→`00` §0)

## 절대 지킬 규칙

### 1. 브랜드 프로파일 확정 + 인터뷰 선행 — 추측 금지
착수 전 반드시 **어느 브랜드인지 확정**하고 그 `brands/<이름>.md`를 연다. 프로파일이 없거나 값이 미정이면 유저에게 색·서체를 받아 프로파일을 먼저 채운다. 이어 `00-interview.md`로 나머지 입력을 확인한다. 이 시스템의 규칙은 전부 **상대 규칙**이라 입력(브랜드 값, 제품 대표색, 카피 확정본, 섹션 범위, 리뷰 자산)이 없으면 값이 정해지지 않는다. 불확실하면 유저에게 질문한다. **절대 추측 금지 3종**: 법정 고지문, 리뷰 콘텐츠, 미확정 카피. **브랜드 색·폰트도 패턴만으로 지어내지 않는다.**

### 2. 낯선 조형은 분석 후 구현 — 눈대중 치환 금지
레퍼런스에 이 시스템에 없는 조형(말풍선·배지 등)이 있으면 익숙한 패턴으로 때우지 않는다. 고해상도로 재조회해 도형 구성을 분석하고, 애매하면 유저에게 의도를 확인한 뒤 만든다(→ `build-recipes.md` §2, `00-interview.md` §3). 색만 바꾼 게 아니라 형태 자체가 같은 조형 문법인지 대조한다.

### 3. 한 번에 한 구간만 (순차 기본)
제작은 한 섹션(또는 한 페이지)씩. 완료하면 `get_metadata`+스크린샷으로 검증 → 유저 확인 → 다음. 여러 섹션 몰아 만들지 않는다(독립 섹션 병렬 use_figma는 성능상 허용). **전체 신규를 병렬 제작할 땐 이 규칙 대신 `orchestration.md` 웨이브 절차를 따른다** — 그 모드의 유저 확인 게이트는 섹션마다가 아니라 (i) 스켈레톤 승인(규칙 5)과 (ii) 최종 전체 스트립 검수 시점이다.

### 4. 구조 정돈 없이 완료 보고 금지
의미단위(이미지+캡션, 강조어+배경 등)는 서브프레임/그룹으로 묶어 중첩 오토레이아웃으로(→ `02` §2). 네이밍·흰배경·오토레이아웃 규칙은 위 하드 게이트 참조. 완료 전 `get_metadata`+스크린샷 자가 검증(→ `build-recipes.md` §1).

### 5. 전체 신규는 스켈레톤 우선 (+ 이미지 주인공 판정 선행)
전체 신규 제작이면 세부 전에 섹션별 빈 placeholder로 전체 구성을 그려 승인받는다(→ `design-dna/05` + `build-recipes.md` §5). 부분 수정이면 생략.
**스켈레톤 착수 前에 반드시 `design-dna/05` §0.5로 페이지 아키타입(감각 설득형=이미지 주인공 / 정보 설득형=텍스트 주도)을 판정**한다. 감각형이면 **시각 히어로 구간(§1-15)의 세로 공간을 텍스트보다 먼저 예약**한 뒤 그 사이에 텍스트 섹션을 채운다 — 텍스트를 먼저 다 채우고 이미지를 남는 자리에 끼우면 세로가 텍스트로만 차고 템포가 죽는다.

## 작업 흐름

```
0. 브랜드 프로파일 확정 → brands/<이름>.md 로드(없으면 _template 복사·채움, 값 미정이면 유저에게 받음)
1. 인터뷰(00-interview) → 나머지 입력 확보, 불확실하면 질문. 낯선 조형은 의도 확인.
2. [전체 신규만] 스켈레톤(05 + build-recipes §5) → 승인
3. 섹션별로:
   a. 05-page-purpose에서 이 섹션의 역할·필수요소 확인
   b. 결정: 색(01 패턴 + brands 값) / 조형·배치(02) / 타이포(03 + brands 폰트) / 카피(04) / 사진(06)
   c. build-recipes 절차·코드로 use_figma 제작 (figma-mcp API 규칙 준수)
   d. get_metadata + screenshot 검증(수치·네이밍·계층·흰배경·블렌드·겹침 **+ 하드 게이트 전수**)
   e. 유저 확인 → (승인) 다음 섹션
      (반려) 피드백을 결정 슬롯(색/조형·배치/타이포/카피/사진)으로 분류 → 3b 재결정 → 3c 재제작
      → 3d 재검증. 입력 자체(브랜드 값·카피·섹션 범위)가 바뀌면 1(인터뷰)로 돌아가 갱신.
4. 전체 조립 검증(모든 섹션 완료·수정 후 — 순차·병렬 공통):
   최종 재배치 → 전체 스트립 스크린샷(troubleshooting T12)으로 밴드 리듬(색·높이 교대)·
   액센트 반복 빈도·인접 섹션 템포·배경 톤 연속성 확인. 부분 수정은 고친 섹션 ± 앞뒤 1섹션 스트립만.
```

## 한 줄 원칙

- **브랜드마다 색·서체 "값"이 다르고, 패턴은 고정**이다. 색은 `01`(패턴)+`brands`(값)로 정한다.
- 색은 **배경이 결정**한다(밝은 배경=채도로, 사진·어두운 배경=명도/고명도로) (→ 01·06).
- 조형은 **역할의 신호**다(강조 CTA=박스 없음, 정보=테두리+구분선, 격리 샘플=면+테두리+라운딩, 말풍선=꼬리) (→ 02).
- 위계는 **크기+굵기 점프**로(같은 색 안에서), 서체 역할 전환은 톤 전환 신호 (→ 03).
- 사진은 **깡으로 넣지 않는다** — 역할 판정 후 블렌드/거리/삽입방식 결정 (→ 06).
- 모든 수치·판단은 실측/확정 근거가 있어야 한다. 없으면 만들지 말고 유저에게 묻는다.