brunch

매거진 UXUI 스터디

라이킷 14 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 두블링 한윤석 Jun 10. 2023

디자인 시스템 구축을 하고 싶다면? 이것부터 알아야죠!

디자인 시스템 구축을 위한 기본! 아토믹 디자인 방법론

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

디자인 시스템 구축을 진행하면서 디자이너로써 너무 재미있었고 많은 공부를 할 수 있었는데요, 디자인 시스템 구축을 위한 기본적인 지식은 아토믹 디자인 방법론에 대하여 먼저 설명하려고 합니다.

아토믹 디자인 방법론

아토믹 디자인이란?

원소개념

Brad Frost가 만든 Atomic Design 방법론은 명확한 순서와 계층 구조로 강력한 디자인 시스템을 만들기 위한 디자인 방법론 입니다. 이름에서 알 수 있듯이 이 방법론은 모든 물질의 구성이라는 기본 화학 개념에서 파생되었습니다.

화학원리를 설명하면 복잡해지기 때문에 이 방법론을 간단하게 설명하자면 큰 단위에서 그 안의 세부단위(세부그룹)별로 나누는 개념에 대한 내용입니다.

Brad Frost의 아토믹 디자인 방법론은 이 정확한 화학 원리를 기반으로 하며 디장니 시스템에 적용됩니다. 아토믹 디자인 원칙은 인터페이스를 원자라고 하는 더 작은 구성 요소로 나누는데 중점을 둡니다. 그런 다음 이러한 원자는 디자인 시스템 전체에서 다른 모든 컴포넌트의 블록쌓기 역할을 합니다.

이해가 어렵다면 이미지로 함께 보시겠습니다.

sub-atomic > 원자 > 분자

유기체 > 템플릿 > 페이지

아토믹 디자인 레벨은 위와 같은 단계로 이루어집니다.

크게 원자 > 분자 > 유기체 > 템플릿 > 페이지 순입니다.

각 개념 상세보기

원자(Atoms)

기반을 마련했으므로 이제 인터페이스의 레고 블록에 집중할 차례입니다. 화학과 마찬가지로 디자인 시스템의 원자는 더 이상 분해할 수 없는 가장 작은 요소입니다. 여기에는 버튼, 입력 필드, 스위치 등이 포함됩니다. 레고처럼 이러한 가장 작은 단위의 컴포넌트를 결합하여 조금씩 더 큰 단위의 컴포넌트를 만들 수 있습니다.

분자(Molecule)

원자의 컴포넌트를 함쳐 조금 더 큰 컴포넌트를 만들었을때 분자가 됩니다. 원자의 바로 한 단계위로, 여러 원자가 결합된 분자를 얻을 수 있습니다. 이 경우 내가 생각할 수 있는 좋은 예는 카드 요소 입니다. 일반적으로 이미지 블록, 일부 텍스트 콜투액션 버튼으로 구성됩니다. 이 카드를 구성하는 원자는 독립적으로 존재하지만 결합될 때 우리는 약간 더 발전되고 더 복잡한 레이어를 가진 분자를 얻습니다.

유기체(Organisms)

유기체는 주어진 인터페이스 '컴포넌트'의 가장 높은 수준입니다. 유기체는 여러 분자로 구성되어 있기 때문에 식별이 까다로울 수 있습니다. 때로는 완전히 다르며 떄로는 동일한 분자가 여러 번 반복됩니다. 헤더, 메뉴 바, 데이터 그리드 등은 내가 상호 작용한 대부분의 디자인 시스템에서 일반적으로 정의된 유기체입니다.

템플릿(Template)

이제 모든 '컴포넌트'를 정의했으므로 인터페이스 자체의 구조적 레이아웃을 지정할 차례입니다. 디자인 시스템의 템플릿은 유사한 기능을 가진 여러 페이지에 걸쳐 표준 페이지 레이아웃을 정의하는데 도움이 됩니다. 간단히 말해서 템플릿은 제품전체에서 원자, 분자 및 유기체를 구성하기 위한 '표준화된' 레이아웃입니다.

페이지

페이지는 사용자가 완성된 제품에서 보게 되는 것입니다. 템플릿은 페이지의 골격구조로 생각하면 되며 페이지는 맨 위에 있는 살로 이해하면 됩니다. 실무에서는 템플릿이 마스터 컴포넌트, 페이지가 인스턴스로 사용됩니다. 페이지는 여러 템플릿 형태를 취하고 디자이너가 기본 원자와 분자가 획득할 다양한 상태에 대해 생각할 수 있도록 도와줍니다.