디자인 시스템 구축 가이드

효율적인 디자인 시스템 구축 방법과 주요 구성 요소

디자인 시스템은 제품의 일관성을 유지하고 디자인 및 개발 프로세스를 가속화하는 핵심 요소입니다. 이 가이드에서는 효과적인 디자인 시스템 구축을 위한 단계와 구성 요소를 설명합니다.

디자인 시스템의 정의

디자인 시스템은 다음 요소들의 집합입니다:

디자인 원칙: 제품 디자인을 이끄는 핵심 가치
컴포넌트 라이브러리: 재사용 가능한 UI 요소
패턴 라이브러리: 사용자 문제를 해결하는 UI 패턴
스타일 가이드: 색상, 타이포그래피, 아이콘 등의 시각적 언어
문서화: 사용 지침과 예시

디자인 시스템 구축 단계

1. 현황 분석

현재 제품의 UI를 분석하여 일관성이 없는 부분을 파악합니다.

UI 감사: 현재 사용 중인 모든 UI 요소 수집
패턴 식별: 반복되는 디자인 패턴 찾기
불일치 식별: 비슷한 기능에 다른 디자인이 적용된 부분 찾기

2. 디자인 토큰 정의

디자인 시스템의 기초가 되는 토큰을 정의합니다.

색상 시스템

SCSS

// 주요 브랜드 색상
$primary-50: #E3F2FD;
$primary-100: #BBDEFB;
$primary-200: #90CAF9;
$primary-300: #64B5F6;
$primary-400: #42A5F5;
$primary-500: #2196F3;  // 메인 색상
$primary-600: #1E88E5;
$primary-700: #1976D2;
$primary-800: #1565C0;
$primary-900: #0D47A1;

// 중립 색상
$neutral-50: #FAFAFA;
$neutral-100: #F5F5F5;
$neutral-200: #EEEEEE;
$neutral-300: #E0E0E0;
$neutral-400: #BDBDBD;
$neutral-500: #9E9E9E;
$neutral-600: #757575;
$neutral-700: #616161;
$neutral-800: #424242;
$neutral-900: #212121;

타이포그래피

SCSS

// 폰트 패밀리
$font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
$font-secondary: 'Noto Sans KR', sans-serif;

// 폰트 크기 (rem 기준)
$font-size-xs: 0.75rem;    // 12px
$font-size-sm: 0.875rem;   // 14px
$font-size-base: 1rem;     // 16px
$font-size-lg: 1.125rem;   // 18px
$font-size-xl: 1.25rem;    // 20px
$font-size-2xl: 1.5rem;    // 24px
$font-size-3xl: 1.875rem;  // 30px
$font-size-4xl: 2.25rem;   // 36px

공간 시스템

SCSS

// 스페이싱 단위 (rem 기준)
$space-1: 0.25rem;   // 4px
$space-2: 0.5rem;    // 8px
$space-3: 0.75rem;   // 12px
$space-4: 1rem;      // 16px
$space-6: 1.5rem;    // 24px
$space-8: 2rem;      // 32px
$space-12: 3rem;     // 48px
$space-16: 4rem;     // 64px