Antigravity Agent
27 lines
4.3 KiB
Markdown
27 lines
4.3 KiB
Markdown
# [[디자인 시스템 (Design[[ system]]s)]]
|
|
|
|
## 📌[[ 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* |