표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Dark Mode Design
어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.
- YEAR
- 2018
- MOOD
- 다크 · 럭셔리
- PRIMARY#BB86FC
- SECONDARY#03DAC6
- ACCENT#CF6679
- BG#121212
- SURFACE#1E1E1E
취급 표시
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 다크
- 럭셔리
어디에 쓰나
실제로 쓰는 곳
- GitHub 다크 테마
- Twitter/X 다크모드
- YouTube 다크
- VS Code 다크
사용 사례
- 개발자 도구·IDE
- 미디어 스트리밍 앱
- 소셜 미디어
- 야간 사용이 많은 앱
이런 프로젝트에 맞습니다
- 개발자 도구
- 미디어 앱
- 소셜 미디어
- 야간 사용 앱
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2018년 macOS Mojave의 공식 다크 모드 지원으로 급부상. iOS 13 (2019)·Android 10의 시스템 다크 모드로 표준화.
핵심 원칙
- 가독성
- 편안함
- 효율성
주요 특징
- 어두운 배경색
- 높은 명암비
- 강조된 콘텐츠
- OLED 최적화
- 눈의 피로 감소
장점과 한계
장점
- 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 약간 넓게 — 어두운 배경에서 글자 번짐 보완
- 텍스트 크기 라이트 모드보다 크거나 같게 유지
설계 제약
반드시 포함
- elevation은 밝기로 표현 — 위에 있을수록 약간 더 밝은 surface
- focus indicator — 키보드 포커스 가시성 어두운 배경에서 더 중요
- 색상 대비 검증 — 라이트 모드와 별도로 다크 모드 대비 확인
하지 말 것
- 순수 검정 배경 사용 금지
- 채도 낮은 텍스트 색 사용 금지 — 어두운 배경 위 회색 텍스트 4.5:1 미달 주의
- 라이트 모드 그림자 그대로 사용 금지 — 어두운 배경에서 그림자는 역방향(glow) 고려
모션 — 라이트 모드와 동일. 모드 전환 자체는 300ms color transition.
접근성
야간 환경에서 눈 피로 감소. 단, 회색 텍스트 on 검은 배경 조합은 대비율 주의 필요.
자주 묻는 질문
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 다크 등이 있습니다.