Tailwind CSS로 디자인 시스템 만들기

"Tailwind는 유틸리티 클래스잖아요. 디자인 시스템이랑 맞나요?"

맞아요. 오히려 잘 맞아요.

디자인 시스템의 핵심은 일관성이거든요. 색상, 간격, 타이포그래피가 정해진 규칙대로 사용되는 것.

Tailwind는 그걸 강제해요. p-4 쓰면 무조건 16px. text-sm 쓰면 무조건 14px. 개발자마다 다른 값 쓸 일이 없어요.

기본 구조

1. 색상 토큰

이러면 bg-primary-500, text-gray-900 이렇게 쓸 수 있어요.

CSS 변수로 하면 더 좋아요

// tailwind.config.ts
colors: {
  primary: {
    500: 'var(--color-primary-500)',
    600: 'var(--color-primary-600)',
  },
}

다크 모드 전환이 자동으로 돼요.

2. 타이포그래피

반응형 타이포

CSS 변수로 처리하면 반응형도 쉬워요:

text-display-lg 하나로 모바일/PC 다 처리돼요.

3. 간격 (Spacing)

Tailwind 기본 간격 시스템 써도 되는데, 커스텀하려면:

근데 사실 Tailwind 기본 (p-4, mb-6)이 충분해요. 8px 그리드 시스템이거든요.

4. 컴포넌트 만들기

토큰 설정했으면 컴포넌트 만들어요:

cva로 타입 안전하게

자동완성도 되고 타입 체크도 돼요.

5. 프리셋으로 배포

팀에서 쓰거나 여러 프로젝트에서 재사용하려면 프리셋으로 만들어요:

실전 체크리스트

디자인 시스템 만들 때 필수 항목:

• 색상 토큰 (primary, secondary, gray, danger, success)
• 타이포그래피 스케일 (display, heading, body, label)
• 간격 시스템 (8px 그리드 권장)
• Border radius
• Shadow
• 기본 컴포넌트 (Button, Input, Card 등)

공공기관이라면

KRDS(한국형 웹 디자인 시스템) 따라야 해요.

색상 코드, 폰트 크기, 간격 전부 가이드가 있어요. 직접 세팅하면 하루는 걸려요.

HANUI는 KRDS 토큰이 다 적용된 Tailwind 프리셋이에요.

색상, 타이포그래피, 반응형까지 전부 KRDS 기준으로 나와요.

---

관련 링크

• HANUI 컴포넌트 라이브러리
• HANUI GitHub
• claude-settings