[React] Atomic Design Pattern이란?

 

이번 포스팅에서는

React의 Design 패턴 중 하나인

Atomic Design Pattern

에 대해 알아보겠습니다.

 

 

Atomic Design Pattern

다섯 단계로 구성된  Atomic Design Pattern은 개발 개념의 방식뿐만 아니라 디자인에도 적용되는 설계 패턴입니다.

 

Atomic의 어원 그대로 작은( 원소 ) 단위의 컴포넌트를 구성하여 강력한 재사용성과 단단한 설계 바탕으로 지속적이고 점진적으로 개발하기 용이한 디자인 패턴입니다.

 

React만이 아닌 Flutter, Vue 또한 컴포넌트 단위로 개발하기 때문에 이러한 컴포넌트 중심 설계 패턴이 더욱 주목받게 되었습니다.

 

단계 별로 어떤 역할을 갖고 있는지 알아보겠습니다.

 

---

 

Atom

가장 작은 단위의 컴포넌트를 말합니다.

 

원자는 어떠한 Context가 주어져도 해당 Context에 맞는 컴포넌트가 생성될 수 있어야 합니다.

 

다양한 state를 가지고 있어야 하며 최대한 확장성 있고 추상화된 개념을 가지고 있어야 합니다.

( HTML 마크업의 다양한 옵션 등 )

 

원자는 마진이나 위치 값을 가지고 있지 않아야 합니다.

 

 

Molecule

 

Atom( 원자 )를 여러 개 연결한 구성을 가지고 있습니다.

 

분자는 분자만의 속성 혹은 개체 특성을 가질 수 있으며 이를 활용해 원자에 기능을 부여할 수 있습니다.

 

분자는 원자의 마진이나 위치 값을 지정할 수 있습니다.

 

원자에서 분자를 만든다는 것은 "한 가지 특성만 가지고 그 특성을 최대한 잘 나타내는 것"입니다.

 

Organism
​

유기체 또한 분자를 여러 개 엮어 만들어져 생성되며 어떠한 상황에서는 분자가 되지 않은 원자가 엮이기도 합니다.

 

유기체의 완성은 해당 컴포넌트가 최종적인 모습을 가지게 된다는 것입니다.

( Menu Bar, Side Bar 등 )

 

유기체임에도 내용물에 따라 최대한 재사용성이 높게 개발하는 것이 중요합니다.

 

유기체는 분자와 원자의 위치 값을 지정합니다.

 

분자에서 유기체로 구축되기 위해서는 컴포넌트가 독립적이고 기동성 있으며 재사용 가능해야 합니다.

 

 

Template

여러 개의 유기체가 엮어진 그룹화된 유기체를 말합니다.

 

템플릿은 구축된 유기체 간의 포지션, 위치 값을 정해주는 역할을 합니다.

 

하지만 템플릿에서는 Styling이나 Color의 값을 갖지 않으며 엮인 유기체 간의 레이아웃, 디자인을 확인하는 단계입니다.

 

템플릿의 역할은 오직 페이지의 그리드를 정해주는 역할뿐입니다.

 

 

Page

 

페이지는 템플릿을 이용해 각각의 그리드에 컴포넌트를 그려 시각화하는 단계입니다.

 

템플릿의 특정된 인스턴스이며 사용자가 보는 디자인을 정확하고 구체적으로 구현합니다.

 

페이지는 가장 구현도가 높으며 사용자의 대부분의 시간을 소비하고 리뷰가 생기는 단계입니다.

 

따라서 페이지는 시스템의 효율성을 테스트하는 곳이기 때문에 사용자 입장에서 해당 콘텐츠를 살펴봄으로써

분자, 유기체 및 템플릿을 수정하여 시스템을 보다 더 나은 방법으로 개선할 수 있습니다.

 

 

그렇다면 많고 많은 디자인 패턴 중 왜 Atomic Design Pattern을 사용해야 할까요?

 

---

왜 Atomic Pattern??

 

Atomic Design은 Crafting System을 제작하는 명확하고 분명한 방법론을 제공합니다.

 

고객 또는 개발 인원들은 Atomic Design을 통해 실제 디자인이나 시스템의 개념을 더 잘 이해할 수 있습니다.

 

Atomic Design은 추상적인 개념에서 실체화된 눈에 보이는 단계를 체계적으로 제공하며 이로 인해 일관성과 확장성을 높이는 동시에 최종 단계에서는 결과물을 보여주는 시스템을 만들 수 있게 합니다.

 

조각내기보다는 조립하는 개념으로써 유리한 부분만 부각하는 기존의 방식 대신 현실적인 시스템 또는 디자인을 제작합니다.

 

Atomic Design Pattern의 규칙을 준수해 개발하고 구현한다면 지속적으로 사용할 수 있는 장점을 가진 Legacy Code를 생성하게 됩니다.

 

5단계나 되는 디자인 혹은 개발 단계이기 때문에 초기 개발 시간이 길지만 작은( 분자 ) 단위부터 좋은 설계를 한다면 전체적인 개발, 디자인 기간을 단축할 수 있습니다.

 

https://bradfrost.com/blog/post/atomic-web-design/
https://danilowoz.com/blog/atomic-design-with-react

 

Atomic 디자인 패턴의 장점과 특징을 알아보았습니다. 

 

감사합니다.