web-design-idioms

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 등 공개 웹폰트 또는 시스템 폰트로 지정한다.