---
id: FE-ARCH-ATOMIC-001
category: Dev
confidence_score: 1.0
tags: [atomic-design, [[Design-System|Design-System]], [[Architecture|Architecture]], react, component-driven, [[Modularity|Modularity]], [[Scalability|Scalability]]]
last_reinforced: 2026-04-26
---

# [[Atomic Design|Atomic Design]][[_system|system]] Architecture (아토믹 디자인 시스템 아키텍처)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "인터페이스를 쪼갤 수 없는 최소 단위(Atoms)부터 거대한 유기체(Organisms)까지 단계별로 조립하여, 일관성과 재사용성이라는 두 개의 기둥 위에 무한히 확장 가능한 UI 생태계를 구축하라" — 브래드 프로스트의 아토믹 디자인을 현대적 프런트엔드 환경으로 재해석한 설계론.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Hierarchical Component Composition" — UI 요소를 복잡도에 따라 5가지 계층(Atoms, Molecules, Organisms, Templates, Pages)으로 분류하고, 하위 계층을 조합하여 상위 계층을 만드는 패턴.
- **계층별 정의:**
    - **Atoms (원자):** 더 이상 쪼갤 수 없는 기본 태그 (Button, Input, Label 등).
    - **Molecules (분자):** 원자들의 결합체로, 하나의 기능을 수행 ([[Search|Search]]Form, FieldGroup 등).
    - **Organisms (유기체):** 분자와 원자, 혹은 다른 유기체의 결합으로 구성된 복잡한 섹션 (Header, Sidebar, ProductGrid 등).
    - **Templates (템플릿):** 데이터가 없는 레이아웃 수준의 골격.
    - **Pages (페이지):** 실제 데이터가 주입되어 사용자에게 보여지는 최종 결과물.
- **의의:** UI의 파편화를 방지하고, 디자인과 엔지니어링 간의 공용 언어를 구축하여 개발 속도를 획기적으로 향상시킴.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 단순히 기능별로 컴포넌트를 나눴으나(Shared vs Feature), 현대 정책은 아토믹 디자인의 계층 구조를 통해 '컴포넌트의 책임 범위 정책'을 명확히 정의함.
- **정책 변화:** Antigravity 프로젝트는 아토믹 디자인의 5계층 중 Atoms와 Molecules를 공용 라이브러리로 분리하고, Organisms 이상은 서비스별 비즈니스 로직을 포함하도록 격리하는 'Atomic-[[Logic|Logic]] Separation' 정책을 시행함.

## 🔗 지식 연결 (Graph)
- Design-System-Governance, [[Frontend-Architecture-and-Folder-Structure|Frontend-Architecture-and-Folder-Structure]], [[Component-Composition|Component-Composition]]-Patterns, [[Uber-Base-Web-Design-System|Uber-Base-Web-Design-System]]
- **Raw Source:** 00_Raw/Atomic Design.md