| name | web-design-idioms |
| description | 웹사이트 고유의 시각 관용을 디자인 팩으로 증류하는 지식 스킬. web-pack-curator가 사용한다. 반응형·뷰포트, 컴포넌트 단위 구성, 스크롤·호버·전환 모션, 접근성 대비를 검증 가능한 prompt.md 지시로 옮기는 방법과, HTML/CSS로 곧장 구현 가능한 수준의 구체성을 규정한다. |
Web Design Idioms — 웹 디자인 관용
web-pack-curator가 웹 스타일을 팩으로 증류할 때 따르는, 웹 매체 고유의 지식.
웹이 PPT와 다른 점
- 가변 뷰포트. 모바일~데스크탑. 콘텐츠 최대 폭과 브레이크포인트,
clamp() 타이포를 지시한다.
- 컴포넌트 단위 구성. 헤더 / 히어로 / 섹션 / 카드 / 폼 / 푸터. 슬라이드가 아니라 스크롤 흐름.
- 인터랙션이 스타일의 일부. 호버·스크롤·전환 모션의 성격(없음/절제/스내피/장난스러움)이 정체성.
- 접근성. 본문 대비 WCAG AA(4.5:1) 이상. 다크/저대비 팩도 텍스트 가독은 지킨다.
컴포넌트 위계
팩의 prompt.md는 최소 이 컴포넌트들에 대한 지시를 담는다:
- 헤더/네비 — 고정 여부, 로고·메뉴 배치, 배경 처리.
- 히어로 — 제목 타이포 스케일, 레이아웃(중앙/좌측/분할), 배경·이미지 처리.
- 섹션/콘텐츠 블록 — 섹션 간 수직 리듬, 콘텐츠 폭.
- 카드 — 보더·모서리·그림자·호버.
- 푸터 — 밀도, 색 반전 여부.
검증 가능한 지시로 옮기기
diversity-qa가 시각 대조하므로 모호어는 통과하지 못한다. CSS로 곧장 구현되는 값으로 적는다:
| 모호 (금지) | 검증 가능 (사용) |
|---|
| "깔끔한 레이아웃" | "콘텐츠 최대 폭 1100px, 섹션 간격 96px, 12열 그리드" |
| "읽기 좋은 본문" | "본문 1618px, line-height 1.7, 측정 6575자" |
| "부드러운 모션" | "전환 200ms ease-out, 호버 시 translateY(-2px)" |
| "카드 디자인" | "radius 0, 보더 1px solid text색, 그림자 없음, 호버 시 배경 반전" |
| "강조 색" | "강조색 1개, CTA·링크에만, 면적 5% 이하" |
팩 정체성을 과장하라
다양성이 목적이다. 각 팩은 자기 스타일을 끝까지 민다:
- 스위스 미니멀 — 헤어라인 보더, 무채색, 엄격한 그리드, 모션 거의 없음.
- 네오브루탈 — 3px+ 하드 보더, 오프셋 하드 섀도, 원색 블록, 스내피 전환.
- 글래스모피즘 —
backdrop-filter: blur, 반투명 표면, 라이트 그라디언트 배경.
baseline(보라 그라디언트·둥근 카드·균일 그림자의 기본 AI 미감)과 한눈에 구별되지 않으면 실패다.
"하지 말 것" 단서 (Claude 기본 회귀 차단)
웹에서 Claude가 기본값으로 흔히 회귀하는 것 — 팩 성격에 맞게 prompt.md의 "하지 말 것"에 명시:
- 보라/인디고 그라디언트 / 균일한 둥근 카드 / 모든 카드에 같은 soft shadow.
- 의미 없는 이모지 / 중앙 정렬 히어로의 무조건 반복 / 그라디언트 텍스트.
- 정체불명 일러스트 / blob 도형 / 과한 글래스 남용.
- 섹션마다 동일한 3카드 그리드 반복.
구현 가능성
sample-renderer가 prompt.md만으로 실제 HTML/CSS(또는 Tailwind)를 렌더한다. 지시는 표준 CSS 속성으로 번역 가능해야 한다 — 실현 불가능한 효과나 외부 유료 자산 의존을 넣지 않는다. 폰트는 Google Fonts 등 공개 웹폰트 또는 시스템 폰트로 지정한다.
