웹사이트에서 사용자가 선택한 테마를 기억해주는 기능은 사용자 경험을 향상시키는 중요한 요소입니다. 어두운 모드와 밝은 모드처럼 사용자가 선호하는 테마 설정을 자동으로 저장해주면, 매번 사이트를 방문할 때마다 테마를 새로 설정할 필요가 없어집니다. 이를 위해 Local Storage를 활용하면, 페이지를 새로 고침하거나 브라우저를 닫고 다시 열어도 사용자가 선택한 테마를 유지할 수 있습니다. 이 칼럼에서는 Local Storage를 사용하여 사용자의 선호 테마를 어떻게 저장하고 불러오는지, 이를 활용해 보다 개인화된 사용자 경험을 제공하는 방법을 살펴보겠습니다.
Local Storage란?
Local Storage는 브라우저 내장 스토리지로, 클라이언트 측에서 데이터를 영구적으로 저장할 수 있게 해주는 기능입니다. Local Storage에 저장된 데이터는 브라우저를 종료하고 다시 열어도 사라지지 않으며, 도메인별로 데이터를 저장할 수 있기 때문에 여러 페이지에서도 동일한 데이터를 사용할 수 있습니다.
Local Storage의 특징
- 영구적인 데이터 저장: 페이지를 새로 고침해도 데이터가 유지됩니다.
- 동기식 API: 데이터가 즉시 저장되고 불러와집니다.
- 보안성: 같은 도메인 내에서만 접근 가능하며, 다른 도메인에서는 접근할 수 없습니다.
테마 설정 저장하기
웹페이지에서 테마 설정을 Local Storage에 저장하고 불러오는 방법을 단계별로 살펴보겠습니다.
1. 사용자 테마 선택을 위한 토글 버튼 만들기
먼저, 사용자가 테마를 선택할 수 있는 버튼을 만들어야 합니다. 이 버튼을 클릭하면 밝은 모드와 어두운 모드를 전환할 수 있도록 구현합니다.
<button id="theme-toggle">어두운 모드</button>
위 버튼을 클릭하면 테마가 전환되도록 JavaScript로 이벤트를 설정할 수 있습니다.
2. JavaScript로 테마 전환 처리하기
사용자가 버튼을 클릭하면, 테마를 변경하고 이 설정을 Local Storage에 저장합니다.
const themeToggleButton = document.getElementById('theme-toggle');
// 현재 테마 불러오기
const currentTheme = localStorage.getItem('theme') || 'light'; // 기본값 'light'
// 초기 테마 설정
document.body.classList.add(currentTheme);
// 테마 전환 함수
function toggleTheme() {
if (document.body.classList.contains('light')) {
document.body.classList.replace('light', 'dark');
localStorage.setItem('theme', 'dark');
themeToggleButton.textContent = '밝은 모드';
} else {
document.body.classList.replace('dark', 'light');
localStorage.setItem('theme', 'light');
themeToggleButton.textContent = '어두운 모드';
}
}
// 버튼 클릭 시 테마 전환
themeToggleButton.addEventListener('click', toggleTheme);
위 코드에서는 Local Storage에서 theme 값을 불러와 현재 테마를 설정하고, 테마 변경 시 Local Storage에 새 값을 저장합니다. 또한, 버튼의 텍스트도 동적으로 변경하여 사용자에게 현재 활성화된 모드를 알려줍니다.
테마 적용하기
Local Storage에서 저장된 테마 값에 따라 페이지를 처음 로드할 때 해당 테마를 자동으로 적용하도록 합니다.
// 페이지 로드 시 테마 적용
window.addEventListener('load', () => {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
document.body.classList.add(storedTheme);
themeToggleButton.textContent = storedTheme === 'light' ? '어두운 모드' : '밝은 모드';
}
});
이 코드는 페이지가 로드될 때 Local Storage에 저장된 테마를 확인하고, 그에 맞는 클래스를 <body>에 추가하여 테마를 자동으로 적용합니다.
사용자 경험 개선하기
1. 자동 테마 적용
사용자가 처음 방문할 때 기본 테마가 자동으로 적용되도록 하여 편리함을 제공합니다. 예를 들어, 사용자가 이전에 어두운 모드를 선택했다면, 다음에 방문할 때 어두운 모드가 기본으로 설정됩니다.
2. 모바일과 데스크탑 환경에 따른 다르게 적용
모바일 환경에서는 사용자가 밝은 모드와 어두운 모드 전환을 자주 하지 않을 수 있기 때문에, 테마 설정을 브라우저 기본값(예: prefers-color-scheme)을 따르게 설정할 수 있습니다. 이를 통해 모바일에서 더 직관적인 사용자 경험을 제공합니다.
if (!localStorage.getItem('theme')) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
themeToggleButton.textContent = '밝은 모드';
} else {
document.body.classList.add('light');
themeToggleButton.textContent = '어두운 모드';
}
}
위 코드는 사용자가 이전에 테마를 설정한 적이 없다면, 브라우저의 기본 색상 설정을 기반으로 테마를 적용합니다.
결론
Local Storage를 사용하여 웹페이지에서 사용자 선호 테마를 저장하고 불러오는 방법은 매우 간단하면서도 강력한 기능을 제공합니다. 사용자가 설정한 테마는 페이지를 새로 고침하거나 브라우저를 종료한 후에도 유지되므로, 사용자 경험을 크게 향상시킬 수 있습니다. 테마 전환 기능을 추가함으로써 사이트의 접근성과 사용성을 높이고, 더 나아가 개인화된 경험을 제공할 수 있습니다. 웹페이지에서 Local Storage를 활용한 사용자 설정 저장 기능을 구현하여 더욱 편리하고 맞춤화된 웹사이트를 제공하세요.
