아토믹 디자인 이란?(Atomin Design)

아토믹 디자인이란?

디자인 시스템을 구조적으로 나누는 방법론이다.

복잡한 UI를 작은 단위부터 조립해 나가도록 설계하는 방식

Brad Frost라는 디자이너가 제안한 이 방식은 아래처럼 5단계 구조로 되어 있다.

구분	설명	예시
Atoms(원자)	더 이상 나눌 수 없는 가장 작은 단위	버튼, 입력창, 라벨, 아이콘
Molecules(분자)	여러 Atom이 모여서 의미 있는 기능을 함	검색창(입력창 + 버튼), 라디오 그룹
Organisms(유기체)	여러 Molecule이나 Atom이 모여 전체 레이아웃 구성	헤더, 카드 리스트, 네비게이션 바
Templages	레이아웃 구조를 정의(데이터 없이)	게시판, 상품 목록 페이지 틀
Pages	실제 데이터를 넣은 완성된 페이지	실제 제품 목록 페이지

 

---

 

Storybook과 아토믹 디자인과의 관련성

Stoybook은 UI 컴포넌트를 문서화하고 테스트할 수 있는 도구이기 때문에 Atomin Design 패턴에 따라 Storybook을 구성하면 훨씬 효율적이다.

 

예시 구조

📁 stories/
├── 📁 Atoms/
│   ├── Button.stories.js
│   ├── Input.stories.js
│   └── Label.stories.js
├── 📁 Molecules/
│   ├── SearchBox.stories.js
│   └── ToggleGroup.stories.js
├── 📁 Organisms/
│   └── Header.stories.js

 

이렇게 구성하면 Storybook에서도 메뉴가 다음 처럼 보이게 됨

Atoms
├── Button
├── Input
Molecules
├── SearchBox
Organisms
├── Header

 

---

 

실무 예시

디자인 시안에 다음과 같은 게 있다고 가정

• 기본 버튼
• 검색창(입력 + 버튼)
• 검색창이 포함된 상단 Header

위 항목을 아토믹 패턴으로 나누면

요소	아토믹 구분	Storybook 파일 예시
버튼	Atom	Button.stories.js
입력창	Atom	Input.stories.js
검색창	Molecule	SearchBox.stories.js
헤더	Organism	Header.stories.js

 

이런 식으로 구성해두면 하나하나 테스트하고 조합해볼 수 있다.

 

---

 

정리

• Atomic Design = UI를 작은 단위부터 조합해 만드는 체계적인 방법론
• Storybook = 그 UI를 문서화하고 조합해볼 수 있는 도구
• 둘을 함께 쓰면 디자인 시스템 구축, 협업, 재사용에 큰 도움이 됨