88c11682b1
- 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
67 lines
5.5 KiB
Markdown
67 lines
5.5 KiB
Markdown
# 프리셋: 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](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](../svg-filters.md) §1, [remix.md](../remix.md))
|
|
- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
|
|
- 글래스모피즘은 성능 대비 이득이 적다. 기본은 내비게이션 바 정도까지다([svg-glass.md](../svg-glass.md))
|
|
|
|
### 모션 (`motion.md`)
|
|
- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
|
|
- 실시간 데이터의 변화는 **위치 이동이 아니라 색·굵기 변화**로 알린다(레이아웃 시프트 금지)
|
|
- 로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다
|
|
|
|
## 흔한 실패
|
|
|
|
1. **배경·텍스트 대비를 기기에서 확인하지 않음** → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
|
|
2. **브랜드와 무관한 네온 보라/파랑 강조** → AI 생성 다크 화면에서 자주 반복되는 관찰 후보다. 브랜드·데이터 역할과 연결한 근거가 없으면 다른 hue를 비교한다
|
|
3. **테마 결정을 설명하지 않음** → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
|
|
4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
|
|
5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라
|
|
|
|
## 리스크 후보
|
|
|
|
- 강조색을 데이터에만 쓰고 UI 전체를 무채색으로
|
|
- 히어로를 실제 제품 화면(터미널·차트)으로 대체
|
|
- 모노스페이스를 본문까지 확장
|