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
This commit is contained in:
Yun Chan 2026-10-06 16:55:38 +09:00
parent 9bcb45cbd3
commit 88c11682b1
51 changed files with 5834 additions and 2259 deletions

View file

@ -1,6 +1,14 @@
# presets — 미학 프리셋
2단계에서 읽는다. **하나를 고르고, 왜 그것인지 한 줄로 적는다.**
2단계에서 읽는다. **지배 프리셋 하나를 고르고, 왜 그것인지 한 줄로 적는다.** 브리프가 둘 이상의 스타일이나 이질적 물성을 명시하면 지배 프리셋 하나 + 보조 축으로 섞는다 — 절차는 [../remix.md](../remix.md). 프리셋에 없는 시각 언어(Y2K·아르데코·네오브루탈 등)의 어휘는 [../style-atlas.md](../style-atlas.md)에서 찾는다.
## 이 문서를 읽는 법
| 상황 | 읽을 곳 |
|---|---|
| 2단계에서 프리셋을 고른다 | 처음부터 "프리셋은 값이 아니라 범위를 준다" 끝까지만 읽고, 고른 프리셋 파일 하나를 연다 |
| 같은 세션·저장소에 다른 산출물이 있다 | "프리셋은 값이 아니라 범위를 준다"의 3~5번, "피하는 수렴 클러스터" |
| 3단계에서 한글 서체를 고른다 | [../typography.md](../typography.md) §6-6에서 역할별 이름을 보고, 고른 후보의 성격·라이선스·배포처만 "한글 서체 후보 풀"에서 확인한다. 2단계에서는 풀을 읽지 않는다 |
프리셋은 템플릿이 아니라 **결정의 출발점**이다. 값·폰트·효과 목록은 가설이며, 브리프·콘텐츠·실제 렌더 검증으로 조정한다. 단 각 프리셋이 정한 정체성 계약(예: editorial의 세리프 주역, dense 화면의 비교 가능성)은 바꾸려면 다른 프리셋 또는 새 방향을 정의한다.
1단계 레퍼런스 R2(다른 업종의 톤)를 여기에 섞어야 이 브리프만의 것이 된다.
@ -14,4 +22,93 @@
| [quiet-commerce](quiet-commerce.md) | 읽히는 커머스 | 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체 |
**어느 것도 맞지 않으면 새로 정의해라.** 브리프가 프리셋보다 우선한다.
새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/실패/검증)는 채운다. 실제 적용 조건과 검증은 `../style-playbook.md`를 따른다.
새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/흔한 실패/리스크 후보)는 채운다. 실제 적용 조건과 검증은 `../style-playbook.md`를 따른다.
---
## 프리셋은 값이 아니라 범위를 준다
실측 사고(2026-10-01 레드팀): designpaca로 만든 쇼케이스 21개가 업종은 청자·향·커피·광학·항공우주·법무까지 다양했는데 시각 언어는 하나로 수렴했다 — 본문 Pretendard 21/21, 표제 마루 부리 11/21, `--radius: 2px` 11/21, 배경은 웜 오프화이트(`#f4f1e9`~`#fdfdfb`) 12곳과 니어블랙 8곳뿐(중간 명도·유채색 배경 0), 강조색 19개 중 12개가 녹·테라코타·갈색·앰버. 원인은 프리셋의 한글 서체 칸이 사실상 한 후보였고, 배경·radius가 "출발값" 하나로 적혀 출발점이 곧 도착점이 됐기 때문이다.
그래서 각 프리셋은 서체·배경 명도·강조색 계열·radius를 **후보 풀과 허용 범위**로 적는다. 프리셋 문서의 첫 번째 후보는 기본값이 아니다. 풀 안에서 아래 순서로 고른다.
1. **브랜드 자산이 잠근 축은 그대로 쓴다.** 기존 서체·로고 색·radius가 있으면 풀보다 우선한다.
2. **브리프에서 성질을 끌어온다.** 서체는 획 대비·속공간·마감(각진/둥근 맺음)·폭이, 배경은 조도·사진 톤이, 강조는 제품·재료·업종의 실제 색이 이 브리프와 연결되는지로 고른다. "깔끔해서", "무난해서"는 근거가 아니다.
3. **포트폴리오 반복 점검.** 같은 저장소·같은 세션·직전 프로젝트의 산출물(`design.md`, `tokens.css`)이 있으면 대조한다. 서체 패밀리가 겹치면 풀의 다른 후보로 바꾼다. 그래도 같은 서체가 맞다면 다른 후보 둘과 같은 문단으로 만든 proof sheet 비교를 `design.md`에 남긴다.
4. **4축 수렴 점검.** 서체 · 배경 명도 · 강조 hue · radius 4개 중 3개 이상이 아래 수렴 클러스터나 직전 산출물과 같으면, 의도적 결정인지 한 줄로 기록하고 아니면 하나 이상을 범위 안의 다른 값으로 옮긴다.
5. **한 축이 전부 같아지지 않게 한다.** 같은 세션·저장소에서 산출물을 둘 이상 만들면 서체·배경 명도·강조 hue 구간(30° 단위)·radius 가운데 어느 한 축도 전부 같은 값이 되지 않게 한다. 같아야 하면 이유를 적는다. 4번은 한 쌍에서 셋 이상이 겹치는지만 봐서, 축 하나가 모두 같아도 지나간다 — 수렴을 고치려고 다시 만든 쇼케이스 3종은 서체와 배경이 서로 달라 4번을 통과했지만 강조색이 셋 다 적색 33~38°로 다시 모였다(2026-10-06 계측). 구성 쪽의 같은 점검은 [../art-direction.md](../art-direction.md) §3-2 B-2에 있다.
### 피하는 수렴 클러스터
아래 조합은 금지가 아니라 **근거를 요구하는 관찰 후보**다(`../antipatterns.md` §1·§3과 같은 판정). 브리프가 정확히 이 룩을 요구하면 그대로 쓴다.
| 클러스터 | 지문 | 대안 방향의 예 |
|---|---|---|
| 웜 페이퍼 하우스 룩 | 웜 오프화이트(L 95~98%) + 녹·테라코타·갈색 강조 + radius 2px + 모노 eyebrow + 부리 표제 | 중간 명도 유채색 배경, 쿨 또는 고채도 강조, radius 0이나 8px 이상, eyebrow 없이 본문 서체 라벨 |
| 니어블랙 단일 네온 | `#0a`~`#14` 배경 + 비비드 강조 하나 + 모노 수치 | 깊은 유채색 다크(먹청·적갈흑), 강조 둘의 역할 분리, 모노는 숫자·코드에만 |
| 브로드시트 | 헤어라인 전면 + radius 0 전면 + 조밀 컬럼 | 면 분할·색면 위계, 컬럼 대신 큰 이미지 리듬 |
### 범위 축의 공통 정의
| 축 | 어떻게 적나 | 왜 |
|---|---|---|
| 배경 명도 | OKLCH L 범위와 허용 채도(C) 상한. 예: `L 0.55~0.75, C ≤ 0.12` | 밝음/어두움 두 극단만 쓰면 중간 명도·유채색 면이 선택지에서 사라진다 |
| 강조색 계열 | hue 계열 2~3개 후보와 브리프 연결 질문 | 단일 출발값은 매번 같은 색으로 끝난다 |
| radius | 범위 + 역할별 차등(컨트롤/카드/미디어) | 2px 하나가 하우스 서명이 됐다 |
| 서체 | 아래 풀에서 프리셋별 부분집합 | 같은 한글 서체 반복이 가장 먼저 눈에 띄는 동질화다 |
중간 명도·유채색 배경을 쓸 때는 본문과 컨트롤의 대비를 그 배경 위에서 실측한다(`../color.md`). 배경이 중간 명도면 본문 면을 별도 밝은/어두운 판으로 두는 방법도 있다.
---
## 한글 서체 후보 풀
확인일: 2026-10-02. 라이선스는 각 배포처(GitHub 저장소·제작사 페이지·Google Fonts·공유마당)에서 확인한 범위다. **채택할 때는 배포처의 현재 라이선스 원문을 다시 열어 `design.md`에 확인일과 함께 적는다.** OFL 1.1은 웹 임베딩·상업 사용·서브셋을 허용하고 글꼴 단독 판매를 금지한다.
### 고딕(민부리) — 본문·UI
| 서체 | 성격 | 라이선스 | 배포 |
|---|---|---|---|
| Pretendard | 중립·넓은 웨이트·라틴 조화. 쇼케이스 실측에서 과다 사용 — 직전 산출물과 겹치면 바꾼다 | OFL 1.1 | GitHub orioncactus/pretendard |
| SUIT | 기하적이고 단정한 UI 본문, 속공간 큼 | OFL 1.1 | GitHub sun-typeface/SUIT |
| Wanted Sans | 곧으면서 유연한 곡선, 표제 겸용 표정 | OFL 1.1 | GitHub wanteddev/wanted-sans |
| Spoqa Han Sans Neo | 숫자·라틴이 단정, 정보 밀도에 강함 | OFL 1.1 | GitHub spoqa/spoqa-han-sans |
| IBM Plex Sans KR | 기계적 맺음, Plex 라틴·모노와 패밀리 일치 | OFL 1.1 | Google Fonts |
| LINE Seed Sans KR | 둥근 기하, 친근한 브랜드 톤 | OFL 1.1 | seed.line.me |
| Gothic A1 | 좁고 단단한 고딕, 웨이트 9종 | OFL 1.1 | Google Fonts |
| Gowun Dodum | 손맛 있는 부드러운 고딕, 작은 크기 따뜻함 | OFL 1.1 | Google Fonts |
| Noto Sans KR | 넓은 글리프 범위, 다국어 혼식 안정 | OFL 1.1 | Google Fonts |
| 나눔바른고딕 | 획 끝이 반듯한 부드러운 고딕, 작은 크기 본문 | 네이버 나눔글꼴 라이선스 — 수정·재배포·웹 임베딩 허용, 글꼴 단독 판매 금지(눈누 요약에서 확인 2026-10-06, 배포처 원문은 채택 때 확인) | 네이버 한글한글 아름답게 |
### 명조(부리) — 본문 가능
| 서체 | 성격 | 라이선스 | 배포 |
|---|---|---|---|
| 리디바탕 | 전자책 본문용, 긴 읽기에 맞춘 낮은 대비 | OFL 1.1 | ridicorp.com/ridibatang |
| 이롭게 바탕 | 웹 전용으로 기획된 한글 바탕 | OFL 1.1 | GitHub iropke/font-iropke-batang |
| Gowun Batang | 붓 맛이 남은 부드러운 바탕 | OFL 1.1 | Google Fonts |
| 나눔명조 | 고전적 명조, 넓은 보급 | OFL 1.1 | Google Fonts |
| Noto Serif KR | 웨이트 7종, 다국어 혼식 | OFL 1.1 | Google Fonts |
| 마루 부리 | 현대적 부리, 표제·본문 겸용. 쇼케이스 실측에서 과다 사용 — 직전 산출물과 겹치면 바꾼다 | OFL 1.1 | 네이버 한글한글 아름답게 |
| Hahmlet | 1950년대 영화 포스터 레터링 기반 가변 부리, 표제에서 표정이 큼 | OFL 1.1 | GitHub hyper-type/hahmlet, Google Fonts |
KoPub World 바탕·돋움은 인쇄·전자책에는 무료지만 **서버에 설치해 웹폰트로 임베딩하려면 한국출판인회의의 별도 승인이 필요하다**(kopus.org 안내). 승인 기록이 없으면 웹 풀에서 제외한다.
### 디스플레이 — 표제·브랜드 장면
| 서체 | 성격 | 라이선스 |
|---|---|---|
| Black Han Sans | 극굵은 각진 고딕, 포스터 | OFL 1.1 (Google Fonts) |
| Do Hyeon | 납작한 굵은 고딕, 간판 | OFL 1.1 (Google Fonts) |
| Jua | 둥근 굵은 고딕, 놀이·식음 | OFL 1.1 (Google Fonts) |
| Gasoek One | 초굵은 기하 표제 | OFL 1.1 (Google Fonts) |
| Bagel Fat One | 둥글고 두꺼운 팝 | OFL 1.1 (Google Fonts) |
| Orbit | 레트로 퓨처 기하 고딕 | OFL 1.1 (Google Fonts) |
| Song Myung | 붓 기운이 남은 표제 명조 | OFL 1.1 (Google Fonts) |
| 제주명조 | 개성 강한 표제 명조 | 공공누리 1유형(공유마당) |
| Paperlogy | 기하 산세, 표제·발표 | OFL 1.1 |
| G마켓 산스 · 여기어때 잘난체 | 굵은 브랜드 산세 | 제작사 자체 무료 라이선스 — 채택 시 원문 확인 필수 |
### 한글이 섞이는 모노·코드
라틴 모노(JetBrains Mono·IBM Plex Mono)는 한글 글리프가 없어 시스템 폰트로 떨어진다. 한글이 섞이는 라벨은 모노로 조판하지 않는다 — 숫자·코드·라틴 약어만 모노 스택에 두고 한글은 본문 서체로 남긴다(`unicode-range` 분리 또는 본문 서체 + `tabular-nums`). 한글 코드 주석처럼 정말 고정폭 한글이 필요하면 D2Coding이나 나눔고딕코딩(둘 다 OFL 1.1)을 쓴다.