# [[Design Systems]]

## 📌 Brief Summary
디자인 시스템은 애플리케이션의 일관성 있는 UI를 구축하고 컴포넌트의 재사용성을 촉진하기 위해 활용되는 체계입니다 [1, 2]. 주로 아토믹 디자인(Atomic Design) 모델과 결합하여 디자이너와 개발자 간의 공유된 어휘를 확립하는 데 탁월한 역할을 합니다 [1]. 그러나 디자인 시스템 자체는 비즈니스 로직이나 애플리케이션 상태(state)를 관리하는 방법을 규정하지 않기 때문에, 대규모 프로젝트에서는 이를 보완할 별도의 프론트엔드 아키텍처 방법론이 함께 요구됩니다 [1, 2].

## 📖 Core Content
* **아토믹 디자인(Atomic Design)과의 결합:** 디자인 시스템을 일관성 있게 구축하기 위한 유용한 멘탈 모델로 아토믹 디자인이 주로 사용됩니다 [1]. 이는 인터페이스를 가장 작은 원자(atoms) 요소부터 분자, 유기체, 템플릿, 페이지 등 복잡한 구조로 상향식으로 구축하여 재사용 가능한 UI 라이브러리를 만드는데 강력한 성능을 발휘합니다 [2].
* **Storybook을 통한 문서화 및 테스트:** 디자인 시스템의 컴포넌트들은 주로 Storybook과 같은 도구를 사용하여 문서화되고 개발됩니다 [3]. 또한 Happo 또는 Chromatic과 같은 도구를 연동하여 시각적 회귀 테스트(Visual regression testing)를 수행함으로써, 레이아웃, 색상, 타이포그래피, 반응형 동작 등의 의도치 않은 UI 변경이나 버그를 사전에 방지할 수 있습니다 [3-5].
* **아키텍처적 한계 및 다른 방법론과의 공존:** 디자인 시스템(아토믹 디자인 기반)은 UI의 일관성과 재사용성에 초점을 맞추기 때문에, 기능 간의 관계나 비즈니스 로직을 구성하는 방법은 의도적으로 배제합니다 [1, 2]. 결과적으로 훌륭한 UI 컴포넌트 위에 혼란스러운 로직 계층이 얹히는 문제를 막기 위해, 도메인 복잡성과 애플리케이션 흐름을 다루는 Feature-Sliced Design (FSD)과 같은 아키텍처와 한 프로젝트 내에서 공존하며 상호 보완적으로 사용되어야 합니다 [1, 2].

## 🔗 Knowledge Connections
- **Related Topics:** [[Atomic Design]], [[Storybook]], [[Feature-Sliced Design (FSD)]], [[Visual Regression Testing]]
- **Projects/Contexts:** [[UI Component Library Development]], [[Scalable React Architecture]]
- **Contradictions/Notes:** 아토믹 디자인을 기반으로 한 디자인 시스템은 UI 재사용성에는 이상적이지만 비즈니스 로직이나 상태 관리에는 부족함이 있습니다. 따라서 구조와 흐름에 중점을 두는 Feature-Sliced Design과 초점이 다르며, 대규모 앱에서는 두 가지를 명확히 구분하고 결합하여 사용해야 합니다 [1, 2].

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