CSS로 다크 모드 스타일 적용하는 방법

by

안녕하세요! 요즘 웹페이지나 앱에서 많이 보이는 다크 모드, 한 번쯤은 써보셨죠? 눈이 편안해진다는 장점 때문에 저도 애용하고 있어요. 어두운 배경에 밝은 텍스트로 구성된 다크 모드는 밤늦게까지 휴대폰을 보는 우리 눈 건강을 위해서도 좋고, 배터리 소모도 줄여준다고 하더라고요. 그런데 이 다크 모드, 도대체 어떻게 만드는 걸까요? 궁금하셨던 분들을 위해 오늘은 CSS를 이용해서 다크 모드 스타일을 적용하는 방법을 알려드리려고 해요. 미디어 쿼리 활용법부터 자바스크립트를 이용한 다크 모드 전환까지, 다크 모드 CSS 구현 방법을 차근차근 설명해 드릴 테니 함께 따라 해 보세요!

 

 

다크 모드의 장점과 단점

다크 모드! 요즘 정말 많이들 쓰시죠? 마치 밤하늘처럼 어두운 배경에 밝은 텍스트로 이루어진 이 다크 모드는, 스마트폰부터 웹사이트까지 디지털 세상 곳곳에서 만나볼 수 있어요. 하지만 유행처럼 번지고 있는 다크 모드, 정말 장점만 있을까요? 사실 동전의 양면처럼 장점과 단점을 모두 가지고 있답니다. 마치 낮과 밤처럼 말이죠! 그럼 지금부터 다크 모드의 장점과 단점을 꼼꼼하게 살펴보도록 할게요~?

다크 모드의 장점

장점부터 알아볼까요? 우선 다크 모드는 눈의 피로를 줄여준다는 큰 장점이 있어요! 밝은 화면을 오래 보면 눈이 부시고 피곤해지는 경험, 다들 있으시죠? 특히 어두운 환경에서 밝은 화면을 보면 눈부심이 더 심해진답니다. 이때 다크 모드를 사용하면 눈부심을 줄여주고 눈의 피로도를 낮춰줘서 장시간 화면을 봐야 하는 사용자에게 정말 유용해요. 미국 안과 학회(AAO)에서도 어두운 환경에서 다크 모드를 사용하면 눈의 피로를 줄이는 데 도움이 된다고 했답니다! 특히 OLED 디스플레이를 사용하는 기기에서는 검은색 픽셀이 빛을 발산하지 않기 때문에 배터리 소모량을 줄이는 데에도 효과적이에요. 최대 60%까지 배터리 수명을 연장할 수 있다는 연구 결과도 있더라구요?! 정말 놀랍죠? 게다가, 밤에 스마트폰을 사용할 때 다크 모드는 멜라토닌 분비를 방해하는 블루라이트를 줄여 수면의 질을 향상시키는 데 도움을 준다고 해요. 😴

뿐만 아니라, 다크 모드는 시각적인 매력도 빼놓을 수 없어요. 세련되고 현대적인 느낌을 주면서 콘텐츠에 더 집중할 수 있도록 도와주기도 하죠. 특히, 그래픽 작업이나 사진 편집처럼 시각적인 작업을 할 때 다크 모드는 작업물의 색상을 더욱 선명하게 보이게 해준답니다! 마치 밤하늘의 별처럼 말이죠✨. 이런 시각적인 장점 때문에 많은 웹사이트와 앱들이 다크 모드를 디자인 트렌드로 적극 활용하고 있는 거 같아요. 최근 조사에 따르면, 디자인 전문가의 70% 이상이 다크 모드를 선호한다는 결과도 있다고 하네요!

다크 모드의 단점

하지만, 다크 모드가 마냥 좋기만 한 건 아니에요. 단점도 분명히 존재한답니다. 가장 큰 단점 중 하나는 작은 글씨나 얇은 서체를 읽기 어려울 수 있다는 점이에요. 특히 주변 환경이 밝을 때는 명암 대비가 낮아져 가독성이 떨어질 수 있죠. 🙁 마치 햇빛 아래서 그림자를 보는 것처럼 흐릿하게 보일 수도 있어요. 이런 경우 눈의 피로가 오히려 증가할 수 있으니 주의해야 해요! 또한, 다크 모드는 ‘halation’ 현상을 유발할 수도 있는데, 이는 밝은 텍스트가 어두운 배경에서 번져 보이는 현상이에요. 특히 장시간 다크 모드를 사용하면 눈의 피로를 더욱 가중시킬 수 있으니 적절한 휴식과 함께 사용하는 것이 좋겠죠?

그리고 다크 모드가 모든 콘텐츠에 적합한 것은 아니라는 점도 기억해야 해요. 텍스트가 많은 문서나 복잡한 데이터 시각화 자료를 볼 때는 오히려 일반 모드가 더 편할 수도 있어요. 정보의 밀도가 높은 콘텐츠를 다크 모드로 보면 눈이 더 피로해지고 정보를 파악하기 어려워질 수 있답니다. 😫 마치 밤에 복잡한 지도를 보는 것처럼 말이죠! 또한, 일부 사용자들은 다크 모드에서 ‘blue light’가 더 많이 방출된다고 느끼기도 한다고 해요. 이는 개인차가 있지만, 다크 모드가 무조건 눈에 좋다고 생각하는 것은 경계해야 할 것 같아요. 🤔

결론

결론적으로 다크 모드는 눈의 피로 감소, 배터리 절약, 시각적 매력 등 다양한 장점을 제공하지만, 가독성 저하, halation 현상 유발 등의 단점도 가지고 있어요. 따라서 사용 환경과 콘텐츠의 종류, 개인의 시력 상태 등을 고려하여 다크 모드 사용 여부를 결정하는 것이 가장 중요해요! 자신에게 맞는 모드를 선택해서 건강하고 편안하게 디지털 세상을 즐겨보아요~! 😉

 

다크 모드 CSS 구현 방법

자, 이제 본격적으로 CSS를 이용해서 다크 모드를 구현하는 방법을 알아볼까요? 생각보다 간단해서 깜짝 놀라실 수도 있어요! 기본적인 원리는 컬러 값을 바꿔주는 거예요. 마치 옷을 갈아입듯이 웹사이트의 색상을 바꿔주는 마법 같죠? ✨

body 선택자를 이용한 다크 모드 구현

가장 기본적인 방법은 body 선택자를 이용하는 거예요. body에 배경색과 텍스트 색상을 지정하면 웹사이트 전체의 색상을 한 번에 바꿀 수 있답니다. 예를 들어, 라이트 모드에서는 흰색 배경에 검은색 텍스트를 사용하고, 다크 모드에서는 검은색 배경에 흰색 텍스트를 사용하는 거죠! 참 쉽죠?

body {
  background-color: #ffffff; /* 라이트 모드 배경색 */
  color: #000000; /* 라이트 모드 텍스트 색상 */
}

body.dark-mode {
  background-color: #000000; /* 다크 모드 배경색 */
  color: #ffffff; /* 다크 모드 텍스트 색상 */
}

여기서 dark-mode는 다크 모드가 활성화되었을 때 body 태그에 추가될 클래스 이름이에요. 자바스크립트를 이용해서 토글 버튼을 클릭했을 때 이 클래스를 추가하거나 제거하면 다크 모드와 라이트 모드를 전환할 수 있겠죠? 이 부분은 나중에 자바스크립트 부분에서 더 자세히 다뤄볼게요!

다양한 요소에 대한 다크 모드 스타일링

하지만! 단순히 body에만 스타일을 적용하면 조금 밋밋할 수도 있어요. 웹사이트에는 다양한 요소들이 있잖아요? 헤더, 푸터, 버튼, 링크… 이런 요소들까지 세심하게 스타일링 해줘야 진정한 다크 모드 마스터라고 할 수 있죠!😎

각 요소들에 대해서도 다크 모드 전용 스타일을 지정해 줘야 해요. 예를 들어, 버튼의 배경색이나 테두리 색, 링크의 색상 등을 다크 모드에 맞춰 조정해야 자연스럽고 아름다운 다크 모드를 만들 수 있답니다.

button {
  background-color: #007bff; /* 라이트 모드 버튼 배경색 */
  color: #fff; /* 라이트 모드 버튼 텍스트 색상 */
}

button.dark-mode {
  background-color: #6c757d; /* 다크 모드 버튼 배경색 */
  color: #fff; /* 다크 모드 버튼 텍스트 색상 */
}

a {
    color: blue; /* 라이트 모드 링크 색상 */
}

a.dark-mode {
    color: #99CCFF; /* 다크 모드 링크 색상 */
}


/* 더 많은 요소들에 대한 다크 모드 스타일을 추가해 보세요! */

다크 모드 스타일링 Tip

여기서 중요한 포인트! 다크 모드에서는 너무 높은 명도 대비는 눈에 피로를 줄 수 있어요. 따라서 순수한 검은색 (#000000)보다는 살짝 어두운 회색 (#121212)을 배경색으로 사용하고, 순수한 흰색 (#FFFFFF)보다는 살짝 어두운 회색 (#EEEEEE)을 텍스트 색상으로 사용하는 것을 추천해요. 이렇게 하면 눈의 피로를 줄이고 더 편안하게 웹사이트를 이용할 수 있답니다. 작은 차이지만 사용자 경험에 큰 영향을 미칠 수 있다는 사실! 잊지 마세요~😉

다크 모드 이미지 조정

그리고 또 하나! 다크 모드에서는 이미지도 조정해야 할 수 있어요. 밝은 배경에 최적화된 이미지가 어두운 배경에서는 잘 보이지 않을 수 있거든요. 이럴 때는 filter 속성을 이용해서 이미지의 밝기나 대비를 조정할 수 있어요. 아니면 아예 다크 모드 전용 이미지를 따로 준비하는 것도 좋은 방법이에요. 센스 있죠? 😉

img.dark-mode {
  filter: brightness(0.8) contrast(1.2); /* 이미지 밝기와 대비 조정 */
}

자, 이제 여러분은 다크 모드 CSS 구현의 기본기를 익히셨어요! 👏 하지만 이게 끝이 아니에요! 더욱 효율적이고 세련된 다크 모드를 구현하기 위한 다양한 팁과 테크닉들이 기다리고 있답니다. 다음 섹션에서는 미디어 쿼리를 활용하는 방법에 대해 알아볼 거예요. 기대되시죠? 😊 계속해서 함께해 주세요!

 

미디어 쿼리 활용하기

자, 이제 본격적으로 CSS 다크 모드 스타일 적용의 핵심이라고 할 수 있는 미디어 쿼리 활용법에 대해 알아볼까요? 미디어 쿼리는 마치 마법의 주문처럼, 사용자의 기기 환경에 따라 웹페이지 스타일을 바꿔주는 강력한 도구예요! ✨ 화면 크기, 해상도, 방향, 심지어 색상 gamut까지 고려해서 스타일을 적용할 수 있다니, 정말 놀랍지 않나요?! 🤩

prefers-color-scheme 미디어 쿼리

다크 모드를 구현할 때 가장 일반적으로 사용되는 미디어 쿼리는 바로 prefers-color-scheme이에요. 이 녀석은 사용자의 시스템 설정에서 다크 모드가 활성화되어 있는지를 감지해주는 똑똑한 기능을 가지고 있죠. prefers-color-scheme: dark 값을 사용하면, 시스템이 다크 모드로 설정되어 있을 때만 특정 스타일을 적용할 수 있어요. 반대로, prefers-color-scheme: light는 라이트 모드일 때 적용되겠죠? 😊

다크 모드 배경색 설정 예시

예를 들어, 웹사이트 배경색을 다크 모드에서 검정색(#000000)으로, 라이트 모드에서 흰색(#FFFFFF)으로 설정하고 싶다고 해볼게요. 어떻게 하면 될까요? 🤔 바로 이렇게 하면 돼요!

body {
  background-color: #FFFFFF; /* 라이트 모드 기본 배경색 */
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000; /* 다크 모드 배경색 */
    color: #FFFFFF; /* 다크 모드 텍스트 색상 - 가독성을 위해 흰색으로! */
  }

  /* 다크 모드에서 변경될 다른 스타일들도 여기에 추가! */
  a {
    color: #00FFFF; /* 다크 모드 링크 색상 */
  }

  h1 {
    color: #FFA500; /* 다크 모드 제목 색상 - 오렌지색으로 포인트! */
  }
}

어때요? 정말 간단하죠?! @media 규칙 안에 prefers-color-scheme: dark를 지정하고, 그 안에 다크 모드에서 적용될 스타일들을 작성하면 끝이에요! 마치 마법같죠? ✨ 이렇게 하면 사용자의 시스템 설정에 따라 배경색 뿐만 아니라 텍스트 색상, 링크 색상, 제목 색상 등 다양한 스타일을 자유자재로 바꿀 수 있어요. prefers-color-scheme 미디어 쿼리를 활용하면 사용자에게 최적화된 웹 경험을 제공할 수 있다는 점, 꼭 기억해두세요! 😉

자바스크립트를 활용한 다크 모드 토글

하지만, prefers-color-scheme만으로는 모든 것을 해결할 수 없다는 사실! 😥 사용자가 직접 다크 모드를 켜고 끄는 토글 버튼을 만들고 싶다면 어떻게 해야 할까요? 바로 자바스크립트를 활용해야 해요! 자바스크립트를 사용하면 사용자의 클릭 이벤트에 따라 CSS 클래스를 동적으로 추가하거나 제거할 수 있거든요. 예를 들어, dark-mode라는 클래스를 만들고, 토글 버튼이 클릭될 때마다 이 클래스를 body 태그에 추가하거나 제거하는 방식으로 다크 모드를 구현할 수 있어요. 자바스크립트와 CSS의 환상적인 콜라보레이션이죠! 🤝

미디어 쿼리의 다양한 활용

물론, 미디어 쿼리 활용은 prefers-color-scheme에만 국한되지 않아요. 화면 크기, 해상도 등 다양한 조건에 따라 스타일을 적용할 수 있도록 다양한 미디어 기능(media features)이 제공되고 있거든요. 예를 들어, (max-width: 768px)와 같은 미디어 쿼리를 사용하면 화면 너비가 768px 이하일 때 특정 스타일을 적용할 수 있어요. 이를 활용하면 모바일 환경에서 웹사이트 레이아웃을 변경하거나, 특정 요소를 숨기는 등 다양한 효과를 줄 수 있죠. 미디어 쿼리의 활용 가능성은 무궁무진해요! 💫

미디어 쿼리 학습의 중요성

미디어 쿼리를 잘 활용하면 웹사이트의 사용자 경험을 극대화할 수 있어요. 다양한 기기와 환경에서 최적의 웹 경험을 제공하고 싶다면, 미디어 쿼리 활용법을 꼭 익혀두는 것이 좋겠죠? 😊 다음에는 자바스크립트를 활용한 다크 모드 전환 구현 방법에 대해 자세히 알아볼게요! 기대해주세요! 😉

 

자바스크립트로 다크 모드 전환 구현

이제 CSS로 다크 모드 스타일을 어떻게 적용하는지 감을 잡으셨나요? 좋습니다! 이번에는 자바스크립트를 활용해서 사용자가 직접 다크 모드와 라이트 모드를 왔다 갔다~ 할 수 있도록 토글 기능을 구현해 볼 거예요! 생각보다 간단하니까 너무 걱정 마세요~?

자바스크립트는 웹 페이지에 생동감을 불어넣는 마법 같은 언어잖아요! 마치 요리에 마법의 가루를 뿌리는 것처럼 말이죠! 이 마법의 가루(자바스크립트!)를 이용해서 버튼 클릭 한 번으로 다크 모드를 뿅! 하고 나타나게 할 수 있어요. 사용자 경험을 향상시키는 데 아주 중요한 역할을 한다고 볼 수 있죠! UX(User Experience), 아시죠?! 사용자 경험 디자인의 핵심이니까요!

HTML 버튼 추가

자, 그럼 이제 본격적으로 코드를 살펴볼까요? 우선 HTML에서 버튼을 하나 만들어줘야겠죠? <button id="darkModeToggle">다크 모드</button>처럼 말이에요. id 값은 나중에 자바스크립트에서 이 버튼을 딱! 집어서 사용할 수 있도록 이름표를 붙여주는 거라고 생각하면 돼요.

자바스크립트 구현

이제 자바스크립트 차례입니다! document.getElementById('darkModeToggle')를 사용해서 아까 이름표 붙여준 버튼 요소를 가져옵니다. 그리고 이 버튼에 addEventListener를 사용해서 ‘click’ 이벤트를 걸어줄 거예요. 버튼이 클릭될 때마다 특정 함수가 실행되도록 하는 마법이죠! ✨

클릭 이벤트에 연결될 함수에서는 document.body.classList.toggle('dark-mode')를 실행할 겁니다. classList.toggle()은 dark-mode라는 클래스를 붙였다 뗐다 하는 역할을 해요. 마치 스위치처럼 말이죠! 이 클래스는 아까 CSS에서 다크 모드 스타일을 정의할 때 사용했던 바로 그 클래스입니다! 기억나시죠?!


const toggleButton = document.getElementById('darkModeToggle');

toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');

// 로컬 스토리지에 다크 모드 상태 저장 (선택 사항)
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('darkMode', 'enabled');
} else {
localStorage.setItem('darkMode', 'disabled');
}
});


// 페이지 로드 시 다크 모드 상태 확인 및 적용 (선택 사항)
window.addEventListener('DOMContentLoaded', () => {
const darkModeStatus = localStorage.getItem('darkMode');

if (darkModeStatus === 'enabled') {
document.body.classList.add('dark-mode');
}
});

로컬 스토리지 활용

여기서 중요한 포인트! 바로 로컬 스토리지를 활용하는 부분입니다. localStorage.setItem('darkMode', 'enabled'); 와 localStorage.setItem('darkMode', 'disabled'); 이 부분이죠. 이 코드는 사용자가 다크 모드를 켜거나 끄면 그 상태를 사용자 컴퓨터에 저장해 둔다는 의미예요. 그래서 사용자가 웹 페이지를 닫았다가 다시 열어도 이전에 설정했던 다크 모드 상태가 그대로 유지되는 거죠! 정말 편리하지 않나요?! 마치 마법처럼 말이죠! 사용자 입장에서는 이런 작은 디테일 하나하나가 감동으로 다가올 수 있다는 점, 꼭 기억해 두세요! 😉

페이지 로드 시 다크모드 상태 확인

자, 이제 거의 다 왔어요! 마지막으로 window.addEventListener('DOMContentLoaded', ...) 부분을 살펴볼게요. 이 부분은 웹 페이지가 완전히 로드된 후에 실행되는 코드예요. 여기서 localStorage.getItem('darkMode')를 사용해서 저장된 다크 모드 상태를 가져와서, 만약 ‘enabled’ 상태였다면 document.body.classList.add('dark-mode')를 실행해서 다크 모드를 적용하는 거죠. 이렇게 하면 사용자가 웹 페이지를 새로고침 하거나 다시 방문해도 다크 모드 설정이 유지됩니다!

이처럼 자바스크립트를 사용하면 단순히 CSS만으로는 구현하기 어려운 동적인 기능들을 손쉽게 추가할 수 있어요. 다크 모드 토글 기능은 그 중 하나의 예시일 뿐이죠! 자바스크립트의 세계는 무궁무진하니까요! 다양한 기능들을 직접 구현해 보면서 자바스크립트의 매력에 푹 빠져보세요! 그리고 여러분의 웹 페이지를 더욱 풍성하고 사용자 친화적으로 만들어보세요! 😊 자바스크립트와 함께라면 여러분도 웹 마법사가 될 수 있답니다! ✨ 다음에는 더욱 흥미로운 주제로 찾아올게요! 기대해 주세요! 😄

 

자, 이렇게 다크 모드의 세계를 탐험해봤어요! 눈 건강에도 좋고, 배터리도 아껴주는 다크 모드, 정말 매력적이지 않나요? CSS와 자바스크립트를 활용하면 생각보다 훨씬 쉽게 구현할 수 있다는 것도 알게 되었죠. 미디어 쿼리를 이용하면 사용자 시스템 설정에 따라 자동으로 다크 모드를 적용할 수도 있고요. 직접 버튼을 만들어서 사용자가 원할 때마다 다크 모드를 켜고 끌 수 있게 하는 것도 멋진 방법이에요. 이제 여러분의 웹사이트에도 다크 모드를 적용해서, 사용자들에게 더욱 편안하고 세련된 경험을 선물해 보는 건 어떠세요? 배운 내용을 토대로 자유롭게 다크 모드를 활용해보면 좋겠어요! 새로운 아이디어가 떠오른다면 언제든지 다시 찾아와서 함께 이야기 나눠요!

 

Leave a Comment