HYOJIN c2a71c1b77 feat(design): 디자인 시스템 적용 (CSS 토큰, Button/Badge, 차트, 다크모드) (#48 )

- 디자인 시스템 가이드 문서 11개 생성 (docs/design/)
- CSS 변수 토큰 시스템 (@theme + :root/.dark 전환)
- cn() 유틸리티 (clsx + tailwind-merge)
- Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응)
- 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일)
- 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX)
- 버튼 다크모드 채도/대비 강화 (primary-600 기반)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-15 16:38:00 +09:00

3.5 KiB

Raw Blame 히스토리

모션 & 애니메이션

원칙

모션은 UI의 상태 변화를 명확히 전달하기 위한 수단이다.
불필요한 애니메이션은 사용하지 않는다.
모든 모션은 prefers-reduced-motion 미디어 쿼리를 존중한다.

Duration (지속 시간)

이름	값	Tailwind	용도
instant	0ms	—	즉각 반응 (포커스, 선택)
fast	100ms	`duration-100`	버튼 hover, 색상 전환
normal	200ms	`duration-200`	패널 열기, 드롭다운
slow	300ms	`duration-300`	모달, 사이드바 슬라이드
slower	500ms	`duration-500`	페이지 전환, 스켈레톤

기본값: duration-200. 특별한 이유 없이 300ms를 초과하지 않는다.

Easing (가속도 곡선)

이름	값	Tailwind	용도
ease-out	`cubic-bezier(0, 0, 0.2, 1)`	`ease-out`	진입 애니메이션 (요소 나타남)
ease-in	`cubic-bezier(0.4, 0, 1, 1)`	`ease-in`	퇴장 애니메이션 (요소 사라짐)
ease-in-out	`cubic-bezier(0.4, 0, 0.2, 1)`	`ease-in-out`	상태 전환 (toggle, expand)
spring	`cubic-bezier(0.34, 1.56, 0.64, 1)`	—	강조 효과 (알림, 배지)

기본 조합: 진입 ease-out, 퇴장 ease-in.

패턴

Hover / Active

버튼, 카드, 링크 등 상호작용 요소.

transition-colors duration-100 ease-out

포인터 커서 피드백:

active:scale-[0.98] transition-transform duration-75

진입 (Fade + Slide)

모달, 드롭다운, Toast 등 요소가 나타날 때.

/* 아래에서 위로 */
translate-y-2 opacity-0  →  translate-y-0 opacity-100
transition-[transform,opacity] duration-200 ease-out

/* 위에서 아래로 (드롭다운) */
-translate-y-2 opacity-0  →  translate-y-0 opacity-100
transition-[transform,opacity] duration-200 ease-out

퇴장 (Fade + Slide)

translate-y-0 opacity-100  →  translate-y-2 opacity-0
transition-[transform,opacity] duration-150 ease-in

사이드바 / 패널 슬라이드

-translate-x-full  →  translate-x-0
transition-transform duration-300 ease-out

모달 배경 (Backdrop)

opacity-0  →  opacity-100
transition-opacity duration-200 ease-out

스켈레톤 로딩

animate-pulse

회전 (로딩 스피너)

animate-spin

토글 (Accordion, Expand)

높이 애니메이션은 max-height 트릭을 사용한다.

max-h-0 overflow-hidden  →  max-h-screen
transition-[max-height] duration-300 ease-in-out

prefers-reduced-motion

모든 모션은 사용자의 시스템 설정을 존중해야 한다.

Tailwind 설정

<!-- 기본 패턴 -->
<div class="transition-opacity duration-200 motion-reduce:transition-none motion-reduce:duration-0">

CSS 전역 설정 (권장)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

React Hook

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const duration = prefersReducedMotion ? 0 : 200;

금지 사항

3초 이상의 루프 애니메이션 (사용자 주의 분산)
화면 전체를 덮는 플래시/깜박임 효과
스크롤에 연동된 복잡한 패럴랙스
animation-duration: 0 직접 설정 (prefers-reduced-motion 우회 금지)

3.5 KiB Raw Blame 히스토리