본 포스팅은 깃헙 블로그 사용 당시 작성한 포스팅입니다.

아토믹 디자인이 뭔데?

리액트로 무언가를 만들어내면서 굵직한 컴포넌트 단위로 나뉘어진 모습에 제한되는 재사용성으로 아쉬움이 남았는데 최근 아토믹 디자인에 관한 카카오의 문서를 보게 되었다.

마치 하나의 자그마한 부품처럼 컴포넌트들을 나누어 조립을 하는 이 디자인 시스템은 나에게 꽤나 큰 매력으로 다가왔는데, 그 정의는 아래와 같다.

아토믹 디자인이란?

더 이상 분해할 수 없는 input, button과 같은 디자인의 기초 요소(더 이상 나눌 수 없는 컴포넌트)들을 만들고 이것들을 조합해 점점 더 큰 요소로 발전시킨다.

이미지 출처 : https://atomicdesign.bradfrost.com

Atom

더 이상 분해할 수 없는 최소 단위의 컴포넌트로 버튼, 인풋 등의 것이 이에 해당한다.

Molecule

여러개의 atom을 조립한 오직 한 가지 일을 수행하는 단위. 예를 들면 인풋과 버튼을 묶어 입력된 값을 post하는 역할을 한다거나 하는 식의 단위이다.

Organism

여러개의 atom과 molecule을 결합하여 앞선 단계들보다 더 명확한 영역과 역할을 가진다. 예를 들면 헤더, 푸터 등의 단위이다.

Template

여러개의 organism, molecule 로 구성되어있으며 실제 콘텐츠가 없는 와이어 프레임 단위이다.

Page

사용자가 볼 수 있는 실제 콘텐츠를 담고 있는 단위이다.

위의 정의대로 아토믹 디자인을 활용해 최소단위인 아톰을 가지고 개발을 한다면 어떤 것이 좋을까?

일반적으로 사용되는 컴포넌트 개발 디자인의 문제는 컴포넌트의 재사용성이 좋지 않았다는 점이다.

물론 기존의 바닐라 자바스크립트 개발에 비하면 컴포넌트 디자인을 채택한 리액트 본연의 재사용성은 훌륭하나, 사람은 더한 편의를 추구하는 경향이 있다.

이때 아토믹 디자인의 개발이 빛을 낸다.

최소 단위인 아톰으로 잘게 쪼개어졌기 때문에 이 부품들을 적재적소에 잘 조합해서 사용하기만 하면 된다. 또 그렇게 만들어진 molecule 또는 organism 단위의 부품들을 기존 컴포넌트 마냥 사용하면 된다. 마치 이건 레고나 프라모델의 조립방법과 비슷한 듯 하다.

하지만 이렇게 편해보이는 아토믹 디자인에도 단점은 존재한다.

바로 molecule 과 organism 사이의 모호한 정의 때문이다. 이 때문에 누군가에게는 molecule이라고 정의된 것도 누군가에겐 organism일 수 있다. 이로 인해 개발에 지대한 혼선을 야기할 수 있다.

하지만 이것은 팀이 원활한 커뮤니케이션을 통해 사전에 충분히 개념을 정의하고 정리해두면 해결할 수 있는 단점이다.

그런 이유로 혼자 무언가를 뚝딱 만들어야하는 나는 이번 개인사이드프로젝트에는 아토믹 디자인을 우선적으로 사용해볼 생각이다.

마치며

아토믹 디자인은 재사용성을 고려해야하는 많은 개발자들에게 굉장히 좋은 선택지이지 않을까 싶다. 한번 사용해보고 후기 올릴 수 있으면 정리해서 올릴 것이다.