⛳️ 들어가며
아토믹 디자인 패턴이란?
아토믹 디자인 패턴은 컴포넌트 구성 단위별로 체계적으로 관리하기 위한 방법론입니다.
가장 작은 단위인 atoms부터 전체 페이지 단위인 pages까지 기능과 역할에 따라 컴포넌트를 분류합니다.
자세한 개념은 아토믹 디자인 문서에서 확인할 수 있습니다.
적용 배경
처음에는 아토믹 디자인을 "컴포넌트를 작은 단위로 쪼개서 조합한다" 정도로만 이해하고 있었습니다.
이번 프로젝트를 계기로 자세히 찾아보면서, 아토믹 디자인이 컴포넌트의 구조를 관리하는 체계적인 방법임을 알게 되었습니다.
기존에는 hooks, utils, types처럼 역할별로 폴더를 나누는 레이어 방식을 사용했는데, 컴포넌트를 담당하는 components의 구조를 어떻게 개선할지에 대해서 깊게 고민해본 경험이 없었습니다. 이번에는 UI 컴포넌트를 체계적으로 관리하기 위해 아토믹 디자인 패턴을 도입해보게 되었습니다.
🕹️ 적용 과정
아토믹 디자인 기본 구조
아토믹 디자인 패턴에서는 다음과 같이 컴포넌트를 분류합니다.
- atoms: 더 이상 쪼갤 수 없는 가장 작은 단위 (ex. 버튼, 인풋)
- molecules: atoms를 조합하여 간단한 기능 수행
- organisms: atoms, molecules, 다른 organisms로 구성되어 독립적인 섹션을 구성
- templates: molecules, organisms로 조합하여 페이지의 레이아웃
- pages: templates에 실제 데이터를 주입하여 완성하는 페이지
프로젝트 적용 방식
이번 프로젝트는 아토믹 디자인을 기반으로 조금 변경하여 아래와 같이 적용했습니다.
- atoms: UI의 가장 기본 단위, 독립적으로 동작하는 최소 컴포넌트
- molecules: 작은 기능 그룹, atoms보다는 복잡하지만 organisms보다는 단순한 컴포넌트
- organisms: 기능이 많거나 중요한 역할을 하는 컴포넌트
- templates: 특정 도메인에서만 사용하는 섹션 단위 컴포넌트
- pages: templates를 조합하여 최종 화면을 구성하는 컴포넌트
[ 적용 화면 ]
views: templates의 역할
진행과정
초기에 atoms 분리는 수월했지만, 그 외 컴포넌트들의 구분하는 것에 어려움을 겼었습니다.
팀원들과 논의를 거쳐, templates의 역할을 기존 organisms의 역할(페이지 내 섹션 단위)로 분류하게 되었습니다.
templates의 역할이 명확해지면서, 공통 컴포넌트는 atoms, molecules, organisms에, 특정 도메인 전용 컴포넌트는 templates 하위에 정리하는 방식으로 구조를 잡았습니다. 많은 기능과 중요한 역할을 하는 컴포넌트는 organisms에, atoms와 organisms 어디에도 딱 맞지 않는 경우는 molecules에 위치하도록 분류했습니다.
이러한 구조를 적용한 결과, 공통 컴포넌트와 도메인 전용 컴포넌트를 명확히 구분할 수 있게 되었고, 각 컴포넌트의 역할도 쉽게 파악할 수 있었습니다.
💡 느낀점
다양한 자료를 찾아보며 아토믹 디자인을 도입하려면 체계적으로 접근해야한다는 사실은 알고 시작했지만, 직접 적용해본 결과 다음과 같은 점을 깨달을 수 있었습니다.
컴포넌트를 작게 나누는 것 자체보다, 각 컴포넌트의 “역할”을 명확히 정의하는 것이 더 중요하다
해당 프로젝트에서는 컴포넌트의 개수가 많지 않고, 기능 변경이나 추가도 없었기 때문에 큰 혼란없이 적용할 수 있었습니다.
그러나 특히 실무에서는 컴포넌트가 많아질수록 관리 기준이 명확하지 않으면 오히려 혼란을 발생할 수 있다는 점을 느꼈습니다.
또한 여러 명의 개발자가 함께 작업할 경우, 공통된 기준을 세우고 꾸준히 논의하는 것이 필수적이라는 점을 깨달았습니다.
이번 아토믹 디자인 패턴 적용 경험을 통해, 컴포넌트를 체계적으로 관리해야하는 이유를 직접 체감할 수 있었습니다.
