[React / Next.js] Atomic 디자인 패턴에 대해 알아보자.

참고사이트

* 카카오 FE 기술 블로그

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

해당 페이지의 내용을 담고 있으며, 머릿속에 담기 위해 적어가면서 공부 (끄적.. 끄적..)

 

 

🧩 컴포넌트의 파편화

비슷한 모양 및 기능을 컴포넌트가 여러 개 있다고 생각해보자.

이걸 각기 하나 하나 다 만들어내는 것에 대해서는 구현하면 컴포넌트 파편화라는 제 각각의 컴포넌트가 발생한다.

그럼 유지보수 할 때, 각각의 파편화된 컴포넌트를 찾아서 고쳐야하는 문제점이 발생한다.

 

❓ 왜 쓰는건데?

디자인 시스템내에서 수 많은 수정 작업들이 일어난다.

(현재 동네에서 진행하는 프로젝트도 다들 훌륭하지만 부족한 점이 있는 동네 사람들이다보니 회의를 통해 디자인이 된 후 수정되는 작업도 많다.)

이때, 재사용 및 유지보수를 위하여 생산된 디자인에 대해 컴포넌트를 관리하는데 패턴들을 참고하여 사용하면 컴포넌트 파편화의 문제점을 좀 더 해결할 수 있다.

 

⚛ Atomic Design

아토믹 디자인은 화학적 관점에서 영감을 얻은 디자인 시스템이라고 한다.

모든 것은 atom(원자)으로 구성되어있고 atom들이 서로 결합하여 하나의 molecule(분자)를 이루고, molecule이 결합하여 organism(유기체)로 결합하여 최종적인 물질을 이룬다.

 

따라서, 아토믹 디자인에서는 이 개념을 사용하여 atom, molecule, organism, template, page의 5가지 레벨로 나눈다.

 

 

 

⚛ Atoms

atom은 더 이상 분해할 수 없는 컴포넌트이다. label, input, button과 같은 우리가 흔하게 사용하는 HTML Element 태그(+ 글꼴, 애니메이션, 컬러 팔레트, 레이아웃과 같은 추상적인 개념을 포함)이다.

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

atom은 추상적인 개념을 표현할 수 있는데 이것을 단일 컴포넌트로 사용하기에 어려운 경우가 있다.

따라서, atom을 다른 atom과 결합하여 molecule 혹은 organism 단위에서 여러 단위와 결합하여 유용하게 사용될 수 있다.

-> 단순히 Button 클릭으로 간단한 이벤트, Input으로 입력값 수정 등 기능을 할 수 있지만 이것으로만 확장해서 사용하기엔 제한이 있다.

 

 

 

🦠 Molecule

molecule은 여러 개의 atom을 결합하여 자신의 고유한 특성을 가집니다. (기능이 확장되고 분명해짐) 아래 이미지와 같이 atom들을 결합할 경우, button atom을 클릭하여 form을 전송하는 molecule로 정의 할 수 있다.

molecule의 중요한 점은 한 가지 일을 하는 것이다.

SRP(Single Responsibility Principle) 원칙으로 인해 키워드 전송 기능이 필요한 곳에서 재사용 될 수 있다.

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

 

🧬 Organism

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

이것은 atom, molecule, organism으로 구성할 수 있다.

예를 들어, Header라는 컨텍스트에 Logo(atom), navigation(molecule), search-form(molecule)을 포함할 수 있다.

atom, molecule에 비해 좀 더 구체적으로 표현되고 컨텍스트를 가지기 때문에 상대적으로 재사용성이 낮아지는 특성을 가진다.

 

 

 

💪🏻 Template

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

아래 이미지와 같이 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임이다.

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

 

💁‍♂️ Page

 page는 유저가 볼 수 있는 실제 콘텐츠를 담고 있다.

template의 인스턴스라고 할 수 있다.

예를 들어 장바구니 페이지에 유저가 담은 상품이 없거나 10개를 담는 다양한 template의 인스턴스를 볼 수 있다.