디자인 시스템 - 아토믹 디자인

아토믹 디자인 개념 정리

화학에서 힌트 얻기

Brad Frost는 디자인 시스템을 만들때 화학에서 영감을 얻었다고 한다.

화학 반응은 화학 방정식으로 표현되며, 화학 방정식은 원자 원소(atomic elements)가 어떻게 결합하여 분자를 형성하는지를 보여준다. - Atomic Design -

여기서 핵심은 자연계는 물질의 가장 작은 단위인 원자(Atom)를 조합하여 더 복잡한 물질을 형성한다는 것이다.

원자는 모든 물질의 기본 구성 요소다. 각 화학 원소는 고유한 특성을 가지고 있으며, 그 의미를 잃지 않고는 더 이상 세분화할 수 없다. (물론 원자는 양성자, 전자, 중성자처럼 더 작은 단위로 구성되어 있지만, 원자는 가장 작은 기능 단위다.) - Atomic Design -

아토믹 디자인 방법론

화학에서 물질계를 원자 원소로 분해하여 설명하는것 처럼 인터페이스도 최소한의 기능 단위로 분해할 수 있다.

Josh Duck의 HTML 요소 주기율표는 이를 잘 보여준다.

따라서 화학의 기본 프로세스를 디자인 시스템에도 적용할 수 있다. 즉 작은 구성요소를 조합하여 더 큰 구성 요소를 만들어 가는 것이다.

아토믹 디자인은 인터페이스 구성 요소를 다음의 5가지로 나눈다.

1. Atoms - 원자
2. Molecules - 분자
3. Organisms - 유기체
4. Templates - 템플릿
5. Pages - 페이지

아토믹 디자인의 구성 요소

원자(atoms) 분자(molcules) 유기체(organisms) 템플릿(templates) 페이지(pages)

원자는 더 이상 세분화할 수 없는 UI 요소로 인터페이스의 기본 컴포넌트 역할을 한다.

분자는 비교적 단순한 UI 컴포넌트를 구성하는 원자의 집합이다.

유기체는 인터페이스의 개별 섹션을 형성하는 비교적 복잡한 컴포넌트다.

템플릿은 레이아웃 내에 컴포넌트를 배치하고 디자인의 기본 콘텐츠 구조를 보여준다.

페이지는 템플릿에 실제 콘텐츠를 적용하고 다양한 변형을 표현하여 최종 UI를 시연하고 디자인 시스템의 복원력을 테스트한다.

원자(Atoms)

원자는 인터페이스를 구성하는 기본 요소다. form, label, input, button 등 더 이상 세분화할 수 없는 기본 HTML 요소를 말하며 기능의 최소단위이다.

자연계의 각 원자는 고유한 특성을 가지고 있다. 수소 원자는 전자를 하나 포함하고 헬륨 원자는 두 개를 포함한다. 이러한 고유한 화학적 특성은 응용 분야에 큰 영향을 미친다(예를 들어, 힌덴부르크 폭발은 비행선에 불활성 헬륨 가스가 아닌 인화성이 매우 높은 수소 가스가 채워져 있었기 때문에 치명적인 결과를 초래했다). 마찬가지로 각 인터페이스 원자에는 이미지의 크기 또는 기본 제목의 글꼴 크기와 같은 고유한 속성이 있다. 이러한 고유 속성은 각 원자가 더 넓은 사용자 인터페이스 시스템에 어떻게 적용되어야 하는지에 영향을 미친다. - Atomic Design -

원자는 모든 기본 스타일을 한눈에 파악할 수 있게 도와준다. 이것은 디자인 시스템을 개발하고 유지하는 과정에서 계속 참조할 수 있는 유용한 참고 자료가 될 수 있다. 그러나 자연 세계의 원자와 같이, 인터페이스 원자는 고립되어 존재하지 않으며 실제로 적용되어 함께 실현된다. - Atomic Design -

분자(Molecules)

분자는 몇 개의 원자를 조합하여 간단한 UI 요소를 만들어 하나의 기능 단위처럼 작동하게 한다.

인터페이스에서 분자는 비교적 간단한 UI 요소 그룹으로, 하나의 단위로 작동한다. 예를 들어, 폼 라벨, 검색 입력 필드 및 버튼은 함께 결합하여 검색 폼 분자를 만들 수 있다. - Atomic Design -

이러한 추상적인 원자들을 결합할 때, 비로소 그들은 목적을 갖는다. label 원자는 이제 input 원자를 정의한다. button 원자를 클릭하면 폼을 제출한다. 결과적으로 간단하고 휴대 가능하며 재사용 가능한 컴포넌트가 만들어지며, 검색 기능이 필요한 곳 어디서든 추가할 수 있다. - Atomic Design -

유기체(Organisms)

유기체는 분자보다 더 복잡한 구성 요소를 말한다. 분자가 기능의 단위였다면 유기체는 영역의 단위가 된다. 예를 들어 검색 폼을 분자라고 한다면 검색 폼이 포함된 헤더 영역은 유기체가 된다.

유기체는 분자와/또는 원자와/또는 다른 기관들로 구성된 비교적 복잡한 UI 구성 요소다. 이러한 유기체들은 인터페이스의 구별된 섹션을 형성한다. - Atomic Design -

유기체 내부의 분자들은 서로 유사한 유형일 수도 있고 상이한 유형일 수도 있다. 물론 동일한 유형의 분자가 반복되는 경우도 있다. 쇼핑몰 사이트의 상품 그리드가 바로 그런 경우다.

분자부터 더 복잡한 유기체까지 점진적으로 구성하는 것은 디자이너와 개발자에게 중요한 맥락을 제공한다. 유기체들은 이러한 작고 심플한 구성 요소가 실제로 작동하는 것을 보여주며 반복적으로 사용할 수 있는 뚜렷한 패턴 역할을 할 수 있다는 것을 증명한다. 제품 그리드 유기체는 제품 그룹을 표시해야 하는 어디에서든 활용될 수 있으며, 카테고리 목록부터 검색 결과, 관련 제품까지 모든 곳에서 사용할 수 있다. - Atomic Design -

템플릿(Templates)

템플릿은 인터페이스의 최종적인 형태를 결정하는 구조다.

템플릿은 페이지 수준의 객체로, 컴포넌트를 레이아웃에 배치하고 디자인의 기반이 되는 콘텐츠 구조를 명확히 표현한다. 이전 예제를 기반으로 헤더 유기체를 가져와 홈페이지 템플릿에 적용할 수 있다. - Atomic Design -

템플릿의 중요한 특성 중 하나는 페이지의 최종 콘텐츠가 아닌 페이지의 기반이 되는 콘텐츠 구조에 중점을 둔다는 것이다. 디자인 시스템은 콘텐츠의 동적 특성을 고려해야 하므로, 이미지 크기와 제목 및 텍스트 단락의 문자 길이와 같은 컴포넌트의 중요한 속성을 명확히 표현하는 것이 매우 도움이 된다. - Atomic Design -

템플릿이 중요한 이유는 다음의 문장이 잘 설명하고 있다.

콘텐츠를 알지 않아도 좋은 경험을 만들 수 있다. 그러나 콘텐츠 구조를 알지 않은 채로는 좋은 경험을 만들 수 없다. 콘텐츠가 어떤 것으로 이루어져 있는지를 아는 것이 중요하며, 콘텐츠가 무엇인지가 아니다. - 마크 볼턴 -

이러한 템플릿 구조는 콘텐츠에 대한 가이드라인의 역할을 하기도 한다.

페이지(Pages)

템플릿에 실제로 콘텐츠를 채워넣은 최종 형태를 말한다. 즉 템플릿의 구체적인 인스턴스이다.

페이지는 현재 디자인 시스템의 최종 평가자 역할을 한다. 페이지를 보고 마음에 들지 않는다면 다시 원자, 분자, 유기체, 템플릿을 반복하여 수정할 수 있다.

또한 페이지는 콘텐츠의 여러 동적인 형태를 표현하는 공간이기도 하다.

예를 들면 다음과 같은 상황을 말한다.

• 장바구니에 상품이 하나 있는 경우와 다수가 있는 경우의 차이
• 대시 보드에서 사용자의 최근 활동 로그가 있는 경우와 없는 경우의 차이
• 문서의 헤드라인에 글자가 얼마나 들어가는지 차이
• 권한에 따른 여러 옵션과 버튼들의 차이

이 모든 예에서 기본 템플릿은 동일하지만 사용자 인터페이스는 콘텐츠의 동적 특성을 반영하여 변경된다. 이러한 변형은 기본 분자, 유기체 및 템플릿이 구성되는 방식에 직접적인 영향을 미친다. 따라서 이러한 변형을 고려한 페이지를 만들면 보다 탄력적인 디자인 시스템을 만드는 데 도움이 된다. - Atomic Design -

아토믹 디자인의 장점

왜 이렇게 복잡한 프로세스로 인터페이스를 구성해야 할까? 아토믹 디자인은 다음과 같은 장점이 있다.

부분과 전체

아토믹 디자인의 계층 구조는 인터페이스를 다양한 관점에서 바라볼 수 있게 해준다. 원자(추상적)수준과 페이지(구체적)수준 사이를 오가면서 전체적인 맥락과 세부적인 디테일 사항을 모두 고려할 수 있게 해준다.

아토믹 디자인이 제공하는 가장 큰 장점 중 하나는 추상적인 것과 구체적인 것 사이를 빠르게 전환할 수 있다는 점이다. 인터페이스를 원자적 요소로 세분화하는 동시에 이러한 요소들이 어떻게 결합하여 최종 경험을 형성하는지 확인할 수 있다. - Atomic Design -

때문에 아토믹 디자인을 단순한 선형적 프로세스로 받아들이면 안된다.

아토믹 디자인은 UI의 부분과 전체를 탐색할 수 있는 구조를 제공하기 때문에 원자 디자인은 선형적인 프로세스가 아니라는 점을 다시 한 번 강조하고 싶다. 버튼과 기타 요소를 개별적으로 디자인한 다음, 모든 요소가 모여 일관된 전체를 형성하기를 바라는 것은 어리석은 일이다. 따라서 아토믹 디자인의 5단계를 "1단계: 원자, 2단계: 분자, 3단계: 유기체, 4단계: 템플릿, 5단계: 페이지"로 해석하지 말자. 대신, 아토믹 디자인의 단계를 최종 UI와 그 기반이 되는 디자인 시스템을 동시에 만들 수 있는 정신적 모델로 생각하자. - Atomic Design -

구조와 콘텐츠의 깔끔한 분리

콘텐츠와 구조는 서로 상호작용하는 요소다. 어느것이 더 중요하다고 할 수 없다.

콘텐츠는 구조화되어야 하고, 구조화하면 콘텐츠가 바뀌고, 디자인하면 콘텐츠가 바뀐다. '선 콘텐츠 후 디자인'이나 '콘텐츠 또는 디자인'이 아니다. '콘텐츠와 디자인'이다. - 마크 볼튼 -

아토믹 디자인을 사용하면 콘텐츠와 디자인을 깔끔하게 분리할 수 있기 때문에 서로간의 상호작용이 원활하게 이루어질 수 있다.

위 사진에서 왼쪽은 UI의 뼈대(템플릿)로 PersonBlock 분자가 반복되는 구조이다. 오른쪽은 실제 콘텐츠가 채워진 모습이다.

실제로 콘텐츠가 채워졌을 때 사람의 이름이 길이가 꼭 1~2줄 이라고 보장할 수는 없다. 만약 길이가 5줄이 넘어가는 일이 발생한다면 어떻게 대응해야할까?

이러한 종류의 문제(콘텐츠와 구조의 상호작용)를 아토믹 디자인에선 대응하기 쉽다. PersonBlock 분자 수준에서 컨트롤이 가능하기 때문이다.

새로운 용어 도입

시스템은 여러 사람들이 함께 공유하는 것이기에 용어를 명확하고 일관성있게 정의하는 것은 중요하다. 하지만 아토믹 디자인은 모듈, 컴포넌트와 같은 익숙한 용어 대신 원자, 분자와 같은 화학 용어를 사용한다. 왜 그런것일까?

아토믹 디자인에 대해 이야기하는 동안 나는 사람들이 방법론의 단계에 대해 다른 이름을 제안하도록 했다. 첫 번째 사람은 "그냥 요소, 모듈, 컴포넌트라고 부르면 어떨까요?"라고 제안하고, 두 번째 사람은 "베이스, 컴포넌트, 모듈로 부르면 어떨까요?"라고 제안한다. 컴포넌트나 모듈과 같은 용어의 문제점은 이름만으로는 위계를 유추할 수 없다는 것이다. 원자, 분자, 유기체는 화학에 대한 기본적인 지식이 있는 사람이라면 누구나 이해할 수 있는 계층 구조를 암시한다. - Atomic Design -

화학 용어는 시스템의 계층 구조를 명확하게 표현하기 위한 수단일 뿐이지 절대적인 것은 아니다. 만약 더 좋은 용어가 있다면 언제든지 바꾸어 사용해도 된다.

아토믹 디자인은 웹에 한정된 것이 아니다

아토믹 디자인은 웹에서 탄생한 개념이지만 그렇다고 웹에서만 사용할 수 있는 것은 아니다. 웹을 넘어서 모든 사용자 인터페이스에 적용할 수 있다.

웹이 아닌 예시를 보여주는 이유는 아토믹 디자인이 CSS나 JavaScript와 같은 웹 전용 기술에 대한 접근법으로 오해되는 경향이 있기 때문이다. 분명히 말씀드리자면, 아토믹 디자인은 CSS나 자바스크립트 아키텍처와 같은 웹 관련 주제와는 아무런 관련이 없다. 1장에서는 디자인과 개발의 모든 측면에서 모듈화를 지향하는 추세에 대해 논의했으며, 여기에는 CSS와 JavaScript가 포함된다. CSS와 자바스크립트에서 이러한 트렌드는 환상적인 것이지만, 아토믹 디자인은 사용자 인터페이스 디자인 시스템을 만드는 데 사용되는 기술과 무관하게 사용자 인터페이스 디자인 시스템을 제작하는 것을 다룬다. - Atomic Design -