Atomic Design
We’re not designing pages, we’re designing systems of components.
Stephen Hay
이제는 화면을 디자인하는 게 아닌 컴포넌트의 시스템을 디자인해야 합니다.
웹 디자인이 계속 발전함에 따라 웹 페이지의 심플한 웹페이지 컬렉션을 만드는 것보다 사용자를 배려하는 디자인 시스템을 개발할 필요성을 느끼고 있습니다.
많은 사람들은 디자인 시스템을 만드는 것에 관해 많은 이야기를 하고 있는데 그 대부분이 컬러, 타이포그래피, 그리드, 질감 등의 기반을 확립하는 데 중점을 두고 있습니다. 이러한 류의 사고는 분명 중요하지만 저는 크게 관심은 안 갑니다. 왜냐하면 그러한 것들은 궁극적으로 항상 주관적이기 때문입니다. 최근에 저는 인터페이스가 구성되는 방식보다 체계적인 방식으로 디자인 시스템을 구성하는 방법론에 더 관심이 갑니다.
영감과 평행(parallels)을 찾으면서 저는 계속해서 화학으로 돌아왔습니다. 그 생각은 모든 물질 (고체, 액체, 기체, 단순체, 복합체 등)이 원자로 구성되어 있다는 것입니다. 그 원자 단위들은 서로 결합하여 분자를 형성하고 차례로 더 복잡한 유기체로 결합하여 우주의 모든 물질을 궁극적으로 창조합니다.
마찬가지로 인터페이스도 더 작은 컴포넌트로 구성되어있습니다. 즉 인터페이스 전체를 기본 빌딩 블록으로 나누고나서부터 작업할 수 있습니다. 이것이 아토믹 디자인의 기본 요지입니다.
Josh Duck의 HTML Periodic Table는 웹디자이너의 원자 요소를 보기 쉽게 나뉘어 주고 있습니다.
아토믹 디자인이란
아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로서 5개의 구분된 단계가 있습니다.
Atoms(원자)
Molecules(분자)
Organisms(유기체)
Templates
Pages
하나하나씩 파보도록 하죠.Atoms
원자는 물질의 기본 빌딩 블록입니다. 웹 인터페이스에 적용되며 원자는 폼의 텍스트 레이블, 인풋필드 혹은 버튼과 같은 HTML의 태그입니다.
원자에는 컬러 팔레트, 폰트 그리고 애니메이션과 같은 인터페이스에서 보이지 않는 추상적인 요소가 포함되기도 합니다.
실제로 실생활에서의 원자들도 꽤나 추상적이어서 대부분의 원자는 그 자체만으로 유용하지 않습니다. 그러나 모든 글로벌 스타일이 한눈에 펼쳐져서 쉽게 파악되는 것처럼 패턴 라이브러리의 관점에서 레퍼런스로는 유용합니다.
Molecules
우리가 원자들을 서로 결합하기 시작하면 재미있고 명확해지기 시작하는데 분자는 함께 결합된 원자 그룹이며 화합물의 가장 작은 기본 단위입니다. 분자들은 그 자체의 특성을 가지고 있으며 우리의 디자인 시스템의 중추 역할을 합니다.
예를 들어 폼의 텍스트 레이블, 인풋필드 혹은 버튼들같이 각 개별 요소들 자체만으로는 그다지 유용하지 않지만 폼(form)으로 구성되어 결합하면 실제로 뭔가 할 수 있습니다.
원자에서 분자를 만드는 것은 "한 가지만 하고 그거 하나만 잘해라"는 사고방식을 권합니다. 분자는 복잡할 수 있지만 경험에 근거해 보면 보통 재사용을 위해 만들어진 원자는 상대적으로 단순한 조합으로 되어 있습니다.
Organisms
분자는 우리가 작업할 수 있는 빌딩 블록을 제공하고 있어서 분자들을 결합하여 유기체를 형성할 수 있습니다. 유기체는 비교적 복잡하며 인터페이스에서 구분된 영역을 형성하는 서로 결합되어 있는 분자 그룹입니다.
그리고 우리는 점점 더 구체화하기 시작했습니다. 고객은 디자인 시스템의 분자에 흥미가 없을 수도 있겠지만 유기체와 함께 최종 인터페이스가 어떻게 보이는지 시작하는 단계입니다. Dan Mall은 클라이언트 대화를 원활하게 하고 시각적 방향을 형성하기 위해 모든 전체 컴포넌트를 만들지 않고서도 몇 가지 핵심 유기체에 대한 아이디어를 표현하는 엘레먼트 콜라주를 사용합니다
유기체는 서로 비슷하거나 아니면 서로 상이한 분자 유형으로 구성될 수 있는데 예를 들어 마스트 헤드(*주요 핵심) 유기체는 로고, 메인 내비게이션, 검색, 소셜 미디어 채널 리스트와 같은 다양한 컴포넌트로 구성될 수 있습니다. 그러나 "제품 그리드(product grid)" 유기체는 반복적으로 반복되는 동일한 분자 (보통 제품 이미지, 제품 타이틀, 가격 정보를 포함할 수 있음)로 구성될 수 있습니다.
분자에서 유기체로의 구축하기 위해선 컴포넌트가 독립적(standalone)이고, 기동성 있고(portable), 재사용(reusable) 가능하게 제작해야 합니다.
Templates
템플릿 단계에서 우리는 화학적 유사점을 깨고 고객사와 최종 결과물에 더 적합한 언어를 적용합니다. 템플릿 파일은 주로 페이지를 구성하기 위해 서로 꿰매어진 유기체 그룹으로 구성되며 이 부분에서 디자인을 확인하고 레이아웃이 실제로 구동하는지 볼 수 있습니다.
템플릿은 매우 구체적이며 상대적으로 추상적인 분자와 유기체에 대한 맥락을 제공합니다. 템플릿은 고객이 한 장소에서 최종 디자인을 보게 되는 곳이기도 합니다. 이 방법론을 통한 프로젝트 경험에서 볼 때 템플릿은 처음에 html 와이어 프레임으로 시작하지만 시간이 지나 최종 산출물이 되는 시점이 오면 완성도(fidelity)가 높아집니다. 피츠버그의 Bearded Studio도 이와 비슷한 프로세스를 진행하는데, 초기 디자인은 그레이 스케일과 최소한의 레이아웃으로 시작하지만 최종 디자인이 완성되기까지 천천히 완성도를 높이고 있습니다.
Pages
페이지는 템플릿의 특정 인스턴스입니다. 여기서는 플레이스 홀더 콘텐츠가 실제 대표 콘텐츠로 대체되어 사용자가 보는 디자인을 정확/구체적으로 하게 구현합니다.
페이지는 가장 실체가 있기 때문에 구현 완성도가 높은 레벨에 있습니다. 보통 사람들이(사용자) 프로세스 대부분의 시간을 소비하고 리뷰 생기는 곳이기도 합니다.
페이지는 디자인 시스템의 효율성을 테스트하는 곳이기 때문에 필수요소이기도 한데 사용자 맥락에서 모든 것들을 살펴봄으로써 분자, 유기체 및 템플릿을 수정하여 실제 디자인의 맥락(context) 보다 더 나은 방법으로 개선할 수 있습니다.
페이지는 템플릿에서의 다양한 변형(variations)을 테스트할 수 있는 장소이기도 한데 예를 들어 40글자를 포함하는 헤드 라인이 어떻게 보이는지 정확히 보고 싶을 수도 있고 동시에 340글자는 어떻게 보이는지 확인해 보고 싶을 수도 있을 겁니다. 사용자가 장바구니에 상품 하나를 담은 것과 과 할인 쿠폰이 적용된 상품 10개를 담은 경우를 비교를 하면 실제로 어떻게 보이게 될까요? 다시 말해서 이러한 특정 사례는 우리가 어떻게 되돌아가고 우리 시스템을 구성하는지에 영향을 미칩니다.
왜 아토믹 디자인인가?
수많은 방법을 통틀어 아토믹 디자인은 우리가 특정 방식을 의식적으로 생각하지 않았더라도 어쩌면 우리가 모든 것을 함께 작업했던 방식일지 모릅니다.
아토믹 디자인은 크래프팅(crafting) 디자인 시스템을 제작하는 명확한 방법론을 제공합니다. 고객 혹은 팀 멤버들은 아토믹 디자인을 통해 실제로 디자인 시스템의 개념을 실체화하여 눈 앞에서 디자인 시스템의 개념을 더 잘 이해할 수 있게 되었습니다.
아토믹 디자인은 추상적인 개념에서 눈에 보이는 실체로 옮겨지는 기능을 제공하며 이로 인해 일관성과 확장 성을 높이는 동시에 최종 단계에서 결과물을 보여주는 시스템을 만들 수 있게 되었습니다. 조각내기보다는 조립함으로써 유리한 부분만 부각하는 기존 방식 대신 현실적으로 시스템을 제작합니다.
패턴 랩(Pattern Lab)
작업에서 이 방법론을 적용하기 위해 저는 (Dave Olsen의 도움을 받아) 아토믹 디자인 시스템을 실제로 만들기 위해 Pattern Lab이라는 툴을 만들었습니다. Pattern Lab에 대해서는 나중에 자세히 다룰 예정이지만 Github에서 무료로 확인 가능합니다.
책/이북 구매
http://atomicdesign.bradfrost.com/
출처: http://bradfrost.com/blog/post/atomic-web-design/
아토믹 디자인이 요즘 화두 내요. 실무에 어떤 영향을 줄지 궁금해지네요.
