[Design Pattern] Atomic 패턴

아토믹 패턴은 컴포넌트를 잘 관리하기 위한 방법론으로 View를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages) 순으로 작은 것들을 만들고 결합해 더 큰 단위의 View를 그리는 방법이다.

단계별로 추상적인 것에서 구체화하는 단계를 가진다. 이 과정을 통해 일관성을 가지고 확장하면서 최종 콘텐츠를 보여줄 수 있다.

• 원자 : button, input, font 등 가장 작은 구성요소
• 분자 : 여러 개의 원자 요소의 구성으로, 여기서부터 복잡한 요소를 구성하고 재사용하기 시작함
• 유기체 : 사용자에게 더 의미 있는 정보를 제공하거나 인터랙션하는 정교한 인터페이스를 구성하는 원자 또는 분자의 조합
• 템플릿 : 실제 콘텐츠가 입혀지기 전에 정해지는 와이어 프레임
• 페이지 : 완성된 최종 View

 

1. 원자 (Atom)

button, input, label과 같이 기본 HTML element 혹은 font, color pallet, layout과 같이 추상적인 요소도 포함될 수 있다.

모든 스타일을 한 눈에 보여주므로 디자인 시스템을 개발할 때 유용하게 사용된다.

추상적인 요소일 경우 단일 컴포넌트로 사용하기엔 어려운 경우가 있다.

 

2. 분자 (Molecule)

여러개의 atom을 결합하여 자신의 고유한 특성을 가진다. 아래 사진과 같은 search form 과 같은 예를 들 수 있다.

molecule의 중요한 점은 한 가지 일을 하는 것이다. SRP(Single Responsibility Principle) 원칙으로 인해 키워드 전송 기능이 필요한 곳에서 재사용될 수 있다.

molecule의 SRP는 재사용성과 UI에서의 일관성, 테스트하기 쉬운 조건이라는 이점을 가진다.

 

3. 유기체 (Organism)

Organism은 Atom, Molecule, Organism으로 구성할 수 있다.

앞 단계보다 좀 더 서비스에서 표현될 수 있는 명확한 영역과 특정 컨텍스트를 가진다.

좀 더 구체적으로 표현되기 때문에 상대적으로 재사용성이 낮아진다.

 

4. 템플릿 (Templete)

템플릿은 page를 만들 수 있도록 여러 개의 Organism, Molecule로 구성할 수 있다.

아래 그림과 같이 위에서 만든 컴포넌트들을 넣을 레이아웃 컴포넌트이다.

실제 콘텐츠가 없는 page 의 스켈레톤이라고 정의할 수 있다.

 

5. 페이지 (Page)

page는 유저가 볼 수 있는 실제 콘텐츠를 담고 있다. templete의 인스턴스라고 볼 수 있다.

 

 

 

 

Atomic 구조는 UI 재사용성이 뛰어나서 협업 프로젝트에서 빠른 개발을 할 수 있다.

하지만 디자인 시스템을 구축하기 위한 초기 비용이 많이 들어가고, 로직과 state 들을 낮은 단위의 컴포넌트에서 다루지 못하고 page 단위에서 props로 내여줘야하는 단점이 있다.

 

 

 

---

 

출처 

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그