Yun Chan 88c11682b1 feat(skill): route fixes, delivery report, composition diversity, platform refresh

- route table: extension route for products with an existing visual
  language, feedback row, derived state tokens stay local
- completion: blocking 0 plus reported unverified; hard-gate surface is
  the touched scope; delivery report starts with what and how to open
- design.md created at step 0 with a skeleton, fingerprint line and
  change log; product-surface rubric reading; direction delegation
  states the chosen card and reason
- layout: hero families, nav forms, footer forms; art-direction page
  convergence 6 axes; genre sections; image treatments; placeholder
  conventions; multi-screen order; Tailwind theme mapping
- platform: scroll-driven examples, anchor positioning, canvas OT,
  three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid
- design-gate: four result states, exit codes, cwd module resolution,
  --url/--out-dir/--strict, oklch contrast, dead selector word match
- Korean font budget split from the Latin baseline

2026-10-06 16:55:38 +09:00

7.1 KiB

Raw Blame History

프리셋: quiet-commerce — 읽히는 커머스

한 문장: 콘텐츠가 설득하고, 화면은 한 번만 요구한다.

editorial 의 타이포 규율에 전환 구조를 붙인 것이다. 콘텐츠가 주인공이되 CTA 가 경로 위에 정확히 하나 있다.

언제 고르나

상품 수가 적고(5개 이하) 구매자가 이미 카테고리를 아는 D2C — 로스터리, 소규모 브랜드, 구독 서비스, 단일 제품
사진보다 사양·근거가 설득의 주체일 때. 또는 사진이 아직 없을 때
쓰지 마라: 상품 수가 많은 커머스(그리드·필터가 주인공이 된다) · 카테고리 입문자 대상(설명이 먼저다) · B2B 도구(→ swiss-minimal)

이 프리셋이 존재하는 이유: editorial 과 anti-grid 는 "전환이 목적인 랜딩에는 쓰지 마라"고 명시하고, swiss-minimal 은 B2B·도구용이며, dark-instrument 는 다크 정당화가 필요하다. 전환이 목적인 B2C 랜딩에는 넷 다 맞지 않는다.

결정

타이포그래피

디스플레이 세리프 1 + 본문 산세리프 1. 세리프가 톤을, 산세리프가 가독성을 맡는다
비율 1.333과 강한 display 대비에서 시작하고, 문구 길이·제품 증거·모바일 줄 수로 확정한다. 최대÷본문 4배 같은 고정 비율은 요구사항이 아니다.
단계 4~5개. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
웨이트는 적게 — 실제로 로드하는 값은 둘 안팎에서 시작한다. 값은 역할 토큰으로만 쓴다(tokens.md "웨이트와 컨트롤")

슬롯	라틴	한글 후보 풀
디스플레이	Fraunces, Instrument Serif	Hahmlet · Gowun Batang · 이롭게 바탕 · (산세 표제면) Paperlogy · Wanted Sans
본문·UI	Switzer, Satoshi	SUIT · Wanted Sans · LINE Seed Sans KR · Spoqa Han Sans Neo · Gowun Dodum · Pretendard
수치	본문 + `tabular-nums`	본문 + `tabular-nums`

선택 기준: 제품이 공예·식음·생활재면 손맛 있는 쪽(Gowun Batang + Gowun Dodum, 또는 LINE Seed의 둥근 기하), 기술 소비재·구독이면 SUIT·Wanted Sans·Spoqa처럼 숫자가 단정한 고딕을 먼저 비교한다. 가격·사양 숫자를 표제 서체와 본문 서체로 각각 조판해 tabular 정렬을 확인한다.
Pretendard는 풀의 하나일 뿐 기본값이 아니다. designpaca로 만든 쇼케이스 21종 실측(2026-10-01)에서 21종 모두 본문에 썼다. 직전 산출물과 겹치면 다른 후보를 고른다.
서체 성격과 라이선스는 README.md의 한글 서체 후보 풀을 따른다.

한글 본문 부리는 proof sheet로 검증한 뒤 채택한다. 획이 가늘고 대비가 큰 표제용 부리는 14~16px 본문에서 획이 흐려지기 쉽다. 반대로 리디바탕·이롭게 바탕처럼 본문용으로 설계된 바탕은 긴 상품 설명에 쓸 수 있다(editorial.md도 한글 본문 부리를 후보로 둔다). 실제 상품 설명 문단을 대상 기기의 16px·200% 확대에서 산세 후보와 나란히 렌더해 비교하고, 가격·옵션·폼 라벨은 산세로 남기는 쪽을 먼저 검토한다.

색

배경 명도 범위: 밝은 면(OKLCH L 0.92~~0.99)에서 시작하되, 제품 사진의 배경색이나 패키지 색을 그대로 끌어온 중간 명도 유채색 면(L 0.60~~0.85, C ≤ 0.14)도 후보다. 순백은 피할 대상이 아니라 상품 사진 배경과 맞는지로 판단한다.
크림·베이지는 "고급"의 자동 신호로 쓰지 않는다 — 웜 오프화이트는 AI 생성 결과가 가장 자주 수렴하는 배경 후보다(../antipatterns.md §1). 쓰려면 제품·패키지·매장의 실제 색과 연결한 근거를 적는다.
잉크도 순흑일 필요는 없다. 배경 hue를 조금 섞은 근접색과 순흑을 대비로 비교한다.
강조색 계열: 제품·패키지의 실제 색, 업종과 반대되는 의외의 hue(예: 커피에 코발트), 또는 고채도 원색 하나 중에서 고른다. 녹·테라코타·갈색·앰버는 쇼케이스 실측에서 과다 사용된 계열이다. 직전 산출물과 겹치면 다른 계열을 고른다.
강조 역할이 필요하면 한 색으로 시작하고, 실제 상태색·링크·CTA를 포함한 화면에서 경쟁 여부를 검증한다. 5% 면적 같은 값은 보편 품질 기준이 아니다.
hue 2개 (중립 + 강조)에서 시작하고, 브랜드 색면이 넓으면 3개까지 검토한다.
radius 범위: 컨트롤 4~~12px, 상품 카드·이미지 0~~16px. 패키지 형태(각진 상자·둥근 병)와 맞춘다.

간격

8px 그리드, 여백 값 5종
섹션과 요소 간격의 차이가 정보 묶음을 읽히게 하는지 본다. 1:5는 예시 가설이며, 상품 수·콘텐츠 길이·화면 폭에서 조정한다.
비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
--measure 는 좁게. 한글 25~~35자(정본 ../typography.md §6-5의 32~~40자보다 좁게 잡는 프리셋 선택이다)

재질 (`svg-filters.md`)

필름 그레인 최약(0.02~0.04). 오프화이트 배경의 밴딩을 없애는 용도지 질감을 과시하는 게 아니다
유리·글로우·굴절 없음. 이 프리셋의 표면은 종이다
사진이 있다면 듀오톤·그라디언트 맵으로 톤을 통일한다

모션 (`motion.md`)

거의 움직이지 않는다. 스크롤 진입 페이드 + 8px 상승 하나면 충분하다
스크롤 재킹 금지. 구매 결정 중인 사람의 속도를 뺏지 마라
CTA 는 호버·포커스 피드백을 확실히 준다. 여기가 유일하게 반응이 즉각적이어야 하는 곳이다

흔한 실패

세리프 디스플레이를 쓰고 여백이 좁다 → 세리프는 숨 쉴 공간이 없으면 답답할 뿐이다
CTA 가 이유 없이 둘로 갈라진다 ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 결과가 다른 두 경로라면 세그먼트 선택 + 단일 CTA와 병렬 두 CTA 중 브리프의 목표 행동 우선순위로 고르고, 채운 버튼은 목표 행동 하나에만 준다(color.md §7)
수치를 지표 배너로 만든다 → 근거 없는 숫자는 신뢰를 깎는다. '사용자가 주지 않은 수치를 그럴듯한 값으로 넣지 않는다' 하드 게이트에 걸린다
한글에 라틴 세리프만 지정 → 한글이 시스템 기본으로 떨어져 전부 무너진다
사진이 없다고 일러스트로 때운다 → 사양·수치·타이포로 채우는 쪽이 이 대상에게 더 강하다

리스크 후보

히어로에 이미지도 감성 카피도 없이 사양 수치표를 올린다 (대상이 카테고리를 아는 경우에만)
가격을 첫 화면에 정직하게 노출한다
제품 설명을 산문 한 문단으로 쓰고 불릿을 없앤다

근거: 2026 트렌드 조사, AI 슬롭 시그니처 조사, 커피 브랜드 도그푸드 기록(저장소 전용, 설치본 미포함, 검증일 2026-08-20)

7.1 KiB Raw Blame History