다크 모드 구현하기: 눈이 편해지는 CSS 설정 5가지 – 사용자 눈의 피로를 확실히 줄이는 방법

다크 모드 구현하기사용자 눈의 피로를 덜어주는 다크 모드 참고 이미지

다크 모드 구현하기: 눈이 편해지는 CSS 설정 5가지 

 

"다크 모드"를 제대로 적용하면 사용자의 체류 시간이 늘고, 야간 방문자 이탈률이 눈에 띄게 줄어든다. 실제로 구글 I/O 발표 자료에 따르면 어두운 배경의 OLED 화면은 최대 63%까지 배터리를 절약하고, 눈의 피로를 줄이는 데 효과적이라는 연구 결과도 있다. 블로그를 운영하면서 이 기능 하나를 빠뜨리는 건 솔직히 좀 아깝다. 이번 글에서는 복잡한 JavaScript 없이 CSS만으로 "다크 모드"를 구현하는 방법을 정리해봤다.

 

📋 목차

• 다크 모드가 필요한 진짜 이유
• prefers-color-scheme으로 자동 감지하기
• CSS 변수로 색상 관리하는 법
• 토글 버튼으로 수동 전환 구현
• 다크 모드에서 가독성 높이는 타이포그래피
• 초보자가 자주 하는 실수 3가지
• 마무리 및 적용 체크리스트

🌙 다크 모드가 필요한 진짜 이유

밤에 침대에 누워서 스마트폰으로 블로그 글을 읽다가 눈이 화끈거린 경험, 다들 있을 거다. 흰 배경에 검은 글씨는 낮에는 선명하고 좋은데, 조명이 어두운 환경에서는 눈에 꽤 부담이 된다. 이게 단순히 기분 문제가 아니라, 장시간 노출되면 실제로 수면의 질에도 영향을 미친다는 연구가 여러 편 있다.

사용자 경험(UX) 측면에서도 "다크 모드"는 이제 선택이 아니라 기본 기능에 가까워졌다. iOS, Android 모두 시스템 레벨에서 다크 모드를 지원하고, 사용자들은 자기가 선택한 환경이 앱과 웹 모두에서 통일되기를 원한다. 블로그에 "다크 모드"가 없으면 시스템 다크를 켜놓은 독자들이 눈을 찡그리며 글을 읽거나, 그냥 닫아버릴 수도 있다.

SEO 관점에서도 체류 시간과 이탈률은 중요한 신호다. 읽기 편한 환경을 만들어주는 것만으로도 체류 시간 개선에 기여할 수 있고, 구글 애드센스 수익에도 간접적으로 영향을 준다.

🔍 prefers-color-scheme으로 자동 감지하기

가장 깔끔한 방법은 CSS 미디어 쿼리를 사용하는 거다. prefers-color-scheme이라는 미디어 쿼리를 쓰면 사용자의 시스템 설정을 자동으로 읽어서 라이트/다크 테마를 적용할 수 있다. JavaScript 한 줄도 필요 없다.

/* 기본 라이트 모드 */
body {
  background-color: #ffffff;
  color: #111111;
}

/* 시스템이 다크 모드일 때 자동 적용 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e8e8e8;
  }
}

이렇게만 해도 사용자가 시스템 설정에서 다크 모드를 켜놨다면 자동으로 어두운 배경이 적용된다. 이 방식의 장점은 코드가 단순하고, 별도 스크립트 없이도 작동한다는 점이다. 다만 단점도 있다. 사용자가 "이 사이트만 라이트로 보고 싶다"는 요청을 할 수 없다. 그래서 보통은 이 방법에 토글 기능을 추가해서 사용한다.

"다크 모드" 지원 브라우저는 크롬 76+, 파이어폭스 67+, 사파리 12.1+, 엣지 79+ 이상이면 전부 호환된다. 사실상 현재 사용되는 거의 모든 브라우저에서 된다고 보면 된다.

🎨 CSS 변수로 색상 관리하는 법

색상을 일일이 다 바꾸는 건 관리가 안 된다. 페이지 요소가 10개만 넘어가도 하나 수정할 때마다 다 찾아서 바꿔야 하는 상황이 온다. CSS 변수(Custom Properties)를 쓰면 이 문제를 깔끔하게 해결할 수 있다.

:root {
  --bg-color: #ffffff;
  --text-color: #111111;
  --accent-color: #0066cc;
  --border-color: #dddddd;
  --card-bg: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --accent-color: #4da6ff;
    --border-color: #333333;
    --card-bg: #1e1e1e;
  }
}

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

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

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

이렇게 `:root`에 변수 묶음을 두 세트 만들어놓으면, 나중에 색상 하나 바꿀 때 변수 값만 수정하면 된다. 유지보수가 훨씬 편해진다. 실제로 프로젝트 규모가 커질수록 이 방식의 가치가 빛난다. 디자인 시스템 개념과도 연결되는 부분이다.

"다크 모드"에서 순수한 검정(#000000)은 피하는 게 좋다. 너무 강한 대비가 오히려 눈의 피로를 유발한다. #121212나 #1a1a1a 정도가 더 편안한 느낌을 준다. 구글의 머티리얼 디자인 가이드도 이 점을 권장하고 있다.

🔘 토글 버튼으로 수동 전환 구현

자동 감지만으로는 부족할 때가 있다. 낮인데 어두운 방에 있다든지, 개인 취향으로 라이트 모드를 선호하는 사람도 있다. 이런 경우를 위해 수동 토글 기능을 추가한다. JavaScript를 최소한으로 써서 구현하는 방법이다.

/* HTML */
<button id="theme-toggle">🌙 다크 모드</button>

/* CSS */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --accent-color: #4da6ff;
}

/* JavaScript */
const toggle = document.getElementById('theme-toggle');
const body = document.body;

// 저장된 설정 불러오기
if (localStorage.getItem('theme') === 'dark') {
  body.classList.add('dark-mode');
  toggle.textContent = '☀️ 라이트 모드';
}

toggle.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  const isDark = body.classList.contains('dark-mode');
  toggle.textContent = isDark ? '☀️ 라이트 모드' : '🌙 다크 모드';
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

localStorage를 사용하면 사용자가 선택한 모드가 페이지를 새로고침하거나 다시 방문했을 때도 유지된다. 이게 없으면 매번 토글을 눌러야 해서 사용자 경험이 떨어진다. 한 번 설정하면 기억해두는 거, 기본 예의라고 생각하면 된다.

✍️ 다크 모드에서 가독성 높이는 타이포그래피

배경만 어둡게 한다고 끝이 아니다. 텍스트 색상, 글자 굵기, 줄 간격도 함께 조정해야 진짜 완성이다. 어두운 배경에서 순백색(#ffffff) 텍스트는 오히려 눈이 부시다. #e0e0e0이나 #d4d4d4 정도로 살짝 낮춰주는 게 훨씬 편안하다.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
    /* 다크 모드에서 폰트 렌더링 개선 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3 {
    color: #f0f0f0;  /* 제목은 조금 더 밝게 */
    font-weight: 600;  /* 다크에서는 굵기를 조금 올려야 선명하게 보임 */
  }

  p {
    line-height: 1.8;  /* 줄 간격을 조금 더 넉넉하게 */
    color: #cccccc;
  }

  code, pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    border: 1px solid #444;
  }
}

이미지가 있는 경우에도 "다크 모드"에서 너무 밝게 튀는 문제가 생긴다. 이럴 때는 아래처럼 이미지 밝기를 약간 낮춰주는 방법도 효과적이다.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.85);
  }
}

무조건 적용하기보다는 섬네일이나 사진 이미지에만 선택적으로 적용하는 게 낫다. 아이콘이나 로고처럼 의도적으로 밝아야 하는 요소는 예외 처리를 해줘야 한다.

⚠️ 초보자가 자주 하는 실수 3가지

첫 번째, 전환 애니메이션을 빠뜨리는 것. 모드가 순간적으로 확 바뀌면 시각적으로 불쾌하다. 아래처럼 트랜지션을 추가하면 훨씬 부드러워진다.

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

두 번째, 하드코딩된 색상을 CSS 변수로 바꾸지 않는 것. 변수 선언은 해놓고 정작 요소에 color: #333처럼 직접 쓰면 "다크 모드" 전환이 안 된다. 모든 색상을 변수로 통일해야 한다.

세 번째, FLASH 문제를 방치하는 것. 페이지 로딩 초반에 라이트 모드가 잠깐 번쩍하고 나서 다크 모드로 바뀌는 현상이다. `localStorage` 값을 `` 태그 안에서 인라인 스크립트로 처리하면 이 문제를 줄일 수 있다.

<head>
  <script>
    if (localStorage.getItem('theme') === 'dark') {
      document.documentElement.classList.add('dark');
    }
  </script>
</head>

✅ 마무리 및 적용 체크리스트

"다크 모드"는 단순히 유행을 따르는 기능이 아니다. 사용자의 실제 불편함을 해소하고, 더 오래 머물게 만드는 UX 전략이다. 블로그나 사이트를 운영한다면 지금 당장 적용해볼 만한 가치가 있다. 코드 양도 생각보다 많지 않고, 효과는 확실하다.

• ☑ prefers-color-scheme 미디어 쿼리 적용
• ☑ CSS 변수로 색상 통합 관리
• ☑ localStorage로 사용자 설정 저장
• ☑ 전환 트랜지션 추가
• ☑ 타이포그래피 및 이미지 별도 처리
• ☑ FLASH 문제 방지 인라인 스크립트

---

참고 자료 및 출처

• MDN Web Docs – prefers-color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• Google Material Design – Dark Theme: https://m2.material.io/design/color/dark-theme.html
• CSS-Tricks – Dark Mode in CSS: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
• web.dev – prefers-color-scheme 가이드: https://web.dev/prefers-color-scheme/