# [[Atomic Design]]

## 📌 Brief Summary
Atomic Design은 사용자 인터페이스(UI)를 가능한 가장 작은 요소인 원자(atoms)부터 시작하여 분자(molecules), 유기체(organisms), 템플릿(templates), 그리고 페이지(pages)와 같은 점점 더 복잡한 구조로 조합하여 구축하는 UI 시스템 설계 모델입니다 [1]. 이 방식은 일관된 디자인 시스템을 만들고, 컴포넌트의 재사용성을 촉진하며, 디자이너와 개발자 간의 공통된 어휘(Shared vocabulary)를 확립하는 데 탁월한 효과를 발휘합니다 [2].

## 📖 Core Content
- **계층적 UI 구성:** Atomic Design은 인터페이스를 가장 작은 단위(원자)로 쪼갠 뒤 이를 결합하여 점점 더 크고 복잡한 모듈(분자, 유기체 등)로 확장해 나가는 구조적 접근법을 취합니다 [1].
- **주요 장점:** UI의 일관성을 유지하고 재사용 가능한 UI 라이브러리를 구축하는 데 매우 강력한 방법론으로 평가됩니다 [1, 2].
- **아키텍처로서의 한계:** Atomic Design은 비즈니스 로직이나 상태(state)를 어떻게 구성하고 조직할 것인지에 대해서는 의도적으로 명시하지 않습니다 [2]. 그 결과, 이를 단독으로 사용할 경우 깔끔한 UI 컴포넌트 계층 이면에 무질서한 로직 계층이 생겨날 위험이 있습니다 [2]. 따라서 대규모 애플리케이션을 구축할 때 이 모델은 필요하긴 하지만 단독으로는 불충분(insufficient)합니다 [2].
- **다른 아키텍처와의 보완 및 공존:** UI의 일관성과 재사용성에 초점을 맞추는 Atomic Design의 한계를 보완하기 위해, 애플리케이션의 흐름과 도메인의 복잡성, 비즈니스 로직에 중점을 두는 [[Feature-Sliced Design]]과 같은 아키텍처와 단일 프로젝트 내에서 상호 보완적으로 공존할 수 있습니다 [1].

## 🔗 Knowledge Connections
- **Related Topics:** [[Feature-Sliced Design]], [[Component-Based Architecture]], [[React Architecture]]
- **Projects/Contexts:** [[Design Systems]], [[Reusable UI Libraries]]
- **Contradictions/Notes:** 소스 문헌들은 Atomic Design이 UI 디자인과 재사용성 측면에서는 훌륭하지만, 그 자체로 비즈니스 로직과 상태(state) 관리 문제를 해결해 주지 못한다고 지적합니다. 따라서 대규모 프로젝트에서는 애플리케이션 확장을 감당하기 위해 [[Feature-Sliced Design]]과 같은 도메인/기능 중심의 아키텍처와 병행할 필요가 있습니다 [1, 2].

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