이코노트허브(econotehub) 노하우 연구소

지난 글에서 다크모드 버튼을 만들어봤는데, 아쉬운 점이 하나 있었죠. 버튼을 눌러 다크모드로 바꿔도 새로고침하면 다시 라이트모드로 돌아가는 문제였습니다. 오늘은 이 문제를 해결해서, 방문자가 한 번 설정한 모드가 계속 기억되도록 만들어보겠습니다.

왜 새로고침하면 초기화될까요?

지난번 사용한 classList.toggle()은 그 순간 화면에만 클래스를 붙였다 뗐다 할 뿐, 그 정보를 어디에도 저장하지 않습니다. 그래서 페이지를 새로 열면 브라우저는 "다크모드였다"는 사실을 전혀 기억하지 못하고 처음 상태(라이트모드)로 되돌아갑니다.

이 정보를 기억하게 하려면, 브라우저에 따로 저장해둬야 합니다. 이때 쓰는 것이 localStorage입니다.

localStorage란?

브라우저가 방문자의 기기에 작은 정보를 저장해두는 공간입니다. 탭을 닫거나 컴퓨터를 재부팅해도 데이터가 지워지지 않고 남아있습니다. 로그인 상태 유지, 장바구니 정보 등 "다음에 다시 왔을 때도 기억해야 하는 정보"를 저장할 때 널리 쓰입니다.

localStorage.setItem('key', 'value');   // 저장
localStorage.getItem('key');            // 불러오기
localStorage.removeItem('key');         // 삭제

실전: 다크모드 설정 저장하기

지난 글의 버튼 코드를 아래처럼 수정합니다.

<button onclick="toggleDarkMode()">
  다크모드 전환
</button>

<script>
function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');

  if (document.body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
}

// 페이지가 열릴 때 저장된 설정을 확인해서 바로 적용
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-mode');
}
</script>

동작 원리는 이렇습니다.

버튼을 누르면 다크모드 클래스가 켜지거나 꺼집니다.
동시에 지금 상태가 dark인지 light인지를 localStorage에 저장합니다.
페이지가 다시 열릴 때, 저장된 값이 dark이면 자동으로 다크모드 클래스를 붙여줍니다.

깜빡임(Flash) 현상 줄이기

위 코드만 적용하면, 페이지가 열릴 때 아주 잠깐 라이트모드로 보였다가 다크모드로 바뀌는 깜빡임이 생길 수 있습니다. 스크립트가 실행되는 타이밍 때문입니다. 이를 줄이려면, 위 자바스크립트 코드를 <body> 태그 맨 아래가 아니라 <head> 태그 안, 최대한 위쪽에 배치하는 것이 도움이 됩니다. 화면이 그려지기 전에 먼저 설정을 확인하게 되어 깜빡임이 줄어듭니다.

초보자가 자주 하는 실수 2가지

저장한 값과 불러올 때 값을 다르게 쓰는 경우: 저장할 땐 'dark'로 저장했는데 불러올 때 'Dark'나 'DARK'로 비교하면 일치하지 않아 작동하지 않습니다. 대소문자까지 정확히 똑같아야 합니다.
시크릿(익명) 브라우징 모드에서 테스트하는 경우: 일부 브라우저의 시크릿 모드에서는 localStorage가 탭을 닫으면 초기화됩니다. 정상적으로 작동하지 않는다고 오해하기 쉬운데, 일반 브라우징 모드에서 다시 테스트해보세요.

핵심 요약

localStorage는 브라우저에 정보를 저장해서, 다시 방문해도 기억하게 해주는 기능입니다.
버튼을 누를 때 localStorage.setItem()으로 상태를 저장하고, 페이지가 열릴 때 getItem()으로 불러와 적용합니다.
깜빡임을 줄이려면 관련 스크립트를 <head> 안, 최대한 위쪽에 배치하세요.
저장 값과 비교 값의 대소문자가 정확히 일치해야 합니다.

이제 여러분의 블로그는 방문자가 다크모드를 켜두면, 다음에 다시 와도 그 설정을 그대로 기억하게 됩니다. 작은 디테일이지만 사용자 경험에는 꽤 큰 차이를 만듭니다.

제목 없음