아토믹 디자인 패턴 (Atomic Design Pattern)

  [ 아토믹 디자인이란? ]  

 

"Atomic Design helps to build consistent, solid and reusable design systems"

(Atomic Design은 일관되고 견고하며 재사용 가능한 디자인 시스템을 구축 하는 데 도움이 됩니다.)

 

이 개발 방식은 개발뿐만 아니라 디자인에도 적용되는 설계 패턴입니다.

 

말 그대로 작은 단위의 컴포넌트를 재사용성이 강하고,

단단하게 설계함으로써 점진적이고 지속적으로 개발하기 용이하게 하는 방식입니다.

 

웹 프론트개발에 가장 많이 쓰이는 프레임워크인 Vue, React 모두 컴포넌트 단위로 개발을 진행하기 때문에 이러한 컴포넌트 중심 설계 패턴이 더욱 주목 받게 되었습니다. (Flutter도 마찬가지입니다.)

 

🍅 Atom(원자)

: 하나의 구성 요소, 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용 되지 않아야 함

• #Generic #Abstract
• 원자은 진짜 말그대로 가장 작은 단위의 컴포넌트이다.
• 원자는 어떠한 context가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야 한다.
• 때문에 다양한 state를 다양하게 가지고 있어야하며 추상적이지만 최대한 포용할 수 있게 되어야 설계 되어야 한다. Ex) button: disabled, hover, different sizes, etc.
• 원자는 마진이나 위치값을 가지고 있지 않는다.

🥫 Molecule(분자) : 원자들의 모음

• #LittleComplex
• 원자를 엮어 조금 복잡한 단위의 분자가 생성된다.
• 분자는 분자만의 프로퍼티를 가지고 있을 수 있고 이를 활용해 원자에 기능을 만들어 줄 수도 있다.
• 분자가 원자의 위치값을 지정하기도 한다.

🥫 Organism(유기체) : 분자들의 모음

• #MoreComplex
• 유기체는 분자를 엮어 만들어서 생성되고 때로는 분자가 되지 않은 원자가 엮이기도 한다.
• 유기체가 완성되면 컴포넌트가 최종 모습을 가지게 된다.
• 하지만 여전히 contents에 따라 최대한 재사용성 높게 개발하는 것이 중요하다!
• 유기체는 분자와 원자의 위치값을 조정한다!

📄 Template(템플릿) : 유기체들을 모아 템플릿으로 생성

• #Layout #NoStyling
• 템플릿은 만들어진 유기체와 컴포넌트의 positions, placements을 정해주는 역할을 한다.
• 단, 템플릿에는 Styling이나 Color는 들어가지 않는다.
• 템플릿의 역할은 페이지의 그리드를 정해주는 역할 뿐이다.

🍱 Page(페이지) : 실제 페이지를 구성

• #Final
• 페이지는 템플릿을 이용해서 각 그리드에 컴포넌트를 그려서 디스플레이한다.

  ---

  [ 왜 아토믹 디자인인가? ]  

 

리액트는 컴포넌트를 중심으로 만들어 지는 프레임워크로 컴포넌트의 재사용성이 매우 중요합니다.

중복이 되는 컴포넌트를 공통으로 사용 할 수 있도록 분리 하는 것이 관건인데, 이것은 개발을 진행하다보면 일일이 생각하며 진행하는 것이 어렵습니다. 결국에는 중복되는 코드가 많아지고, 이를 관리하는 것이 어려워 지게 됩니다.

 

그렇기에 개발 초기 단계부터 재사용성이 용이하며, 여러 개의 컴포넌트들을 모아 또 다른 컴포넌트들을 만들 수 있도록(조립) 고민하며 개발하는 것이 중요합니다. 컴포넌트 중심의 아토믹 디자인 패턴은 이러한 리액트의 특성과 잘 맞습니다.

 

어느 프로젝트던 Button과 Input 등은 있기 마련이고, 이에 대한 디자인만 바뀔 뿐이라면 애초에 모든 프로젝트에서 사용 할 수 있는 Button과 Input 컴포넌트를 만들어 놓으면 효울성이 높아집니다.

---

  [ 특징 ]  

• 개발만 이렇게 진행 되서는 안됩니다. (디자인도 이 원칙에 맞춰 진행 해야 합니다.)
• 잘만 구현된다면 계속 재사용 할 수 있는 Legacy Code가 생길 수 있습니다.
• 리액트를 사용한다면 스토리북과 함께 적용하면 더 큰 효과를 낼 수 있습니다.
• 초기 개발 시간이 길지 모르지만 작은 단위의 컴포넌트를 잘 설계 해놓으면 중장기적으로 개발 기간을 단축 할 수 있다.

---

  [ 결론 ]  

 

컴포넌트화, 재사용성과 통일된 스타일, 블록처럼 조합하면 되는 간편함 등

아토믹 디자인 패턴을 리액트 컴포넌트 개발에 도입하게 되면 효율성이 극대화 될 수 있다.

 

아토믹 디자인 패턴을 적용한다 이는 곧 가장 리액트다운 개발이 가능하게 된다.

---

줌코딩의 코딩일기

리액트와 아토믹 디자인 패턴