# [[Design Systems|DesignSystems]]

## 📌 Brief Summary
디자인 시스템(Design Systems)은 색상, 간격 등의 시각적 디자인 정보를 담은 디자인 토큰([[Design Tokens|Design Tokens]])과 규칙, 재사용 가능한 컴포넌트들의 집합입니다[1]. 이는 엔지니어, 디자이너, 프로덕트 매니저가 일관성 있고 접근성이 뛰어난 애플리케이션을 빠르고 효율적으로 구축할 수 있도록 돕는 공통 언어 역할을 합니다[2]. 디자인 시스템을 도입하면 스타일의 파편화를 막고, 다크 모드나 다중 브랜드 테마와 같은 글로벌 변경 사항을 런타임 또는 빌드 타임에 안전하고 동적으로 확장할 수 있습니다[3-5].

## 📖 일Core Content
* **디자인 토큰(Design Tokens)의 계층적 구조**: 확장 가능한 UI 아키텍처의 핵심인 디자인 토큰은 JSON이나 YAML과 같은 기계 판독형 형식으로 저장되어 코드와 디자인 툴을 자동으로 동기화합니다[4, 6]. 유지보수성과 확장성을 높이기 위해 토큰은 3단계 계층 구조를 가집니다. 즉, 순수 값을 나타내는 기본 토큰(Primitive/Base Tokens), 사용 목적과 맥락을 부여한 시맨틱 토큰(Semantic Tokens), 개별 컴포넌트 변형에 쓰이는 컴포넌트 토큰(Component Tokens)으로 구성됩니다[7-12].
* **리액트(React) 스타일링 패러다임 비교**: 
  * **[[styled-components|styled-components]]**: 컴포넌트에 직접 스타일을 캡슐화하여 동적이고 props에 기반한 스타일링을 제공하는 CSS-in-JS 방식입니다[13, 14]. 하지만 브라우저에서 JavaScript를 실행하여 스타일을 주입하므로 런타임 오버헤드가 발생하며, [[React Context|React Context]]가 없는 [[React Server Components|React Server Components]](RSC) 환경에서는 서버 렌더링에 취약하다는 단점이 있습니다[15-18]. 
  * **[[Tailwind CSS|Tailwind CSS]]**: 유틸리티 퍼스트(Utility-first) 접근법을 취하며, 정적 CSS를 빌드 타임에 생성하여 런타임 오버헤드가 전혀 없습니다[19, 20]. 특히 Tailwind v4는 `@theme` 지시어와 네이티브 CSS 변수를 사용하는 CSS 우선 아키텍처로 전환되어, 빌드 속도 및 초기 렌더링([[Core Web Vitals|Core Web Vitals]]) 성능 면에서 CSS-in-JS보다 대규모 확장에 매우 유리합니다[18, 21-23].
* **재사용 가능한 컴포넌트 아키텍처 설계 패턴**:
  * **아토믹 디자인([[Atomic Design|Atomic Design]])**: UI를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 5단계로 세분화하여, 예측 가능하고 조립 가능한 컴포넌트 라이브러리를 구축하는 기초 방법론입니다[24-28].
  * **컴파운드 컴포넌트([[Compound Components|Compound Components]])**: 단일 컴포넌트에 너무 많은 속성(Prop)을 주입해 복잡해지는 문제를 해결하기 위해, 여러 하위 컴포넌트가 내부적으로 상태(Context)를 공유하도록 선언적으로 구성하는 패턴입니다(예: `Accordion.Root`, `Accordion.Item`)[29-32].
  * **오버라이드 패턴(Overrides API) 및 헤드리스(Headless) 컴포넌트**: Uber의 Base Web 등에서 사용하는 오버라이드 패턴은 내부 요소의 기능이나 스타일을 사용자가 쉽게 교체할 수 있도록 합니다[33-36]. 헤드리스 컴포넌트는 스타일링을 제외한 상태 관리와 접근성 로직만을 제공하여 Tailwind 등과 결합 시 유연성을 극대화합니다[37].
* **대규모 프론트엔드의 구조화([[Monorepo|Monorepo]] 및 FSD)**: 시스템이 커질 경우, 단일 폴더에 공유 컴포넌트를 무분별하게 담지 않고 Monorepo 환경에서 [[Feature-Sliced Design|Feature-Sliced Design]] (FSD) 아키텍처를 도입하는 것이 권장됩니다[38-41]. FSD는 코드를 Shared, Entities, Features, Widgets, Pages 등으로 명확히 분리하여 의존성의 방향을 통제하고 퍼블릭 API 캡슐화를 강제하여 시스템을 견고하게 유지합니다[39, 41].

## 🔗 Knowledge Connections
- **Related Topics:** [[Design Tokens|Design Tokens]], Atomic Design, Compound Components, [[Tailwind CSS|Tailwind CSS]], Styled-components, [[Feature-Sliced Design|Feature-Sliced Design]]
- **Projects/Contexts:** [[Shopify Polaris|Shopify Polaris]], [[Uber Base Web|Uber Base Web]]
- **Contradictions/Notes:** 소스 [42]와 [43]는 Tailwind CSS를 사용할 때 여러 유틸리티 클래스로 인해 마크업이 매우 길어지고(Class Soup) 가독성이 떨어질 수 있다고 지적하지만, 소스 [44]와 [45]은 이를 방지하기 위해 유틸리티 클래스를 반복 작성하는 대신 "재사용 가능한 컴포넌트"로 추상화하거나 플러그인 기반 시스템을 구축해야 한다고 조언합니다. 또한 소스 [14], [18]은 Styled-components가 훌륭한 개발자 경험과 동적 스타일링을 제공한다고 설명하지만, 소스 [15], [16], [17]은 대규모 앱이나 RSC가 적용된 [[Next.js|Next.js]] 환경에서는 런타임 성능 및 호환성 이슈를 야기할 수 있으므로 Tailwind나 [[CSS Modules|CSS Modules]]를 권장하며 서로 다른 최적의 사용 사례를 제시합니다.

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