Atomic Design Pattern이란?
프롤로그
프론트엔드에 대한 사전 지식이 전무한 상태에서 Node.js와 React 개발자로 입사하여, 현재 운영 중인 애플리케이션의 유지보수를 담당하게 되었습니다. 프로젝트를 작성하신 선임 개발자님으로부터 코드 구조에 대해 설명을 들으며, 아토믹 디자인 패턴을 공부해보면 코드를 이해하기 쉬울 거라는 조언을 받았습니다.
그렇게 시작한 공부가 이 글로 이어졌습니다. 이 글을 통해 아토믹 디자인 패턴을 조금이라도 이해해 보고자 합니다.
좋은 폴더구조란?
좋은 폴더 구조는 뭘까요? 제가 생각하는 좋은 폴더 구조는, 어떤 개발자가 봐도 역할과 구성이 바로 이해되는, 친절하고 직관적인 구조입니다. 폴더와 파일의 위치만으로도 그 안에 무엇이 들어있을지 짐작할 수 있고, 쉽게 찾아보고 수정할 수 있는 구조가 좋은 폴더 구조라고 생각합니다.
너무 깊게 생각하지 마세요
이제 막 프로젝트를 시작하는 단계라면 파일 구조를 선택하는 것에 있어서 5분 이상 시간을 투자하지 마세요. 앞서 살펴본 접근법 중에 아무거나 선택하고(혹은 자신만의 방법을 찾아내세요) 코드를 우선 작성해보세요.
Atomic Design Pattern
아토믹 디자인 패턴은 UI 컴포넌트를 설계할 때, 작은 단위에서 큰 단위로 점진적으로 조립해 나가는 방식을 뜻한다. 화학의 원자와 분자 개념에서 영감을 받아 만들어진 패턴으로, UI를 작은 구성 요소(Atoms)부터 시작해 점점 더 복잡한 구조로 결합해가는 방식이다.
아토믹 디자인에는 다섯 가지의 단계가 존재한다
- Atoms (원자)
가장 작은 단위의 요소로, 버튼, 입력 필드, 레이블과 같이 독립적으로 사용될 수 있는 기본 구성 요소- Molecules (분자)
여러 원자를 조합해 만든 단위로, 검색 창이나 버튼 그룹처럼 함께 동작하는 작은 UI 요소들을 포함- Organisms (유기체)
여러 분자와 원자가 모여 좀 더 복잡한 UI를 형성하는 단위로, ex) 헤더, 카드 레이아웃 등- Templates (템플릿)
페이지의 기본 구조와 레이아웃을 정의하는 단계로, 다양한 유기체를 배치한 전체적인 화면 구성- Pages (페이지)
실제 데이터를 적용해 최종적인 화면을 보여주는 단계, 사용자가 보는 완성된 페이지
이렇게만 보면 각 단계의 역할이 다소 모호할 수 있지만, 아래 이미지를 통해 좀 더 직관적으로 이해할 수 있습니다.
그렇다면 왜 사용할까?
- 컴포넌트 재활용성을 극대화해 중복된 코드 작성을 줄이고, 개발의 효율을 높일 수 있다.
- 컴포넌트가 명확하게 분리되어 있어 유지보수와 관리가 간편하다.
- 상태를 분산해 적용함으로써 상태 변환에 따른 렌더링 범위를 줄여 성능 최적화에 유리하다.
- 작은 단위에서 큰 단위로 확장해 나가기 때문에, 기능 추가나 디자인 변경에 따른 확장성이 높아진다.
그런데 왜 많이 사용되지 않을까?
- 컴포넌트를 작은 단위로 세분화해야 하므로, 러닝 커브가 있다. 특히 (나와 같은) 초보 개발자에게는 구조가 복잡하게 느껴질 수 있다.
- 컴포넌트가 세분화되다 보니 폴더와 파일이 많아져 관리가 복잡해질 수 있다. 구조가 잘못 잡히면 코드를 찾기 어렵고, 디버깅에도 시간이 많이 소요된다.
- 프로젝트 초기부터 컴포넌트를 체계적으로 구성해야 하기 때문에, 설계 단계에서 더 많은 시간이 요구된다.
마치며
아토믹 디자인 패턴은 멘탈 모델이기 때문에, 모든 컴포넌트를 특정 단계에 맞추려고 하기보다는 컴포넌트의 기능과 역할을 중심으로 유연하게 접근하는 것이 중요합니다. 아토믹 디자인의 단계는 편의성을 위한 개념적 틀이라는 점을 기억하고, 기능 단위로 적절히 조립할 수 있는 크기로 컴포넌트를 구성하는 것이 필요합니다.
평소에 디자인 패턴에 큰 관심이 없었고, 특히 프론트엔드 경험은 전혀 없기에 아직 아토믹 디자인 패턴을 왜 사용하는지, 그리고 다른 디자인 패턴과의 차이점을 완전히 이해하진 못한 것 같습니다. 하지만 언젠가 제가 주도하는 프로젝트를 진행할 날이 올 테니, 그때를 대비해 좀 더 관심을 가지고 공부해봐야 할 것 같습니다.
