# Atomic Design

> 화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.

- 층: 아카이브 (UI 패턴)
- ID: atomic-design
- 연도: 2013
- 제작자: Brad Frost
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/atomic-design

## 정의

화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.

## 주요 특징

- Atoms (원자): 가장 작은 단위
- Molecules (분자): 원자들의 조합
- Organisms (유기체): 분자들의 조합
- Templates (템플릿): 페이지 구조
- Pages (페이지): 실제 콘텐츠

## 핵심 원칙

- 모듈화
- 재사용성
- 일관성
- 확장성

## 컬러 시스템

컴포넌트 계층과 무관한 순수 UI 방법론. 색상 시스템은 적용되는 디자인 언어를 따름

### 색상 역할

- token-level: design token으로 정의 — atoms에서 color token 참조
- component-level: molecules/organisms는 token만 사용, 직접 HEX 금지

### 색상 제약

- color token 없이 직접 HEX 사용 금지 — 반드시 token으로 추상화
- 각 atomic level은 상위 level의 색을 직접 조작하지 않음

### 다크모드 전략

token 교체만으로 전체 테마 전환 — atomic 구조의 핵심 장점

### 대비 요구사항

token 정의 시 light/dark 두 모드 대비 모두 검증

## 타이포그래피

- 폰트 성격: 방법론이므로 폰트는 프로젝트에 따라. 단 타이포도 token 기반으로 정의
- 권장 폰트 수: 최대 2개
- 타입 스케일: 프로젝트 type scale 선택 (방법론은 scale을 강제하지 않음)

### 타이포그래피 제약

- 폰트 크기·weight도 type token으로 추상화
- atom 레벨에서 type scale 정의 — organism이 임의 변경 금지

## 설계 제약

### 하면 안 되는 것

- atom을 건너뛰고 organism 직접 정의 금지
- 동일 기능 컴포넌트를 여러 atomic 레벨에 중복 정의 금지

### 반드시 포함할 것

- Atoms → Molecules → Organisms → Templates → Pages 5단계 구조
- design token 시스템 (color, typography, spacing, shadow)

### 모션 가이드

모션도 token화 권장 (duration, easing token). animation은 organism 레벨에서 정의.

## 사용 사례

- 대규모 디자인 시스템 구축
- React·Vue 기반 컴포넌트 라이브러리
- 크로스 팀 협업 프로젝트
- 엔터프라이즈 프론트엔드

## 추천 프로젝트 유형

- 대규모 디자인 시스템
- 컴포넌트 라이브러리
- 크로스 팀 프로젝트
- 엔터프라이즈 프론트엔드

## 장단점

### 장점

- 컴포넌트 재사용률 극대화
- 디자인·개발 협업 언어 통일
- 테스트 용이성 향상
- 디자인 시스템 확장이 체계적

### 단점·한계

- 초기 설계 비용이 높음
- 소규모 프로젝트에는 오버 엔지니어링
- 팀 전체가 개념을 이해해야 효과 발휘

## 자주 묻는 질문

### Q1. Atomic Design이란 무엇인가요?

화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.

### Q2. Atomic Design의 핵심 디자인 원칙은 무엇인가요?

Atomic Design의 핵심 원칙은 모듈화, 재사용성, 일관성, 확장성입니다.

### Q3. Atomic Design은 어떤 프로젝트에 적합한가요?

Atomic Design은 대규모 디자인 시스템 구축, React·Vue 기반 컴포넌트 라이브러리, 크로스 팀 협업 프로젝트, 엔터프라이즈 프론트엔드, 대규모 디자인 시스템, 컴포넌트 라이브러리, 크로스 팀 프로젝트, 엔터프라이즈 프론트엔드 등의 프로젝트에 적합합니다.

### Q4. Atomic Design의 장단점은 무엇인가요?

장점으로는 컴포넌트 재사용률 극대화, 디자인·개발 협업 언어 통일, 테스트 용이성 향상, 디자인 시스템 확장이 체계적이 있습니다. 단점으로는 초기 설계 비용이 높음, 소규모 프로젝트에는 오버 엔지니어링, 팀 전체가 개념을 이해해야 효과 발휘이 있습니다.

### Q5. Atomic Design에서 색상은 어떻게 사용하나요?

컴포넌트 계층과 무관한 순수 UI 방법론. 색상 시스템은 적용되는 디자인 언어를 따름 색상 역할은 token-level: design token으로 정의 — atoms에서 color token 참조, component-level: molecules/organisms는 token만 사용, 직접 HEX 금지입니다. 주의사항: color token 없이 직접 HEX 사용 금지 — 반드시 token으로 추상화, 각 atomic level은 상위 level의 색을 직접 조작하지 않음.

### Q6. Atomic Design에 어울리는 폰트 스타일은 무엇인가요?

Atomic Design에는 방법론이므로 폰트는 프로젝트에 따라. 단 타이포도 token 기반으로 정의 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 크기·weight도 type token으로 추상화, atom 레벨에서 type scale 정의 — organism이 임의 변경 금지.

### Q7. Atomic Design 디자인에서 하면 안 되는 것은 무엇인가요?

Atomic Design에서 피해야 할 것: atom을 건너뛰고 organism 직접 정의 금지, 동일 기능 컴포넌트를 여러 atomic 레벨에 중복 정의 금지.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #61DAFB
- secondary: #282C34
- accent: #21C3F3
- background: #F8FAFC
- surface: #FFFFFF
- text: #1E293B
- textSecondary: #64748B
- border: #E2E8F0

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.08)
- shadow md: 0 4px 12px rgba(0,0,0,0.10)
- shadow lg: 0 8px 24px rgba(0,0,0,0.12)
- border: 1px solid #E2E8F0

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section normal
- animation: 200ms ease

## 관련 링크

### 관련 스타일

- [Component-Driven Design](https://ui.buildersgate.com/styles/component-driven)
- [Card-Based Design](https://ui.buildersgate.com/styles/card-design)
- [Mobile First](https://ui.buildersgate.com/styles/mobile-first)

---

HTML 버전: https://ui.buildersgate.com/styles/atomic-design

이 문서는 https://ui.buildersgate.com/styles/atomic-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.