이것 저것 찾아보다 보게 된 네이버의 설명 영상은 styled component와 story book을 이용한 atomic design에 대해 간략하게 다루고 있습니다. 기존 brad frost가 제안한 아토믹 디자인은 5단계를 가지고 있지만, 영상에서는 의미가 비슷한 부분을 간소화 하여 3단계를 가지고 진행을 했다고 설명합니다.
영상 링크 : https://youtu.be/33yj-Q5v8mQ
아토믹 디자인
컴포넌트 기반으로 웹 페이지를 설계할 때 개발자는 자신의 기준으로 컴포넌트를 나누게 됩니다. 보통 특정 성격을 나타내는 컴포넌트를 묶게 되죠. 하지만, 자신의 기준이라는 상대적인 규칙 때문에 확장이 어려운 컴포넌트가 생기거나 재사용이 어려운 경우가 종종 발생할 수 있습니다.
이럴 때 좀 더 기준이 될 수 있는 규칙이 있다면 도움이 될 수 있을 것입니다.
아토믹 디자인은 화학에서 영감을 얻은 디자인 시스템입니다. 실제로 이 세상의 모든 것은 원자에서 시작하고 그것이 합쳐져 분자가 되고, 더 복잡한 유기체가 되면서 물질을 구성하게 되는데요. 이런 모습을 가지고 와서 컴포넌트를 디자인할 수 있습니다.
아토믹 디자인에서는 컴포넌트를 5단계로 나누고 있습니다. 원자, 분자, 유기체, 템플릿, 페이지로 나누고 있죠.
atom
원자 단계의 컴포넌트는 분해가 불가능한 컴포넌트입니다. 예를 들면 button이나 input같은 기본 html태그들이 있겠죠. 또는 이미지의 크기나 글꼴과 같은 원자의 고유 속성들도 포함할 수 있습니다.
molecule
분자 단계는 여러 원자 컴포넌트를 결합하여 고유한 성격을 가지는 컴포넌트를 말합니다. 하나의 단위로 함께 동작하는 UI 그룹입니다. 예를 들면, 양식 레이블이나, 검색 입력 및 버튼이 있는 검색바와 같은 경우가 있습니다. 위의 그림에서 보이는 원자 컴포넌트를 결합하면 아래와 같은 분자 단계 컴포넌트가 됩니다.
이전에 만든 원자 단계 컴포넌트는 추상적인 의미를 가지고 있다고 할 수 있지만, 분자 단계로 들어서면서 어떤 기능과 목적을 갖게 됩니다. 실제로 레이블은 위의 경우 입력 창의 레이블이라는 성격을 갖게 된 것이죠. 또한 분자 단계 컴포넌트는 간단한 기능만 하는 UI를 제공하기 때문에 단일 책임 원칙(SRP)을 잘 지킬 수 있게 됩니다. 즉, 테스트나 재사용성, UI의 일관성에 도움이 될 수 있게 됩니다.
organism
유기체 단계는 여러 분자, 원자, 다른 유기체가 결합한 조금은 복잡한 UI 요소입니다.
이런 유기체는 하나의 섹션을 형성하게 됩니다.
template
템플릿 단계는 구성 요소를 레이아웃에 배치하고 디자인의 기본 콘텐츠 구조를 표현합니다. 템플릿은 함께 동작하는 모든 페이지 구성 요소를 표시하기 때문에 상대적으로 추상적인 분자와 유기체에 대한 흐름을 제공합니다. 또한, 기본 콘텐츠 구조에 초점을 맞추기 때문에 특정 디자인 패턴을 채우는 콘텐츠 유형에 필요한 뼈대를 제공하게 됩니다.
페이지
페이지는 실제 대표 콘텐츠가 있는 UI의 모습을 보여주는 템플릿의 인스턴스입니다. 예를 들면, 장바구니에 아무 상품도 안담겨 있는 페이지와, 10개의 상품이 담겨있는 페이지 모두 템플릿의 인스턴스라고 할 수 있습니다.
적용은?
현재 진행하고 있는 프로젝트에 적용하고 있지는 않지만, 이후 진행할 프로젝트에서 styled component와 story book을 이용해서 적용해보는 것을 고려하고 있다. 실제로 간단한 연습용 프로젝트들 진행하면서 느끼는 것이 컴포넌트를 분리하는 것이 꽤 어렵고, 이를 좀 더 의미있게 나눌 수 있는 방법 찾고 있었는데, 아토믹 디자인을 이용하면 어느 정도 도움이 될 것이라는 생각이 든다.
출처
이미지 출처: https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole
