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

@ -6,7 +6,7 @@
- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
- 사용자가 이 화면을 **오래 본다**는 전제가 있을 때
- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. **다크 기본값은 단일 슬롭 시그니처 1위다.** 이유를 댈 수 없으면 라이트로 가라
- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. 브랜드·환경과 무관한 다크 기본값은 AI 생성 화면에서 자주 반복되는 관찰 후보다(`../antipatterns.md` §1). 이유를 댈 수 없으면 라이트로 가거나, 라이트 고밀도(금융 신문·시간표형) 변형을 검토한다
### 다크를 정당화하는 이유의 예
- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
@ -20,15 +20,21 @@
- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다
| 슬롯 | 무료 | 한글 |
| 슬롯 | 무료 | 한글 후보 풀 |
|---|---|---|
| 본문 | IBM Plex Sans, DM Sans, Switzer | Pretendard / Spoqa Han Sans Neo |
| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |
| 본문 | IBM Plex Sans, DM Sans, Switzer | IBM Plex Sans KR · Spoqa Han Sans Neo · SUIT · LINE Seed Sans KR · Noto Sans KR |
| 수치·코드 | JetBrains Mono, IBM Plex Mono | 숫자·코드만 모노. 한글 섞인 코드 주석은 D2Coding · 나눔고딕코딩 |
- 선택 기준: 수치 라틴이 Plex Mono면 IBM Plex Sans KR로 패밀리 맺음을 맞추고, 어두운 배경에서 획이 번지는지 작은 크기(12~13px)로 비교한다. 숫자가 주역이면 Spoqa Han Sans Neo의 숫자 폭을, 긴 설명 패널이 많으면 SUIT의 속공간을 먼저 본다.
- Pretendard는 쇼케이스 실측에서 과다 사용됐으므로 기본값으로 두지 않는다. 직전 산출물과 겹치면 다른 후보를 고른다. 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.
### 색
- 순수 검정/흰색과 근접색을 모두 후보로 두고, 실제 기기·주변광·장시간 읽기에서 대비와 눈부심을 확인한다. `#0d0d0f`~`#14130f`, `#e8e4dc`~`#e6e6e9`는 출발값 예시다.
- **배경 명도 범위**: OKLCH L 0.12~0.28. 무채 니어블랙만이 아니라 hue를 실은 깊은 다크(먹청·심해 청록·적갈흑, C ≤ 0.06)도 범위 안이다. 니어블랙 + 단일 비비드 강조는 수렴 클러스터(`README.md`)이므로 고르면 이유를 적는다.
- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
- **강조색 계열**: 데이터 범주색과 겹치지 않는 hue에서 고른다 — 앰버·시안·라임·마젠타 중 제품 도메인(전력·의료·금융)의 관습과 충돌하지 않는 것. 강조 둘을 쓰면 "선택/주의"처럼 역할을 나눈다.
- **radius 범위**: 0~6px. 패널과 컨트롤의 값을 역할별로 나눈다.
- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
### 간격
@ -37,9 +43,9 @@
- 4px 그리드를 엄격히
### 재질 (`svg-filters.md`)
- **거의 쓰지 않는다.** 어두운 배경에서 그레인은 노이즈로 보인다
- **그레인은 기본 비채택이다.** 어두운 배경에서 그레인은 노이즈로 보이기 쉽다. 리믹스·브리프가 재질 축을 그레인에 배정하면 쓸 수 있다 — 어두운 면의 실제 렌더로 본문 대비와 노이즈를 확인하고 `design.md`에 기록한다([svg-filters.md](../svg-filters.md) §1, [remix.md](../remix.md))
- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
- 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지
- 글래스모피즘은 성능 대비 이득이 적다. 기본은 내비게이션 바 정도까지다([svg-glass.md](../svg-glass.md))
### 모션 (`motion.md`)
- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
@ -49,7 +55,7 @@
## 흔한 실패
1. **배경·텍스트 대비를 기기에서 확인하지 않음** → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
2. **브랜드와 무관한 네온 보라/파랑 강조** → AI 생성 다크 화면에서 자주 반복되는 관찰 후보다. 브랜드·데이터 역할과 연결한 근거가 없으면 다른 hue를 비교한다
3. **테마 결정을 설명하지 않음** → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라