# Atomic Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: atomic-design
- **카테고리**: ui-pattern
- **연도**: 2013
- **제작자**: Brad Frost
## 설명
화학의 원자 개념을 차용하여 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 기반 컴포넌트 라이브러리
- 크로스 팀 협업 프로젝트
- 엔터프라이즈 프론트엔드
## 추천 프로젝트 유형
- 대규모 디자인 시스템
- 컴포넌트 라이브러리
- 크로스 팀 프로젝트
- 엔터프라이즈 프론트엔드
## 장점
- 컴포넌트 재사용률 극대화
- 디자인·개발 협업 언어 통일
- 테스트 용이성 향상
- 디자인 시스템 확장이 체계적
## 단점·한계
- 초기 설계 비용이 높음
- 소규모 프로젝트에는 오버 엔지니어링
- 팀 전체가 개념을 이해해야 효과 발휘
## 관련 스타일
- [component-driven](https://ui.buildersgate.com/styles/component-driven)
- [card-design](https://ui.buildersgate.com/styles/card-design)
- [mobile-first](https://ui.buildersgate.com/styles/mobile-first)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #61DAFB
- secondary: #282C34
- accent: #21C3F3
- background: #F8FAFC
- surface: #FFFFFF
- text: #1E293B
- textSecondary: #64748B
- border: #E2E8F0
### 헤더
- background: linear-gradient(135deg, #282C34 0%, #1E2228 100%)
- textColor: #61DAFB
- accentColor: #21C3F3
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.08)
- md: 0 4px 12px rgba(0,0,0,0.10)
- lg: 0 8px 24px rgba(0,0,0,0.12)
- xl: 0 16px 40px rgba(0,0,0,0.14)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E2E8F0
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Atomic Design이란 무엇인가요?
A: 화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.
### Q: Atomic Design의 핵심 디자인 원칙은 무엇인가요?
A: Atomic Design의 핵심 원칙은 모듈화, 재사용성, 일관성, 확장성입니다.
### Q: Atomic Design은 어떤 프로젝트에 적합한가요?
A: Atomic Design은 대규모 디자인 시스템 구축, React·Vue 기반 컴포넌트 라이브러리, 크로스 팀 협업 프로젝트, 엔터프라이즈 프론트엔드, 대규모 디자인 시스템, 컴포넌트 라이브러리, 크로스 팀 프로젝트, 엔터프라이즈 프론트엔드 등의 프로젝트에 적합합니다.
### Q: Atomic Design의 장단점은 무엇인가요?
A: 장점으로는 컴포넌트 재사용률 극대화, 디자인·개발 협업 언어 통일, 테스트 용이성 향상, 디자인 시스템 확장이 체계적이 있습니다. 단점으로는 초기 설계 비용이 높음, 소규모 프로젝트에는 오버 엔지니어링, 팀 전체가 개념을 이해해야 효과 발휘이 있습니다.
### Q: Atomic Design에서 색상은 어떻게 사용하나요?
A: 컴포넌트 계층과 무관한 순수 UI 방법론. 색상 시스템은 적용되는 디자인 언어를 따름 색상 역할은 token-level: design token으로 정의 — atoms에서 color token 참조, component-level: molecules/organisms는 token만 사용, 직접 HEX 금지입니다. 주의사항: color token 없이 직접 HEX 사용 금지 — 반드시 token으로 추상화, 각 atomic level은 상위 level의 색을 직접 조작하지 않음.
### Q: Atomic Design에 어울리는 폰트 스타일은 무엇인가요?
A: Atomic Design에는 방법론이므로 폰트는 프로젝트에 따라. 단 타이포도 token 기반으로 정의 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 크기·weight도 type token으로 추상화, atom 레벨에서 type scale 정의 — organism이 임의 변경 금지.
### Q: Atomic Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Atomic Design에서 피해야 할 것: atom을 건너뛰고 organism 직접 정의 금지, 동일 기능 컴포넌트를 여러 atomic 레벨에 중복 정의 금지.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=atomic-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=atomic-design&merged=true
This is an organism component made up of molecules and atoms.
Templates - 템플릿
페이지의 구조를 정의하는 레이아웃
Atomic Design Hierarchy
원자에서 페이지까지의 구조
1
Atoms
Button, Input, Label, Icon
2
Molecules
Search Form, User Card
3
Organisms
Header, Navigation, Footer
4
Templates
Page Layout Structure
5
Pages
Final Page with Real Content
자주 묻는 질문
Atomic Design이란 무엇인가요?
화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.
Atomic Design의 핵심 디자인 원칙은 무엇인가요?
Atomic Design의 핵심 원칙은 모듈화, 재사용성, 일관성, 확장성입니다.
Atomic Design은 어떤 프로젝트에 적합한가요?
Atomic Design은 대규모 디자인 시스템 구축, React·Vue 기반 컴포넌트 라이브러리, 크로스 팀 협업 프로젝트, 엔터프라이즈 프론트엔드, 대규모 디자인 시스템, 컴포넌트 라이브러리, 크로스 팀 프로젝트, 엔터프라이즈 프론트엔드 등의 프로젝트에 적합합니다.
Atomic Design의 장단점은 무엇인가요?
장점으로는 컴포넌트 재사용률 극대화, 디자인·개발 협업 언어 통일, 테스트 용이성 향상, 디자인 시스템 확장이 체계적이 있습니다. 단점으로는 초기 설계 비용이 높음, 소규모 프로젝트에는 오버 엔지니어링, 팀 전체가 개념을 이해해야 효과 발휘이 있습니다.
Atomic Design에서 색상은 어떻게 사용하나요?
컴포넌트 계층과 무관한 순수 UI 방법론. 색상 시스템은 적용되는 디자인 언어를 따름 색상 역할은 token-level: design token으로 정의 — atoms에서 color token 참조, component-level: molecules/organisms는 token만 사용, 직접 HEX 금지입니다. 주의사항: color token 없이 직접 HEX 사용 금지 — 반드시 token으로 추상화, 각 atomic level은 상위 level의 색을 직접 조작하지 않음.
Atomic Design에 어울리는 폰트 스타일은 무엇인가요?
Atomic Design에는 방법론이므로 폰트는 프로젝트에 따라. 단 타이포도 token 기반으로 정의 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 크기·weight도 type token으로 추상화, atom 레벨에서 type scale 정의 — organism이 임의 변경 금지.
Atomic Design 디자인에서 하면 안 되는 것은 무엇인가요?
Atomic Design에서 피해야 할 것: atom을 건너뛰고 organism 직접 정의 금지, 동일 기능 컴포넌트를 여러 atomic 레벨에 중복 정의 금지.