모바일 환경에서 눈의 피로를 줄이면서도 SEO 점수를 지키는 티스토리 다크 모드 적용 방법을 소개합니다. 속도, UX, 광고 안정성을 모두 고려한 실전 전략을 정리했습니다.
블로그의 다크 모드는 현대적인 웹사이트에서 많이 사용하는 사용자 경험(UX) 요소로 자리 잡았습니다. 특히 모바일 사용자가 급증하고 OLED 디스플레이가 보편화되면서, 눈의 피로를 낮추고 배터리를 절약할 수 있는 다크 모드에 대한 요구도 높아졌습니다. 저 같은 경우는 어두운 환경에서 집중할 때 특히 다크 모드를 활용하는데, 유튜브 동영상이나 한 가지 집중형 콘텐츠에서는 눈의 피로가 덜한 것 같더라고요.
하지만 티스토리 블로그에 다크 모드를 잘못 적용하면 초기 로딩 속도 저하, 광고 레이아웃 깨짐, CLS(레이아웃 이동) 발생 등 심각한 SEO 감점 요인이 발생할 수 있습니다.
오늘은 속도, SEO, 광고 수익을 모두 지키는 최적화된 다크 모드 설계 원칙과 2가지 실전 적용법, 그리고 일반 블로그 운영자가 라이트 모드에서 다크 모드로 전환할 때 가장 필요한 CSS 적용 방법을 쉽게 알아보겠습니다.
1. 실패 없는 다크 모드 설계를 위한 3대 원칙
다크 모드를 구현할 때 가장 많이 하는 실수는 자바스크립트(JS)로 일일이 스타일을 변경하는 것입니다. 이는 브라우저에 큰 부하를 주며 로딩 속도를 늦춥니다. 효율적인 설계를 위해 다음 원칙을 반드시 준수해야 합니다.
- 원칙 1: JS는 스타일을 직접 조작하지 않는다. (JS는 오직 조건 판단과 속성 부여만 담당합니다.)
- 원칙 2: CSS는 조건부 선택자로 관리한다. (스타일 적용은 오직 CSS의 몫입니다.)
- 원칙 3: HTML 속성(Attribute) 기반으로 제어한다. (상태값을 HTML 태그에 심어 일관성을 유지합니다.)
즉, [JS 상태 판단] [HTML data-dark 속성 부여] [CSS 선택자 실행]의 흐름이 가장 가볍고 안전한 방식입니다.
2. 전략 ①: 카테고리 지정 방식 (특정 주제 자동 전환)
이 방식은 방문자가 특정 카테고리의 글을 읽을 때 자동으로 다크 모드를 활성화하는 방법입니다. 콘텐츠의 성격이 시각적으로 강렬하거나(영상, 이미지,수필,소설, 게임), 몰입감이 필요한 경우에 매우 효과적입니다.
적합한 대상
- 이미지, 영상 전문 카테고리 운영자
- 다크 모드 디자인이 브랜드 아이덴티티인 경우
- 사용자의 선택 없이도 특정 분위기를 연출하고 싶은 경우
구현 방법: JavaScript와 CSS
카테고리 이름을 인식하여 HTML의 루트 요소에 특정 속성을 부여하는 방식입니다.
script
(function () {
"use strict";
// 사용자 다크 모드 선택값 저장 키
const STORAGE_KEY = "user-dark-mode";
// 예시용 다크 모드 고정 카테고리 (원하는 값으로 교체)
const TARGETS = ["Sample-Tech", "Sample-Videos"];
// html 루트
const html = document.documentElement;
// 페이지에서 카테고리명 추출 (테마별 대응)
const getCategoryName = () = {
const el =
document.querySelector(".post-category") ||
document.querySelector(".category") ||
document.querySelector(".tit_category") ||
document.querySelector(".inner_header .tit_page");
return el ? el.textContent.trim() : "";
};
// 다크 / 라이트 모드 설정
const setDark = () = html.setAttribute("data-dark", "dark");
const setLight = () = html.removeAttribute("data-dark");
// 초기 모드 결정
const applyInitialMode = () = {
const name = getCategoryName();
const path = location.pathname;
// 메인 페이지 여부
const isMainPage = path === "/" || path === "/index.php" || path === "";
// 특정 카테고리면 무조건 다크 모드
const isTargetCategory =
!isMainPage && TARGETS.some(t = path.includes(t) || name.includes(t));
if (isTargetCategory) {
setDark();
return;
}
// 사용자 선택값 적용
const saved = localStorage.getItem(STORAGE_KEY);
if (saved === "dark") {
setDark();
} else {
setLight();
}
};
// 버튼 클릭 시 토글 (카테고리 고정 페이지는 제외)
const toggleMode = () = {
const name = getCategoryName();
const path = location.pathname;
const isMainPage = path === "/" || path === "";
const isTargetCategory =
!isMainPage && TARGETS.some(t = path.includes(t) || name.includes(t));
if (isTargetCategory) return;
const isDark = html.getAttribute("data-dark") === "dark";
if (isDark) {
setLight();
localStorage.setItem(STORAGE_KEY, "light");
} else {
setDark();
localStorage.setItem(STORAGE_KEY, "dark");
}
};
// 초기 실행 및 버튼 이벤트 연결
const init = () = {
applyInitialMode();
const btn = document.getElementById("dark-toggle");
if (btn) btn.addEventListener("click", toggleMode);
};
// DOM 로딩 상태 처리
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
/script
이제 CSS에서 해당 속성이 활성화되었을 때의 색상을 지정합니다.
html[data-dark="dark"] body
{ background-color: #121212; color: #e6e6e6; }
3. 전략 ②: 사용자 선택 방식 (토글 버튼)
방문자가 직접 라이트 모드와 다크 모드를 선택할 수 있게 하는 방식입니다. 사용자 취향을 존중하며, 특히 장문의 글을 읽는 블로그와 혼합형 콘텐츠에 선호도가 매우 높습니다.
구현 방법: 버튼 및 상태 저장
사용자의 선택을 기억하기 위해 localStorage를 활용하며, 페이지 새로고침 시에도 설정이 유지됩니다.
button id="dark-toggle" type="button"
Dark Mode
/button
script
(function () {
"use strict";
const KEY = "user-dark-mode";
const html = document.documentElement;
const btn = document.getElementById("dark-toggle");
const setDark = () = html.setAttribute("data-dark", "dark");
const setLight = () = html.removeAttribute("data-dark");
// 저장된 상태 적용
if (localStorage.getItem(KEY) === "dark") {
setDark();
}
// 버튼 토글
if (btn) {
btn.addEventListener("click", () = {
const isDark = html.getAttribute("data-dark") === "dark";
if (isDark) {
setLight();
localStorage.setItem(KEY, "light");
} else {
setDark();
localStorage.setItem(KEY, "dark");
}
});
}
})();
/script
html[data-dark="dark"] body
{ background-color: #121212; color: #e6e6e6; }
4. 어떤 방식을 선택해야 할까? (방식 비교)
자신의 블로그 운영 목적과 콘텐츠의 성격에 따라 최적의 방식을 선택하는 것이 중요합니다. 아래 표를 참고하여 결정해 보세요.
| 비교 항목 | 카테고리 지정 방식 | 사용자 선택(버튼) 방식 |
|---|---|---|
| 주요 장점 | 주제별 최적화된 분위기 연출 | 사용자 자유도 및 UX 극대화 |
| 기술적 난이도 | 낮음 (자동 적용) | 보통 (상태 저장 로직 필요) |
| 전문 기술 블로그 | 추천 (코드 가독성 향상) | 추천 (독자 편의성) |
| SEO 영향 | 없음 (최적화 시) | 없음 (상태값 기반 제어 시) |
5. 두 방식을 혼합한 ‘하이브리드’ 전략
저 같은 경우에는 다크 모드만 오래 사용하다가 최근에는 라이트 모드를 사용하고 있습니다. 하지만 최근에 다른 카테고리를 추가하면서 다시 다크 모드의 필요성이 생겨,현재는 두 가지 방식을 혼합해 사용하고 있습니다. 두 방식을 함께 사용할 경우에는 우선순위를 명확히 정해두는 것이 핵심입니다.
- 사용자가 버튼을 눌러 명시적으로 선택한 설정이 있다면 최우선으로 적용합니다.
- 사용자의 선택 기록이 없다면, 카테고리 설정값을 따릅니다.
- 둘 다 해당하지 않는다면 기본 라이트 모드로 표시합니다.
이 하이브리드 전략을 사용하면 초기 방문자에게는 카테고리에 맞는 세련된 다크 모드를 보여주면서도, 이를 원치 않는 사용자에게는 다시 라이트 모드로 돌아갈 수 있는 통제권을 부여할 수 있습니다.
쉽게 다크라이트 모드 적용하는 방법
다크 모드나 라이트 모드를 적용할 때, 위에서 소개한 코드만 활용하면 기능 구현 자체는 매우 간단합니다.
다만 CSS 수정은 반드시 직접 진행해야 합니다.
물론 색상을 자동으로 변환해 주는 방식도 가능하지만, 다크 모드는 배경의 어두움 정도, 텍스트 대비, 가독성, SEO 적합성까지 함께 고려해야 합니다.
결국 실제 화면을 보면서 각 CSS 요소의 색상을 하나씩 확인하고 조정하는 과정이 필요합니다.
문제는 여기서 발생합니다. 모든 CSS에서 색상 관련 코드를 찾아 수정하는 작업은 생각보다 번거롭고 시간도 많이 소요됩니다.
특히 기존 CSS 구조가 복잡할수록 색상 관련 스타일만 분리해내는 작업은 상당히 귀찮은 작업이 됩니다.
그래서 이런 불편함을 줄이기 위해 아래 프로그램을 활용하는 방식을 추천합니다.
이 프로그램을 사용하면,
- 색상이 적용된 CSS만 자동으로 추출해 주고
- 추출된 CSS 앞에 html[data-dark=”dark”] 선택자를 자동으로 추가해 주기 때문에
- 다크 모드 전용 CSS를 별도로 정리할 필요 없이 바로 수정할 수 있습니다.
덕분에 CSS에 익숙하지 않은 일반 사용자도
다크 모드 스타일을 훨씬 쉽고 빠르게 수정할 수 있습니다.
많은 분이 다크 모드를 단순히 ‘색을 바꾸는 디자인’으로 생각하지만, 실상은 성능 최적화와 데이터 구조의 문제입니다. 자바스크립트로 색상을 덮어쓰지 말고, CSS 선택자를 효율적으로 활용하여 브라우저의 연산 부담을 줄여주세요.
이 글에서 소개한 방식대로 적용하신다면 페이지스피드 인사이트(PageSpeed Insights) 점수를 깎아먹지 않으면서도, 방문자들이 오래 머물고 싶어 하는 핸섬한 블로그를 만드실 수 있을 것입니다.
다크 / 라이트 모드 CSS 추출기
다크 모드·라이트 모드 CSS를 추출한 뒤 결국 수작업으로 수정해야 하죠? 솔직히 너무 불편합니다. 아래 링크는 CSS를 자동으로 다크 모드·라이트 모드로 변환해 주는 도구입니다. 변환 정확도가 거의 99% 수준이라 추가로 손댈 부분이 거의 없습니다. 링크는 공유해 드릴게요. 컴맹은 물론, 아니… 컴봉사 (沈奉事) 도 10초면 충분히 작업할 수 있습니다.