아토믹 디자인 패턴이란?
아토믹(Atomic)은 원자라는 사전적 의미를 가지고 있는데, 이를 바탕으로 가장 작은 컴포넌트 단위를 정해 상위 컴포넌트를 만들어가면서 재사용성을 최대화하는 디자인 패턴이다. 아토믹 디자인 패턴은 컴포넌트 간 결합도를 낮추고 재사용성을 증가시킨다.
패턴 구성
⚛️ 원자(Atoms)
- 최소 단위로 버튼, 인풋, 레이블 등과 같은 UI 요소
- 더 복잡한 구성 요소를 만드는데 사용
- 상위 컴포넌트에서 재사용할 수 있도록 가장 작고 미니멀하게 작성
🫧 분자(Molecules)
- 하나 이상의 원자가 결합된 구조
- 검색 폼, 로그인 폼 등과 같은 UI 요소
🦠 유기체(Organisms)
- 분자와 원자로 구성된 복잡한 구성
- 분자 단위의 컴포넌트를 관리
- 헤더, 푸터, 사이드바 등과 같이 감싸는 형태
🐛 템플릿(Templates)
- 여러 유기체 또는 분자 단위가 묶인 형태
- 레이아웃과 같은 구조의 요소
- 비즈니스 로직이 없음
🗒️ 페이지(Pages)
- 마지막 단계로 웹사이트 방문시 상호작용 역할
- API 호출 및 실제 비즈니스 로직이 존재
패턴 구조 예시
components/ atoms/ - Button - Input molecules/ - Search organisms/ - Navbar templates/ - LoggedIn views/ - Home
아토믹 디자인 패턴 장점
- 프로젝트 구조 관리 용이
- 구성 요소를 쉽게 재사용
- 구성 요소 스타일 가이드를 보다 의미 있게 설계 가능
아토믹 디자인 패턴 단점
- 아토믹 디자인 패턴은 컴포넌트가 복잡하게 얽혀지므로 복잡도가 증가하게 된다.
- 단위가 낮은 컴포넌트에 버그가 발생하는 경우 포함된 모든 컴포넌트에 영향을 끼친다.
- 잦은 요구사항 변동이 발생하는 경우 수정해야할 컴포넌트 수가 많아진다.
잡담
이전 회사에서 사내 디자인 가이드를 개발하던 당시 아토믹 디자인 패턴은 들어만 봤지 제대로 이해하고 있지 않았다. 작은 단위의 버튼 UI 부터 인풋 등 단계를 쌓아가는 형태로 개발을 진행했는데, 바로 아토믹 디자인 패턴 방식이였다.
경험상 요구사항이 늘어나면 늘어날 수록 작업양은 기하급수적으로 늘어나는 패턴이다. 탄탄한 기획을 바탕으로 요구사항 변동이 낮다면 적합해보인다.
개발하면서 중간중간 리뷰할 때 사용하려고 파이어베이스 호스팅으로 올려놨었는데, 지금 회사는 완성도 못 한 채 개발 사업을 정리했으니 공유해도 무방하겠지..
