다크 모드, `prefers-color-scheme` 및 현대 UI 테마링

카테고리

디자인

서브카테고리

UX 디자인

대상자

디자이너 및 프론트엔드 개발자.

• 난이도: 중간. CSS 변수 및 JavaScript 기초 지식이 필요.

핵심 요약

• prefers-color-scheme 미디어 쿼리를 사용해 시스템 테마에 자동으로 맞춤.
• CSS 변수로 색상 테마를 정의해 확장성과 테마 전환을 간소화.
• JavaScript + localStorage로 사용자 선호 테마 저장 및 동적 전환 구현.

섹션별 세부 요약

1. **다크 모드의 중요성과 자동 테마 조정**

• 사용자에게 눈 피로 감소, 배터리 절약, 인터페이스 편의성 제공.
• prefers-color-scheme를 통해 OS 설정에 맞춘 자동 테마 전환 가능.
• 브라우저 지원: macOS, Windows, Android, iOS 전반.
• 예시 코드:

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #ffffff; }
}

2. **CSS 변수로 테마링 확장성 강화**

• --bg-color, --text-color 등 세마틱 토큰 사용해 색상 정의.
• 테마 전환 시 CSS 변수 재정의로 디자인 시스템 일관성 유지.
• 예시 코드:

:root { --bg-color: #ffffff; --text-color: #000000; }
@media (prefers-color-scheme: dark) {
  :root { --bg-color: #121212; --text-color: #ffffff; }
}

3. **JavaScript를 활용한 동적 테마 전환**

• localStorage로 사용자 선호 테마 저장 및 로드.
• 토글 버튼 구현 시 data-theme 속성으로 테마 동적 변경.
• 예시 코드:

const toggleTheme = () => {
  const current = document.documentElement.getAttribute('data-theme');
  const nextTheme = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', nextTheme);
  localStorage.setItem('theme', nextTheme);
};

4. **추가 고려사항 및 최적화 팁**

• 이미지/SVG도 테마에 맞게 인버트 또는 대체.
• 접근성을 위해 고대비 테마(예: High Contrast) 제공.
• 테스트: iOS vs Android의 테마 차이 확인.
• 도구 활용: Dark Reader로 테마 검증 및 오류 분석.

결론

• 세마틱 토큰(예: --primary-color) 사용해 디자인 시스템 확장성 확보.
• 다크 모드 테스트 시 OS별 차이점 검증 필수.
• 이미지/SVG 전환 및 접근성 고대비 테마를 병행해 사용자 경험 향상.