Atomic Design Pattern

리액트를 사용해서 프론트엔드 개발을 하고 있는데 컴포넌트를 어떻게 통일성있고 직관적으로 정리를 해야 팀원들과 소통을 할 때 편할까라는 의문으로 컴포넌트 정리방법을 공부를 하였다.

 

버튼의 통일성이 없으면 하나의 버튼이라도 위치와 역할에 따라서 폰트 크기, 배경색, 테두리의 둥글기 등이 페이지마다 다를 수 있다. 이렇게 된다면 개발시간이 오래걸리고 팀원들과의 소통에도 어떤 버튼인지를 설명하는 시간이 필요하여 불필요한 대화시간이 길어진다.

 

명확한 컴포넌트 설계 기준이 필요한 순간이다.

 

Atomic design

위와 같은 문제는 디자인 시스템으로으로 해결 가능하다.

디자인 기초 요소들을 만들고 공통 컴포넌트를 만들면 된다.

아토믹 디자인은 다음과 같이 단계별 기준을 가지고 있습니다. 단계별로 추상적인 것에서 구체화하는 단계를 가집니다. 이 과정을 통해 일관성을 가지고 확장하면서 최종 콘텐츠를 보여줄 수 있다.

https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

 

1) Atom

atom은 더 이상 분해할 수 없는 기본 컴포넌트이다. label, input, button과 같이 기본 HTML element 태그 혹은 글꼴, 애니메이션, 컬러 팔레트, 레이아웃과 같이 추상적인 요소도 포함될 수 있다.

 

 

 

 

2) Molecule

molecule은 여러 개의 atom을 결합하여 자신의 고유한 특성을 가진다.아래 이미지와 같이 atom들을 결합할 경우, button atom을 클릭하여 form을 전송하는 molecule로 정의할 수 있다. molecule의 중요한 점은 한 가지 일을 하는 것이다. SRP(Single Responsibility Principle ;하나의 객체는 반드시 하나의 동작만의 책임을 갖는다) 원칙으로 인해 키워드 전송 기능이 필요한 곳에서 재사용될 수 있다. molecule의 SRP는 재사용성과 UI에서의 일관성, 테스트하기 쉬운 조건이라는 이점을 가진다.

 

 

3) Organism

organism은 명확한 영역과 특정 컨텍스트를 가진다. 또한 atom, molecule에 비해 상대적으로 재사용성이 낮다.

이것은 atom, molecule, organism으로 구성할 수 있다. 예를 들어 header 라는 컨텍스트에 logo(atom), navigation(molecule), search form(molecule)을 포함할 수 있다.

 

 

4) Template

템플릿은 page를 만들 수 있도록 여러 개의 organism, molecule로 구성된다. 아래 이미지와 같이 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임입니다.

 

5) Page

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

 

 

참고로 아토믹 디자인의 각 단계는 선형(linear) 프로세스가 아니다.

button과 기타 요소를 따로따로 디자인한 다음 모든 것이 합쳐져 하나의 응집력 있는 전체를 만드는 것이 아니다. 즉, 1. atom, 2. molecule, 3. organism .. 이렇게 스텝 별로 나아가는 방법론이 아니다.

오히려 UI를 응집력 있는 전체와 일부분에 대한 콜렉션으로 생각할 수 있도록 도와주는 멘탈 모델이다.

 

아토믹 디자인의 문제점

아토믹 디자인 단위를 나누는 기준은 주관적이기 때문에 팀원들간에 이 기준을 정해야한다.

내가 참고한 카카오블로그에서는 3가지 문제점을 겪었다고 하였다.

 

Molecule과 Organism 을 나누는 기준의 주관성

 

molecule은 atom으로 구성되어 SRP에 따라 1가지 책임으로 기준을 나뉘고

Organism은 atom, molecule, organism으로 구성되어 서비스에서 Layout을 기준으로 나뉘어 구분하였다고 하였다.

 

위 기준이 애매한 경우 팀원들과 상의 후 결정했다.

 

Organism을 나누는 기준

아래의 그림처럼 Organism UI에서의 영역이 주관에 따라 달라져서 여러 가지 방식으로 해석 될 수 있다.

A보다는 B와 같이 공통된 책임에 따라 컴포넌트를 묶으면 좋다. 예를 들어 CommentListToolbar 컴포넌트의 경우 댓글 데이터를 다루는 책임을 가지고 있다. 또한 Comment 컴포넌트는 레이아웃이나 Comment를 리스트로 표현할 때 여백 처리를 쉽게 할 수 있습니다.

 

약간 다른 Organism이 있을 때 중복 컴포넌트가 생기거나 불필요한 Props의 증가

아래의 사진처럼 Comment의 댓글 아이콘, 댓글 개수 영역이 빠지거나 아래와 같이 프로필 사진, 닉네임, 댓글 작성일이 1줄로 보여야하는 요구 사항이 추가된다면 추가로 props를 내리거나 비슷한 컴포넌트를 만들어야한다. 

이런 경우에 대해서 organism 내에서 compound 컴포넌트를 이용한 해결책을 찾을 수 있다. compound 컴포넌트를 통해 컴포넌트 구조에 유연하게 대처할 수 있다. 꼭 compound 컴포넌트가 아니더라도 organism 정의를 다시 하거나 다른 단위의 아토믹 컴포넌트로 재정의하여 해결할 수도 있다.

 

 

 

참고블로그

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/