아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기

체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서 알아 보고자 합니다.

 

아토믹디자인은 2010년대 중반부터 논의가 시작된 디자인시스템에 대한 대한 논의에 의해 파생된 개념이라고 볼 수 있습니다. 이 논의는 특히 2017년에 서구권 디자이너들을 중심으로 진행이 되었으며, 주된 토픽으로는 디자인시스템이 디자이너들의 일자리를 없앨 것인가와 같은 논쟁적 요소와 더불어 어떻게 디자인시스템을 발전시킬 수 있을까와 같은 논의가 병행되었습니다(Atomic Design Systems, Jack Strachan, 2018). 그 와중에 2013년 브래드프로스트(Brad Frost) 라는 스타일가이드 관련 경험도가 높은 웹디자이너가 제시한 Atomic Design이라는 개념이 주목받기 시작합니다. 이 내용은 'Atomic Design'이라는 책으로도 정리가 되었으며, 이 책은 온라인으로도 확인할 수 있습니다(https://atomicdesign.bradfrost.com/). 아토믹디자인에 대한 내용은 한글로도 다양한 포스트와 아티클을 통해 소개된 바 있습니다. 이 포스트에서는 해당 개념이 갖는 철학적 논조나 학술적 배경보다는 최대한 쉽게 해당 개념을 이해할 수 있는 방향으로 소개를 하고자 합니다.

 

아토믹디자인(Atomic Design)은 그래서 쉽게 말해서 무엇입니까?

"디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식."

 

기본 개념도: ATOMS(원자들) > MOLECULES(분자들) > ORGANISMS(유기체) > TEMPLATES(템플릿) > PAGES(페이지) 

디자이너마다 차이가 있을 수 있지만 저는 아토믹디자인 관련 리서치를 진행한 결과 아토믹디자인 개념의 정의를 다음과 같이 정의하고자 합니다. 디자인시스템 실행 방법론으로 '디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식'. 이러한 개념을 원자와 분자라는 이해하기 쉬운 생물학적 개념과 비교하여 이해와 응용이 쉽게 표현한 것이 아토믹디자인입니다. 위 기본 개념도가 아토믹디자인을 가장 잘 설명한다고 볼 수 있습니다. 최소 디자인 요소인 ATOMS(원자들)들이 모여 MOLECULES(분자들)을 구성하며, 이것들이 각기 다르게 조합되어 ORGANISMS(유기체)을 생성한다고 것입니다. 

 

최소 디자인 요소들을 ATOMS(원자들)로 파악합니다

ATOMS들이 조합되어 MOLECULES(분자들)을 형성합니다. 이제 보다 구체적 의미를 지니는 UI 요소라고 볼 수 있습니다.

MOLECULES(분자들)이 조합되어 보다 큰 의미 단위인 ORGANISMS(유기체)을 구성합니다

위와 같이 요소들이 조합되어 새로운 요소로 구성되는 식의 프로세스가 이어집니다. ORGANISMS(유기체)이 모여서 TEMPLATES(템플릿)을 구성하게 되는데 실질적인 한 화면이 구성되는 단계라고 볼 수 있습니다. 이 템플릿들이 경우에 따라 여러 형태로 구성되고 실제 컨텐츠와 조합됨으로써 궁극적으로 최종 산출물이라고 볼 수 있는 PAGES(페이지들)을 구성합니다 .템플릿과 페이지가 유사하게 느껴질 수 있는데 템플릿은 양식을 뜻하고 페이지는 그 양식이 적용된 결과라고 보시면 차이를 확인할 수 있을 것입니다. 

 

ORGANISMS(유기체)이 모여 구성하는 실질적 디자인 화면 산출물로서의 TEMPLATES(템플릿)

TEMPLATES(템플릿)들이 상황과 컨텐츠에 맞게 적용되면서 최종적 디자인 산출물인 PAGES(페이지)를 구성합니다

 

아토믹디자인(Atomic Design)은 어떻게 쓰고, 쓰면 뭐가 좋습니까?

"디자인시스템 구성에 있어서 가이드라인으로 활용할 수 있습니다."

 

디자인을 할 때 한 화면의 산출물만을 구성하는 디자인 작업이 아닌, 디자인을 구성하는 요소들을 종합적으로 디자인하여 체계적이면서 관리와 변형이 쉬운 디자인시스템이라고 하는 산출물을 구성하는 데에 있어서 응용하기가 좋은 것이 아토믹디자인입니다. 아토믹디자인이 제시하는 작은 입자들이 모여 큰 디자인의 틀을 구성한다는 개념적 원리를 염두에 두고 디자인시스템을 잡아가는 일종의 방향성을 제시해 주는 가이드라인으로 활용이 가능할 것 같습니다.

아토믹디자인의 이점이라고 한다면 사실 디자인시스템과 같은 작업은 많은 디자인 요소들을 분류하고 이들을 개념적으로 정의하는 일을 수반하는데 이 때 작업자 주관에 지나치게 의존하게 되는 등 분류와 체계화의 개념적 틀이 부재함으로써 작업에 많은 어려움이 발생할 수 있습니다. 이같은 부분을 보완할 수 있는 것이 아토믹디자인 방법론으로, 디자인시스템 구성에 있어서 요소들을 분류하고 조합하는 과정에 있어서 이론적 틀로 활용함으로써 좀 더 원활한 디자인시스템 제작 작업이 가능할 것입니다. 

 

아토믹디자인 적용 사례

"브래드프로스트가 직접 참여한 패턴랩(https://patternlab.io)에서 확인해 보세요"

 

아토믹디자인 책의 저자인 브래드프로스트는 이같은 자신이 제안한 아토믹디자인 개념을 실질적으로 응용한 디자인시스템 제작 도움 툴을 제작하여 배포하였는데, 이것의 이름은 패턴 랩(Pattern Lab)입니다.  웹사이트(https://patternlab.io)에서 관련 내용 확인이 가능하며, 실제 활용이 가능하기도 하지만, 데모 화면 등을 파악함으로써 실질적으로 어떠한 방식으로 아토믹디자인이 실제 디자인에 적용되는 것을 의도했는지에 대한 내용을 확인할 수 있습니다.

 

인용처 및 참고자료

* Atomic Design Systems, Jack Strachan, 2018: https://uxplanet.org/atomic-design-systems-c07074d5f104

* Atomic Design, RYTE WIKI: https://en.ryte.com/wiki/Atomic_Design

* Atomic Design(Blog Post), Brand Frost, 2013: https://bradfrost.com/blog/post/atomic-web-design/

* Atomic Design(Book), Brand Frost: https://atomicdesign.bradfrost.com/

* Atmoic Design, maus x maus, brunch: https://brunch.co.kr/@ultra0034/63