🌙 사용자에게 편안함을 제공하는 웹 – 바닐라 JS로 다크 모드 전환 구현하기

 

 

웹사이트를 이용하는 환경이 다양해지면서,

이용자들은 밝고 화려한 인터페이스보다

눈에 편안한 어두운 테마를 선호하는 경우가 많아졌습니다.

 

특히 밤 시간이나 조명이 낮은 곳에서 접속할 경우,

화면이 지나치게 밝으면 시야에 부담을 줄 수 있기 때문이죠.

 

이번 글에서는 순수 자바스크립트(바닐라 JS)만으로

간단하면서도 직관적인 다크 모드 토글 기능을 만드는 방법을 안내합니다.

 

추가 라이브러리 없이 구현할 수 있고,

사용자 설정을 기억하는 기능까지 포함되어 있어

실무에도 충분히 적용할 수 있습니다.

 

🧱 HTML 구성 – 가장 단순한 시작

먼저 테마 전환 버튼을 하나 추가해줍니다.

 

<button id="toggle-theme">🌞 / 🌚 모드 전환</button>

 

이 버튼은 라이트/다크 모드 전환을 담당하며,

id 속성을 통해 스크립트에서 쉽게 접근할 수 있도록 설정합니다.

 

🎨 CSS 설계 – CSS 변수로 유연한 테마 적용

 

색상 전환을 부드럽게 하기 위해 CSS 변수로 배경색과 텍스트 색을 정의합니다.

 

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #1e1e1e;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

 

색상 변수는 :root에 정의되며, data-theme 속성이 변경되면 자동으로 적용되는 방식입니다.

이런 구조는 유지 관리에도 효과적이에요.

 

⚙️ JavaScript 로직 – 사용자 설정 기억하기

 

전환 버튼이 클릭되었을 때 현재 테마를 변경하고,

사용자가 선택한 테마를 브라우저에 저장해 다음 방문 시에도 그대로 유지됩니다.

 

const toggleBtn = document.getElementById("toggle-theme");
const currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);
}

toggleBtn.addEventListener("click", () => {
  let theme = document.documentElement.getAttribute("data-theme");
  if (theme === "dark") {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  } else {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  }
});

 

사용자가 이전에 선택한 테마를 기억함으로써,

재방문 시 경험의 연속성을 유지할 수 있습니다.

 

🌟 기능 확장 팁

 

단순한 테마 전환에 그치지 않고 다음과 같은 요소를 추가하면 더욱 풍부한 사용자 경험을 제공할 수 있습니다:

• 버튼 내 이모지 전환으로 시각적 피드백 제공
• 운영체제의 기본 테마 자동 감지 (prefers-color-scheme)
• 테마 전환 시 페이드 인/아웃 애니메이션 추가

이러한 디테일은 UI를 완성도 있게 만들고, 사용자에게 더 매력적으로 다가갈 수 있게 해줍니다.

 

💬 사용자 중심 웹을 위한 마무리 생각

 

이처럼 바닐라 자바스크립트와 CSS만으로도 테마 전환 기능을 충분히 구현할 수 있습니다.

복잡한 코드 없이도 적용 가능하며,

사용자 편의성과 디자인을 동시에 고려할 수 있는 기능이죠.

 

다크 모드는 웹 디자인의 흐름에서 점점 더 중요해지고 있으며,

포트폴리오나 기술 블로그, 브랜드 홈페이지 등에 자연스럽게 녹여내면

전체적인 품질과 만족도를 높일 수 있습니다.

 

✅ 마무리

 

단 몇 줄의 JavaScript와 CSS 변수만으로도 강력한 다크 모드 UI를 만들 수 있습니다.

이 기능은 개인 블로그뿐 아니라 다양한 웹 프로젝트에도 쉽게 적용할 수 있고,

사용자 중심의 웹사이트를 만드는 데 큰 도움이 됩니다.

 

다크 모드 토글 기능을 마스터했다면,

이제 사용자에게 더 많은 선택지를 제공하는 인터페이스로 확장해볼 시간입니다.

 

다음 글에서는 버튼 클릭만으로 콘텐츠를 카테고리별로 필터링할 수 있는

테마별 콘텐츠 필터 UI를 바닐라 JavaScript로 구현하는 방법을 소개합니다.

 

다양한 방식으로 콘텐츠를 분류하고,

사용자 참여도를 높이는 인터랙티브한 UI를 만들고 싶다면 기대해도 좋아요.

 

한 번 클릭으로 원하는 정보만 보는 경험,

그 시작을 함께 만들어보세요. 🌟