디자인 시스템은 일관성있는 디자인을 위해, 회사 내부에서 만든 디자인 가이드라인이라고 생각하면 편하다.
런칭한 서비스가 여러 방면으로 확장되고, 회사 인력이 많아질 수록, 사용자들에게 일관성있는 경험을 제공하기 위해서는 꼭 필요한 서비스라고 생각한다. 그리고 이것이 나아가, 사용자들뿐만 아니라 개발자들에게도 일관된 경험을 제공하면서 협업에 굉장한 도움이 될 수 있다고 생각한다. ( 조직의 비용, 시간 손실을 줄여줄 수 있다는 것 )
아, 그리고 디자인 시스템은 완성하는 것이 아니고, 계속해서 서비스와 함께 발전하고 확장되어가는 것이다.
오늘은 디자인 시스템 방법론 중 하나인, 아토믹 디자인에 대해서 알아보려고 한다.
Atomic Design은 원자(Atom)에서 영감을 받은 디자인 시스템
아래와 같이, 원자 => 분자 => 유기체 => 템플릿 => 페이지 로 총 5가지 단계로 나뉘어진다.
Atom
가장 작은 단위의 구성요소이다. 그렇기에 가장 기본적인 요소들이 주로 들어간다. 예를 들면, 글꼴, 컬러, 애니메이션, html태그 그리고 추상적인 요소들이 이에 속한다. 기본적이고, 추상적인 요소들이 포함될 수 있기 때문에 이것을 그대로 단일 컴포넌트로 바로 사용하기에는 부족하다. 그렇기에 Atom끼리 결합하여, 다음 단계인 Molecule을 만들어 낸다.
Molecule
앞전에서 설명했듯이, 여러 개의 Atom들이 결합되어 Molecule이 만들어진다. Molecule은 고유한 특성을 가진다. 아래 사진과 같이, 하나의 Form을 만들어 낼 수 있다. 그리고 이 Form은 무언가를 검색하거나, 로그인 기능 등 특정 기능을 수행한다. SRP(Single Responsibility Principle) 원칙으로 인해 특정 기능에 대하여 재사용할 수 있습니다.
단일 책임 원칙(SRP: Single Responsibility Principle)은 다섯 가지 SOLID 애자일 원칙 중 하나입니다.
클래스를 변경하는 이유가 한 가지이기 위해서는 하나의 액터에 대한 책임만 가지고 있어야 합니다.
Organism
organism은 앞 단계보다 좀 더 복잡하고 서비스에서 표현될 수 있는 명확한 영역과 특정 컨텍스트를 가집니다. 이것은 atom, molecule, organism으로 구성할 수 있습니다. 예를 들어 header 라는 컨텍스트에 logo(atom), navigation(molecule), search form(molecule)을 포함할 수 있습니다. atom, molecule에 비해 좀 더 구체적으로 표현되고 컨텍스트를 가지기 때문에 상대적으로 재사용성이 낮아지는 특성을 가집니다.
Template
템플릿은 page를 만들 수 있도록 여러 개의 organism, molecule로 구성할 수 있습니다. 아래 이미지와 같이 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임입니다. 즉, 실제 콘텐츠가 없는 page 수준의 스켈레톤이라고 정의할 수 있습니다.
Page
page는 유저가 볼 수 있는 실제 콘텐츠를 담고 있습니다. template의 인스턴스라고 할 수 있습니다. 예를 들어 장바구니 페이지에 유저가 담은 상품이 없거나 10개를 담는 다양한 template의 인스턴스를 볼 수 있습니다.
실제로 위와 같이, 아토믹디자인을 그대로 적용하면 될 것 같지만 실제로 이 단위로 나누는 기준이 주관적이기 때문에 팀 내에서 기준을 정해야 한다고 한다. 사실 나도 실제로 적용해보지 않아서 이 부분에 대해서는 자세히 얘기할 수 없을 것 같다.
추후에 실제로 아토믹디자인을 적용한 뒤에 겪는 문제점 및 장점에 대해 포스팅할 예정이다.
이미지출처 : https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole
내용 출처: https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/