아토믹 디자인 패턴: 컴포넌트 기반 UI 설계의 정석

TUTORIAL

Atomic Design 방법론 완벽 가이드. Atoms, Molecules, Organisms, Templates, Pages 5단계로 확장 가능한 디자인 시스템을 구축합니다.

럿지 AI 팀

2025-01-11

14분

아토믹 디자인 5단계

Atoms

Molecules

:::

Organisms

[]

Templates

[P]

Pages

.Atoms - 가장 작은 단위

아토믹 디자인의 가장 기본 단위입니다. 버튼, 입력 필드, 레이블, 아이콘 등 더 이상 분해할 수 없는 UI 요소입니다.

// Atom 예시: Button 컴포넌트
const Button = ({ children, variant }) => (
  <button className={`btn btn-${variant}`}>
    {children}
  </button>
);

// Atom 예시: Input 컴포넌트
const Input = ({ placeholder, type }) => (
  <input type={type} placeholder={placeholder} />
);

:: Molecules

Atoms를 조합한 작은 컴포넌트 그룹. 단일 기능 수행.

SearchForm = Input + Button

::: Organisms

Molecules과 Atoms의 복합체. 섹션 단위의 UI.

Header = Logo + Nav + SearchForm

Templates & Pages

Templates []

페이지의 레이아웃 구조. 실제 콘텐츠 없이 와이어프레임처럼 구성됩니다.

콘텐츠 배치 정의
반응형 레이아웃
그리드 시스템

Pages [P]

실제 데이터가 적용된 최종 UI. 사용자가 보는 화면입니다.

실제 콘텐츠 적용
동적 데이터 바인딩
최종 사용자 경험

폴더 구조 예시

src/
├── components/
│   ├── atoms/
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Label/
│   │   └── Icon/
│   ├── molecules/
│   │   ├── SearchForm/
│   │   ├── NavItem/
│   │   └── FormField/
│   ├── organisms/
│   │   ├── Header/
│   │   ├── Footer/
│   │   └── Sidebar/
│   ├── templates/
│   │   ├── MainLayout/
│   │   └── DashboardLayout/
│   └── pages/
│       ├── HomePage/
│       └── AboutPage/

도입 효과

코드 재사용률 증가

개발 시간 단축

일관성 유지율