# Dark Mode Design

> 어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.

- 층: 스타일 (시각적 스타일)
- ID: dark-mode
- 연도: 2018
- 무드 태그: 다크, 럭셔리
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/dark-mode

## 정의

어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.

## 역사·배경

2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.

## 주요 특징

- 어두운 배경색
- 높은 명암비
- 강조된 콘텐츠
- OLED 최적화
- 눈의 피로 감소

## 핵심 원칙

- 가독성
- 편안함
- 효율성

## 컬러 시스템

어두운 배경 기반 역전 시스템. 밝은 모드와 동일한 역할 구조를 어두운 팔레트로 매핑

### 색상 역할

- background: 순수 검정보다 약간 밝은 어두운 회색 (#121212~#1E1E1E) — 순수 검정은 너무 강함
- surface: background보다 약간 밝게 (#1E1E1E~#2C2C2C) — 카드·시트 구분
- primary: 라이트 모드보다 밝은 버전 — 어두운 배경에서 가시성 확보
- text: 순수 흰색보다 약간 낮은 채도 (#E0E0E0~#F0F0F0) — 눈부심 방지
- text-secondary: 더 낮은 밝기 (#888~#aaa)

### 색상 제약

- 순수 검정(#000) 배경 사용 지양 — 눈 피로 증가
- 순수 흰색(#fff) 텍스트 사용 지양 — #E0E0E0 수준으로
- 라이트 모드 색상 그대로 사용 금지 — 어두운 배경에 최적화된 버전 필요
- 채도 높은 primary는 어두운 배경에서 더 연하게 조정 필요

### 다크모드 전략

이미 다크모드가 기본 — 라이트 모드 토글 시 역방향 적용

### 대비 요구사항

WCAG AA (4.5:1) — 어두운 배경 위 텍스트 대비 신중히 확인

## 타이포그래피

- 폰트 성격: 라이트 모드와 동일 폰트 사용 가능. 단 어두운 배경에서 가독성 확인 필수
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.25 이상 — 계층이 명확해야 어두운 배경에서 정보 파악 용이

### 타이포그래피 제약

- font-weight 300(thin) 어두운 배경에서 가독성 저하 — 400 이상 권장
- letter-spacing 약간 넓게 — 어두운 배경에서 글자 번짐 보완
- 텍스트 크기 라이트 모드보다 크거나 같게 유지

## 설계 제약

### 하면 안 되는 것

- 순수 검정 배경 사용 금지
- 채도 낮은 텍스트 색 사용 금지 — 어두운 배경 위 회색 텍스트 4.5:1 미달 주의
- 라이트 모드 그림자 그대로 사용 금지 — 어두운 배경에서 그림자는 역방향(glow) 고려

### 반드시 포함할 것

- elevation은 밝기로 표현 — 위에 있을수록 약간 더 밝은 surface
- focus indicator — 키보드 포커스 가시성 어두운 배경에서 더 중요
- 색상 대비 검증 — 라이트 모드와 별도로 다크 모드 대비 확인

### 모션 가이드

라이트 모드와 동일. 모드 전환 자체는 300ms color transition.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: -1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 개발자 도구·IDE
- 미디어 스트리밍 앱
- 소셜 미디어
- 야간 사용이 많은 앱

## 추천 프로젝트 유형

- 개발자 도구
- 미디어 앱
- 소셜 미디어
- 야간 사용 앱

## 장단점

### 장점

- OLED 디스플레이에서 배터리 절약
- 밤이나 어두운 환경에서 눈 편함
- 이미지·미디어 콘텐츠가 돋보임
- 개발자·크리에이티브 직군에 선호

### 단점·한계

- 밝은 환경에서는 오히려 가독성 저하
- 그림자 표현이 어려움
- 라이트 모드 대비 색상 선택 복잡

## 실제 사용 제품·서비스

- GitHub 다크 테마
- Twitter/X 다크모드
- YouTube 다크
- VS Code 다크

## 접근성

야간 환경에서 눈 피로 감소. 단, 회색 텍스트 on 검은 배경 조합은 대비율 주의 필요.

## 자주 묻는 질문

### Q1. Dark Mode Design이란 무엇인가요?

어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다. 2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.

### Q2. Dark Mode Design의 핵심 디자인 원칙은 무엇인가요?

Dark Mode Design의 핵심 원칙은 가독성, 편안함, 효율성입니다.

### Q3. Dark Mode Design은 어떤 프로젝트에 적합한가요?

Dark Mode Design은 개발자 도구·IDE, 미디어 스트리밍 앱, 소셜 미디어, 야간 사용이 많은 앱, 개발자 도구, 미디어 앱, 소셜 미디어, 야간 사용 앱 등의 프로젝트에 적합합니다.

### Q4. Dark Mode Design의 장단점은 무엇인가요?

장점으로는 OLED 디스플레이에서 배터리 절약, 밤이나 어두운 환경에서 눈 편함, 이미지·미디어 콘텐츠가 돋보임, 개발자·크리에이티브 직군에 선호이 있습니다. 단점으로는 밝은 환경에서는 오히려 가독성 저하, 그림자 표현이 어려움, 라이트 모드 대비 색상 선택 복잡이 있습니다.

### Q5. Dark Mode Design에서 색상은 어떻게 사용하나요?

어두운 배경 기반 역전 시스템. 밝은 모드와 동일한 역할 구조를 어두운 팔레트로 매핑 색상 역할은 background: 순수 검정보다 약간 밝은 어두운 회색 (#121212~#1E1E1E) — 순수 검정은 너무 강함, surface: background보다 약간 밝게 (#1E1E1E~#2C2C2C) — 카드·시트 구분, primary: 라이트 모드보다 밝은 버전 — 어두운 배경에서 가시성 확보입니다. 주의사항: 순수 검정(#000) 배경 사용 지양 — 눈 피로 증가, 순수 흰색(#fff) 텍스트 사용 지양 — #E0E0E0 수준으로.

### Q6. Dark Mode Design에 어울리는 폰트 스타일은 무엇인가요?

Dark Mode Design에는 라이트 모드와 동일 폰트 사용 가능. 단 어두운 배경에서 가독성 확인 필수 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: font-weight 300(thin) 어두운 배경에서 가독성 저하 — 400 이상 권장, letter-spacing 약간 넓게 — 어두운 배경에서 글자 번짐 보완.

### Q7. Dark Mode Design 디자인에서 하면 안 되는 것은 무엇인가요?

Dark Mode Design에서 피해야 할 것: 순수 검정 배경 사용 금지, 채도 낮은 텍스트 색 사용 금지 — 어두운 배경 위 회색 텍스트 4.5:1 미달 주의, 라이트 모드 그림자 그대로 사용 금지 — 어두운 배경에서 그림자는 역방향(glow) 고려.

### Q8. Dark Mode Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Dark Mode Design을 적용한 대표적인 제품·서비스로는 GitHub 다크 테마, Twitter/X 다크모드, YouTube 다크, VS Code 다크 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #BB86FC
- secondary: #03DAC6
- accent: #CF6679
- background: #121212
- surface: #1E1E1E
- text: #FFFFFF
- textSecondary: #B0B0B0
- border: #2C2C2C

### 타이포그래피

- fontFamily: 'SF Pro Display', 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 2px 4px rgba(0,0,0,0.4)
- shadow md: 0 4px 8px rgba(0,0,0,0.5)
- shadow lg: 0 8px 16px rgba(0,0,0,0.6)
- border: 1px solid #2C2C2C

### 컴포넌트 형태

- button: rounded / hover glow / text none
- card: elevated / hover glow
- input: filled / focus glow
- badge: pill / solid
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section normal
- animation: 300ms ease
- specialEffects: gradientText

## 관련 링크

### 관련 스타일

- [Cyberpunk](https://ui.buildersgate.com/styles/cyberpunk)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)
- [Glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/dark-mode)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/dark-mode)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/dark-mode)

### 비교

- [Dark Mode Design vs Aurora Design](https://ui.buildersgate.com/compare/aurora-design-vs-dark-mode)
- [Dark Mode Design vs Cyberpunk](https://ui.buildersgate.com/compare/cyberpunk-vs-dark-mode)
- [Dark Mode Design vs Glassmorphism](https://ui.buildersgate.com/compare/dark-mode-vs-glassmorphism)
- [Dark Mode Design vs Minimalism](https://ui.buildersgate.com/compare/dark-mode-vs-minimalism)
- [Dark Mode Design vs Monochrome Design](https://ui.buildersgate.com/compare/dark-mode-vs-monochrome)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [포트폴리오](https://ui.buildersgate.com/for/portfolio)
- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [커뮤니티·소셜](https://ui.buildersgate.com/for/community)
- [게임·엔터테인먼트](https://ui.buildersgate.com/for/game-entertainment)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)

---

HTML 버전: https://ui.buildersgate.com/styles/dark-mode

이 문서는 https://ui.buildersgate.com/styles/dark-mode.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.