Atomic Design Pattern (feat. React, Vue, Flutter)

출처 : https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45?gi=48b4cf4fec10

 

 

현재 프론트엔드 분야에서 제일 잘 나가고 있는 자바스크립트 라이브러리 및 프레임워크를 뽑으라면

누구도 주저없이 React와 Vue를 뽑을 것이다.

 

또한 얼마전 2.0을 발표한 Flutter 역시 모바일 분야에서 그 입지를 다지고 있다.

 

위에서 언급한 3가지( React, vue, Flutter )가 공통적으로 가지는 특징이 있다.

바로 Component 중심 설계 패턴으로 되어 있다는 것이다.

 

예전의 UI 개발은 하나의 페이지를 통으로 설계하는 방식이 대부분이였다.

이는 기능별 재사용성 및 페이지 상태에 따른 .class 분기나 CSS 상속 등을 고려하여 작업했다.

 

하지만 컴포넌트 중심 설계 패턴 라이브러리와 프레임워크들이 유행하면서

컴포넌트들을 잘 쪼개서 설계하고

이를 합쳐 하나의 페이지를 만드는 방식으로 UI개발 패러다임의 전환이 일어났다.

 

 

 

 

1. Atomic Design 방법론이란?

---

Atomic Design은 화학의 개념을 웹에 도입하여 인터페이스를 세분화한 디자인 방법론이다.

 

화학에서 유기체를 분자로 나눌 수 있고 분자는 다시 원자로 나누는 환원주의적 철학을

프로그래밍 요소로 변환한 것이다.

 

출처 : https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45?gi=48b4cf4fec10

 

기본적으로 ATOMS(원자들) -> Molecules(분자들) -> Organisms(유기체) -> Templates(템플릿) -> Pages(페이지)

로 구성하여 설계한다.

 

 

 

 

 

2. Atomic Design의 구성요소

---

 

1) Atoms

• 화학에서처럼 가장 작은 단위의 컴포넌트이다( 물론 화학에는 양성자, 중성자, 전자 등이 또 존재하지만... )
  
  
• 가장 기본이 되는 요소이기 때문에 많은 가능성을 가지고 있어야 한다.
  
  계속해서 화학을 예로 들어보면
  수소 원자만 해도 수소 두개가 합쳐져 수소기체가 될 수도 있고 산소 원자와 합쳐져 물이 될 수도 있다.
  이처럼 수소원자 온도, 압력 등의 환경에 따라 여러가지로 변할 수 있다.
  
  개발에서도 마찬가지이다.
  원자로 만들어지는 컴포넌트는 어느곳에 들어갈 수 있도록 다양한 state가 포함되어 만들어져야 한다.
  단순 Input 태그만 하더라도 그 안의 타입이 password인지 text인지,
  또는 입력을 할 수 있는지, disable 시킬 것인지를 폭넓게 고려해서 만들어야 한다.
  
  
• 고유의 특성만을 가지고 있어야 한다.
  
  화학에서 원자는 각 원자의 고유한 특성을 가지고 있지만 원자끼리 합쳐져 분자가 됬을때
  물질의 특성을 띄게 된다.
  
  개발에서도 원자 컴포넌트들은 해당 컴포넌트가 가지는 고유 역할만을 특징으로 가지고
  CSS적인 요소가 변할 수 있도록 설계되어야 한다.
  
  
  

  

 

 

 

 

2) Molecules

• 원자들이 합쳐져 조금 복잡한 기능을 하는 컴포넌트이다.
  
  물 분자는 가운데에 산소원자가 위치가 하고 양옆에 수소원자 2개가 동일한 각도를 가지고 위치한다.
  이처럼 분자 컴포넌트도 원자들에게 기능 및 CSS적인 요소를 줄 수 있다.
  
  분자만의 특성들을 가지고 있지만 재사용성을 생각하여 개발하는 것이 중요하다.
  
  
  
  

 

 

 

3) Organisms

•  분자들을 합치거나 때로는 분자와 원자를 합쳐서 생성하는 컴포넌트이다.
  
• 유기체가 완성되면 하나의 기능을 수행할 수 있는 컴포넌트가 완성된다.
  
  
• 유기체 하나를 너무 특화시키기 보다는 재사용성을 고려하는 것이 좋다
  
  물분자들이 모여서 만들어진 물은 여전히 설탕을 녹여 설탕물이 될 수 있고
  소금이 녹아 소금물이 될 수도 있다.
  
  
  
  

  

4) Template

• 템플릿은 화학의 은유를 깨고 유기체들의 레이아웃을 잡는 역할을 한다.
  이는 곧 페이지의 그리드를 정해주는 것이다.
  
  

  

5) Pages

• 마지막 단계로 템플릿을 이용하여 각 그리드에 컴포넌트를 그려 페이지를 완성한다.
  
  

  

 

아래는 인스타그램을 예시로 작성된 Atomic Design 이다.

 

3. 장단점

---

장점

• 컴포넌트 중심의 환원주의적 사고가 React, Vue, Flutter 등과 잘 어울린다.
• 여러 명의 개발자가 같이 개발할때 협업이 용이할 수 있다. ( 일관된 컴포넌트 관리체계 수립 )
• 신규 투입자나 주니어 개발자가 페이지 레이아웃을 이해하는데 소요되는 시간이 적다.
• 잘 설계되면 가독성이 올라간다.
• 재사용 가능한 컴포넌트가 많은 큰 규모의 프로젝트에서 개발생산성을 높일 수 있다.
  
  

단점

• 아직은 시장에 기존 마크업 방식의 디자인이 익숙한 디자이너들이 많아 개발자의 역할이 많아질 수 있다.
• 일관성 있는 컴포넌트 개발이 이뤄지지 않으면 코드가 산으로 갈 수 있다.
• 재사용 컴포넌트가 많이 존재하지 않는다면 초기 시간이 많이 들 수 있어 개발 생산성이 떨어진다.

 

 

코멘트

StoryBook과 함께 컴포넌트를 잘 설계한다면 뛰어나 React, Vue 프로젝트 기반이 될 수 있다.

 

참고문서

https://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces

Atomic Design Methodology | Atomic Design by Brad Frost