majiayu000 Positive Theme Design System
"당신이 잠든 사이" 프로젝트를 위한 긍정적이고 활력 넘치는 디자인 시스템입니다.
디자인 철학
핵심 가치
- 신뢰 (Trust): 전문적이고 안정적인 정보 제공
- 희망 (Hope): 밝은 미래와 성장 가능성
- 활력 (Energy): 생동감 있고 역동적인 경험
- 친근함 (Approachability): 누구나 쉽게 이해하고 사용
감성 키워드
아침, 일출, 새로운 시작, 성장, 기회, 성공, 긍정, 희망, 전문성, 신뢰
컬러 시스템
Primary Colors (주색상)
Sky Blue - 신뢰와 전문성
--primary-50: #f0f9ff /* 하늘빛 배경 */
--primary-100: #e0f2fe /* 부드러운 강조 */
--primary-200: #bae6fd /* 밝은 요소 */
--primary-300: #7dd3fc /* 호버 효과 */
--primary-400: #38bdf8 /* 메인 액션 */
--primary-500: #0ea5e9 /* 주요 버튼, 링크 */
--primary-600: #0284c7 /* 진한 액센트 */
--primary-700: #0369a1 /* 강조 텍스트 */
--primary-800: #075985 /* 다크 모드 주색 */
--primary-900: #0c4a6e /* 최고 강조 */
사용 예시:
- 메인 버튼, CTA
- 링크, 활성 네비게이션
- 강조 아이콘
- 로딩 인디케이터
Golden Sunrise - 성장과 기회
--secondary-50: #fffbeb /* 따뜻한 배경 */
--secondary-100: #fef3c7 /* 부드러운 하이라이트 */
--secondary-200: #fde68a /* 밝은 강조 */
--secondary-300: #fcd34d /* 황금빛 */
--secondary-400: #fbbf24 /* 메인 골드 */
--secondary-500: #f59e0b /* 주요 액센트 */
--secondary-600: #d97706 /* 진한 골드 */
--secondary-700: #b45309 /* 강조 요소 */
--secondary-800: #92400e /* 다크 모드 골드 */
--secondary-900: #78350f /* 최고 강조 */
사용 예시:
- 중요 알림, 배지
- 프리미엄 기능 강조
- 성공 메시지
- 화제 종목 하이라이트
Mint Fresh - 신선함과 긍정
--accent-50: #f0fdfa /* 민트 배경 */
--accent-100: #ccfbf1 /* 부드러운 민트 */
--accent-200: #99f6e4 /* 밝은 민트 */
--accent-300: #5eead4 /* 터콰이즈 */
--accent-400: #2dd4bf /* 메인 민트 */
--accent-500: #14b8a6 /* 주요 액센트 */
--accent-600: #0d9488 /* 진한 민트 */
--accent-700: #0f766e /* 강조 요소 */
--accent-800: #115e59 /* 다크 모드 민트 */
--accent-900: #134e4a /* 최고 강조 */
사용 예시:
- 뉴스 카드 강조
- 새로운 기능 표시
- 부가 정보 하이라이트
- 통계 그래프 보조 색상
Background Colors (배경색)
Light Mode - 따뜻한 아침 햇살
/* 기본 배경 */
--bg-primary: #ffffff /* 순백색 */
--bg-secondary: #fefefe /* 아이보리 화이트 */
--bg-tertiary: #f8fafc /* 연한 회색 */
/* 카드 배경 - 미묘한 그라데이션 */
--card-bg: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)
--card-hover-bg: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%)
/* 섹션 배경 */
--section-bg-warm: #fffbeb /* 따뜻한 배경 */
--section-bg-cool: #f0f9ff /* 시원한 배경 */
--section-bg-fresh: #f0fdfa /* 신선한 배경 */
Dark Mode - 고요한 밤하늘
/* 기본 배경 - slate 대신 네이비/보라 계열 */
--bg-primary: #0f0e1e /* 깊은 네이비 */
--bg-secondary: #1a1828 /* 부드러운 보라 */
--bg-tertiary: #252238 /* 밝은 네이비 */
/* 카드 배경 */
--card-bg: linear-gradient(135deg, #1a1828 0%, #1e2747 100%)
--card-hover-bg: linear-gradient(135deg, #1e2747 0%, #2d3561 100%)
/* 섹션 배경 */
--section-bg-warm: #2a1f1a /* 따뜻한 밤 */
--section-bg-cool: #1a2332 /* 시원한 밤 */
--section-bg-fresh: #1a2b2a /* 신선한 밤 */
Semantic Colors (의미 색상)
Stock Price Colors - 명확한 시각적 피드백
/* 상승 - 생기 있는 초록 */
--stock-up: #10b981 /* Emerald 500 */
--stock-up-bg: #d1fae5 /* Emerald 100 */
--stock-up-dark: #047857 /* Emerald 700 */
/* 하락 - 명확한 빨강 (과하지 않게) */
--stock-down: #f43f5e /* Rose 500 */
--stock-down-bg: #ffe4e6 /* Rose 100 */
--stock-down-dark: #be123c /* Rose 700 */
/* 보합 - 중립적인 회색 */
--stock-neutral: #64748b /* Slate 500 */
--stock-neutral-bg: #f1f5f9 /* Slate 100 */
Status Colors - 명확한 피드백
/* 성공 */
--success: #10b981 /* Green */
--success-bg: #d1fae5
--success-border: #6ee7b7
/* 경고 */
--warning: #f59e0b /* Amber */
--warning-bg: #fef3c7
--warning-border: #fcd34d
/* 위험 */
--danger: #ef4444 /* Red */
--danger-bg: #fee2e2
--danger-border: #fca5a5
/* 정보 */
--info: #3b82f6 /* Blue */
--info-bg: #dbeafe
--info-border: #93c5fd
Text Colors (텍스트 색상)
Light Mode
--text-primary: #1e293b /* Slate 800 - 주요 텍스트 */
--text-secondary: #475569 /* Slate 600 - 보조 텍스트 */
--text-tertiary: #94a3b8 /* Slate 400 - 부가 정보 */
--text-accent: #0ea5e9 /* Primary 500 - 강조 텍스트 */
Dark Mode
--text-primary: #f1f5f9 /* Slate 100 - 주요 텍스트 */
--text-secondary: #cbd5e1 /* Slate 300 - 보조 텍스트 */
--text-tertiary: #64748b /* Slate 500 - 부가 정보 */
--text-accent: #38bdf8 /* Primary 400 - 강조 텍스트 */
Border & Shadow
Borders
/* Light Mode */
--border-light: #e2e8f0 /* Slate 200 */
--border-medium: #cbd5e1 /* Slate 300 */
--border-heavy: #94a3b8 /* Slate 400 */
/* Dark Mode */
--border-dark-light: #334155 /* Slate 700 */
--border-dark-medium: #475569 /* Slate 600 */
--border-dark-heavy: #64748b /* Slate 500 */
Shadows - 깊이감과 부드러움
/* Light Mode */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
--shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3) /* 주색상 글로우 */
/* Dark Mode */
--shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3)
--shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)
--shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4)
--shadow-dark-glow: 0 0 20px rgba(56, 189, 248, 0.2)
타이포그래피
폰트 패밀리
한글 폰트
/* Primary - 본문용 */
--font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif
/* Display - 제목용 */
--font-display: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif
/* Mono - 숫자/코드 */
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace
영문 폰트
--font-en-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif
--font-en-display: 'Poppins', sans-serif
폰트 크기 & 행간
/* Display - 큰 제목 */
--text-display-xl: 3.75rem /* 60px - h1 */
--text-display-lg: 3rem /* 48px - h1 */
--text-display-md: 2.25rem /* 36px - h2 */
/* Heading - 제목 */
--text-heading-lg: 1.875rem /* 30px - h2 */
--text-heading-md: 1.5rem /* 24px - h3 */
--text-heading-sm: 1.25rem /* 20px - h4 */
/* Body - 본문 */
--text-body-lg: 1.125rem /* 18px */
--text-body-md: 1rem /* 16px - 기본 */
--text-body-sm: 0.875rem /* 14px */
--text-body-xs: 0.75rem /* 12px */
/* Line Height */
--leading-tight: 1.25
--leading-normal: 1.5
--leading-relaxed: 1.75
--leading-loose: 2
폰트 굵기
--font-light: 300
--font-normal: 400
--font-medium: 500
--font-semibold: 600
--font-bold: 700
--font-extrabold: 800
제목 스타일 - 그라데이션 효과
/* 그라데이션 텍스트 - 메인 제목 */
.heading-gradient {
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 그라데이션 텍스트 - 골드 강조 */
.heading-gradient-gold {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
레이아웃 & 스페이싱
Container Widths
--container-sm: 640px
--container-md: 768px
--container-lg: 1024px
--container-xl: 1280px
--container-2xl: 1536px
Spacing Scale
--space-1: 0.25rem /* 4px */
--space-2: 0.5rem /* 8px */
--space-3: 0.75rem /* 12px */
--space-4: 1rem /* 16px */
--space-5: 1.25rem /* 20px */
--space-6: 1.5rem /* 24px */
--space-8: 2rem /* 32px */
--space-10: 2.5rem /* 40px */
--space-12: 3rem /* 48px */
--space-16: 4rem /* 64px */
--space-20: 5rem /* 80px */
--space-24: 6rem /* 96px */
Border Radius
--radius-sm: 0.375rem /* 6px */
--radius-md: 0.5rem /* 8px */
--radius-lg: 0.75rem /* 12px */
--radius-xl: 1rem /* 16px */
--radius-2xl: 1.5rem /* 24px */
--radius-full: 9999px /* 원형 */
Grid System
/* 12-column grid */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
/* Responsive columns */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
컴포넌트 스타일
Card - 입체감과 생동감
/* Light Mode Card */
.card {
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 0 20px rgba(14, 165, 233, 0.2);
transform: translateY(-4px);
}
/* Dark Mode Card */
.dark .card {
background: linear-gradient(135deg, #1a1828 0%, #1e2747 100%);
border: 1px solid rgba(71, 85, 105, 0.5);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}
.dark .card:hover {
background: linear-gradient(135deg, #1e2747 0%, #2d3561 100%);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
0 0 20px rgba(56, 189, 248, 0.15);
}
Button - 명확하고 매력적인
/* Primary Button */
.btn-primary {
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
color: white;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
border: none;
box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.3);
transition: all 0.2s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.4);
transform: translateY(-2px);
}
.btn-primary:active {
transform: translateY(0);
}
/* Secondary Button */
.btn-secondary {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
/* ... 나머지 동일 */
}
/* Ghost Button */
.btn-ghost {
background: transparent;
color: var(--primary-600);
border: 2px solid var(--primary-400);
/* ... */
}
Input Fields - 친근하고 명확한
.input {
background: var(--bg-primary);
border: 2px solid var(--border-light);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.2s ease;
}
.input:focus {
outline: none;
border-color: var(--primary-400);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.dark .input {
background: var(--bg-secondary);
border-color: var(--border-dark-light);
color: var(--text-primary);
}
Badge & Pills - 눈에 띄는 정보
/* Primary Badge */
.badge-primary {
background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
color: var(--primary-700);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
}
/* Gold Badge - 중요 정보 */
.badge-gold {
background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
color: var(--secondary-800);
}
/* Success Badge */
.badge-success {
background: #d1fae5;
color: #065f46;
}
애니메이션 & 인터랙션
Transition Timing
--transition-fast: 150ms
--transition-normal: 200ms
--transition-slow: 300ms
--transition-slower: 500ms
--easing-smooth: cubic-bezier(0.4, 0, 0.2, 1)
--easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55)
--easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
Hover Effects
/* Card Lift */
.hover-lift {
transition: transform 0.3s var(--easing-smooth),
box-shadow 0.3s var(--easing-smooth);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
/* Glow Effect */
.hover-glow {
transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
}
/* Scale */
.hover-scale {
transition: transform 0.2s var(--easing-smooth);
}
.hover-scale:hover {
transform: scale(1.05);
}
Loading States
/* Spinner */
.spinner {
border: 3px solid rgba(14, 165, 233, 0.2);
border-top-color: var(--primary-500);
border-radius: 50%;
width: 2rem;
height: 2rem;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Skeleton */
.skeleton {
background: linear-gradient(
90deg,
var(--bg-tertiary) 0%,
var(--border-light) 50%,
var(--bg-tertiary) 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
Fade & Slide Animations
/* Fade In */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s var(--easing-smooth);
}
/* Slide Up */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-up {
animation: slideUp 0.5s var(--easing-smooth);
}
Chart Styling (Recharts)
Line Chart - 명확하고 아름다운
// 컬러 팔레트
const chartColors = {
primary: '#0ea5e9', // Sky Blue
secondary: '#f59e0b', // Golden
accent: '#14b8a6', // Mint
up: '#10b981', // Green
down: '#f43f5e', // Rose
};
// 그라데이션 정의
<defs>
<linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={chartColors.primary} stopOpacity={0.3} />
<stop offset="95%" stopColor={chartColors.primary} stopOpacity={0} />
</linearGradient>
</defs>
// Line 스타일
<Line
type="monotone"
dataKey="price"
stroke={chartColors.primary}
strokeWidth={3}
fill="url(#colorPrice)"
dot={false}
activeDot={{ r: 6, fill: chartColors.primary }}
/>
Dark Mode Chart Styling
const { theme } = useTheme();
const axisColor = theme === 'dark' ? '#cbd5e1' : '#64748b';
const gridColor = theme === 'dark' ? '#334155' : '#e2e8f0';
<XAxis
stroke={axisColor}
tick={{ fill: axisColor }}
style={{ fontSize: '0.875rem' }}
/>
<YAxis
stroke={axisColor}
tick={{ fill: axisColor }}
/>
<CartesianGrid
strokeDasharray="3 3"
stroke={gridColor}
opacity={0.3}
/>
<Tooltip
contentStyle={{
backgroundColor: theme === 'dark' ? '#1a1828' : '#ffffff',
border: 'none',
borderRadius: '0.75rem',
boxShadow: theme === 'dark'
? '0 10px 15px -3px rgba(0, 0, 0, 0.5)'
: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
}}
labelStyle={{
color: theme === 'dark' ? '#f1f5f9' : '#1e293b',
fontWeight: 600,
}}
/>
사용 예시
메인 대시보드 헤더
<div className="relative overflow-hidden bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-[#0f0e1e] dark:via-[#1a1828] dark:to-[#1e2747] rounded-2xl p-8 mb-8">
{/* 배경 장식 요소 */}
<div className="absolute top-0 right-0 w-64 h-64 bg-primary-200/20 dark:bg-primary-800/10 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-48 h-48 bg-secondary-200/20 dark:bg-secondary-800/10 rounded-full blur-3xl" />
{/* 내용 */}
<div className="relative z-10">
<h1 className="text-4xl md:text-5xl font-bold mb-3">
<span className="bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent">
좋은 아침입니다!
</span>
</h1>
<p className="text-lg text-slate-600 dark:text-slate-300">
오늘도 새로운 기회가 기다리고 있습니다
</p>
</div>
</div>
주가 카드 - 긍정적 강조
<div className="group card hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
{/* 상단 헤더 */}
<div className="flex items-start justify-between mb-4">
<div>
<h3 className="text-2xl font-bold bg-gradient-to-r from-slate-900 to-primary-700 dark:from-slate-100 dark:to-primary-400 bg-clip-text text-transparent">
{stock.name}
</h3>
<p className="text-slate-500 dark:text-slate-400">{stock.symbol}</p>
</div>
{/* 변동률 배지 - 동적 색상 */}
<div className={`
px-4 py-2 rounded-full font-semibold
${isPositive
? 'bg-gradient-to-r from-emerald-50 to-emerald-100 dark:from-emerald-900/30 dark:to-emerald-800/30 text-emerald-700 dark:text-emerald-400'
: 'bg-gradient-to-r from-rose-50 to-rose-100 dark:from-rose-900/30 dark:to-rose-800/30 text-rose-700 dark:text-rose-400'
}
`}>
{isPositive ? '↗' : '↘'} {Math.abs(stock.changePercent).toFixed(2)}%
</div>
</div>
{/* 차트 */}
<div className="my-6">
<MiniStockChart data={chartData} isPositive={isPositive} />
</div>
{/* 가격 정보 */}
<div className="flex items-baseline gap-2">
<span className="text-3xl font-bold text-slate-900 dark:text-white">
${stock.price.toFixed(2)}
</span>
<span className={`text-lg font-semibold ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
{isPositive ? '+' : ''}{stock.change.toFixed(2)}
</span>
</div>
</div>
버튼 그룹
<div className="flex gap-3">
{/* Primary Action */}
<button className="
px-6 py-3 rounded-xl font-semibold text-white
bg-gradient-to-r from-primary-500 to-primary-600
hover:from-primary-600 hover:to-primary-700
shadow-lg shadow-primary-500/30
hover:shadow-xl hover:shadow-primary-500/40
hover:-translate-y-0.5
active:translate-y-0
transition-all duration-200
">
브리핑 생성하기
</button>
{/* Secondary Action */}
<button className="
px-6 py-3 rounded-xl font-semibold
bg-white dark:bg-slate-800
text-primary-600 dark:text-primary-400
border-2 border-primary-300 dark:border-primary-700
hover:bg-primary-50 dark:hover:bg-primary-900/20
hover:-translate-y-0.5
active:translate-y-0
transition-all duration-200
">
히스토리 보기
</button>
</div>
Tailwind Config 적용
tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class',
theme: {
extend: {
colors: {
// Primary - Sky Blue
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
// Secondary - Golden
secondary: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
},
// Accent - Mint
accent: {
50: '#f0fdfa',
100: '#ccfbf1',
200: '#99f6e4',
300: '#5eead4',
400: '#2dd4bf',
500: '#14b8a6',
600: '#0d9488',
700: '#0f766e',
800: '#115e59',
900: '#134e4a',
},
// Stock Colors
'stock-up': '#10b981',
'stock-down': '#f43f5e',
// Background Colors
'light-bg': '#ffffff',
'light-card': '#fefefe',
'light-border': '#e2e8f0',
'dark-bg': '#0f0e1e',
'dark-card': '#1a1828',
'dark-border': '#334155',
},
fontFamily: {
sans: ['Pretendard', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
display: ['Pretendard', 'Poppins', 'sans-serif'],
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
},
boxShadow: {
'glow-sm': '0 0 10px rgba(14, 165, 233, 0.3)',
'glow': '0 0 20px rgba(14, 165, 233, 0.3)',
'glow-lg': '0 0 30px rgba(14, 165, 233, 0.4)',
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.5s ease-in-out',
'shimmer': 'shimmer 1.5s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
shimmer: {
'0%': { backgroundPosition: '200% 0' },
'100%': { backgroundPosition: '-200% 0' },
},
},
},
},
plugins: [],
}
접근성 고려사항
색상 대비
- WCAG AA 기준 최소 4.5:1 대비율 유지
- 중요한 정보는 색상만으로 전달하지 않음
- Dark mode에서도 충분한 대비 확보
키보드 네비게이션
- 모든 인터랙티브 요소에 포커스 스타일 제공
- Tab 순서가 논리적 흐름을 따름
- Skip navigation 링크 제공
스크린 리더
- 의미 있는 alt 텍스트
- ARIA 레이블 적절히 사용
- 시맨틱 HTML 사용
마무리
이 디자인 시스템은 "당신이 잠든 사이" 프로젝트에 신뢰, 희망, 활력을 불어넣습니다.
핵심 원칙
- 긍정적인 첫인상: 밝고 따뜻한 색상으로 사용자를 환영
- 명확한 정보 전달: 색상과 타이포그래피로 시각적 계층 구축
- 부드러운 인터랙션: 애니메이션과 전환 효과로 즐거운 경험
- 일관된 경험: Light/Dark 모드 모두에서 동일한 품질
매일 아침 사용자에게 새로운 기회와 희망을 전달하는 서비스답게, 디자인도 그 메시지를 담아야 합니다. 🌅✨