topic★★★★★난이도 · 약 30분
원자 디자인과 컴포넌트
Atoms → Molecules → Organisms → Templates → Pages. 컴포넌트 라이브러리 설계.
#원자 디자인#컴포넌트#Storybook
왜 배우는가
원자 디자인은 '레고 블록처럼 조합 가능한 UI'를 만드는 사고 체계다. 이 구조 없이 컴포넌트를 만들면 재사용 불가능한 일회용 코드가 쌓인다.
원자 디자인(Atomic Design)은 Brad Frost가 2013년에 제안한 UI 설계 방법론이다. 화학의 원자 → 분자 → 유기체 비유를 빌려 UI를 5단계로 분해한다.
| 단계 | 정의 | 예시 |
|---|---|---|
| Atoms (원자) | 더 이상 쪼갤 수 없는 최소 UI 요소 | 버튼, 인풋, 라벨, 아이콘 |
| Molecules (분자) | 원자 2~3개의 조합 | 검색창(인풋 + 버튼) |
| Organisms (유기체) | 분자들이 모여 독립적 기능 수행 | 헤더(로고 + 네비 + 검색창) |
| Templates (템플릿) | 유기체들의 레이아웃 골격 | 와이어프레임 수준의 페이지 구조 |
| Pages (페이지) | 템플릿에 실제 콘텐츠 삽입 | 최종 사용자가 보는 화면 |
원자 디자인의 실전 함정: 모든 프로젝트에서 5단계를 엄격히 따를 필요는 없다. 핵심은 '작은 것 → 큰 것'으로 조합한다는 사고방식이다. 팀에 맞게 3~4단계로 줄이는 것도 좋다.
컴포넌트 라이브러리 구축 체크리스트 — ① 인벤토리: 기존 UI에서 모든 컴포넌트 스크린샷 수집 ② 분류: 중복·유사 컴포넌트 통합 ③ 네이밍: 기능 기반 이름 부여 (ButtonPrimary, CardProduct) ④ 문서화: Props, 변형(Variant), 사용 가이드라인 ⑤ Storybook: 독립 환경에서 컴포넌트 미리보기.
Storybook은 컴포넌트를 앱과 분리해서 개발·테스트·문서화하는 도구다. 각 컴포넌트의 다양한 상태(기본, 호버, 비활성, 에러)를 Story로 정의하면 디자이너와 개발자가 같은 화면을 보고 소통할 수 있다.