M

MLOG

한국어

CSS 미디어 쿼리와 사용자 지정 속성을 활용하여 사용자 선호도에 맞춰 자동으로 라이트/다크 테마를 적용하는 방법을 알아보세요. 이를 통해 전 세계 사용자의 접근성과 시각적 매력을 향상시킬 수 있습니다.

CSS Light-Dark 함수: 글로벌 웹을 위한 자동 테마 적응

오늘날과 같이 전 세계가 연결된 세상에서 웹사이트는 다양한 배경과 선호도를 가진 사용자들에게 접근 가능하고 시각적으로 매력적이어야 합니다. 이를 달성하는 가장 효과적인 방법 중 하나는 자동 테마 적응, 특히 사용자의 시스템 설정에 따라 조정되는 라이트 및 다크 테마를 모두 제공하는 것입니다. 이 블로그 게시물에서는 CSS 미디어 쿼리와 사용자 지정 속성을 사용하여 이 기능을 구현하는 방법을 안내하여 전 세계 사용자에게 원활하고 편안한 브라우징 경험을 보장합니다.

자동 라이트 및 다크 테마를 구현해야 하는 이유

웹 프로젝트에 자동 테마 적응을 통합해야 하는 몇 가지 강력한 이유가 있습니다:

CSS로 자동 테마 적응을 구현하는 방법

자동 테마 적응의 핵심은 prefers-color-scheme 미디어 쿼리에 있습니다. 이 CSS 미디어 쿼리를 사용하면 사용자가 선호하는 색상 구성표(라이트 또는 다크)를 감지하고 해당 스타일을 적용할 수 있습니다.

1단계: 사용자 지정 속성(CSS 변수) 정의하기

먼저 사용자 지정 속성(CSS 변수)을 정의하여 라이트 및 다크 테마의 색상 값을 저장합니다. 이렇게 하면 변수 값을 업데이트하는 것만으로 테마 간 전환을 쉽게 할 수 있습니다.


:root {
  --background-color: #ffffff; /* 라이트 테마 배경 */
  --text-color: #000000; /* 라이트 테마 텍스트 */
  --link-color: #007bff; /* 라이트 테마 링크 */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* 다크 테마 배경 */
    --text-color: #ffffff; /* 다크 테마 텍스트 */
    --link-color: #66b3ff; /* 다크 테마 링크 */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

이 예에서는 배경색, 텍스트 색상, 링크 색상 및 버튼 색상에 대한 변수를 정의합니다. :root 선택자는 이러한 변수를 전체 문서에 적용합니다. 그런 다음 @media (prefers-color-scheme: dark) 미디어 쿼리는 사용자가 시스템을 다크 모드로 설정했을 때 이러한 변수를 다크 테마 값으로 재정의합니다.

2단계: 스타일에 사용자 지정 속성 적용하기

다음으로, 이러한 사용자 지정 속성을 CSS 스타일에 적용하여 웹사이트 요소의 모양을 제어합니다.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 부드러운 전환 효과 */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

여기서는 var() 함수를 사용하여 사용자 지정 속성의 값에 접근하고 있습니다. 또한 body 요소에 transition 속성을 추가하여 테마 간에 부드러운 전환 효과를 만들었습니다.

3단계: 테스트 및 개선

다양한 브라우저와 운영 체제에서 구현을 철저히 테스트하세요. Chrome, Firefox, Safari, Edge와 같은 최신 브라우저는 prefers-color-scheme 미디어 쿼리를 완벽하게 지원합니다. 운영 체제 설정에서 라이트 모드와 다크 모드 사이를 전환하여 웹사이트에 변경 사항이 반영되는 것을 볼 수 있습니다.

고급 기술 및 고려사항

수동 테마 전환 기능 제공하기

자동 테마 적응은 훌륭한 출발점이지만, 일부 사용자는 시스템 설정을 수동으로 재정의하는 것을 선호할 수 있습니다. JavaScript와 로컬 저장소를 사용하여 수동 테마 전환 기능을 제공할 수 있습니다.

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // 기본값은 'auto'

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// 페이지 로드 시 초기 테마 적용
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // 'auto'로 설정된 경우, prefers-color-scheme가 결정하도록 함
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: 이전 CSS와 함께 다음 CSS를 추가합니다. 수동 재정의에 주목하세요:


body.light-theme {
  --background-color: #ffffff; /* 라이트 테마 배경 */
  --text-color: #000000; /* 라이트 테마 텍스트 */
  --link-color: #007bff; /* 라이트 테마 링크 */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* 다크 테마 배경 */
  --text-color: #ffffff; /* 다크 테마 텍스트 */
  --link-color: #66b3ff; /* 다크 테마 링크 */
  --button-background-color: #333;
  --button-text-color: #fff;
}

이 코드 스니펫은 사용자가 라이트, 다크, 자동 테마 사이를 전환할 수 있는 버튼을 추가합니다. 선택한 테마는 로컬 저장소에 저장되어 페이지 로드 시에도 유지됩니다.

이미지 및 SVG 처리하기

일부 이미지와 SVG는 라이트 및 다크 테마 모두에서 잘 보이지 않을 수 있습니다. CSS 미디어 쿼리를 사용하여 이러한 자산의 다른 버전을 조건부로 표시할 수 있습니다.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

이 코드 스니펫은 라이트 모드에서는 하나의 이미지(light-mode 클래스)를, 다크 모드에서는 다른 이미지(dark-mode 클래스)를 보여줍니다.

국제 사용자를 위한 색상 팔레트 고려사항

라이트 및 다크 테마의 색상 팔레트를 선택할 때 문화적 연관성과 접근성 고려 사항에 유의해야 합니다. 다음은 몇 가지 일반적인 지침입니다:

성능 고려사항

자동 테마 적응을 구현하는 것은 비교적 간단하지만 성능에 미칠 수 있는 잠재적 영향을 고려하는 것이 중요합니다. 렌더링을 느리게 할 수 있는 지나치게 복잡한 CSS 선택기나 애니메이션 사용을 피하세요. 또한 변수 조회 오버헤드를 최소화하기 위해 사용자 지정 속성이 효율적으로 정의되었는지 확인하세요.

성능 최적화를 위한 몇 가지 모범 사례는 다음과 같습니다:

접근성 모범 사례

라이트 및 다크 테마가 WCAG(웹 콘텐츠 접근성 가이드라인)와 같은 접근성 지침을 충족하는지 확인하세요. 여기에는 충분한 색상 대비 제공, 시맨틱 HTML 사용, 모든 대화형 요소가 키보드로 접근 가능하도록 보장하는 것이 포함됩니다.

다음은 따라야 할 구체적인 접근성 모범 사례입니다:

다양한 지역별 예시

라이트 및 다크 테마가 다양한 전 세계 고객을 위해 어떻게 맞춤화될 수 있는지에 대한 다음 예시를 고려해 보세요:

결론

자동 라이트 및 다크 테마를 구현하는 것은 전 세계 고객을 위한 더 접근성 있고 사용자 친화적인 웹 경험을 만드는 데 중요한 단계입니다. CSS 미디어 쿼리와 사용자 지정 속성을 활용하여 웹사이트의 모양을 사용자 선호도에 맞게 쉽게 조정하고, 눈의 피로를 줄이며, 시각 장애가 있는 사용자의 접근성을 향상시킬 수 있습니다. 모든 사람에게 원활하고 포괄적인 브라우징 경험을 보장하기 위해 문화적 연관성, 접근성 지침 및 성능 고려 사항을 고려하는 것을 잊지 마세요.

이러한 기술을 채택함으로써 귀하는 현대적인 웹 디자인 원칙에 대한 헌신을 보여주고 국제적인 고객의 다양한 요구를 충족시켜 웹사이트를 모두에게 환영받고 편안한 공간으로 만들 수 있습니다.