AI로 일관된 웹 UI 디자인 만들기: 디자인 토큰 시스템 구축 가이드

chaeya 2025. 12. 28. 17:16

2025. 12. 28. 17:16

AI로 일관된 웹 UI 디자인 만들기: 디자인 토큰 시스템 구축 가이드

AI가 만든 UI, 왜 망가질까?

지난주 AI에게 채팅 페이지 UI를 만들어달라고 했습니다. 처음엔 훌륭했지만, 3일 후엔 5가지 다른 파란색이 코드 여기저기 흩어져 있었습니다. #3b82f6, #2563eb, #1d4ed8... 각각은 예쁘지만, 함께라면 재앙입니다.

이 글에서는 AI가 만든 UI를 일관되게 유지하는 디자인 토큰 시스템을 소개합니다. "예쁘게 만들어줘" 대신 "var(--primary-600)을 써줘"라고 말하는 법을 배워보세요.

🎯 문제: AI가 만든 UI의 일관성 재앙

Claude, ChatGPT 같은 AI에게 웹페이지 UI를 만들어달라고 요청하면, 처음에는 멋진 결과물을 얻을 수 있습니다. 하지만 다음과 같은 문제에 부딪히게 됩니다:

😱 흔히 발생하는 문제들

색상 inconsistency
- 페이지마다 다른 파란색 사용 (#3b82f6, #2563eb, #1d4ed8...)
- 하드코딩된 hex 값이 코드 여기저기에 흩어짐
간격 불일치
- padding: 13px, padding: 17px 같은 임의의 값
- 4px 기반 스페이스 시스템 미준수
폰트 혼란
- 같은 제목인데 다른 font-size 사용
- line-height, letter-spacing 불일치
다크모드 깨짐
- 라이트모드에서만 작동하는 색상
- .dark 클래스 미지원

결과: AI가 만든 각 컴포넌트는 개별로는 예쁘지만, 전체적으로는 마치 다른 사람이 만든 것처럼 조잡합니다.

✅ 해결책: "느낌"이 아닌 "키"로 강제하기

해결책은 간단합니다: "예쁜 느낌"으로 설명하지 말고, "정확한 토큰 키"로 강제하세요.

디자인 토큰이란?

디자인 시스템의 모든 값을 이름으로 정의한 것입니다:

/* ❌ 하드코딩 (BAD) */
color: #3b82f6;
padding: 16px;
border-radius: 8px;

/* ✅ 토큰 사용 (GOOD) */
color: var(--primary-600);
padding: var(--space-4);
border-radius: var(--radius-default);

왜 토큰이 효과적인가?

재현성: 동일한 토큰 = 동일한 결과
유지보수: 한 곳에서 변경 = 전체 적용
일관성: 모든 컴포넌트가 같은 언어 사용
다크모드: .dark 클래스에서 자동 변경

📐 1단계: CSS 변수로 디자인 토큰 정의

먼저 globals.css에 모든 디자인 값을 CSS 변수로 정의합니다.

1.1 색상 토큰

:root {
  /* Primary (Blue) */
  --primary-50: #eff6ff;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;

  /* Semantic Colors */
  --success: var(--success-600);
  --warning: var(--warning-600);
  --error: var(--error-600);
  --info: var(--info-600);

  /* Semantic Mapping */
  --card-bg: #ffffff;
  --card-border: var(--neutral-200);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
}

1.2 간격 토큰 (4px 기반)

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

1.3 타이포그래피 토큰 (2025 트렌드)

참고: 2025년 최신 타이포그래피 트렌드에 기반

:root {
  /* Font Family */
  --font-sans: 'Inter', 'Pretendard', sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
  --font-mono: 'D2Coding', monospace;

  /* Font Size (2025 권장: 16px 기본) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;  /* 기본 본문 */
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* Line Height */
  --leading-normal: 1.5;   /* 영문 */
  --leading-relaxed: 1.6;  /* 한글 */
}

📚 2단계: UI_DESIGN_GUIDE.md 작성

AI가 참고할 수 있는 상세한 디자인 가이드를 작성합니다.

가이드라인에 포함할 내용

Design Tokens - 모든 토큰 키와 용도 설명
Layout Rules - 헤더(56px), 사이드바(280px), 채팅 영역의 고정 크기
Component Specs - 각 컴포넌트의 정확한 스펙
i18n Rules - 한국어/영문 폰트 페어링 (Inter + Pretendard)

핵심 원칙

## AI Implementation Guide

1. **절대 하드코딩된 색상 사용 금지**
   ❌ color: #3b82f6
   ✅ color: var(--primary-500)

2. **모든 간격은 4px 기반**
   ❌ padding: 13px
   ✅ padding: var(--space-3)

3. **Tailwind와 CSS 변수 혼합 주의**
   ❌ className="bg-blue-500" style={{ color: 'var(--primary-500)' }}
   ✅ 둘 중 하나만 사용

🤖 3단계: Claude Skills 생성

Claude Code에 재사용 가능한 스킬을 등록합니다.

3.1 UI Theming 스킬

10가지 프리셋 테마를 제공하는 스킬입니다:

# UI Theming

## Available Themes
1. Ocean Depths - Professional maritime blues
2. Sunset Boulevard - Warm sunset gradients
3. Forest Canopy - Natural earth tones
... (10가지 테마)

## Usage
1. Show theme showcase
2. Get user selection
3. Apply theme tokens to components

3.2 Design Philosophy 스킬

디자인 철학 기반 UI 생성 스킬입니다:

# Design Philosophy

## Philosophy Examples
- "Digital Zen": Clean whitespace, minimal color
- "Data Poetry": Information as visual art
- "Organic Tech": Natural forms meet digital precision

🛠️ 4단계: AI 프롬프트 작성 베스트 프랙티스

❌ 나쁜 프롬프트

예쁜 채팅 페이지 만들어줘

✅ 좋은 프롬프트

UI_DESIGN_GUIDE.md의 디자인 토큰을 준수하여 채팅 페이지를 만들어줘.
- 색상: var(--primary-600) 사용
- 간격: var(--space-4) 기반
- 폰트: var(--font-sans) 사용
- 다크모드 지원 필수

📊 5단계: Before & After

Before (하드코딩 시대)

<button style={{
  backgroundColor: '#3b82f6',
  color: '#ffffff',
  padding: '16px',
  borderRadius: '8px'
}}>

문제점:

다른 컴포넌트에서 #2563eb, #1d4ed8 사용
padding: 17px, padding: 13px 혼용
다크모드 미지원

After (디자인 토큰 시스템)

<button style={{
  backgroundColor: 'var(--btn-primary-bg)',
  color: 'var(--btn-primary-fg)',
  padding: 'var(--space-4)',
  borderRadius: 'var(--radius-default)'
}}>

개선점:

✅ 모든 버튼이 동일한 토큰 사용
✅ 다크모드 자동 지원 (.dark 클래스)
✅ 일관된 간격 시스템

🎨 6단계: 2025년 타이포그래피 트렌드 적용

용도	폰트	특징
본문 (영문)	Inter	2025년 가장 인기 있는 UI 폰트
본문 (한글)	Pretendard	한글 전용 최적화
제목 (영문)	Plus Jakarta Sans	현대적이고 친근함
코드	D2Coding	개발자 친화적 모노스페이스

2025 베스트 프랙티스

기본 폰트 크기: 16px (2025 표준, 기존 14px에서 상향)
폰트 개수: 최대 2-3개 (제목용, 본문용, 코드용)
줄 간격: 1.5-1.6 (본문), 1.25 (제목)
가독성 최우선: 모든 디바이스에서 명확하게 표시

🎯 결론: AI와 협력하는 디자인 시스템

핵심 takeaways

디자인 토큰 = AI의 언어
- AI에게 "예쁜 느낌"이 아니라 "정확한 키"를 제공하세요
구조화된 가이드라인 = 일관성 보장
- UI_DESIGN_GUIDE.md가 AI의 참고 문서가 됩니다
Claude Skills = 재사용 가능한 전문성
- 자주 사용하는 패턴을 스킬로 만들어두세요
2025 트렌드 = 최신 표준 준수
- Inter + Pretendard 폰트 조합
- 16px 기본 폰트 크기
- 가독성 최우선

결과

AI가 만든 UI가 이제:

✅ 일관된 색상과 간격
✅ 다크모드 완벽 지원
✅ 반응형 디자인
✅ 접근성 준수
✅ 유지보수 용이

AI와 함께 일관되고 아름다운 웹을 만들어보세요!

📚 참고 자료

프로젝트 리소스

UI_DESIGN_GUIDE.md - 전체 디자인 가이드
CLAUDE.md - 프로젝트 아키텍처 가이드
globals.css - 디자인 토큰 정의

외부 참고 (2025 트렌드)

Best Fonts for Web Design in 2025 - Shakuro
Typography Trends 2025 - Sunbpo Solutions
Inter Font Pairings - MaxiBestOf
Web Typography Best Practices - Marker.io

Subsai 동영상 자막 자동 생성 (0)	2023.08.18
디스코드에서 Midjourney Bot 사용하기 (0)	2023.08.02
GPT for Sheets로 구글 문서도구 활용하기 (0)	2023.08.02
ChatGPT를 이용하여 Mermaid로 시퀀스 다이어그램 만들기 (31)	2023.08.02

오픈비 : 삽질은없다