아토믹 디자인(Atomic Design)

아토믹 디자인(Atomic Design)

아토믹 디자인을 설명하기에 앞서...

구글(Google)이 '머터리얼 디자인(Material Design)'이라 불리는 디자인 가이드라인을 공개한 이후, 디자인을 언어화하여 그 법칙성을 시스템으로 운용하는 접근법이 웹 개발에 널리 퍼지게 되었습니다. 물론 이전에도 인터페이스를 패턴으로 다루는 방법과 관련한 많은 해설서가 있었습니다. 심지어 1970년대에도 넓은 의미의 디자인 영역 관련 서적은 있었습니다. 따라서 웹 사이트 제작에서도 '컴포넌트' 단위가 중요해졌으며, 이 때문에 리액트의 특징 중 하나인 '컴포넌트 기반(Component-Based)'에도 반영되었습니다.

이러한 흐름 가운데 웹 디자이너 브래드 프로스트(Brad Frost)는 '아토믹 디자인'을 주장했습니다. 그의 주장 자체는 머터리얼 디자인이 본격적으로 알려지기 이전부터 있었으므로 특별히 앞선 것은 아닙니다. 그러나 이 사고방식은 현대의 웹 제작 접근법과 매우 잘 어울리기 때문에 주목을 받게 되었습니다.

과거의 웹 사에트와 비교하면 지금은 웹에 접속하는 환경도 다양해져 화면 크기는 물론, 브라우저의 종류나 화면 안에서 사용하는 UI도 훨씬 많아져서 개발 작업이 복잡해졌습니다. 아토믹 디자인은 웹 제작에서 구축이나 유지 보수를 떠받치는 설계를 말하며, 이름 그대로 화학 원리에서 힌트를 얻은 것입니다. 예를 들어, 잘 알려진 물의 화학반응은 수소와 산소가 결합하여 물이 되는 것입니다.

이렇듯 자연에서는 원자가 결합하여 분자가 되고, 분자가 결합하여 더욱 복잡한 사물을 형성합니다. 이와 같은 화학 원리에 의해 우리가 생활하는 세상에는 풍부한 사물들이 생겨납니다. 이와 같은 프로세스를 사용자 인터페이스 설계와 개발에 적용함으로써 다양해지는 웹 개발 환경에서 튼튼하고 고품질의 UI를 일관성 있게 제공할 수 있게 되었습니다. 이처럼 디자인을 시스템화하면 더 효율적인 팀 개발이 가능하고 워크플로(Work Flow)를 확립할 수 있습니다.

인쇄물과 달리 웹은 끊임없는 업데이트가 필요합니다. 그러므로 디자인에도 설계 개념을 도입하여 확장성과 유연성이 높은 UI를 만들도록 합시다.

아토믹 디자인의 기본 개념

이전에는 웹 사이트 디자인을 만들 때 페이지 단위로만 모크업(mock-up: 실물모형)을 만드는게 주였습니다. 그러나 아토믹 디자인에서는 '틀(페이지)'과 '부품(컴포넌트)' 2가지 수준으로 나누어 UI를 파악하는 것이 기본적인 개념입니다. 즉, 컴포넌트를 조합하여 다양한 인터페이스나 템플릿을 구축하는 방법론입니다. 리액트와 비슷한 부분이 있는데, 디자인 영역에서도 비슷한 방법이 효과적이라는 것을 알 수 있습니다.

컴포넌트를 이용하는 가장 큰 장점은 다시 사용할 수 있다는 데 있습니다. 웹에서는 특정 인터페이스를 다양한 곳에서 여러 번 사용하는 경우가 많습니다. 예를 들어, '보내기' 버튼은 웹 사이트 안의 다양한 폼과 함께 사용되고, 계정 정보에 나타나는 '사용자 아이콘'은 로그인 된 상태라면 여러 곳에서 표시됩니다. 컴포넌트를 활용한다는 것은 효율이나 일관성과 깊은 관계가 있으므로 사용자가 제품을 편리하게 이용하는 데 있어 빼놓을 수 없는 부분입니다. 예를 들어, '보내기' 버튼이나 '사용자 아이콘'이 제각각이라면 유지 보수 작업이 무척 곤란해질 것입니다. 이뿐만 아니라 사용자에게 혼란을 주는 서비스가 될 가능성도 있습니다.

그렇다면 컴포넌트는 어떻게 활용하는 것일까요? 아토믹 디자인에서는 컴포넌트 활용을 실현하고자 페이지와 컴포넌트를 다음과 같은 단위로 나눕니다. 그리고 각각 정해진 역할을 다르게 하여 디자인 구조를 명확하게 만듭니다. 이는 특히 팀 개발시 위력을 발휘하여 팀 전원이 동일한 시선으로 UI 디자인을 볼 수 있습니다.

아토믹 디자인은 아래 그림처럼 5단계로 분류하며, 서로 다른 특징을 지닙니다. 

아토믹 디자인 방법론 다이어그램 by Brad Frost

(출처: https://bradfrost.com/blog/post/atomic-web-design/)

Atoms

Atom(원자)은 UI를 구성하는 요소 중 가장 작은 요소입니다. 원자 하나로는 명확한 기능을 갖지 못하며 더 적게 나눌수도 없습니다. 먼저 대표적인 Atom 요소들을 보겠습니다.

버튼(button)	라디오 버튼 (radio)	입력 영역(text, textarea)
제목(label, h1)	타이포그래피	아이콘
체크박스(checkbox)	색 팔레트

Atom은 웹 사이트를 구축할 때 기본이 되기 때문에 가장 중요한 요소입니다. 하지만 이 요소들은 무언가를 만들 때 필요한 부품이므로 각 요소 하나하나는 구체성이 없다는 것을 알 수 있습니다. 따라서 이를 일관성있게 작성하는 것이 웹 사이트의 톤과 매너 통일과 직결될 수 있습니다. 또한 이 요소들을 한눈에 훑어봄으로써 전체 디자인 요소를 조망할 수 있습니다.

검색 폼으로 예를 들어보겠습니다. 간단한 검색 폼은 제목, 입력영역(text 혹은 textarea), 전송 버튼 이렇게 3개로 분할할 수 있습니다. 이 3가지를 Atom이라 합니다. 만약 제목, 입력영역이 없고 버튼만 있다면, 버튼을 눌렀을 때 사용자 입장에서는 무슨 일이 일어날지 알 수 없습니다. 또한 입력영역만 있다면 무엇을 입력해야 할지 모를 것입니다. 이는 Atom이 추상적인 요소이기 때문이며 ,따라서 Atom을 여러개 조합해야 비로소 기능을 하게 됩니다.

한편 Atom에는 글꼴 크기 등 구체적인 속성을 포함합니다. 이는 자연계의 원자에도 각각 포함된 전자의 수가 다른 것과 같은 맥락으로, 각자가 특징을 갖는다는 것을 뜻합니다. 이는 이후 구성될 UI가 어떤 특징의 구성 요소로 성립될 것인지에 영향을 줍니다.

(예시 그림)

Molecules

Molecules(분자)는 여러 개의 Atom을 조합해서 형성한 것입니다. Molecules는 UI에 의미를 부여하기 때문에 UI를 어떻게 사용할 것인가를 구체적으로 나타냅니다. 단, 재사용성은 유지된다는 것이 핵심입니다.

위에서 얘기한 검색 폼을 예로 들어보겠습니다. 제목, 입력영역, 버튼은 각자 Atom이지만, 이 3개를 조합한 상태를 Molecules라 합니다. Atom과 Molecules는 이러한 관계를 가지고 있습니다. Atom일 땐 무엇을 의미하는지, 어떤 용도로 쓰이는지 알 수 없었습니다. 하지만 Molecules가 되면 제목을 통해 무엇을 입력해야 할지 알 수 있고, 전송버튼을 누르면 입력한 내용이 전송될 것이란 일련의 흐름을 생각해 볼 수 있습니다. 그래서 Molecules는 Atom보다 더 구체적인 인터페이스가 된다고 얘기할 수 있습니다.

하지만 이런 검색 폼도 여러 페이지에서 다시 이용할 수 있는 부품입니다. Molecules 컴포넌트의 특징은 용도가 명확하면서 재사용성이 있다는 것 입니다. 많은 Atom을 조합하여 복잡한 Molecules를 만들면 재사용성이 어려워지므로, 가능한 한 단순한 상태로 만드는 것이 좋습니다.

(예시그림, 오븐에서)

Organisms

Organism(유기적 조직체)은 앞서 설명한 Atoms나 Molecules를 이용하여 만듭니다. 반드시 순서대로 구성할 필요는 없으며, Organism이 직접 Atom를 참조할 수도 있습니다. 지금까지 구성요소와는 달리 Organism은 보다 더 복잡한 UI이기 때문에 재사용성을 크게 요구하지 않는다는 점이 Atom, Molecules와 다른 점입니다.

대표적인 Organism UI 예시로는 많은 웹페이지에서 사용하는 헤더(Header)나 푸터(Footer)를 들 수 있습니다. 아래 그림의 헤더는 위에서 얘기한 검색 폼(Molecules), 로고(Atoms), 전역 네비게이션(Molecules) 3개의 구성 요소로 이루어진다는 것을 알 수 있습니다.

(오븐에서 작업하자ㅏ)

또한 특정 요소를 반복해서 Organism을 사용할 때도 있습니다. 아래 그림과 같이 쇼핑몰사이트 등에서 많은 상품 정보가 나열된 화면을 떠올리면 쉽게 이해할 수 있습니다. 여기에서는 사진, 상품명, 가격을 나타낸 정보 하나가 Molecules에 해당합니다.

(ㄴㅇㅋ에서 가져와보자)

HTML의 아웃라인 단위를 생각해보면 Organisms를 이해할 수 있을 것입니다. 몇 개의 Organism을 나열하면 하나의 페이지가 완성된다는 것을 떠올려보는 것이 지름길입니다. 즉, 사용자가 각 요소에 접근하는 순서를 알면, 사용자가 어떠한 사전 지식을 지닌 채 UI를 사용 할 것인지 예상할 수 있습니다. 이 정보는 Organisms 안의 레이아웃을 디자인할 때 중요한 점입니다.

Templates

Template(틀)는 페이지에 표시할 실제 데이터가 반영되기 전 상태를 의미합니다. 페이지 구조나 레이아웃 구성 등을 설명하기 위한 레이어입니다.

Templates의 특징은 구체적인 콘텐츠가 빠져 있으므로 페이지의 '콘텐츠 구조'에 집중하여 각 컴포넌트가 어떻게 표시되며 어떻게 동작할 것인가를 확인할 수 있다는데 있습니다. 컴포넌트에 실제로 콘텐츠가 들어가므로 페이지가 가진 동적 요소의 특성을 명확히 해두는 것이 좋습니다. 사용자 시점에서 디자인이나 마케팅 요소를 확인하는 것도 Templates에서 가능한 부분입니다.

Pages

Pages(페이지)는 Templates에 실제 데이터가 반영된 상태입니다. 프로그래밍으로 바꾸어 말하면, Pages는 Templates 클래스의 인스턴스라 할 수 있습니다. 

Organisms에서는 상품의 가격, 품번, 사진 등을 실제로 표시하지는 않았습니다. 하지만 Pages에서는 실제 정보를 입력하여 이 정보들이 올바르게 표시됐는지 평가해야 합니다. 즉, 작성한 컴포넌트가 올바르게 동작하는지를 확인하는 레이어로서 Pages를 활용해야 합니다. 예를 들어, 100원짜리 상품을 100원에 올렸을 때 100원이라고 표시가 되면 문제가 없지만 1,000,000원짜리 상품을 올렸는데 1,000,000원이라 표시되지 않는다면 컴포넌트를 다시 평가해야 합니다. 

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019