Atomic Design Pattern의 Best Practice 여정기

출처: https://yozm.wishket.com/magazine/detail/1531/

---

📌 한 줄 요약

Atomic Design은 엄격한 규칙이 아닌 멘탈 모델이며, 프로젝트 특성에 맞게 하이브리드로 변형해서 쓰는 것이 Best Practice다.

---

1. Atomic Design이란?

Brad Frost가 화학 개념을 UI 설계에 적용한 5단계 계층 구조

계층	설명	예시
Atoms	더 이상 쪼갤 수 없는 최소 단위	Button, Input, Icon
Molecules	Atoms 조합으로 하나의 기능 수행	SearchBar
Organisms	Molecules + Atoms 조합, 의미 있는 영역	Header, Footer
Templates	데이터 없는 최종 레이아웃 뼈대	HomeTemplate
Pages	실제 데이터가 결합된 최종 화면	HomePage

핵심: 선형 프로세스가 아니라, UI를 "전체이자 부분의 모음"으로 바라보게 해주는 사고 도구

---

2. 도입 후 마주친 문제들

❶ Molecules vs Organisms 경계 모호

• 실제 컴포넌트는 재사용 범위가 다양해서 분류가 애매함
• 사람마다 기준이 달라 팀 내 혼선 발생

❷ 계층만으로는 부족

• 도메인/기능별 구분도 필요 (Header, Footer, 검색 영역 등)
• 5단계만으로는 현실의 복잡성을 담기 어려움

❸ Template vs Pages와 데이터 바인딩 불명확

• 상태관리(Redux, Riverpod 등)와 함께 쓸 때 역할 경계가 흐려짐

❹ 고민 유발 구조의 역설

"어디에 넣을지 고민하게 만드는 구조는 좋은 구조가 아니다"

---

3. Best Practice: 하이브리드 접근법

기본 원칙

• Atomic 계층 구조 유지 + 의미론적(도메인) 구분 추가
• 기획/디자인 용어와 개발 폴더명 통일

폴더 구조 예시

/components
  ㄴ /공통            ← 뷰 컴포넌트 (다른 프로젝트에서도 재사용 가능)
      ㄴ /atoms
      ㄴ /molecules
      ㄴ /organisms
  ㄴ /일정관리         ← 비즈니스 컴포넌트 (이 프로젝트 전용)
      ㄴ /molecules
      ㄴ /organisms
      ㄴ /templates

뷰 vs 비즈니스 컴포넌트 구분

구분	특징	예시
뷰 컴포넌트	Props 기반, 외부 의존 없음, 재사용 가능	Input, Checkbox, Modal
비즈니스 컴포넌트	상태관리와 결합, 프로젝트 전용	일정 상세 팝업

계층 판단 기준 (뷰 컴포넌트)

Atoms      → 외부 import 없음
Molecules  → 다른 컴포넌트를 import함 (예: SelectBox = Input + Dropdown)
Organisms  → 독립적으로 동작하는 단위 (예: Modal Popup)

---

4. 결론

1. Atomic Design은 엄격한 규칙이 아닌 이해 도구로 활용
2. 팀의 기획·디자인·개발 용어를 통일해서 폴더명에 반영
3. 뷰/비즈니스 컴포넌트를 먼저 분리한 뒤 Atomic 계층 적용
4. 폴더 구조는 단순 정리가 아닌 팀의 사고체계를 반영하는 것

"분류 기준을 많이 만들어 두고, 좋은 이름을 붙이고, 명확한 규칙을 만드는 것" — 좋은 폴더 구조의 조건