M

MLOG

한국어

이 종합 가이드를 통해 웹사이트에 다크 모드를 구현하세요. CSS 미디어 쿼리, JavaScript 토글, 접근성 고려 사항 및 원활한 사용자 경험을 위한 모범 사례에 대해 알아보세요.

다크 모드 구현: CSS 및 JavaScript를 사용한 종합 가이드

다크 모드는 특히 저조도 환경에서 더욱 편안한 시청 경험을 제공하여 점점 더 인기를 얻고 있습니다. 이 가이드는 CSS 및 JavaScript를 사용하여 웹사이트에 다크 모드를 구현하는 방법에 대한 포괄적인 개요를 제공하여 전 세계 사용자를 위한 원활하고 접근 가능한 사용자 경험을 보장합니다.

다크 모드를 구현해야 하는 이유?

다크 모드 구현을 고려해야 할 몇 가지 설득력 있는 이유가 있습니다.

다크 모드 구현 방법

다크 모드를 구현하는 방법에는 여러 가지가 있으며, 각 방법에는 고유한 장단점이 있습니다. 가장 일반적인 방법을 살펴보겠습니다.

1. CSS 미디어 쿼리를 사용하여 다크 모드 구현

prefers-color-scheme CSS 미디어 쿼리를 사용하면 사용자가 선호하는 색 구성표를 감지하고 그에 따라 다른 스타일을 적용할 수 있습니다. 이는 시스템 설정을 이미 설정한 사용자를 위해 다크 모드를 구현하는 가장 간단하고 효율적인 방법입니다.

코드 예제

다음 CSS를 스타일시트에 추가하세요.

/* 기본(라이트) 테마 */
body {
  background-color: #fff;
  color: #000;
}

/* 다크 테마 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* 필요에 따라 다른 요소 조정 */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

설명:

장점

단점

2. JavaScript 토글을 사용하여 다크 모드 구현

JavaScript 토글을 사용하면 사용자에게 웹사이트 테마를 제어할 수 있는 수동 스위치가 제공됩니다. 이를 통해 사용자에게 더 많은 제어 권한을 부여하고 시스템 기본 설정을 재정의할 수 있습니다. 이 접근 방식은 시스템 전체의 다크 모드 설정을 일관되게 지원하거나 노출하지 않을 수 있는 다양한 장치 및 플랫폼의 사용자를 위해 매우 중요합니다.

HTML 구조

먼저 HTML에 토글 요소를 추가합니다.

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

이렇게 하면 확인란과 일부 사용자 지정 CSS 스타일을 사용하여 간단한 토글 스위치가 생성됩니다.

CSS 스타일(선택 사항)

CSS를 사용하여 토글 스위치 스타일을 지정할 수 있습니다. 다음은 예입니다.

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* 둥근 슬라이더 */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript 코드

이제 다음 JavaScript 코드를 추가하여 토글 기능을 처리합니다.

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// 다크 모드를 전환하는 함수
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // 사용자 기본 설정을 localStorage에 저장합니다.
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// 저장된 기본 설정에 대한 localStorage를 확인합니다.
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// 토글에 이벤트 리스너를 추가합니다.
darkModeToggle.addEventListener('change', toggleDarkMode);

설명:

다크 모드에 대한 CSS 스타일 지정(클래스 사용)

CSS를 업데이트하여 dark-mode 클래스를 사용하여 다크 테마 스타일을 적용합니다.

/* 기본(라이트) 테마 */
body {
  background-color: #fff;
  color: #000;
}

/* 다크 테마 */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

장점

단점

3. 미디어 쿼리 및 JavaScript 결합

가장 좋은 접근 방식은 CSS 미디어 쿼리와 JavaScript 토글을 결합하는 것입니다. 이는 사용자가 선호하는 색 구성표를 자동으로 감지하는 동시에 사용자가 시스템 기본 설정을 수동으로 재정의할 수 있도록 하는 두 가지 장점을 모두 제공합니다. 이는 시스템 전체 테마 설정을 인식하지 못하거나 변경할 수 없는 사용자를 포함하여 더 광범위한 사용자의 요구를 충족합니다.

코드 예제

JavaScript 토글 예제에서 동일한 HTML 및 CSS를 사용합니다. 시스템 기본 설정을 확인하도록 JavaScript를 수정합니다.

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// 다크 모드를 전환하는 함수
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // 사용자 기본 설정을 localStorage에 저장합니다.
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// 저장된 기본 설정, 시스템 기본 설정에 대한 localStorage를 확인합니다.
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// 토글에 이벤트 리스너를 추가합니다.
darkModeToggle.addEventListener('change', toggleDarkMode);

설명:

장점

단점

접근성 고려 사항

다크 모드를 구현할 때 웹사이트가 모든 사용자가 사용할 수 있도록 접근성을 고려하는 것이 중요합니다. 색상을 단순히 반전시키는 것만으로는 접근성이 자동으로 보장되지 않습니다. 몇 가지 주요 고려 사항은 다음과 같습니다.

다크 모드 구현을 위한 모범 사례

웹사이트에 다크 모드를 구현할 때 따라야 할 몇 가지 모범 사례는 다음과 같습니다.

예: 테마 지정을 위한 CSS 변수

CSS 변수를 사용하면 라이트 모드 테마와 다크 모드 테마 간에 쉽게 전환할 수 있습니다. :root 의사 클래스에서 변수를 정의합니다.

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

이제 dark-mode 클래스가 본문에 추가되면 CSS 변수가 업데이트되고 스타일이 자동으로 적용됩니다.

결론

다크 모드를 구현하면 웹사이트의 사용자 경험을 크게 향상시키고 접근성을 개선하며 배터리 수명까지 절약할 수 있습니다. 이 가이드에 설명된 기술과 모범 사례를 따르면 전 세계 사용자에게 원활하고 즐거운 다크 모드 환경을 만들 수 있습니다.

접근성을 우선시하고 구현을 철저히 테스트하여 기본 설정이나 시각 능력에 관계없이 모든 사용자가 웹사이트를 계속 사용할 수 있도록 해야 합니다.

다크 모드를 신중하게 구현함으로써 트렌드를 따를 뿐만 아니라 전 세계 사용자를 위한 더욱 포괄적이고 사용자 친화적인 웹 환경을 만들고 있습니다. 사용자 경험에 대한 이러한 헌신은 웹사이트의 전반적인 성능과 매력을 크게 향상시킬 수 있습니다.