다크 모드와 라이트 모드 전환 기능은 사용자가 UI를 편안하게 이용할 수 있게 해주는 요소입니다. 특히 다크 모드는 눈의 피로를 줄이고 배터리 절약에도 도움을 주기 때문에 많은 웹사이트와 앱에서 기본 기능으로 제공하고 있습니다. 이 글에서는 웹사이트에 다크 모드와 라이트 모드를 구현하는 방법과 사용자 맞춤형 UI 경험을 위한 접근법을 다룹니다.
1. 다크 모드와 라이트 모드 전환의 필요성
사용자는 다양한 환경에서 웹사이트를 사용합니다. 낮에는 밝은 화면이 적합할 수 있지만, 밤이나 어두운 환경에서는 어두운 배경이 눈을 덜 피로하게 하며, OLED 디스플레이에서는 배터리 소모도 줄일 수 있습니다. 따라서 다크 모드를 제공하는 것은 단순한 트렌드를 넘어 사용자 경험(UX)을 개선하고, 지속 가능한 에너지를 활용하는 데 기여합니다.
2. CSS를 사용한 다크 모드 구현
CSS만으로 다크 모드를 구현할 수 있는 방법은 여러 가지가 있으며, 간단한 테마 전환을 위해 prefers-color-scheme 미디어 쿼리나 CSS 변수(CSS Custom Properties)를 활용할 수 있습니다.
1) prefers-color-scheme 미디어 쿼리 사용
prefers-color-scheme는 사용자가 운영 체제에서 설정한 테마에 맞춰 웹사이트의 모드를 자동으로 설정해주는 미디어 쿼리입니다. 이 쿼리를 사용하면 추가적인 자바스크립트 없이도 사용자가 선호하는 테마를 반영할 수 있습니다.
/* 기본 라이트 모드 */
body {
background-color: white;
color: black;
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
이 방식은 운영체제 설정에 따라 자동으로 웹사이트의 다크 모드와 라이트 모드를 전환해주지만, 사용자가 사이트 내에서 직접 테마를 전환할 수 있는 옵션을 제공하려면 추가적인 설정이 필요합니다.
2) CSS 변수 활용
CSS 변수를 사용하면 테마에 필요한 스타일을 보다 쉽게 관리할 수 있습니다. 각 색상을 변수로 정의해 놓고, 다크 모드와 라이트 모드에 따라 변수 값을 다르게 지정하면 전체적인 테마 변경이 간편해집니다.
:root {
--bg-color: white;
--text-color: black;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: black;
--text-color: white;
}
}
CSS 변수만으로도 사이트의 주요 색상을 한 번에 변경할 수 있어 유지보수성이 높아지고, 다양한 컴포넌트에 동일한 색상 값을 일관되게 적용할 수 있습니다.
3. 자바스크립트를 통한 테마 전환 구현
사용자가 웹사이트 내에서 직접 다크 모드와 라이트 모드를 선택할 수 있도록 하려면 자바스크립트를 사용해 전환 기능을 추가할 수 있습니다. 아래는 버튼 클릭을 통해 테마를 전환하고, 사용자의 선택을 브라우저의 localStorage에 저장하는 예제입니다.
<button id="theme-toggle">Toggle Theme</button>
<script>
const toggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.body.classList.add(currentTheme);
}
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
let theme = 'light';
if (document.body.classList.contains('dark-mode')) {
theme = 'dark';
}
localStorage.setItem('theme', theme);
});
</script>
<style>
body {
background-color: white;
color: black;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
이 코드는 사용자가 테마를 전환할 때마다 localStorage에 선택한 테마를 저장합니다. 다음에 페이지를 방문했을 때도 저장된 테마 설정이 적용되므로 일관된 사용자 경험을 제공합니다.
4. 다양한 요소에 다크 모드 적용하기
다크 모드 구현 시에는 배경색과 텍스트 색상뿐 아니라 링크, 버튼, 카드 등의 UI 요소 색상도 고려해야 합니다. 모든 요소가 다크 모드와 라이트 모드에서 가시성이 확보되도록 설정해야 하며, 적절한 대비를 유지하는 것이 중요합니다. 다음은 일부 UI 요소에 대한 다크 모드 스타일링 예시입니다.
/* 버튼 */
button {
background-color: var(--button-bg);
color: var(--button-color);
}
@media (prefers-color-scheme: dark) {
:root {
--button-bg: #333;
--button-color: #fff;
}
}
UI 요소의 색상과 스타일을 다크 모드에 맞게 조정하면 사용자에게 일관된 경험을 제공할 수 있으며, 다크 모드에서도 디자인의 완성도를 유지할 수 있습니다.
5. 사용자 경험을 위한 다크 모드 UX 고려 사항
- 자동 전환 제공:
prefers-color-scheme을 통해 시스템 설정에 따른 다크 모드 전환을 제공하면서, 사용자가 선택적으로 다크 모드를 켜고 끌 수 있는 옵션을 함께 제공하는 것이 좋습니다. - 일관성 있는 스타일: 웹사이트의 모든 요소에 대해 일관성 있는 색상 대비를 유지해야 합니다. 텍스트, 버튼, 배경색 등이 조화롭게 설정되어야 사용자 경험이 개선됩니다.
- 애니메이션 효과 추가: 다크 모드 전환 시 빠르고 자연스러운 애니메이션을 추가하면 더 부드러운 전환 경험을 제공할 수 있습니다.
- 접근성 고려: 다크 모드에서도 충분한 색상 대비를 통해 텍스트와 인터페이스 요소가 쉽게 읽히고 사용되도록 접근성을 고려합니다.
6. 다크 모드를 통한 사용자 맞춤형 경험 제공
다크 모드와 라이트 모드 전환 기능은 웹사이트의 사용자 경험을 크게 향상할 수 있는 기능입니다. 사용자의 시스템 설정을 반영하는 자동 전환을 기본으로 제공하고, 필요에 따라 수동 전환 기능을 추가하여 개별 사용자가 선호하는 방식으로 웹사이트를 사용할 수 있도록 돕습니다. 웹사이트의 디자인 일관성을 유지하면서 다크 모드를 구현하면 더 많은 사용자에게 편안한 UI 경험을 제공할 수 있습니다.
