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

5.5 KiB

Raw Blame History

프리셋: dark-instrument — 계기판처럼 정확한

한 문장: 정밀함이 곧 신뢰인 화면. 어둡되 분위기가 아니라 기능으로 어둡다.

언제 고르나

개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
사용자가 이 화면을 오래 본다는 전제가 있을 때
쓰지 마라: 다크가 "멋있어서" 고르는 경우. 브랜드·환경과 무관한 다크 기본값은 AI 생성 화면에서 자주 반복되는 관찰 후보다(../antipatterns.md §1). 이유를 댈 수 없으면 라이트로 가거나, 라이트 고밀도(금융 신문·시간표형) 변형을 검토한다

다크를 정당화하는 이유의 예

사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
화면에 밝은 데이터 시각화가 있고 배경이 어두워야 대비가 산다
제품 자체(터미널·에디터·모니터링)가 어둡다

결정

타이포그래피

산세를 본문 출발점으로 두고, 정렬이 중요한 수치·ID·코드에는 tabular figure 또는 모노를 검토한다. 모든 수치·ID에 모노가 필수인 것은 아니다.
비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
숫자는 tabular-nums 를 켜라 (font-variant-numeric: tabular-nums). 수치가 흔들리면 계기판이 아니다

슬롯	무료	한글 후보 풀
본문	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의 한글 서체 후보 풀을 따른다.

색

순수 검정/흰색과 근접색을 모두 후보로 두고, 실제 기기·주변광·장시간 읽기에서 대비와 눈부심을 확인한다. #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. 패널과 컨트롤의 값을 역할별로 나눈다.
상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다

간격

밀도를 높이되 정렬을 완벽하게. 이 프리셋에서 어긋난 1px은 즉시 보인다
데이터 영역과 설명 영역의 간격을 명확히 구분
4px 그리드를 엄격히

재질 (`svg-filters.md`)

그레인은 기본 비채택이다. 어두운 배경에서 그레인은 노이즈로 보이기 쉽다. 리믹스·브리프가 재질 축을 그레인에 배정하면 쓸 수 있다 — 어두운 면의 실제 렌더로 본문 대비와 노이즈를 확인하고 design.md에 기록한다(svg-filters.md §1, remix.md)
쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(feGaussianBlur + feMerge)
글래스모피즘은 성능 대비 이득이 적다. 기본은 내비게이션 바 정도까지다(svg-glass.md)

모션 (`motion.md`)

빠르고 정확하게. --dur-instant~--dur-quick
실시간 데이터의 변화는 위치 이동이 아니라 색·굵기 변화로 알린다(레이아웃 시프트 금지)
로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다

흔한 실패

배경·텍스트 대비를 기기에서 확인하지 않음 → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
브랜드와 무관한 네온 보라/파랑 강조 → AI 생성 다크 화면에서 자주 반복되는 관찰 후보다. 브랜드·데이터 역할과 연결한 근거가 없으면 다른 hue를 비교한다
테마 결정을 설명하지 않음 → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
수치에 가변폭 폰트 → 숫자가 흔들려 읽기 어렵다
대비 미달 → 어두운 배경에서 --ink-muted 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라

리스크 후보

강조색을 데이터에만 쓰고 UI 전체를 무채색으로
히어로를 실제 제품 화면(터미널·차트)으로 대체
모노스페이스를 본문까지 확장

5.5 KiB Raw Blame History

프리셋: dark-instrument — 계기판처럼 정확한

언제 고르나

다크를 정당화하는 이유의 예

결정

타이포그래피

색

간격

재질 (svg-filters.md)

모션 (motion.md)

흔한 실패

리스크 후보

5.5 KiB

Raw Blame History

재질 (`svg-filters.md`)

모션 (`motion.md`)