# Dark Mode Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: dark-mode
- **카테고리**: visual-style
- **연도**: 2018
## 설명
어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.
## 역사·배경
2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.
## 핵심 원칙
- 가독성
- 편안함
- 효율성
## 주요 특징
- 어두운 배경색
- 높은 명암비
- 강조된 콘텐츠
- OLED 최적화
- 눈의 피로 감소
## 사용 사례
- 개발자 도구·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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=dark-mode
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=dark-mode&merged=true
Dark Mode Design
어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.
2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.
주요 특징
- 어두운 배경색
- 높은 명암비
- 강조된 콘텐츠
- 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
다크 모드 입력 필드