2nd/10_Wiki/Topics_Dev/Atomic-Design-System-Architecture.md

id, category, confidence_score, tags, last_reinforced

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

Atomic Design_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 (분자): 원자들의 결합체로, 하나의 기능을 수행 (SearchForm, FieldGroup 등).
  • Organisms (유기체): 분자와 원자, 혹은 다른 유기체의 결합으로 구성된 복잡한 섹션 (Header, Sidebar, ProductGrid 등).
  • Templates (템플릿): 데이터가 없는 레이아웃 수준의 골격.
  • Pages (페이지): 실제 데이터가 주입되어 사용자에게 보여지는 최종 결과물.
• 의의: UI의 파편화를 방지하고, 디자인과 엔지니어링 간의 공용 언어를 구축하여 개발 속도를 획기적으로 향상시킴.

⚠️ 모순 및 업데이트 (Contradictions & RL Update)

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

🔗 지식 연결 (Graph)

• Design-System-Governance, Frontend-Architecture-and-Folder-Structure, Component-Composition-Patterns, Uber-Base-Web-Design-System
• Raw Source: 00_Raw/Atomic Design.md