3.6 KiB
3.6 KiB
프리셋: dark-instrument — 계기판처럼 정확한
한 문장: 정밀함이 곧 신뢰인 화면. 어둡되 분위기가 아니라 기능으로 어둡다.
언제 고르나
- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
- 사용자가 이 화면을 오래 본다는 전제가 있을 때
- 쓰지 마라: 다크가 "멋있어서" 고르는 경우. 다크 기본값은 단일 슬롭 시그니처 1위다. 이유를 댈 수 없으면 라이트로 가라
다크를 정당화하는 이유의 예
- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
- 화면에 밝은 데이터 시각화가 있고 배경이 어두워야 대비가 산다
- 제품 자체(터미널·에디터·모니터링)가 어둡다
결정
타이포그래피
- 산세를 본문 출발점으로 두고, 정렬이 중요한 수치·ID·코드에는 tabular figure 또는 모노를 검토한다. 모든 수치·ID에 모노가 필수인 것은 아니다.
- 비율 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 |
색
- 순수 검정/흰색과 근접색을 모두 후보로 두고, 실제 기기·주변광·장시간 읽기에서 대비와 눈부심을 확인한다.
#0d0d0f#14130f,#e8e4dc#e6e6e9는 출발값 예시다. - 표면 단계를 3개로:
--surface(가장 어두움) /--surface-raised/--line - 강조색은 밝고 채도 높게, 아주 좁게. 어두운 배경에서는 작은 면적으로도 충분히 강하다
- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
간격
- 밀도를 높이되 정렬을 완벽하게. 이 프리셋에서 어긋난 1px은 즉시 보인다
- 데이터 영역과 설명 영역의 간격을 명확히 구분
- 4px 그리드를 엄격히
재질 (svg-filters.md)
- 거의 쓰지 않는다. 어두운 배경에서 그레인은 노이즈로 보인다
- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(
feGaussianBlur+feMerge) - 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지
모션 (motion.md)
- 빠르고 정확하게.
--dur-instant~--dur-quick - 실시간 데이터의 변화는 위치 이동이 아니라 색·굵기 변화로 알린다(레이아웃 시프트 금지)
- 로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다
흔한 실패
- 배경·텍스트 대비를 기기에서 확인하지 않음 → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
- 네온 보라/파랑 강조 → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
- 테마 결정을 설명하지 않음 → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
- 수치에 가변폭 폰트 → 숫자가 흔들려 읽기 어렵다
- 대비 미달 → 어두운 배경에서
--ink-muted가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라
리스크 후보
- 강조색을 데이터에만 쓰고 UI 전체를 무채색으로
- 히어로를 실제 제품 화면(터미널·차트)으로 대체
- 모노스페이스를 본문까지 확장