Atomic Design & Component Logic

1. Overview

아토믹 디자인 및 컴포넌트 로직(Atomic Design & Component Logic, ADC)은 파편화된 화면 요소를 수리적인 '시각적 부품 집합'으로 모듈화하고, 이들의 물리적 결합 법칙을 통해 거대한 서비스를 효율적으로 조립해 나가는 '인터페이스 조립 물리학'입니다.

학습자는 더 이상 쪼갤 수 없는 수치 단위인 **원자(Atoms)**와 이들이 결합한 분자(Molecules), **유기체(Organisms)**의 수리적 계층 구조를 배웁니다. 특히, 개별 부품의 물리적 독립성을 유지하면서도 부모 개체의 수치 데이터에 유동적으로 반응하게 만드는 컴포넌트 로직을 익힙니다. 이를 통해 수천 개의 화면을 단 몇 개의 수리적 원형(Prototype)으로 지배하는 하이엔드 디자인 거버넌스 역량을 확보합니다.

2. Scope & Boundaries

In-Scope

• Hierarchy of Components: Atoms, Molecules, Organisms, Templates, Pages 수리적 5단계
• Component Encapsulation: 외부 물리 노이즈가 내부 수치 로직을 침범하지 못하게 하는 격리 기술
• Prop & State Mapping: 상위 개체의 수리적 값이 하위 물리 부품으로 전이되는 궤적 설계
• Modular Reusability Mechanics: 다른 물리적 맥락에서도 수리적 정체성을 유지하며 재사용되는 법
• Design System Documentation: 부품의 수리적 명세와 물리적 사용 수순을 표준화하는 가이드라인

Out-of-Scope

• 특정 FE 라이브러리(React, Vue)의 컴포넌트 렌더링 물리 성능 (05-XX-XX 영역에서 분담)
• 백엔드 데이터베이스의 원자적($Atomic$) 트랜잭션 수순 (06-XX-XX 영역에서 분담)

Boundaries

• ADC vs. UI Implementation: 일반 UI 구현이 '특정 화면을 만드는 것'에 집중한다면, ADC는 '다양한 화면에서 재사용 가능한 수리적 부품의 물리적 계층 구조'라는 아키텍처적 토대에 집중하여 구분합니다.

3. Counterexample

• 단순히 "버튼 따로 만들기"라 설명하는 것은 ADC 학습이 아닙니다. 왜 하나의 원자(Atom) 수치를 수정했을 때 이와 연결된 수만 개의 물리적 페이지 유입 수치가 수리적으로 일괄 동기화되어야 하는지 그 파급 거버넌스를 증명할 수 있어야 하며, 유기체(Organism) 레벨에서 독립적이지 못한 수리 로직이 왜 전체 물리 시스템의 유지보수 비용($Technical$ $Debt$)을 수치적으로 폭증시키는지 논증하지 못한다면 아토믹 디자인의 본질을 이해하지 못한 것입니다.

4. Prerequisites

• Visual Perception & Gestalt Principles (Basic): 12-01-01의 수리적 그룹핑 이해가 필수입니다.
• Software Engineering & DevOps (Recommended): 09-XX-XX의 모듈화 및 캡슐화 물리 기초 이해가 권장됩니다.

5. Learning Map

1. Fundamental Particles: 고유한 수리적 기능을 가진 최소 물리 단위인 원자를 정의합니다.
2. Molecular Synthesis: 원자들이 결합하여 하나의 물리적 과업을 수행하는 분자로 진화합니다.
3. Organism Dynamics: 분자들이 모여 독립적인 수리 영역(Header, Card List 등)을 형성합니다.
4. Integrated Universe: 조립된 수리 시스템이 실제 물리적 페이지 사용자 경험을 지배하는 하이엔드 질서를 완성합니다.

6. Learning Topics

Basic

Core: 아토믹 디자인의 수리적 5단계 (Hierarchical Physics)

• Why to Learn: 복잡한 화면을 막연히 그리지 않고, 논리적이고 예측 가능한 수치 계층으로 분해하여 관리하기 위해서입니다.
• What to Learn:
  • Atoms: Label, Input, Button 등 수리적 기본 단위
  • Molecules: 검색창(Input+Button) 등 원자들의 수리적 결합체
  • Organisms: 유저 카드 그룹 등 복합적인 물리적 기능 단위
  • Templates & Pages: 골조 수치와 실제 데이터가 채워진 최종 물리 실체
• How to Learn:
  • 기존 웹사이트를 캡처한 뒤, 각 요소를 원자/분자/유기체 수치로 강제 분류하며 수리적 구조를 해체하는 실습
  • 컴포넌트 맵을 그려서 하나의 부품이 물리적으로 어디까지 수리 전파되는지 분석
• Implement: 컴포넌트 이름과 계층 수치를 관리하는 기초 Atomic_Inventory

Recommended

Core: 컴포넌트 캡슐화와 독립성 (Isolation Dynamics)

• Why to Learn: 특정 물리 부품의 수치 변경이 예기치 않은 다른 영역의 수리적 붕괴($Side$ $Effect$)를 일으키는 것을 막기 위함입니다.
• What to Learn:
  • Visual Encapsulation: 스타일 수치가 외부 물리 개체에 유출되지 않도록 수리 격리
  • Stateless Components: 외부 수리 입력값(Props)에만 물리적으로 반응하는 순수 부품 설계
  • Logic Separation: 시각적 표현 수치와 데이터 처리 수리 로직의 물리적 분리
• How to Learn:
  • 글로벌 CSS 수치 대신 컴포넌트 단위의 고유 수치 ID를 부여하여, 물리적 스타일 충돌 수치를 0으로 수리 조정하는 실습
  • 부모-자식 관계에서 데이터 수치가 하향식으로만 물리 이동하는 '단방향 흐름'의 수리적 안정성 검증
• Implement: 컴포넌트 간의 수리적 의존성 수치를 시각화하는 Dependency_Mapper

Practical

Core: 디자인 토큰과 수리적 명세 (Specification Mechanics)

• Why to Learn: '밝은 파랑' 같은 물리적 감각의 언어를 #007BFF 같은 수리적 상수로 치환하여 전사적 수치 일관성을 확보하기 위해서입니다.
• What to Learn:
  • Design Tokens: 색상, 간격, 타이포그래피 수치를 변수화한 디자인 시스템의 'DNA'
  • Name-Value Governance: 의미론적 이름($Primary$-$Main$)과 실제 물리 수치의 수리 매핑
  • Theme Physics: 다크 모드 등 물리적 테마 전환 시 수리적 토큰 값이 대량 전이되는 기제
• How to Learn:
  • JSON 파일에 버튼의 패딩, 배경색 수치를 정의하고 이를 다수의 물리 페이지에 수리적으로 주입하는 실습
  • 디자인 토큰 명칭이 모호할 때 개발 물리 현장에서 발생하는 수리적 커뮤니케이션 비용 계산 훈련
• Implement: 디자인 토큰 수치를 플랫폼별 코드(CSS, Swift, Kotlin)로 자동 변환하는 Token_Compiler

Advanced

Core: 컴포넌트 생명주기와 거버넌스 (Systemic Theory)

• Why to Learn: 수천 개의 물리 부품 중 낡은 수치를 폐기($Deprecate$)하고 새로운 하이엔드 수치를 투입하는 전체 라이프사이클을 통제하기 위함입니다.
• What to Learn:
  • Component Lifecycle: 개발-배포-사용-폐기에 이르는 컴포넌트의 물리적 일생
  • Versioning Strategy: 수리적 기능 개선 사항을 물리적 부품 버전에 수치 반영하는 법
  • Consistency Audit: 실제 제품의 수치들이 디자인 시스템의 수리적 원칙을 얼마나 준수하는지 물리 검수
• How to Learn:
  • Storybook 같은 하드웨어 도구에서 컴포넌트의 수리적 상태값(States) 변화를 물리적으로 전수 테스트하는 실습
  • 디자인 시스템 변경 시 물리적으로 영향받는 서비스 범위를 수리적으로 예측($Impact$ $Analysis$)하는 프로젝트
• Implement: 전체 소스 코드에서 디자인 시스템 준수율 수치를 산출하여 리포트하는 Consistency_Auditor

7. Terminology

8. References

Primary

• [P1] CS2023 - Human-Computer Interaction (HCI) - Component-Based UI — Academic curricula.
• [P2] SWEBOK v4.0 - Software Design - Modularity — Engineering standards.

Secondary

• [Atomic Design] Brad Frost — The foundational book on component-based design systems.
• [Design Systems] Alla Kholmatova — Strategies for creating digital product languages.

Industry

• [Storybook: Component Driven Development] — Tooling for component physical isolation.
• [Google Material Design: Component Specs] — High-end industrial component examples.

9. Final Checklist

Primary

• '아토믹 디자인'의 각 계층 수치가 물리적으로 어떻게 결합하여 상위 개체의 수리적 정체성을 형성하는지 논증 가능한가? (P1)
• '컴포넌트 독립성' 위반이 전체 물리 시스템의 수리적 '디버깅 비용' 수치에 미치는 영향을 기술할 수 있는 가? (P2)

Secondary

• '디자인 토큰'의 수치 구조가 어떻게 물리적 '브랜드 이미지'를 수리적으로 강제하는지 소통 가능한가?
• Stateless Component를 통해 데이터의 물리적 흐름을 단순화하여 수리적 예측 가능성을 확보할 수 있는 가?

Industry

• 실무 디자인 시스템 구축 시, 새로운 물리 개체를 '원자'로 정의할지 '분자'로 정의할지 수리적 기준을 제안할 수 있는 가? (SFIA)
• Accessibility 수치가 포함된 컴포넌트를 설계하여, 이를 재사용하는 모든 하드웨어 페이지에서 수리적 접근성을 보장할 수 있는 가?