2nd/10_Wiki/Topics/디자인 시스템 (Design Systems).md

디자인 시스템 (Design Systems)

📌 Brief Summary

디자인 시스템은 명확한 표준에 따라 구성되어 애플리케이션을 구축하는 데 사용할 수 있는 재사용 가능한 컴포넌트의 모음입니다. 이는 브랜드의 시각적 정체성을 프로그래밍 방식으로 구현한 것이며, 디자인과 엔지니어링 간의 공통 언어 및 통신 프로토콜 역할을 합니다. 디자인 시스템을 활용하면 여러 제품과 플랫폼 전반에 걸쳐 일관성을 보장하고, 업데이트와 리브랜딩을 용이하게 하며, 유지보수성을 극대화하여 대규모 프론트엔드 프로젝트를 효과적으로 확장할 수 있습니다.

📖 Core Content

• 디자인 시스템의 목적과 아키텍처 가치 디자인 시스템은 단순히 컴포넌트 라이브러리가 아니라 디자인과 엔지니어링 사이의 격차를 해소하는 '단일 진실 공급원(Single_Source_of_Truth)'이자 통신 프로토콜로 기능합니다. 이를 통해 대규모 프로젝트에서 개발자들이 일회성 헥스(hex) 코드를 도입하면서 발생하는 "300가지의 회색(300 shades of gray)"과 같은 일관성 문제를 방지할 수 있습니다. 궁극적으로 유지보수 가능하고 확장 가능한 프론트엔드 아키텍처를 구축하는 데 핵심적인 역할을 합니다.
• 디자인 토큰 (Design Tokens)의 역할 디자인 시스템의 핵심이자 기초적인 빌딩 블록은 디자인 토큰입니다. 색상, 간격, 타이포그래피, 테두리, 그림자, 모션, Z-index 등과 같은 시각적 디자인 속성을 저장하는 플랫폼 독립적인(Platform-agnostic) 엔티티입니다.
• 디자인 토큰의 3단계 계층 구조 (Token Hierarchy) 유연성과 시스템 전반의 일관성을 유지하기 위해 디자인 토큰은 일반적으로 세 가지 계층으로 관리됩니다.
  1. Global Tokens (Primitives): 컨텍스트가 없는 원시 값으로, 디자인 시스템의 기본 팔레트를 나타냅니다 (예: --blue-500: #3b82f6).
  2. Alias Tokens (Semantic): 글로벌 토큰을 참조하되 특정한 목적이나 컨텍스트를 설명합니다 (예: --color-primary: var(--blue-500)). 이 계층의 토큰을 수정하면 애플리케이션 전체의 수천 개 컴포넌트에 변경 사항이 즉시 전파되어 테마 변경이 매우 용이해집니다.
  3. Component-specific Tokens: 특정 UI 요소에 국한된 토큰으로, 시스템의 다른 부분에 영향을 주지 않고 개별 컴포넌트의 세밀한 조정이 가능합니다 (예: --button-bg-primary: var(--color-primary)).
• 자동화 및 다중 플랫폼 변환 파이프라인 웹, iOS, Android 등 여러 플랫폼에 걸친 대규모 프로젝트의 경우, 디자인 토큰은 JSON과 같은 중립적인 형식으로 저장됩니다. 이후 'Style Dictionary'와 같은 도구를 통해 웹용 CSS 변수, Android용 XML, iOS용 Swift 코드로 자동 변환되어 수동 오류를 없애고 일관성을 보장합니다.
• 반응형 디자인(Responsive Design)과의 융합 현대의 디자인 시스템에서는 반응형 동작을 개별 페이지가 아닌 '컴포넌트의 속성'으로 취급합니다. 컨테이너 쿼리(Container Queries)를 적용하여 컴포넌트 자체가 가용 너비에 따라 반응하도록 구축하면, 디자인 시스템을 사용하는 모든 팀이 별도의 작업 없이 올바른 반응형 동작을 일관되게 사용할 수 있습니다.

🔗 Knowledge Connections

• Related Topics: Design Tokens, CSS Architecture, Responsive Design, Tailwind CSS
• Projects/Contexts: 실무에서 CSS 관리하는 방법, 대규모 프론트엔드 아키텍처 확장 (Enterprise Frontend Architecture)
• Contradictions/Notes: Tailwind CSS와 같은 유틸리티 우선(Utility-first) 프레임워크는 사전 정의된 스케일을 제공하여 디자인 시스템의 일관성을 유지하는 데 뛰어나지만, 픽셀 퍼펙트(pixel-perfect)가 요구되거나 매우 고도로 맞춤화된 독자적인 디자인 시스템 로직이 필요한 경우에는 Tailwind의 설정이 한계로 작용할 수 있어 SCSS의 강력한 제어력이 더 적합할 수 있습니다.

---

Last updated: 2026-04-26