디자인 시스템 기본값

한 줄 정의

디자인 시스템 기본값은 프로젝트 전반에서 색상, 간격, 타이포그래피, 컴포넌트의 가공되지 않은 기본 수치와 논리 구조를 명시적인 토큰과 컴포넌트로 규정함으로써 임의의 시각적 불일치를 방지하고 의사결정 피로를 줄이는 장치다.

핵심 요지

• 의사결정 피로도 감소와 리듬 유지: 8px 등 공통의 기준 간격과 고정된 타이포 스케일을 통해 컴포넌트를 설계할 때마다 매번 디자인 결정을 내리는 시간 낭비를 제거한다. (디자인 시스템 적용 시 폼 개발 시간 47% 절감 출처)
• 디자인 표류(Creative Drift) 및 기본값 함정 방지: 시스템이 명시적으로 정의되지 않으면 기본값(Roboto vs SF Pro Text, 16px vs 20px 패딩, bottom sheet vs modal)이 임의로 혼용되어 일관성과 제품 신뢰도를 무너뜨린다.
• 의미론적 이중 레이어 토큰: 기본 색상(Primitives)과 의미론적 명칭(Semantic)으로 구성된 이중 구조 설계를 통해 컴포넌트 손상 없이 다크 모드 등 유연한 테마 전환을 가능하게 한다. 성숙한 시스템의 74%가 토큰 전파 채택 출처.
• 컴포넌트 우선순위 구축: 사용자 상호작용이 가장 잦은 버튼(Buttons)으로 시각 언어를 먼저 잡은 뒤, 폼(Forms)과 카드(Cards) 순으로 외부 조립 틀을 확장한다.
• 최소 기능 디자인 시스템(MVDS): 1인 개발자와 소규모 팀에 필요한 것은 거창한 문서화가 아니라, 디자인 토큰, 타이포그래피, 간격 스케일, 핵심 3대 컴포넌트를 정의한 단 하나의 CSS 파일(tokens.css)과 렌더링 확인용 HTML 한 장이다.

상세

1. 보이지 않는 아키텍처(Invisible Architecture)의 5대 축

응집력 있고 단단한 사용자 경험을 만들기 위해서는 추측이나 개별 디자이너의 눈썰미에 의존하는 대신 다음과 같은 공유된 구조적 제약을 설계해야 한다.

• 간격 일관성 (Spacing Consistency): 요소 사이 거리를 눈으로 판단하여 13px, 19px 등 숫자가 제각각이 되는 것을 방지한다. 8px, 16px, 32px 같은 고정 옵션 목록만 허용하여 시각적 리듬을 구축한다.
• 명확한 타이포그래피 스케일 (Typography Scale): 미리 정의된 글꼴 크기, 굵기, 줄 높이(line-height) 집합을 사용해 텍스트 계층 구조를 잡고 본문 가독성을 높인다.
• 단일 진실 공급원으로서의 디자인 토큰 (Design Tokens): 색상 코드나 픽셀 값을 직접 입력하는 대신 brand-blue, spacing-large처럼 의미론적 이름을 붙여 한곳에서 중앙 관리한다.
• 제약 설정을 통한 디자인 표류 방지 (Limiting Choices): 무제한적 창의성 대신 팔레트의 색상 수나 폰트 스케일을 의도적으로 제한하여 디자이너나 개발자가 바뀔 때 제품 스타일이 미묘하게 탈선하는 현상(Creative Drift)을 예방한다.
• 재사용 및 검증된 컴포넌트 (Reusable Components): 드롭다운이나 버튼 등을 매 기능 추가마다 새로 만드는 낭비를 멈추고 검증된 블록을 사용해 개발 속도를 올린다.

2. 최소 기능 디자인 시스템 (Minimum Viable Design System, MVDS)

1인 또는 소규모 팀에서는 복잡한 Figma 토큰 동기화나 Storybook 등의 무거운 문서화 도구를 구축하느라 개발을 미룰 필요가 없다. 다음 4가지 핵심 요소를 중심으로 하는 **최소 기능 디자인 시스템(MVDS)**이면 충분하다.

• 디자인 토큰(Design tokens): 색상, 간격, 테두리 반경 등 가공되지 않은 원시 값(Primitives)과 의미에 맞게 매핑한 의미론적 토큰(Semantic tokens)의 이중 레이어 구조를 취한다.
• 타이포그래피 스케일(Typography scale): 제목, 본문, 캡션 등에 적용할 폰트 크기, 굵기, 줄바꿈 높이(line-height)를 고정 세트로 정의한다.
• 간격 스케일(Spacing scale): 패딩, 마진, 요소 간 gap에 일관된 비례감(rhythm)을 주기 위해 8px 단위를 기본으로 4, 8, 12, 16, 24, 32, 48, 64px 등의 스케일을 정의한다.
• 컴포넌트 라이브러리(Component library): 가장 기본이 되는 버튼, 폼, 카드의 세 가지 컴포넌트부터 정교화한다.

3. CSS 사용자 정의 속성(Custom Properties)의 기술적 우위

Sass 등 브라우저에 도달하기도 전에 컴파일되어 사라지는 정적 변수 대신, **CSS 사용자 정의 속성(변수)**을 활용한다.

• 런타임 동작: 빌드 과정 없이 즉시 반영되며, 자바스크립트로 동적인 변수 제어가 가능하여 다크 모드 및 테마 변환에 유용하다.
• 상속(Cascade) 규칙 활용: CSS의 본래 특성에 따라 컴포넌트 트리를 따라 자연스럽게 적용된다.

4. 컴포넌트 구축의 논리적 순서 (3단계)

1. 1단계: 버튼(Buttons): 상호작용과 상태(Hover, Focus, Active, Disabled)가 가장 다양한 컴포넌트로, 테두리 반경과 포커스 아웃라인 등 디자인 시스템 전체의 시각적 언어를 가장 먼저 결정하게 해준다.
2. 2단계: 폼(Forms): 입력창(Input), 라벨(Label), 에러 메시지 등 UX 마찰이 크고 불일치가 잦은 영역이다. 이미 버튼에서 확립한 간격 스케일과 반경 규칙을 조화롭게 대입한다.
3. 3단계: 카드(Cards): 내부에 버튼이나 폼 요소를 포함하는 조립용 컨테이너다. 배경색(Surface)과 그림자(Shadow) 규칙을 정의하며 전체 레이아웃의 깊이를 최종 완성한다.

5. 1인 개발자를 위한 초경량 문서화

거창한 도구 대신 tokens.css를 불러와서 토큰 명칭, 색상 스와치, 서체 크기 렌더링, 간격 막대, 컴포넌트의 다채로운 상태를 단일 화면에 시각화해 둔 한 장의 HTML 파일(design-system.html)을 리포지토리에 보관하며 빠르게 참고한다.

6. 실천을 위한 주말 로드맵

• 토요일 오전 (2~3시간): tokens.css 작성. 기본 색상, 의미론적 토큰, 간격 및 타이포그래피 스케일 정의. 이후 하드코딩된 원시값 사용 전면 중단.
• 토요일 오후 (3~4시간): 버튼 컴포넌트 구축. 버튼의 모든 상태(기본, 호버, 포커스, 액티브, 비활성화, 로딩 등) 처리 및 토큰 적용.
• 일요일 오전 (2~3시간): 폼 컴포넌트(인풋, 라벨, 에러 상태, 도움말 텍스트) 구축.
• 일요일 오후 (2시간): 카드 컴포넌트 구축 및 design-system.html 작성 시작(색상, 타이포그래피 렌더링).
• 일요일 저녁 (1시간): design-system.html에 컴포넌트 추가 및 Git 커밋 완료.

예시

1. PureVPN의 기본값 파편화 사례 (시스템 부재의 위험성)

PureSquare 합류 당시 PureVPN 앱의 기능 페이지들은 디자이너들 간 공유된 가이드라인이 부재하여 화면 간의 일관성이 극도로 훼손되어 있었다.

• 간격: 디자이너 A는 패딩 20px을 사용한 반면 디자이너 B는 16px을 사용함.
• 폰트: 플랫폼 가이드를 어기고 Android 환경에서 Roboto를 쓰고 iOS 환경에서는 SF Pro Text를 임의로 오버랩하여 작성함.
• 컴포넌트: 동일한 사용자 흐름 내에서 어떤 페이지는 바텀 시트(Bottom Sheet)를 사용하고, 다른 페이지는 모달(Modal)을 띄우는 등 인터랙션 통일성이 부재함.
• 결과: 이 미묘한 불일치들이 복리로 쌓이면서 기능 추가의 속도가 저하되고, 사용자에게 제품의 신뢰감을 주지 못하는 결과를 초래했다.

2. CSS 변수 기반 이중 레이어 설계 예시 (tokens.css)

/* tokens.css */  
:root {  
  /* Colors — primitives (기본 색상 정의) */  
  --blue-500: #2563eb;  
  --blue-600: #1d4ed8;  
  --gray-100: #f3f4f6;  
  --gray-700: #374151;  
  --gray-900: #111827;  
  --red-500: #ef4444;  
  --white: #ffffff;
 
  /* Colors — semantic (의미론적 색상 매핑) */  
  --color-primary: var(--blue-500);  
  --color-primary-hover: var(--blue-600);  
  --color-text: var(--gray-900);  
  --color-text-muted: var(--gray-700);  
  --color-surface: var(--gray-100);  
  --color-error: var(--red-500);  
 
  /* Spacing (간격) */  
  --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 */  
 
  /* Typography (타이포그래피) */  
  --font-size-sm: 0.875rem;  
  --font-size-base: 1rem;  
  --font-size-lg: 1.125rem;  
  --font-size-xl: 1.25rem;  
  --font-size-2xl: 1.5rem;  
  --font-size-3xl: 1.875rem;  
  --font-weight-normal: 400;  
  --font-weight-medium: 500;  
  --font-weight-bold: 700;  
  --line-height-tight: 1.25;  
  --line-height-normal: 1.5;  
 
  /* Border (테두리 반경) */  
  --radius-sm: 4px;  
  --radius-md: 6px;  
  --radius-lg: 8px;  
  --radius-full: 9999px;  
}

3. 버튼 컴포넌트의 토큰 대입 예시

.btn {  
  display: inline-flex;  
  align-items: center;  
  gap: var(--space-2);  
  padding: var(--space-2) var(--space-4);  
  font-size: var(--font-size-base);  
  font-weight: var(--font-weight-medium);  
  border-radius: var(--radius-md);  
  border: none;  
  cursor: pointer;  
  transition: background-color 0.15s ease;  
}
 
.btn-primary {  
  background: var(--color-primary);  
  color: var(--white);  
}
.btn-primary:hover {  
  background: var(--color-primary-hover);  
}
.btn-primary:focus-visible {  
  outline: 2px solid var(--color-primary);  
  outline-offset: 2px;  
}
.btn-primary:disabled {  
  opacity: 0.5;  
  cursor: not-allowed;  
}

충돌

• 빌드형 도구 vs 런타임 CSS: Style Dictionary(멀티 플랫폼을 위해 JSON 기반 토큰을 각각 내보내는 도구)나 Theo 같은 설정 도구는 다중 플랫폼 개발(iOS, Android, Web 동시 대응) 시 강력한 우위를 보이지만, 단일 웹 프로젝트나 1인 개발에는 환경 구축 비용과 복잡성 대비 효율이 떨어진다. 단일 웹 환경에서는 런타임 CSS 변수가 더 적합하다.
  • Style Dictionary: 웹 앱과 React Native 앱을 동시에 관리하는 프로젝트 등에서 유용하며 JSON을 각 플랫폼 포맷으로 자동 변환.
  • Theo: Salesforce에서 개발한 도구로, Style Dictionary와 유사하지만 설정 문법이 간결함 (단, 2025년 기준 메인터넌스가 뜸함).

관련 노트

• AI 시대 디자인 시스템
• DESIGN.md 운영 원칙
• AI Slop
• DESIGN.md 워크플로우
• UI UX 디자인 AI 워크플로우