# 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

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=atomic-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=atomic-design&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Atomic Design

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

연도

2013

제작자

Brad Frost

#61DAFB

핵심 원칙

1

모듈화

2

재사용성

3

일관성

4

확장성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Atoms - 원자

가장 작은 단위의 UI 컴포넌트

Molecules - 분자

원자들의 조합으로 만든 간단한 컴포넌트

JD
John Doe
john@example.com

Organisms - 유기체

분자들이 모여 만든 복잡한 컴포넌트

My App

Welcome

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

관련 스타일 탐색

Component-Driven Design

재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.

Card-Based Design

정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.

Mobile First

모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.