다크 모드 지원 웹사이트 만들기: 기본부터 고급까지

다크 모드는 화면 배경을 어두운 색상으로 설정하여 사용자 눈의 피로를 줄이고 에너지 소비를 절감하는 디자인 트렌드입니다. 다크 모드는 모바일 앱뿐 아니라 웹사이트에서도 점점 더 필수적인 기능으로 자리 잡고 있습니다. 이 글에서는 다크 모드의 구현 방법을 기본부터 고급 단계까지 설명합니다.

---

1. CSS prefers-color-scheme 미디어 쿼리 사용법

prefers-color-scheme 미디어 쿼리는 사용자의 시스템 설정에 따라 다크 모드와 라이트 모드를 자동으로 적용할 수 있습니다.

1. 미디어 쿼리 개념
   • prefers-color-scheme은 사용자가 운영 체제에서 다크 모드를 활성화했는지 여부를 감지합니다.
   • light와 dark 두 가지 값을 가집니다.
2. 기본 CSS 코드 작성
   아래 코드는 사용자의 선호 설정에 따라 배경색과 글자색을 다르게 적용합니다.
   body { background-color: white; color: black; } @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }
3. 브라우저 지원
   • 대부분의 최신 브라우저(Chrome, Firefox, Edge, Safari)에서 지원합니다.
   • 구형 브라우저에서는 적용되지 않으므로 사용자 지정 다크 모드 스위치를 함께 구현하는 것이 좋습니다.

---

2. 다크 모드 전환 버튼 구현하기: JavaScript 활용

사용자가 시스템 설정과 상관없이 다크 모드를 직접 전환할 수 있도록 버튼을 제공하는 방법입니다.

1. HTML 구조 작성
   • 다크 모드 전환 버튼을 추가합니다.
     
     <button id="theme-toggle">다크 모드 켜기</button>
2. JavaScript로 모드 전환 구현
   • 클릭 이벤트를 사용하여 다크 모드 상태를 토글합니다.
     const toggleButton = document.getElementById('theme-toggle'); const body = document.body; toggleButton.addEventListener('click', () => { body.classList.toggle('dark-mode'); const isDarkMode = body.classList.contains('dark-mode'); toggleButton.textContent = isDarkMode ? '다크 모드 끄기' : '다크 모드 켜기'; });
3. CSS 작성
   • dark-mode 클래스를 사용하여 스타일을 적용합니다.
     .dark-mode { background-color: black; color: white; }
4. 로컬 스토리지를 사용한 상태 저장
   • 페이지를 새로고침해도 선택한 모드가 유지되도록 로컬 스토리지를 활용합니다.
     const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { body.classList.add('dark-mode'); toggleButton.textContent = '다크 모드 끄기'; } toggleButton.addEventListener('click', () => { body.classList.toggle('dark-mode'); const isDarkMode = body.classList.contains('dark-mode'); localStorage.setItem('theme', isDarkMode ? 'dark' : 'light'); toggleButton.textContent = isDarkMode ? '다크 모드 끄기' : '다크 모드 켜기'; });

---

3. CSS 변수로 다크 모드와 라이트 모드 관리하기

CSS 변수는 다크 모드와 라이트 모드에서 색상을 효율적으로 관리할 수 있는 방법입니다.

1. CSS 변수 정의
   • 전역적으로 색상을 정의합니다.
     :root { --background-color: white; --text-color: black; } .dark-mode { --background-color: black; --text-color: white; } body { background-color: var(--background-color); color: var(--text-color); }
2. 변수로 동적인 스타일 변경
   • CSS 변수를 활용하면 다크 모드 전환 시 전체 스타일을 쉽게 업데이트할 수 있습니다.
3. 반복 작업 줄이기
   • 변수 기반 설계는 대규모 프로젝트에서도 유지보수를 간편하게 만듭니다.

---

4. 다크 모드 적용 시 색상 대비 최적화 팁

다크 모드를 구현할 때, 색상 대비는 사용자 경험에 중요한 영향을 미칩니다. 충분한 대비를 확보하지 않으면 텍스트 가독성이 떨어질 수 있습니다.

1. 색상 대비 체크
   • 텍스트와 배경 사이의 명도 대비를 4.5:1 이상으로 유지합니다.
   • WebAIM Contrast Checker와 같은 도구를 활용하여 대비를 확인하세요.
2. 중간 색상 사용
   • 순수한 검정(#000)이나 흰색(#FFF) 대신 약간의 회색(#121212, #F5F5F5)을 사용하는 것이 눈에 덜 피로합니다.
3. 상호작용 요소 강조
   • 버튼이나 링크와 같은 상호작용 요소는 다크 모드에서도 시각적으로 명확히 구분될 수 있도록 밝은 색상을 사용하세요.
     a { color: #1E90FF; /* 밝은 파란색 */ }
4. 아이콘과 이미지 최적화
   • 다크 모드에 어울리는 아이콘 및 이미지를 제공하거나, SVG를 사용해 색상을 변경할 수 있도록 설계합니다.
     .dark-mode img { filter: brightness(0.8); }

---

결론

다크 모드는 현대 웹사이트에서 사용자 경험을 향상시키는 중요한 요소입니다. prefers-color-scheme 미디어 쿼리를 사용해 기본적인 다크 모드를 지원하고, JavaScript로 사용자 지정 전환 버튼을 제공하며, CSS 변수와 색상 대비 최적화를 통해 더 세련되고 유지보수 가능한 웹사이트를 만들 수 있습니다.

꾸준한 실습과 최신 기술의 적용으로 다크 모드를 완벽히 구현해보세요. 이 글이 실질적인 도움과 함께 애드센스 승인의 발판이 되기를 바랍니다.