22.11.10 : Atomic design pattern

왜 Atomic design pattern을 사용해야 하는가?

 

리액트를 이용한 개발을 하면서, 가장 고민되는 것이 중복되는 코드를 어떻게 재사용 할 것인가? 였다. 큰 프로젝트 일수록 최적화된 코드 재사용이 필수적이므로,  중복되는 코드를 처음부터 재사용 가능한 컴포넌트를 이용하면 재사용 가능한 설계를 할 수 있고, 유지/보수/수정이 쉽게 가능하다. 또한 레이아웃을 이해하기가 쉬워진다.

 

Atomic 디자인 패턴

 

코드 디자인 패턴 중 하나로 컴포넌트를 사용하는 라이브러리와 프레임워크에 모두 사용 가능하다.

가장 작은 컴포넌트 단위를 원자(Atoms)로 설정

이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론

상위 컴포넌트는 순서대로 분자(Molecules), 유기체 (Organisms), 템플릿 (Templates), 페이지 (Pages) 가 존재한다.

최종적으로는 페이지를 관리

 

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

원자 Atoms

 

원자는 버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트이다. 혹은 글꼴, 애니메이션, 컬러 팔레트, 레이아웃 같이 추상적인 요소도 포함될 수 있다. 

모든 컴포넌트들의 기초가 되는 블록이며, 더 이상 분해 될 수 없는 필수 요소다.

label, input, button attom

분자 Molecules

 

두개 이상의 원자로 구성되어 있고, 하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹이다. 

HTML 텍스트 입력 필드, 레이블, 오류 메세지 또는 HTML 텍스트 입력 필드와 버튼으로 구성된 검색 컴포넌트가 있다.

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

 

search form molecule

       

유기체 Organisms

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

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

organism은 atom, molecule에 비해 좀 더 구체적으로 표현되고 컨텍스트를 가져 상대적으로 재사용성이 낮다.

hearder organism

템플릿 Templates

템플릿은 page를 만들 수 있게 여러 개의 organism, molecule로 구성할 수 있다. 아래 이미지와 같이 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임이다. 즉, 실제 콘텐츠가 없는 page 수준의 스켈레톤이다.

 

layour이 적용된 molecule과 organism으로 구성된 template

 

페이지 Pages

 

page는 유저가 볼 수 있는 실제 콘텐츠를 담는다. template의 인스턴스라고 할 수 있다. 

 

여러가지 콘텐츠를 template에 적용해 최종 UI를 보여준다.

 

 

공부하며 느낀 점

일단 코드이 재사용이 가능하다는 면에서 효율성이 극대화 될 것 같고, 큰 프로젝트로 협업을 할 때 아주 유용하게 쓰일 수 있는 디자인 패턴인 것 같다. 하지만 적용되어지기 전에 팀원들과의 충분한 논의가 필요할 것 같다. 

지금 프론트엔드로서는 나 혼자 진행하고있는 사이드 프로젝트인 메신저 앱에 이 아토믹 디자인 패턴을 적용해보고싶은데, 여태까지 여러 프로젝트를 진행하면서 여러가지 카드 컴포넌트들을 만들어 보았다. 그 카드 컴포넌트들이 (특히 CGV 클론코딩) 정말 비슷하게 생긴 카드이지만 태그 요소의 위치들이 조금씩 달라서 다 따로 따로 만들면서, 정말 효율적이지 않다고 느꼈었다. 이번에 비록 프로젝트 규모는 아주 작지만 연습을 해 볼 겸 적용 해보면 좋을 것 같다.

제일 고민되는 것은 페이지 단계에서 실제 콘텐츠를 적용해준다는 것인데 props가 어디까지 가게 될지가 조금 걱정스럽다.

 

이 아토믹 디자인 패턴은 와이어 프레임이 완성되고 난 뒤 어떤 것을 원자 컴포넌트로 만들어 활용할 것인지, 어떤 것이 분자가 될 것인지, 네이밍은 어떻게 할 것인지 (와이어프레임의 네이밍과 코드 네이밍이 같은 것이 나중에 협업 할 때 디자이너와 상의하기 아주 편하다고 한다)하나 하나 정해야해서 뷰만 만들어 놓은 지금 시작 해 보아야 할 것 같다. 

 

tip: 레이아웃과 관련된 스타일은 외부에서 주입하는 것이 좋다. 그래야 재사용성이 높아짐.

 

 

 

 

 

 

 

 

참고

리액트 어플리케이션 구조 - 아토믹 디자인

 

참고

아토믹 디자인을 활용한 디자인 시스템 도입기