디자인 시스템 개발 이야기(1) - 아토믹 디자인

디자인 시스템을 만들어 보기 전 디자인 시스템의 원천이라고도 할 수 있는 아토믹 디자인(Atomic Design)에 대해서 먼저 알아보았다. 

물론 아토믹 디자인처럼 원자, 분자, 유기체 이렇게 네이밍을 나눠서 진행하진 않았지만 아토믹 디자인의 결합 방식은 디자인 시스템을 구성하는데 좋은 아이디어를 제공한다고 생각이 들었다. 

 

https://atomicdesign.bradfrost.com/table-of-contents/

Atomic Design | Atomic Design by Brad Frost

 

Atomic Design 방법론

아토믹 디자인은 화확에서 단서를 얻었다. 화학 반응은 화확 방정식으로 표현된다. 자연계에서 원자 원소는 결합을 통해 분자를 형성한다. 그리고 분자가 더 결합하면 유기체를 형성할 수 있다. 

• 원자는 모든 물질의 기본 구성 요소이다. 원자는 가장 작은 기능적 단위이다.
• 분자는 두 개 이상의 원자가 화학 결합으로 함께 유지되는 원자의 그룹이다.
• 유게체는 분자의 집합체로 하나의 단위로 함께 기능한다. 비교적 복잡한 구조는 단세포 유기체부터 인간과 같은 엄청나게 정교한 유기체를 만들어낸다.

아토믹 디자인은 다섯 가지 단계로 구성된 방법론으로, 보다 의도적이고 계층적인 방식으로 인터페이스 설계 시스템을 만든다. 

원자 -> 분자 -> 유기체 -> 템플릿 -> 페이지

 

Atoms(원자)

 

원자가 물질의 기본 구성 요소라면, 인터페이스의 원자는 모든 사용자 인터페이스를 구성하는 기조적인 구성 요소의 역할을 한다.

이런 원자에는 Label, input, Button 과 같은 기본 HTML 요소가 포함되고 더 이상 분해하면 기능이 중단된다.

즉, Atoms은 더 이상 분해되지 않는 기능 단위라고 볼 수 있다. 

 

자연계에서 각각의 원자는 자신만의 고유의 특성을 가지고 있다. ex) 수소 원자는 전자 하나를 포함, 헬륨 원자는 전자 두 개를 포함

이러한 고유한 화확적 속성은 응용 분야에 큰 영향을 미치게 된다. ex) 헨덴부르크 폭발은 비행선이 불활성 헬륨에 비해 가현성 수소 가스로 채워졌다.

마찬가지로 각 인터페이스 원자는 이미지의 크기, 기본 제목의 글꼴 크기와 같은 고유한 속상(프로퍼티)를 가지고 있다. 이러한 속성은 각 원자가 더 광범위한 사용자 인터페이스 시스템에 어떻게 적용되어야 하는지에 영향을 미친다. 

 

 

Molecules(분자)

화학에서 분자는 서로 결합되어 뚜렷한 특성을 가진 원자 그룹이다. ex) 물과 과산화수소 분자는 수소와 산소로 구성되어 있음에도 각각 고유한 특성을 가지고 있다.

인터페이스에서 분자는 하나의 단위로 함께 기능하는 비교적 단순한 UI 요소의 그룹이다.

 

결합하면 각각의 추상적인 원자는 목적을 갖게 된다. 이제 레이블(원자)는 텍스트필드(원자)에 무슨을 입력해야 하는지를 정의한다. 그리고 버튼(원자)를 클릭하면 텍스트필드(원자)에 입력된 양식이 제출된다. 그 결과 검색 기능이 필요한 곳 어디에나 놓을 수 있는 재사용 가능한 구성 요소가 된다.

이렇게 간단한 구성 요소를 만들게 되면 “단일 책임 원칙”을 고수하는데 도움이 된다. 간단한 UI 분자를 만들면 테스트가 더 쉬워지고 재사용성이 촉진되며 인터페이스 전체에 일관성이 증진된다.

 

 

Organisms(유기체)

유기체는 분자, 원자, 또 다른 유기체의 그룹으로 구성된 비교적 복잡한 UI 구성 요소이다.

 

해당 헤더 유기체는 검색 양식(분자), 로고(원자), 텍스트 검색(분자)로 구성되어 있다.

헤더는 고유한 속성과 기능을 가진 여러 개의 작은 인터페이스 부분을 포함하지만, 인터페이스의 독립된 섹션을 형성한다.

 

일부 유기체는 다른 유형의 분자로 구성될 수 있지만, 같은 분자가 계속 반복되는 모습으로 구성될 수 있다. ex) 거의 모든 전자 상거래 웹사이트의 카테고리 페이지는 그리드로 표시된 제품 목록이다.

 

 

분자로부터 더 정교한 유기체를 구축하게 되면 디자이너와 개발자에게 중요한 맥락에 대한 감각을 줄 수 있다. 유기체는 작고 단순한 구성 요소가 작동하는 모습을 보여주고 반복해서 사용할 수 있는 뚜렷한 패턴 역할을 한다. 프로덕트 그리드 유기체는 카테고리 목록, 검색 결과, 관련 제품에 이르기까지 제품 그룹을 표시해야 하는 모든 곳에서 사용할 수 있다.

 

 

Templates(템플릿)

템플릿은 구성 요소를 레이아웃에 배치하고 디자인의 기본 콘텐츠 구조를 표현하는 페이지 수준의 객체이다.

 

 

홈페이지 템플릿은 레이아웃에 적용된 유기체와 분자로 구성되어 있다. 

 

위 이미지의 홈페이지 템플릿은 함께 작동하는 모든 필수 페이지 구성 요소를 표시하여 비교적 추상적인 분자와 유기체에 대해서 맥락을 제공한다. 효과적인 디자인 시스템을 만들기 위해서는 구성 요소가 레이아웃 맥락에서 어떻게 보이고 함께 작동하는지 보여주는 것이 중요하다. 또한 각 부분이 잘 작동하는 전제로 합쳐진다는 것을 증명해야 한다.

 

템플릿의 또 다른 중요한 특징은 페이지라는 최종 콘텐츠보다는 페이지의 기본 콘텐츠 구조에 초점을 맞춘다는 것이다. 디자인 시스템은 콘텐츠의 동적 특성을 고려해야 하기 때문에 제품과 텍스트 구절의 이미지 크기 및 문자 길이와 같은 구성 요소의 중요한 속성을 명확히 설명하는 것이 매우 유용하다. 

 

 

 

Page(페이지)

 

페이지는 실제 콘텐츠가 있는 UI가 어떻게 보이는지 보여주는 템플릿의 특정 인스턴스이다. 대표적 텍스트, 이미지, 미디어를 템플릿에 부어 실제 콘텐츠가 작동하는 모습을 보여줄 수 있다. 

 

 

페이지 단계는 아토믹 디자인에서 가장 구체적인 단계이다. 결국 페이지를 통해 사용자가 상호작용하게 될 것이다. 

사용자가 보는 최종 인터페이스를 보여주는 것 이외에도 페이지는 기본적인 디자인 시스템의 효과를 테스트하는데 필수적이다. 실제 콘텐츠를 통해 디자인 시스템에 적용했을 때 모든 패턴이 어떻게 유지되는지 살펴줄 수 있는 단계이다. 

 

또한 페이지는 템플릿의 변형을 표현할 수 있는 장소를 제공한다. 

• 한 사용자는 쇼핑카트에 품목 1개를 담고 다른 사용자는 카트에 품목 10개를 담는다.
• 앱 대시보드는 일반적으로 최근 활동을 보여주지만, 처음 사용하는 사용자에게는 해당 섹션이 표시되지 않는다.
• 어떤 기사 제목은 40자까지 가능하고, 다른 기사 제목은 340자까지 가능할 수 있다.
• 관리자 권한이 있는 사용자는 관리자가 아닌 사용자에 비해 대시보드에서 더 많은 버튼과 옵션을 볼 수 있다. 

이 모든 예시에서 기본 템플릿은 동일하지만 사용자 인터페이스는 이 동적 특성을 반영하도록 변경된다. 이러한 변형을 고려한 페이지를 만들다보면 보다 탄력적인 디자인 시스템을 만드는 데 도움이 될 것이다. 

 

아토믹 디자인 요약

• 원자는 더 이상 분해될 수 없는 UI 요소, 인터페이스의 기본 구성 요소 역할을 수행함
• 분자는 비교적 간단한 UI 구성 요소를 형성하는 원자의 집합
• 유기체는 인터페이스의 개별적인 부분을 형성하는 비교적 복잡한 구성 요소
• 템플릿은 레이아웃 내에 구성 요소를 배치하고 디자인의 기본 콘텐츠 구조를 보여줌
• 페이지에서는 실제 콘텐츠를 템플릿에 적용하고 변형을 구체화하여 최종 UI를 보여주고 디자인 시스템을 탄력성을 테스트함

아토믹 디자인 설계의 장점

“왜 이런 번거루운 일을 겪어야 할까? “, “아토믹 디자인은 무엇에 좋을까” 아토믹 디자인은 더 효과적이고 의도적인 UI 디자인 시스템을 만드는데 몇 가지 핵심 통찰력을 제공한다.

 

부분과 전체

가장 큰 장점 중 하나는 추상과 구체적 사이를 빠르게 전환할 수 있는 능력이다.

우리는 인터페이스가 원자적 요소로 분해되는 것과 그 요소들이 어떻게 결합되어 우리의 최종 경험을 형성하는지 동시에 볼 수 있다.

아토믹 디자인은 UI의 부분과 전체 사이를 탐색할 수 있는 구조를 제공한다. 그리고 이것은 선형적인 프로세스가 아니라는 점을 알아야 한다. 

각 단계를 생각하지 말고 아토믹 디자인의 단계를 최종 UI와 그 기반 디자인 시스템을 동시에 만들 수 있는 멘탈 모델로 생각하는 것이 좋다. 

 

구조와 내용의 분리

디자인과 컨텐츠를 논하는 것은 닭과 달걀 논쟁과 비슷하다.

컨텐츠는 구조화되어야 하며 구조화는 컨텐츠를 변경하고, 디자인도 컨텐츠를 변경한다. ‘컨텐츠 다음 디자인’, ‘컨텐츠 또는 디자인’이 아니라 ‘컨텐츠와 디자인’이다.

아토믹 디자인은 UI 패턴의 구조와 그 패턴 내부에 들어가는 컨텐츠를 논의할 수 있는 언어를 제공한다. 컨텐츠 구조 템플릿과 최종 페이지 사이에는 명확한 분리가 있지만, 아토믹 디자인은 두 가지가 서로에게 많은 영향을 미친다는 것을 인식해야 한다

 

용어의 의미

modules, components, elements, sections과 같은 용어가 아닌 원자, 분자, 유기체와 같은 용어를 도입하게 되었을까?

base, components, modules과 같은 용어의 문제점은 이름만으로는 계층적 감각을 추론할 수 없기 때문이다. 반면 원자, 분자, 유기체는 화학에 대한 기본 지식만 있으면 누구나 계층을 이해할 수 있다.

하지만 당신의 조직에는 맞지 않은 용어일 수 있다. 조직에 적합한 분류법을 확립한다면 모든 사람이 아토믹 디자인 원칙을 받아들이고 함께 효과적인 작업을 수행할 수 있을 것이다. 어떤 분류법이든 UI 디자인 시스템을 만들기 위해 보다 효과적으로 소통하는데 도움이 되어야 한다.

 

 

아토믹 디자인은 유저 인터페이스를 위한 것이다. 

• 원자: 여러 개의 아이콘, 몇 가지 텍스트 수준 요소, 두 가지 이미지 유형(기본 이미지, 사용자 아바타 이미지)으로 구성되어 있음
• 분자: 바텀 네비게이션 바와 같은 단순한 실용적인 구성 요소를 형성
• 유기체: 사용자 정보, 타임 스탬프, 사진 자체 해당 사진 주변의 동작 등에 대한 정보로 구성, 이 유기체는 사용자가 생성한 사진의 끝없는 스트림에 반복적으로 쌓이면서 인스타그램의 초석이 된다.
• 템플릿: 레이아웃의 맥락에서 구성 요소가 함께 모이는 것을 확인할 수 있음. 컨텐츠 골격, 아바타, 사진, 좋아요 수와 같은 동적 컨텐츠를 강조함
• 페이지: 실제 콘텐츠가 주입된 최종 제품. 이를 통해 기본 디자인 시스템이 함께 모여 UI를 형성함