[디자인패턴] 아토믹패턴이란?

 

 

프로젝트를 준비하며, 폴더구조를 짜던중 디자인패턴 얘기가 나왔다. 
리액트에 적용시킬 디자인 패턴을 고려하는 중, 최근에 자주 들리던 (?) 아토믹 패턴에 대해 알아보기로 했다.

 

 

 

 

---

 

 

Atomic Design이란?

 

- 화학에서 용어를 빌린 개념을 웹에 적용한 패턴이다.

 

- 웹사이트에서의 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 퍼즐을 조립하듯 사용하여 상위 컴포넌트를 만드는 패턴이다.

 

Atomic Design의 5단계

 

출처 : https://atomicdesign.bradfrost.com/chapter-2/

 

 

1. Atoms

 

 

원자(Atoms)은 인터페이스를 구성하는 기본 블록역할을 한다.

즉, 디자인과 기능의 최소단위라고 볼 수 있다. 

 

ex ) Label , Text ,Button , Icon , input  등  basic HTML elements

 

 

 

2. Molecules

 

 

분자(Molecules)는 원자가 결합된 그룹을 뜻한다.

즉 , 하나의 단위로 함께 작동하는 UI요소의 비교적 단순한 그룹들을 말한다.

분자가 되면 목적을 갖게 되는데, 이때 간단한 UI분자를 만들수록 테스트가 쉬워지고 재사용성이 가능하며, 인터페이스 전체에서 일관성을 갖게 된다. 또한, 단일 책임 원칙을 잘 지킬수 있게된다.

 

ex ) search input , InputForm ,Card , Navigation 등 

 

 

3. Organisms

 

 

원자와 분자를 조합한 유기체(Oranisms)는 비교적 복잡한 UI 구성요소이다.

유기체부터는 명확하게 컴포넌트의 사이즈를 설명하기는 어렵다.

 

ex )

- Card를 여러개의 grid로 관리

- header를 검색 컴포넌트 (분자), 로고 컴포넌트(원자), search bar 컴포넌트(분자) 등으로 관리하는 것을 예로 들 수 있다. 

 

 

4. Templates

 

여기서 부터는 화학용어 비유를 하지않는다!

 

Templates은 여러개의 유기체가 모여있는 단위로 구성요소를 레이아웃에 배치하고, 구조를 명확하게 표현하는 페이지 수준의 컴포넌트이다. 

 

ex ) 

- 여러개의 Card 를 묶어 하나의 템플릿으로 만들기

 

5. Pages

 

 

최종적으로, Pages 는 UI가 어떻게 보여지는지를 결정하는 템플릿이 모인 단위이다. 

 

 

 

참고로 , 기존 5단계에서 3단계로 간소화 하는 경우도 종종 있다.

 

Atom > Modules > Templates

 

(요부분은 팀원분들과 회의 후 결정이 될 것 같다.)

 

 

 

---

 

 

 

Q. 왜 Atomic Design인가?

 

- 리액트를 사용하여 프로젝트를 진행 할 예정이다. 리액트는 컴포넌트 기반의 프로그래밍이기 때문에 아토믹패턴디자인에서의 작업과 적합하다고 생각하였다 . 

 

- 컴포넌트를 단위별로 쪼개기 때문에, UI를 쉽게 수정할 수 있다. 

 

- 레이아웃을 이해하는데 있어 보다 직관적이게 된다.

 

 

주의해야할 점

 

- 리액트 공식문서에서는 , 단일 프로젝트에서 폴더의 중첩은 최대 3-4개로 제한할 것을 권장한다.

 

- 실제 구현을 하다보면 컴포넌트를 나누는데에 있어 애매모호한 부분이 생긴다. 이것을 팀 내에서 규칙을 정하여 만들어야한다.

 

 

 

---

실제 폴더구조를 짜보며 글을 추가해 보아야겠다.