다크 테마 디자인 시스템은(는) 무엇을 하나요?
목적
Dark Theme Design System 스킬은 라이트 테마 웹 인터페이스를 다크 테마로 변환하는 방법론을 제공합니다. 단순히 색상 값을 반전시키는 것은 물리적 조명 은유를 무너뜨리고, 심각한 시각적 피로를 유발하며, 읽기 어렵고 눈부심이 심한 인터페이스를 만듭니다.
이 시스템은 저조도 디자인의 시각적 및 공간적 규칙을 확립합니다:
- 높이 반전: 다크 모드에서 깊이감을 전달하기 위해 어두운 그림자 대신 더 밝아지는 표면 배경을 사용합니다.
- 색상 저채도화: 선명한 브랜드 및 의미론적 악센트 색상을 저대비 수준으로 조정하여 시각적 "진동"과 눈의 피로를 방지합니다.
- 대비 및 할레이션 방지: 순수한 흰색-검정 조합을 피하여 난시 또는 난독증 사용자에게 극심한 빛 번짐(할레이션)을 유발하지 않도록 하고, 대신 약간 회색빛이 도는 흰색과 검정을 사용합니다.
- 서체 굵기 보정: "조사 효과"(어두운 배경의 밝은 텍스트가 밝은 배경의 어두운 텍스트보다 더 굵고 두껍게 보이는 착시 현상)에 대응합니다.
- 미디어 디밍: 이미지, 비디오, 벡터 다이어그램을 저조도 환경에서 사용자를 시각적으로 "멀게" 하지 않도록 조정합니다.
사용 사례
- 이중 테마 UI 키트 디자인: 라이트 모드와 다크 모드를 모두 지원하는 시스템의 의미론적 디자인 토큰 아키텍처를 구축합니다.
- SaaS 대시보드 및 읽기 환경 재설계: 장시간 시청, 개발자 워크플로우 또는 저녁 시간 사용에 최적화된 저피로 인터페이스를 만듭니다.
- 접근성 부족 다크 테마 감사: 대비 문제, 진동하는 악센트, 읽기 어려운 텍스트 굵기, 눈부심을 유발하는 미디어 자산을 식별하고 수정합니다.
- 다중 테마 전달 사양 제공: 요소가 테마 간에 어떻게 동작하는지 정확히 보여주는 개발자 친화적인 명세서를 생성합니다.
사용하지 말아야 할 경우
- 기본 다크(영화적) 환경: 애플리케이션이 전적으로 다크 테마(예: Spotify, Netflix, 게임 스트리밍 플랫폼)이며 라이트 테마를 지원하지 않을 경우. 이중 테마 디자인 시스템은 불필요한 오버헤드입니다.
- 고도로 표현적인/예술적 마이크로 캠페인: 시각적 파괴, 극도로 높은 채도 팔레트 또는 예술적 브랜딩이 장시간 시청 편안함이나 엄격한 접근성 규칙보다 우선하는 독립형 랜딩 페이지.
- 엄격히 정적인 레거시 프레임워크: 프론트엔드 아키텍처가 동적 스타일시트를 로드할 수 없거나 CSS 변수 지원이 부족하여 체계적인 테마 적응이 불가능한 애플리케이션.
입력
- 라이트 모드 핵심 팔레트 및 브랜드 스타일: 기존의 주요 브랜드 색상, 보조 색상, 타이포그래피 척도 및 유동적 간격 토큰.
- 컴포넌트 인벤토리 및 깊이 계층: 페이지 레이아웃 및 UI 레이어(배경, 사이드바, 카드, 모달, 드롭다운)의 포괄적인 목록.
- 조명 환경 맥락: 대상 사용자의 일반적인 물리적 환경(예: 취침 전 독서 대 밝게 조명된 산업 제어실).
- 접근성 목표: 표준 WCAG 2.2 AA(최소) 또는 AAA(향상), 난시 및 색맹에 대한 고려 사항 포함.
출력
- 통합 의미론적 토큰 맵: 라이트 모드 값을 해당 다크 모드 값에 직접 연결하는 체계적인 명세서.
- 높이 기반 표면 스케일: 표면 배경 값이 Z축 위로 더 높이 떠오를수록 밝아지는 방식을 정의하는 5~6단계 스케일.
- 저채도 악센트 팔레트: 어두운 배경에 맞게 채도가 낮춰진 캘리브레이션된 기본, 보조 및 의미론적 상태 색상 세트.
- 서체 스타일 시트 수정: 조사 효과에 대응하기 위한 글꼴 두께, 자간 및 텍스트 색상 조정에 대한 특정 규칙.
- 미디어 디밍 사양: 이미지 대비/밝기를 줄이고 벡터 그래픽을 조정하기 위한 CSS 및 HTML 기술.
워크플로우
1. 기반 설정: 오프-블랙 및 오프-화이트 선택
배경에 절대 #000000 (순수 검정)을 사용하지 말고 본문 텍스트에 절대 #FFFFFF (순수 흰색)을 사용하지 마십시오.
- 기본 배경: 어둡고 색조가 가미된 중성색(예: 진한 슬레이트, 차콜 또는
#121212~#1A1A1A사이의 진한 네이비 그레이)을 설정합니다. 이는 눈의 피로를 줄이고, 화면 깜박임을 방지하며, 시각적 깊이를 유지합니다. - 텍스트 기준: 오프-화이트 또는 밝은 회색(예:
#E2E8F0또는#EAEAEA, 불투명도 85%~90%)을 선택합니다. 이는 할레이션(독자의 눈에서 빛이 산란되는 현상)을 유발하지 않으면서 편안한 대비를 보장합니다.
2. 높이 밝기 증가를 통한 깊이 변환
라이트 테마에서는 요소가 더 어두운 그림자를 드리워서 높이 올라갔음을 나타냅니다. 다크 테마에서는 어두운 배경에 어두운 그림자가 보이지 않습니다.
- 밝기 증가 원칙: 요소가 Z축 위로 더 높이 올라갈수록 가상의 주변 광원에 더 가까워지며 더 밝아지고 어두워지지 않습니다.
- 높이 표면 스케일 생성:
- 레벨 0 (캔버스 기준): 가장 어두운 색상(예:
#121212). - 레벨 1 (카드/목록 항목): 약간 더 밝음(예:
#1D1D1D). - 레벨 2 (고정 헤더/플로팅 액션): 더 밝음(예:
#242424). - 레벨 3 (모달/대화 상자): 가장 밝은 표면(예:
#2C2C2C).
- 레벨 0 (캔버스 기준): 가장 어두운 색상(예:
- 부드러운 그림자로 지원: 레벨 1 항목 위에 놓이는 더 큰 표면에 분리를 제공하기 위해 매우 미묘한 어두운 회색 또는 반투명 검정 그림자(예:
rgba(0, 0, 0, 0.5))를 사용합니다.
3. 악센트 색상 보정 및 저채도화
흰색 캔버스에서 선명해 보이는 고채도 색상은 어두운 캔버스에서 "진동"하여 심각한 시각적 피로를 유발하고 대비 테스트에 실패합니다.
- 브랜드 악센트 저채도화: 브랜드 색상을 더 밝고 부드러우며 파스텔톤에 가까운 등가물로 전환합니다. (예: 라이트 배경의 선명한 파란색
#0055FF는 다크 배경에서 저채도 파란색#66A3FF또는#80B3FF로 매핑되어야 함). - 대비 안전 악센트 유지: 어두운 표면의 저채도 악센트 색상이 여전히 WCAG 2.2 AA 기준(텍스트는 최소 4.5:1, 상호작용 상태는 3:1)을 충족하는지 확인합니다.
- 큰 채도 블록 피하기: 전체 버튼이나 배너를 단색의 채도가 높은 색상으로 렌더링하는 대신 텍스트 링크, 테두리 또는 미묘한 표시기와 같이 제한적으로 사용합니다.
4. 시각적 조사 효과에 대한 타이포그래피 조정
어두운 배경의 밝은 텍스트는 조사 효과를 겪습니다. 흰색 텍스트가 주변 어둠 속으로 "번져" 들어가 글자가 밝은 배경의 어두운 텍스트보다 더 굵고, 두껍고, 더 가깝게 보입니다.
- 굵기 보정: 라이트 테마의 굵은 제목의 글꼴 두께를 한 단계 낮춥니다(예: 어두운 배경에서
700(Bold)을600(Semi-Bold) 또는500(Medium)으로 변경). - 자간 보정: 다크 모드 본문 텍스트의 자간(트래킹)을 약간 늘립니다(예:
letter-spacing: 0.02em;또는0.015em;). - 2차/3차 계층: 크기만으로 계층을 제어하지 말고 텍스트 색상 불투명도를 조정하여 제어합니다. 높은 우선순위 본문에는
opacity: 0.87, 보조 도움말 텍스트에는opacity: 0.60, 비활성화된 표시기에는opacity: 0.38을 사용합니다.
5. 미디어 및 리치 콘텐츠 적응
수정되지 않은 사진, 차트 및 다이어그램은 밝고 고대비의 흰색 영역으로 사용자를 눈부시게 하여 완벽한 다크 모드 경험을 망칠 수 있습니다.
- 사진 디밍: 사진에 미묘한 밝기 및 대비 감소를 적용하여 저조도 분위기에 조화시킵니다.
[data-theme="dark"] img:not(.avatar) { filter: brightness(0.85) contrast(0.95); } - 벡터 자산 및 일러스트레이션: SVG의 밝은 배경색을 교체하거나 SVG 필터를 사용하여 특정 패스를 반전시킵니다. 그래픽 일러스트레이션의 경우
<picture>와 미디어 쿼리를 사용하여 사용자 정의된 다크 테마 자산을 로드합니다. - 데이터 시각화: 과도한 휘도 없이도 읽을 수 있는 저채도 선과 반투명 영역 채우기를 사용하도록 차트 색상 시리즈를 재정의합니다.
결정 규칙
높이 밝기 규칙
시각적 컨테이너의 배경을 설정할 때는 항상 높이 레벨을 참고하십시오. 상승된 모달이나 드롭다운을 그 아래 페이지 배경보다 더 어둡게 만들지 마십시오.
| 높이 레벨 | 라이트 모드 배경 | 다크 모드 배경 | 암시된 높이 신호 |
|---|---|---|---|
| 레벨 0 (캔버스) | #FFFFFF (흰색) 또는 #F8F9FA | #121212 (오프-블랙) | 지면 레벨 / 기준 |
| 레벨 1 (카드/섹션) | #FFFFFF (흰색) + 테두리 | #1E1E1E (표면 1) | 1-2dp 부유 |
| 레벨 2 (헤더/고정) | #FFFFFF 또는 미묘한 반투명 색조 | #252525 (표면 2) | 4-8dp 부유 |
| 레벨 3 (모달/대화 상자) | #FFFFFF + 짙은 그림자 | #2D2D2D (표면 3) | 12-24dp 부유 |
채도 상한선
- 상호작용 상태(예: 보조 칩 컨테이너)의 배경으로 사용되는 악센트는 다크 모드에서 10% ~ 15% 의 채도를 가져야 합니다.
- 전경 텍스트 또는 아이콘으로 사용되는 악센트는 어두운 표면에 대해 진동하지 않으면서 눈에 띄도록 40% ~ 60% 의 채도를 가져야 합니다.
대비 버퍼
화면 눈부심과 저품질 화면은 라이트 모드보다 다크 모드 가시성을 더 심각하게 저하시키므로, 열악한 물리적 환경에 대한 버퍼 역할을 위해 항상 다크 모드 본문 텍스트에 5.0:1 대비 비율(WCAG 4.5:1 최소값 초과)을 목표로 하십시오.
제약 조건
- 접근성 (WCAG AA): 텍스트 요소는 최소 4.5:1 대비(큰 텍스트는 3:1)를 달성해야 합니다. UI 테두리, 포커스 링 및 기능 아이콘은 최소 3:1 대비를 달성해야 합니다. 포커스 표시기는 높은 가시성을 유지해야 하며 어두운 배경의 빛 번짐에 묻히지 않아야 합니다(WCAG 2.2 SC 2.4.11).
- 반응형 눈부심 적응: 텍스트 색상은 높은 주변 눈부심(야외에서 사용되는 모바일 화면 등)에 탄력적이어야 하므로 절대적인 최소 대비 수준을 피해야 합니다.
- 색상 전용 계층 구조 없음: 상태(예: 차트의 경고 대 오류)를 전달하기 위해 저채도 색상의 색조에만 의존하지 마십시오. 별도의 패턴, 텍스트 레이블 또는 아이콘을 통합하십시오.
일반적인 실패 패턴
- "리터럴 인버터": 라이트 테마에 자동 색상 반전 필터를 적용합니다. 이는 어두운 그림자가 있는 상승된 라이트 모드 요소를 눈부신 흰색 고리가 있는 가라앉은 다크 모드 요소로 만들어 모든 자연스러운 조명 모델을 깨뜨립니다.
- "진동하는 네온" 악몽: 완전히 채도가 높은 브랜드 색상(예:
#00FF00또는#FF00FF)을 순수 검정 배경에 직접 배치합니다. 이는 시각적 피로를 유발하여 텍스트를 몇 초 이상 거의 읽을 수 없게 만듭니다. - OLED 극단 (순수 검정 빛 번짐):
#000000배경에#FFFFFF텍스트를 직접 사용합니다. 이는 많은 디스플레이에서 심각한 후광/눈부심 효과를 만들어 읽기 속도를 늦추고 눈의 피로를 유발합니다. - 사라지는 포커스 링: 아름다운 다크 모드를 디자인했지만 기본 브라우저 포커스 표시기를 그대로 두어 종종 진한 파란색이 어두운 슬레이트 배경에서 완전히 보이지 않게 됩니다.
- 눈부신 일러스트레이션: 매끄러운 다크 UI를 만들었지만 SVG 차트, 로고 또는 일러스트레이티브 아이콘 내부에 고대비의 순수 흰색 배경을 남겨둡니다.
검증 기준
- 기준 값: 기본 캔버스 배경에 절대적인 순수 검정(
#000)이 사용되지 않았으며, 본문 텍스트에 절대적인 순수 흰색(#FFF)이 사용되지 않았습니다. - 높이 모델: Z축 위로 더 높이 상승할수록 표면이 점진적으로 더 밝아집니다(더 높은 명도 값).
- 대비 확인: 흐릿한 도움말 텍스트를 포함한 모든 텍스트 색상이 WCAG 2.2 AA 대비 비율(일반 4.5:1, 큰 텍스트 3:1)을 충족하거나 초과합니다.
- 비진동 악센트: 악센트 및 상태 색상은 적용에 따라 10%에서 60% 사이의 채도로 저채도화되어 시각적 진동을 방지합니다.
- 포커스 가시성: 상호작용 요소는 어두운 표면에 대해 뚜렷이 보이는 고대비의 명확한 포커스 표시기를 가지고 있습니다.
- 타이포그래피 보정: 조사 효과를 보상하기 위해 굵은 텍스트가 조정(한 단계 낮추거나 자간 조정)되었습니다.
- 미디어 필터: 리치 미디어 및 벡터 자산의 밝기와 대비를 줄이기 위한 반응형 메커니즘(CSS 필터 또는 어두운 자산 교체)이 명시되었습니다.