Atomic Design Pattern
아토믹 디자인 패턴은 컴포넌트를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 레벨로 나누어 관리하는 방법론이다. 컴포넌트를 기반으로 하는 리액트, 뷰, 앵귤러 등 다양한 프레임워크 혹은 라이브러리에서 채택할 수 있으며 컴포넌트를 5개의 레벨에 나누어 잘게 쪼개고 결합함으로써 컴포넌트의 재사용성을 향상시킨다. Atom, Molecule, Page 레벨은 어느 정도 확고한 기준이 존재하지만 기본적으로 Atomic Design Pattern에서 컴포넌트 레벨을 나누는 것에 절대적인 기준은 존재하지 않는다. 따라서 프로젝트를 진행할 때 컴포넌트 레벨 구준 기준을 명확하게 확립하는 것이 필요할 것이다.
1. 원자 (Atoms)
원자 컴포넌트는 디자인과 기능의 최소 단위이다. 컴포넌트의 기초가 되며 더 이상 분해될 수 없다. 대표적인 원자 컴포넌트로는 Label, Text, Input Field, Button, Icon 등이 있다.
2. 분자 (Molecules)
원자 컴포넌트 다음 단계로 하나의 단위로 동작하는 컴포넌트들의 단순한 그룹이다. Input Form, Navigation, Card, Search Component (Field + Search Button) 등이 있다. 참고로 개발자들이 가장 많이 작성하는 컴포넌트는 분자 레벨의 컴포넌트라고 한다.
3. 유기체 (Organisms)
유기체는 원자, 분자, 또 다른 유기체들의 그룹으로 이루어지며 개별적인 인터페이스 영역을 차지한다.
4. 템플릿 (Templates)
템플릿은 컴포넌트를 어떻게 배치할 것인지에 대한 설계를 보여준다. 템플릿은 속한 element들의 배치만을 지정한다. 즉 styling, coloring 등의 작업은 템플릿의 하위 레벨에서 개별 컴포넌트가 알아서 처리한다.
5. 페이지 (Pages)
템플릿을 사용하여 구체적인 내용을 그려 디스플레이한다.
장점
- 어플리케이션과 분리된 컴포넌트 개발이 가능하다.
- 컴포넌트 재사용성이 높아진다. 컴포넌트 재사용성이 높아진다는 것은 수정 혹은 확장에 유연하다는 의미, 그리고 디자인에서 일관성을 가질 수 있다는 의미이다.
단점
- 패턴 확립을 위한 과정이 필요하다. (그렇기 때문에 러닝 커브가 존재한다.)
- UI/UX 관점에서 봤을 때는 별 차이가 존재하지 않지만 실제 개발로 들어가면 컴포넌트 레벨이 다른 경우가 존재한다. (만약 아토믹 디자인 패턴을 채택할 때 컴포넌트 분류를 기획자가 담당한다면 이러한 부분에서 이해의 차이가 있을 수 있다.)
- 새로운 인원이 합류할 때 기존의 시스템에 대해 이해하기 위해서는 여러 레벨에 해당하는 모든 컴포넌트들에 대한 이해가 필요하다.
- 사소한 변화가 컴포넌트 계층 관계에 생각보다 큰 영향을 불러일으켜 큰 수정을 불러일으킬 수도 있다.