Tailwind CSS로 10분 만에 세련된 다크 모드 랜딩 페이지 디자인하기
최근 출시되는 대다수의 서비스와 웹 사이트에서 **'다크 모드(Dark Mode)'**는 선택이 아닌 필수 기능으로 자리 잡았습니다. 다크 모드는 어두운 환경에서 사용자의 눈 피로도를 덜어줄 뿐만 아니라, 모던하고 프리미엄한 감성의 비주얼 효과를 선사합니다.
유틸리티 퍼스트 CSS 프레임워크인 Tailwind CSS를 사용하면 복잡한 변수 선언이나 무거운 CSS 코드 스타일 정의 없이, 오직 클래스명 단 한 줄의 프리픽스(dark:) 추가만으로 역동적인 다크 모드 인터페이스를 손쉽게 구축할 수 있습니다.
오늘은 Tailwind CSS를 활용해 10분 만에 완전 반응형 다크 모드 랜딩 페이지를 디자인하는 핵심 팁과 셋업 프로세스를 가이드합니다.
1. 1단계: Tailwind CSS 다크 모드 활성화 방식 선택
Tailwind CSS(v3/v4 기준)는 브라우저 시스템 설정 값을 따르는 방식(media)과 사용자가 수동으로 스위칭 버튼을 누를 수 있도록 제어하는 방식(selector)을 모두 제공합니다. 대다수의 웹 앱에서는 사용자에게 더 높은 선택권을 주기 위해 selector 방식을 권장합니다.
- 설정 파일 구성 (
tailwind.config.js):module.exports = { darkMode: 'selector', // 'class'나 'selector' 모드를 활성화 theme: { extend: {}, }, plugins: [], } - 이 설정을 적용하면, HTML 문서 최상단 루트 태그인
<html>에className="dark"클래스가 붙어 있을 때 하위의 모든dark:접두사가 붙은 스타일들이 일제히 활성화됩니다.
2. 2단계: 프리미엄 다크 모드 색상 팔레트 규칙 정의
초보 개발자들은 다크 모드를 만들 때 배경은 순수한 검은색(bg-black 또는 #000000), 글씨는 순수한 흰색(text-white 또는 #ffffff)으로 대조를 크게 주는 실수를 범합니다. 이는 시각적으로 눈에 상당한 스트레스를 주며, 디자인이 저렴해 보이기 쉽습니다.
- 배경 색상 정의: 부드러운 다크 그레이 계열인
bg-slate-900,bg-zinc-950혹은 네이비 블루 톤이 도는bg-slate-950을 배경으로 추천합니다. - 컴포넌트 카드/요소 분리: 하위 카드나 컨테이너 영역은 배경보다 살짝 밝은
bg-slate-800혹은bg-zinc-900등을 주어 입체적인 깊이감(Elevation)을 표현합니다. - 글꼴 색상 대조 조율: 주요 텍스트는
text-slate-100을 사용하고, 덜 중요한 서브 타이틀이나 설명 글은text-slate-400을 배치하여 계층 구조를 줍니다.
3. 3단계: 랜딩 페이지 히어로 섹션 실전 코딩 예시
메인 레이아웃에 라이트 모드와 다크 모드 스타일을 통합하여 매끄러운 반응형 구조로 작성해 보겠습니다.
export default function HeroSection() {
return (
<section className="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-300 py-20 px-6 rounded-3xl border border-slate-100 dark:border-slate-800">
<div className="max-w-3xl mx-auto text-center space-y-6">
<span className="text-xs font-bold uppercase tracking-widest text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-950/50 px-3 py-1 rounded-full">
New Feature Launch
</span>
<h1 className="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
AI 코딩 비서와 함께하는{" "}
<span className="bg-gradient-to-r from-primary-500 to-indigo-500 bg-clip-text text-transparent">
초고속 생산성 워크플로우
</span>
</h1>
<p className="text-slate-500 dark:text-slate-400 max-w-xl mx-auto text-sm md:text-base leading-relaxed">
어렵고 번거로운 설정 없이 AI 기술을 활용해 나만의 아이디어를 실물 웹
제품으로 단 몇 분 만에 구현해 보세요.
</p>
<div className="pt-4 flex justify-center gap-4">
<button className="bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-950 px-6 py-3 rounded-xl font-medium hover:opacity-90 transition-opacity">
시작하기
</button>
<button className="bg-white text-slate-800 border border-slate-200 dark:bg-slate-900 dark:text-slate-200 dark:border-slate-800 px-6 py-3 rounded-xl font-medium hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
자세히 보기
</button>
</div>
</div>
</section>
);
}
4. 4단계: 스위칭 버튼 로직 구현 (Next.js 예시)
사용자가 다크 모드 버튼을 클릭했을 때 로컬 스토리지에 값을 저장하고 <html> 태그에 클래스를 토글해 주는 React 훅(Hook)을 배치합니다.
'use client';
import { useEffect, useState } from 'react';
export function useTheme() {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
useEffect(() => {
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
setTheme('dark');
document.documentElement.classList.add('dark');
} else {
setTheme('light');
document.documentElement.classList.remove('dark');
}
}, []);
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
setTheme('light');
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
};
return { theme, toggleTheme };
}
✍️ 글을 마치며
Tailwind CSS가 제공하는 dark: 수식어 덕분에 CSS 프레임워크 수준에서 다크 모드 구현의 비용이 과거 대비 80% 이상 절감되었습니다.
앞으로 웹 개발 프로젝트를 설계하실 때, 사용자의 세련된 사용자 경험(UX)과 눈 피로 보호를 위해 오늘 가이드해 드린 다크 모드 기법을 적극 반영해 보시기 바랍니다!