detail-page-core

# 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` | | **글자 크기·굵기·서체 역할** 위계 | `references/design-dna/03-typography.md` (+ 폰트 값은 brands) | | **카피의 길이·역할** | `references/design-dna/04-copy.md` | | **어떤 섹션을 왜** 넣을지·순서·구성 | `references/design-dna/05-page-purpo...