사용자 인터페이스의 대안으로 다크 모드의 보급률이 최근 크게 증가했습니다. 이 디자인 선택은 어두운 배경과 밝은 타이포그래피를 결합하여 시각적 편안함과 에너지 절약 이점을 모두 제공하며, 특히 배터리 수명을 연장할 수 있는 OLED 디스플레이에서 사용할 때 유용합니다.
CSS와 JavaScript를 활용하여 웹사이트 또는 웹 애플리케이션에 다크 모드 기능을 통합하는 과정을 살펴보세요.
다크 모드 이해
다크 모드 옵션을 구현하면 웹 페이지의 기존 조명을 어두운 분위기로 대체하여 사용자에게 대체 색 구성표를 제공합니다. 이 변경 사항은 특히 어두운 조명 환경에서 작업할 때 시각적 편안함을 향상시킵니다. 이 디자인이 널리 사용되는 이유는 접근성과 다양한 디지털 플랫폼과의 조화로운 호환성 때문일 수 있습니다.
프로젝트 설정하기
이 계획을 효과적으로 실행하려면 먼저 적절하게 배열된 HTML, CSS 및 JavaScript 파일로 구성된 체계적인 프로젝트 설정을 구축하는 것이 중요합니다.
HTML 코드
밝은 모드와 어두운 모드 간의 원활한 전환을 위해 테마__스위처 요소를 사용하여 사용자가 다양한 색 구성표 사이를 쉽게 전환할 수 있는 “테마 색상”이라는 이름의 WP\_Customizer 컨트롤을 구현했습니다. 이를 통해 방문자가 현재 웹페이지에서 벗어나지 않고도 보기 기본 설정을 수정할 수 있어 직관적인 사용자 경험을 제공합니다.
<body>
<nav class="navbar">
<span class="logo">Company Logo</span>
<ul class="nav__lists">
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="theme__switcher">
<img id="theme__image" src="./toggle.svg" alt="" />
</div>
</nav>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.
</main>
<script src="./script.js"></script>
</body>
CSS 코드
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}
.navbar span { margin-right: auto; }
.logo { font-weight: 700; }
.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}
#theme__switcher { cursor: pointer; }
main {
width: 300px;
margin: 5rem auto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5px rgba(242, 215, 213, 0.4);
}
현재 사용자 인터페이스의 레이아웃은 다음과 같습니다:
CSS 및 JavaScript를 사용하여 다크 모드 구현
웹사이트 디자인에 다크 모드를 통합하려면 이 대체 색 구성표의 시각적 모양을 설정하기 위해 CSS를 활용해야 합니다. 또한 사용자가 사이트에서 다크 모드와 라이트 모드 사이를 원활하게 전환할 수 있도록 하려면 JavaScript를 사용하는 것이 중요합니다.
테마 클래스 만들기
애플리케이션에서 다크 모드를 구현하는 다양한 접근 방식에는 밝은 테마와 어두운 테마를 모두 수용하는 단일 클래스 계층 구조를 활용하는 것이 포함됩니다. 이를 통해 대비되는 색 구성표 사이를 원활하게 전환할 수 있습니다. 포괄적인 디자인 적용 범위를 보장하려면 다크 모드가 사용자 인터페이스와 경험의 다양한 측면에 미치는 잠재적 영향을 평가하는 것이 필수적입니다.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
인터랙티브 요소 선택
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
토글 기능 추가
JavaScript를 사용하여 밝은 모드와 어두운 모드 사이를 효과적으로 전환하려면 “밝은” 및 “어두운” 클래스 이름을 토글하는 다음 스크립트를 활용하면서 CSS 필터를 통해 스위치의 시각적 표현을 업데이트합니다. 토글 버튼의 모양도 현재 상태를 반영하도록 수정하는 것이 좋습니다.
// Function to set the theme
function setTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
bodyEl.classList.toggle("dark", theme === "dark");
// If the theme is "light," add the "light" class, remove "dark" class,
bodyEl.classList.toggle("light", theme !== "dark");
// adjust filter of the toggle switch
themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
}
// Function to toggle the theme between light and dark
function toggleTheme() {
setTheme(bodyEl.classList.contains("dark") ? "light" : "dark");
}
themeToggle.addEventListener("click", toggleTheme);
이 기능을 구현하면 지정된 토글 요소를 클릭하기만 하면 웹페이지의 여러 테마 간에 원활하게 전환할 수 있습니다.
자바스크립트로 다크 모드 향상
시각적 매력을 유지하면서 대비를 최적화하고 가독성을 높이는 등 여러 가지 방법을 통해 다크 모드에서 웹사이트의 사용자 경험을 향상시킬 수 있습니다.
사용자 환경 설정 감지
`matchMedia` 기능을 활용하면 웹페이지를 로드하기 전에 사용자의 기기 테마를 분석하고 그에 따라 웹사이트의 모양을 맞춤 설정할 수 있습니다.
// Function to detect user's preferred theme
function detectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
// Run the function to detect the user's preferred theme
detectPreferredTheme();
이제 웹사이트의 시각적 모양이 방문자 기기의 일반적인 색 구성표 및 레이아웃에 맞게 동적으로 조정됩니다.
로컬 저장소로 사용자 기본 설정 유지
더욱 원활한 사용자 경험을 제공하려면 브라우저 기반 로컬 저장소 기능을 활용하여 여러 탐색 세션에서 사용자가 선택한 색맹 시뮬레이션 모드 기본 설정을 유지하는 것이 좋습니다. 이렇게 하면 사용자가 이후 방문할 때마다 선호하는 모드를 계속 선택할 필요가 없으므로 편의성이 향상되고 전반적인 상호 작용 프로세스가 간소화됩니다.
function setTheme(theme) {
bodyEl.classList.toggle("dark", theme === "dark");
bodyEl.classList.toggle("light", theme !== "dark");
themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
// Setting the theme in local storage
localStorage.setItem("theme", theme);
}
// Check if the theme is stored in local storage
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}
function detectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
setTheme(prefersDarkMode && storedTheme !== "light" ? "dark" : "light");
}
사용자 중심 디자인 수용
웹 개발에서 다크 모드를 구현할 때는 시각적인 매력뿐만 아니라 사용자 경험에 미치는 영향도 고려해야 합니다. 사용자 선호도와 편의성을 중심으로 개발자는 매력적이면서도 기능적인 인터페이스를 제작하여 방문자 충성도를 높이고 전반적인 디지털 상호 작용을 개선할 수 있습니다. 따라서 웹사이트나 애플리케이션을 개발할 때는 사용자의 긍정적인 참여를 유도하기 위해 사용자 만족도를 최우선 과제로 삼는 것이 중요합니다.