# Dark Mode Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: dark-mode
- **카테고리**: visual-style
- **연도**: 2018

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

## 역사·배경
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.

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

## 추천 프로젝트 유형
- 개발자 도구
- 미디어 앱
- 소셜 미디어
- 야간 사용 앱

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

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

## 실제 사용 제품·서비스
- GitHub 다크 테마
- Twitter/X 다크모드
- YouTube 다크
- VS Code 다크

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

## 관련 스타일
- [cyberpunk](https://ui.buildersgate.com/styles/cyberpunk)
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
- [glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: linear-gradient(135deg, #121212 0%, #1E1E1E 100%)
- textColor: #FFFFFF
- accentColor: #BB86FC

### 타이포그래피
- fontFamily: 'SF Pro Display', 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 2px 4px rgba(0,0,0,0.4)
- md: 0 4px 8px rgba(0,0,0,0.5)
- lg: 0 8px 16px rgba(0,0,0,0.6)
- xl: 0 16px 32px rgba(0,0,0,0.7)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #2C2C2C

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s ease

### 애니메이션
- duration: 300ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=glow / textTransform=none
- 카드: style=elevated / hoverEffect=glow
- 인풋: style=filled / focusEffect=glow
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: Dark Mode Design이란 무엇인가요?
A: 어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다. 2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.

### Q: Dark Mode Design의 핵심 디자인 원칙은 무엇인가요?
A: Dark Mode Design의 핵심 원칙은 가독성, 편안함, 효율성입니다.

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

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

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

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

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

### Q: Dark Mode Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Dark Mode Design을 적용한 대표적인 제품·서비스로는 GitHub 다크 테마, Twitter/X 다크모드, YouTube 다크, VS Code 다크 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=dark-mode
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=dark-mode&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Dark Mode Design

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

연도

2018

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

#1E1E1E

핵심 원칙

1

가독성

2

편안함

3

효율성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

개발자 도구미디어 앱소셜 미디어야간 사용 앱
접근성

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

실제 사용 예시

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Dark Mode Buttons

다크 모드에 최적화된 버튼

Dark Mode Cards

어두운 배경의 카드 디자인

🌙

Dark Theme

눈의 피로를 줄이고 OLED 화면에서 배터리를 절약합니다.

⚡

High Contrast

높은 명암비로 가독성을 극대화합니다.

Dark Navigation Bar

다크 모드 네비게이션

Dark Input Fields

다크 모드 입력 필드

Dark Mode Stats

통계 표시 카드

1.2K
Users
89%
Success
456
Projects

자주 묻는 질문

Dark Mode Design이란 무엇인가요?
어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다. 2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.
Dark Mode Design의 핵심 디자인 원칙은 무엇인가요?
Dark Mode Design의 핵심 원칙은 가독성, 편안함, 효율성입니다.
Dark Mode Design은 어떤 프로젝트에 적합한가요?
Dark Mode Design은 개발자 도구·IDE, 미디어 스트리밍 앱, 소셜 미디어, 야간 사용이 많은 앱, 개발자 도구, 미디어 앱, 소셜 미디어, 야간 사용 앱 등의 프로젝트에 적합합니다.
Dark Mode Design의 장단점은 무엇인가요?
장점으로는 OLED 디스플레이에서 배터리 절약, 밤이나 어두운 환경에서 눈 편함, 이미지·미디어 콘텐츠가 돋보임, 개발자·크리에이티브 직군에 선호이 있습니다. 단점으로는 밝은 환경에서는 오히려 가독성 저하, 그림자 표현이 어려움, 라이트 모드 대비 색상 선택 복잡이 있습니다.
Dark Mode Design에서 색상은 어떻게 사용하나요?
어두운 배경 기반 역전 시스템. 밝은 모드와 동일한 역할 구조를 어두운 팔레트로 매핑 색상 역할은 background: 순수 검정보다 약간 밝은 어두운 회색 (#121212~#1E1E1E) — 순수 검정은 너무 강함, surface: background보다 약간 밝게 (#1E1E1E~#2C2C2C) — 카드·시트 구분, primary: 라이트 모드보다 밝은 버전 — 어두운 배경에서 가시성 확보입니다. 주의사항: 순수 검정(#000) 배경 사용 지양 — 눈 피로 증가, 순수 흰색(#fff) 텍스트 사용 지양 — #E0E0E0 수준으로.
Dark Mode Design에 어울리는 폰트 스타일은 무엇인가요?
Dark Mode Design에는 라이트 모드와 동일 폰트 사용 가능. 단 어두운 배경에서 가독성 확인 필수 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: font-weight 300(thin) 어두운 배경에서 가독성 저하 — 400 이상 권장, letter-spacing 약간 넓게 — 어두운 배경에서 글자 번짐 보완.
Dark Mode Design 디자인에서 하면 안 되는 것은 무엇인가요?
Dark Mode Design에서 피해야 할 것: 순수 검정 배경 사용 금지, 채도 낮은 텍스트 색 사용 금지 — 어두운 배경 위 회색 텍스트 4.5:1 미달 주의, 라이트 모드 그림자 그대로 사용 금지 — 어두운 배경에서 그림자는 역방향(glow) 고려.
Dark Mode Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Dark Mode Design을 적용한 대표적인 제품·서비스로는 GitHub 다크 테마, Twitter/X 다크모드, YouTube 다크, VS Code 다크 등이 있습니다.

관련 스타일 탐색

Cyberpunk

네온 색상과 미래지향적 요소를 활용한 사이버펑크 스타일입니다.

Minimalism

"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.

Glassmorphism

반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.