# [[Design Systems]]

## 📌 Brief Summary
디자인 시스템(Design System)은 명확한 표준에 따라 가이드되며 애플리케이션을 구축하기 위해 조립할 수 있는 재사용 가능한 컴포넌트들의 집합입니다 [1]. 이는 브랜드의 시각적 정체성을 프로그래밍 방식으로 구현한 것으로, 플랫폼 전반의 일관성을 보장하고 개발 워크플로우 속도를 높입니다 [2, 3]. 디자인 시스템의 가장 핵심적인 기초 블록은 색상, 간격, 타이포그래피 등의 시각적 디자인 속성을 저장하는 '디자인 토큰(Design Tokens)'입니다 [1, 3].

## 📖 Core Content
**디자인 시스템의 목적과 가치**
*   **일관성 및 효율성 확보:** 디자인 시스템은 제품 및 플랫폼 전반에 걸친 디자인 일관성을 유지하고, 디자인 및 개발 워크플로우를 단축하며, 디자이너와 엔지니어 간의 공통 언어를 생성합니다 [2].
*   **반응형 디자인의 내장:** 대규모 조직에서 발생하는 반응형 디자인(Responsive Design)의 불일치를 해결하기 위해, 디자인 시스템은 개별 페이지가 아닌 컴포넌트 자체에 반응형 동작을 속성으로 내장하여 재사용성을 극대화합니다 [4].

**디자인 토큰 (Design Tokens)과 계층 구조**
디자인 토큰은 디자인 시스템의 시각적 디자인 원자(atoms) 역할을 하며, 플랫폼에 구애받지 않고(platform-agnostic) 시각적 디자인 속성을 저장하는 이름이 부여된 개체(named entities)입니다 [1-3]. 토큰은 주로 3단계의 계층 구조로 체계화됩니다 [5-7]:
*   **Global Tokens (Primitives):** 컨텍스트 없이 독립적으로 존재하는 원시 값으로 기본 팔레트 역할을 합니다 (예: `--blue-500: #3b82f6`) [5-7].
*   **Alias Tokens (Semantic):** 특정 의도나 사용 사례를 나타내며 글로벌 토큰을 참조하여 토큰에 의미(context)를 부여합니다 (예: `--color-primary: var(--blue-500)`) [5-7].
*   **Component Tokens:** 특정 UI 요소에 국한되어 글로벌 또는 별칭 토큰을 참조합니다. 이를 통해 다른 시스템에 영향을 주지 않고 개별 컴포넌트의 스타일을 세밀하게 조정할 수 있습니다 (예: `--button-bg-primary: var(--color-primary)`) [5, 7, 8].

**구현 및 프론트엔드 아키텍처와의 결합**
*   **단일 진실 공급원(Single Source of Truth) 자동화:** 다중 플랫폼(Web, iOS, Android)을 지원하는 대규모 프로젝트에서 디자인 토큰은 JSON 형식으로 저장되며, Style Dictionary 같은 도구를 통해 CSS 변수, iOS Swift, Android XML 등 플랫폼별 코드로 변환됩니다 [2, 9, 10]. 이는 수작업으로 인한 오류를 없애고 모든 제품 생태계에서 시각적 일관성을 보장합니다 [10].
*   **CSS 방법론과의 시너지:** Tailwind CSS는 프로젝트 전체의 색상, 타이포그래피 스케일 등을 구성 파일(configuration file)로 정의하여 디자인 시스템을 엄격히 강제함으로써 "300가지 그림자" 같은 일관성 문제를 방지합니다 [11]. 또한, Panda CSS와 같은 최신 Zero-Runtime CSS-in-JS 라이브러리는 디자인 시스템과 테마를 기본적으로 지원하는 토큰 시스템을 내장하고 있습니다 [12]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[Design Tokens]], [[Tailwind CSS]], [[CSS Architecture]], [[Responsive Web Design]], [[BEM]]
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트의 스타일 확장성 및 유지보수성 (Scalability and Maintainability in Large Frontend Projects)]]
- **Contradictions/Notes:** 디자인과 개발 간의 완벽한 자동화를 목표로 하지만, Figma와 같은 디자인 앱 자체에는 디자인 토큰을 완벽하게 관리할 수 있는 내장 솔루션이 부족하여 플러그인(Figma Tokens 등)이나 Style Dictionary와 같은 서드파티 도구를 통한 추가적인 수동 구성과 워크플로우 통합이 필수적으로 요구된다는 한계가 지적됩니다 [13]. 

---
*Last updated: 2026-04-26*