디자이너의 아토믹 디자인

디자인 시스템

아토믹 디자인은 디자인 시스템을 설계하는 디자인 방법론 중에 하나인데요, 그렇다면 아토믹 디자인이 뭔지 알아보기 전에, 아토믹 디자인이 나오게 된 배경, 즉 디자인 시스템을 먼저 이야기해보죠.

디자인 시스템, 디자인 시스템하는데 왜 중요할까요? 사실 많은 이유가 있지만 핵심을 말해보자면 관리가 용이하다는 것과 체계적인 UI 디자인이 가능하다는거에요.

UI/UX디자인 독학을 위한 웹디자인 해부하기

포토샵으로 웹디자인을 하던 때를 생각해보죠. 하나의 페이지 디자인이 만들어졌어요. 그런데 갑자기 스몰 사이즈 디자인이 필요해요. 그리고 태블릿 사이즈 디자인이 또 추가돼요. 정말 시간이 오래 걸릴 거에요. 일관성있는 디자인을 제공하기도 어렵고요.

디지털 프로덕트의 세계는 너무나 빠르게 변화하고 있어요. 디자이너와 개발자들이 인터페이스를 만들 때 고려해야 할 것들이 점점 많아지고 있는데 우리가 따라 갈 수가 없는거죠. 더 많은 기능, 더 많은 유저, 더 많은 서비스, 더 많은 플로우, 더 많은 디바이스 종류를 고려해야 하는데 예산, 자원은 그대로니까요.

모듈화

그래서 이제 모듈화라는 개념이 나옵니다. 모듈화는 이미 산업디자인이나 건축같은 많은 분야에서 자동차나, 빌딩 같이 엄청 복잡한 물체를 만들 때 시스템으로서 자리를 잡았고, 웹을 만드는 프로세스에도 적용이 되기 시작한거죠. 처음에는 컴퓨터 과학자들이 객체 지향 프로그래밍을 실천하면서 모듈 개념이 만들어졌고, 2000년대 초반 jQueryUI와 같은 라이브러리가 등장하면서 웹디자인 workflow에도 적용이 되기 시작했고요.

프레임워크 천국

현재는 웹디자인을 위한 머테리얼 디자인이나 부트스트랩같은 UI 프레임워크도 있어요. 그럼 이제 의문이 생깁니다. 아까 디자인 시스템이 중요한 이유가 관리가 가능하다는 것과 체계적인 UI 디자인이 가능하다고 했잖아요.

그럼 이런 UI 키트 프레임워크 쓰면 편하지 않나요? 어느 정도는 맞는 말이에요. 프레임워크는 초반에 효율성 측면에서 매우 매력적일 수 있어요. 그런데 기업 조직에서 프레임워크를 지속적으로 사용할 때 문제가 있습니다. 결국 시간이 가면서 기능이 추가되고 요구사항이 많아지면, 우리 회사가 만들지 않은 다른 디자인 시스템을 fluent 쓸 수 있게(구조, 네이밍, 스타일 규칙) 공부해야 하거든요. 남의 디자인 시스템을 가지고 커스텀을 많이 하다보면 디자인이 weird하고 messy한 합의점(middle ground)에 도달할 수 있습니다.

그리고 개발 아키텍쳐 측면에서 보면 메터리얼 디자인이랑 부트스트랩은 이미 스타일링(보기 좋은 버튼, 보기 좋은 인풋, 보기 좋은 컴포넌트)이 되어 있는데요. 이게 브랜딩에도 영향을 줍니다. 리복, 나이키, 뉴발란스, 아디다스 등이 자사의 웹사이트를 리디자인하는데 다 부트스트랩 쓰면 어떻게 될까요? 다 비슷할거에요. 물론 각 브랜드는 기본 모양과 느낌을 수정하고 확장할 수 있지만 그럴수록 프레임워크의 주어진 구조, 스타일 및 기능과 싸우는 것을 의미하거든요. 그래서 브랜딩 측면에서 ownability를 잃을 수 있습니다. 소유할 수 있는 디자인 자산이 없는거죠.

근데 지금 프레임워크 쓰는게 나쁘다고 말하는게 아니에요. 여기서 중요한 건 개념적으로 프레임워크라는 것이 일관성을 유지하고 디자인과 개발 시간을 단축하는 디자인 도구 키트로서 훌륭한 아이디어라는 것이죠.

모든 클라이언트에 부트스트랩을 사용하는 것이 아니라 모든 클라이언트를 위한 작은 부트스트랩을 만드는 것 — Dave Rupert, lead developer at Paravel -

즉, 디자인 시스템을 사용하는 것뿐만 아니라 시스템을 만드는 것이 중요한 것입니다.

디자인 방법론

그럼 이제 알겠어요, 우리의 디자인시스템을 만들어보자고요. 그럼 어떻게 만들 수 있을까요?

많은 사람들이 디자인 시스템을 오해하는데요. 디자인 시스템은 단지 버튼, 카드 등을 컴포넌트 레벨로 분리시켜서 각각을 디자인하는거라고 생각합니다. 하지만 사실이 아니에요.

그러한 컴포넌트들이 모여서 결합력 있는 페이지를 형성한다는 것을 깨닫는게 중요한 거에요. 유저는 페이지 전체를 보고 interact하거든요. 그래서 우리가 그 페이지의 part를 만드는게 중요한거고요. 디자인 시스템이 할 수 있는 것은 part = UI 패턴을 한 곳에 잘 정리(centralize)하고 이름을 붙이고, 가이드라인을 작성해서 모두가 same language을 말할 수 있게 하는 것이에요. 예를 들어, Slide controls라고 했을 때 모두가 어떤 UI를 말하는지 알고 어떻게 쓰는지 어디서 쓰이는지 알 수 있게 하는 것이죠. UI 패턴을 centralize한다는 건 결국 모듈화를 하는겁니다.

이미 많은 UI 패턴 라이브러리가 나와있죠. 모듈들이 배열된 형태를 그렇게 부르는 것 같아요. 근데 어떤 기준으로 모듈화를 한 것일까요? 기준은 잘 모르겠어요. 그럼 이제 말을 바꿔볼게요, 어떻게 더 잘 모듈화 할 수 있을까요?

아토믹 디자인

개념

We’re not designing pages. We’re designing systems of components. — Brad Frost -

아토믹 디자인은 Brad Frost 라는 웹디자이너가 만들었어요.

아토믹 디자인은 인터페이스 디자인 시스템을 보다 명확한 순서와 계층 구조로 구축하는 방향을 제시하기 위해 만든 방법론인데요, 페이지를 구성하는 요소를 화학 구조에서 힌트를 얻어서 설명하고 있어요.

화학이 기억이 안나는 사람들을 위해 간단히 설명하자면 원자는 물질을 구성하는 가장 작은 입자고 원자가 모여 분자가 구성해요. 유기체는 활동하는 생명체를 의미하므로 훨씬 큰 개념이라 볼 수 있습니다.

이걸 디자인 구성요소에 적용시켜보면 쪼갤 수 없는 가장 작은 빌딩 블록이 아톰이고 아톰이 모여서 모듈(분자)를 만듭니다. 그리고 결국에 페이지를 형성한다는 개념인데요. 아토믹 디자인에 대해서 컴팩트하게 설명해주는 영상을 하나 보시죠.

https://www.youtube.com/watch?v=Yi-A20x2dcA

개념이 좀 이해가 되셨나요? 이제 하나 하나 살펴보도록하죠.

⚛️ 원자(Atom)

#Generic #Abstract

• Html tags
• Form label
• input
• button

원자는 디자인 시스템에서 가장 작은 빌딩 블록입니다. 아톰은 또한 컬러 팔레트, 글꼴 및 애니메이션과 같은 인터페이스의 추상적인 요소를 포함할 수 있어요. 화학에서의 아톰처럼 얘네 자체로 유용하진 않아요. 그렇지만 가장 작은 요소인 만큼 재사용/참조가 가장 많이 되겠죠.

🧬 분자(Molecules)

#LittleComplex

• 검색창 (Label + Input + Button)-

아톰을 결합하면 이제 분자가 됩니다. 분자는 화합물의 가장 작은 단위에요. 분자가 되면 이제 무언가를 할 수 있는데요, 시스템의 중추 역할로 작은 기능을 하는거죠. 분자는 일반적으로 재사용을 위해 만들어진 원자의 비교적 단순한 조합으로, “한 가지만 잘하면 된다”는 의미를 생각해서 접근하면 좋아요. 양식 레이블, 입력 또는 버튼은 그 자체로는 그다지 유용하지 않지만 함께 결합하면 검색이라는 것을 할 수 있는거죠.

🌱 유기체(Organisms)

#MoreComplex

• 헤더(Header)
• 제품 그리드 (Product Grid)

유기체 단계에 접어들면서 이제 상대적으로 좀 더 복잡한 별개의 섹션(Section)을 형성하는데요, 최종 인터페이스가 형성되기 시작하는 걸 볼 수 있어요. 헤더 유기체를 보면 로고, 네비게이션, 서치폼 이렇게 서로 다른 유형의 분자, 원자들이 조합해서 만들어질 수도 있구요,

제품 그리드처럼 똑같은 분자가 모여서 만들어질 수 도 있어요. 제품이미지, 제품명, 가격으로 구성된 하나의 제품 분자가 계속해서 반복되면서 유기체를 이룰 수 있는거죠. 하나의 섹션을 구성하는 개념이다 보니까,유기체 또한 원자처럼 재사용이 많이 일어나요.

분자에서 유기체를 빌딩할 때는 standalone(독립적), portable(휴대가 가능한), reusable(재사용 가능한) 구성요소를 만드는 것을 권장합니다.

🔳 템플릿(Templates)

#Layout #NoStyling

• 와이어프레임

템플릿 단계에서 이제 더이상 화학 비유를 고려하지 않아요. 이제는 좀 더 웹 디자인 관점에서 접근해서 실제 디자인들이 결합되는 것을 보기 시작하고 레이아웃이 작동하는 것을 확인 할 수 있어요.

보시다시피 템플릿은 매우 구체적인데요, 추상적이었던 분자와 유기체에 대한 컨텍스트를 제공합니다. 여기서 스타일은 중요하지 않아요. 컨텍스트 전달이 중요하기 때문에 실제 데이터를 포함하지 않고 와이어프레임처럼 구성됩니다. 이제 시간이 지남에 따라 fidelity가 입혀지면서(디자인 정확도가 높아지면서) 최종 결과물이 됩니다.

🌐 페이지(Pages)

#Final #RealData

• 글자 수의 변화
• 상품 개수의 변화

페이지는 아토믹 디자인 방법론의 마지막 단계에요. 템플릿의 인스턴스라고 할 수 있는데요. 실제 데이터가 바뀔 때마다 하나의 인스턴스가 생성될 수 있어요. 모듈, 유기체, 템플릿을 수정했을 때 페이지 컨텍스트(context)에 반영되는 것을 볼 수 있다는 것이죠.

그리고 또 템플릿의 변형을 테스트해볼 수 있는데요. 예를 들어, 헤드라인이 30자만 들어가는 것처럼 보이게 디자인 되었는데, 340자가 들어갈 때 컨텍스트(context)에서 어떻게 보이는지 확인할 수 있습니다. 그리고 사용자가 장바구니에 1개의 상품을 담은 경우와 할인코드가 적용된 상품 10개를 담았을 때 UI가 어떻게 달라지는지 테스트해볼 수 있겠죠.

이런 특정한 인스턴스들이 디자인 시스템을 반복적으로 개선(loopback)하고 구성하는 방법에 영향을 줍니다.

예시

모바일 앱의 프로필 페이지를 아토믹하게 접근 해봅시다.

⚛️ 원자(Atom)

Atomic Design Principles & Methodology 101

프로필 페이지에서 가장 많이 재사용되지만 가장 단위. 지금 여기서는 버튼, 텍스트필드, 아이콘, 아바타라고 정의를 했죠. 그럼 이제 이것들을 조합해서 하나의 특성을 가지는 단계로 조립을 해봅시다.

🧬 분자(Molecules)

Atomic Design Principles & Methodology 101

아바타 원자 + 라벨 요소 원자들이랑 결합해서 모듈을 만들었구요. 비교적 간단한 조합이죠. 그리고 어디에서 쓰이는 건지는 이 단계에서는 맥락을 파악하기 좀 힘들어요.

🌱 유기체(Organisms)

Atomic Design Principles & Methodology 101

아까 만들었던 프로필 모듈 + 네비게이션 모듈 + 커버 이미지 요소가 합쳐져서 프로필 헤더 유기체가 만들어졌어요. 페이지에서 하나의 section같은 역할을 한다고 했었죠. 이 형태는 또 여러 페이지에서 재사용이 가능하겠고요.

🔲 템플릿(Templates)

Atomic Design Principles & Methodology 101

템플릿은 이제 앱 프로필 페이지의 와이어프레임같은 거죠. 실제 데이터는 없지만 유기체들이 어떻게 레이아웃을 구성하는지 알 수 있고요.

🌐 페이지(Pages)

Atomic Design Principles & Methodology 101

그리고 이제 페이지 단계에서 실제 데이터가 변형이 있을 때 그에 따라 디자인이 어떻게 조정되는지 테스트해볼 수 있는거죠. 예를 들어 저 페이지에서 스킬을 보여주는 유기체를 비활성화 했을 때 어떻게 페이지가 보이는지 확인하면서 디자인 조정을 할 수 있는거죠.

정리

이런 생각이 들수도 있을 거 같아요. 저렇게 작은 단위로 쪼개서 컴포넌트화하는 건 우리가 일 해온 방식 아닌가? 이런 생각이요, 맞아요. 그럼에도 아토믹 디자인이 차별화를 가지는 이유는 디자인 시스템을 만들기 위한 명확한 방법론을 제공한다는 거에요. 앞서서, 인터페이스 디자인 시스템을 보다 명확한 순서와 계층 구조로 구축하는 방향을 제시하기 위해 만든 방법론이라고 했었는데 이 말을 지금 보면 이해가 더 쉬우실 거에요.

좋은 점

아토믹 디자인은 팀 구성원이 디자인된 단계를 보고 디자인 시스템의 개념을 더 잘 이해할 수 있습니다. 그리고 아토믹 디자인은 추상에서 구체화로 갈 수 있는 능력을 제공합니다. 해체하는 방식이 아닌 조립을 통해 시스템을 이루고 있기 때문에 일관성과 확장성을 가질 수 있는거죠.

아토믹 디자인을 소개하는 여러 아티클에서도 아토믹 디자인으로 디자인 시스템을 만들었을 때 benefit들을 더 찾을 수 있는데요.

• 일련의 패턴이 확립되면, 설계 변경이 필요한 경우에 대비하여 더 빠르고 유연성 있는 빌드 프로세스를 가질 수 있다.
• 개발자는 베이직한 컴포넌트를 기반으로 더 복잡한 컴포넌트를 쉽게 조립할 수 있다.
• 디자이너 또한 효율적으로 디자인하고 파일 관리(공유, 업데이트)을 쉽게 할 수 있다.
• 전체 디자인 컴포넌트와 패턴을 더 명확하게 문서화 할 수 있고 결국 팀 구성원의 협업에 도움이 된다.

안좋은 점

그럼 아토믹 디자인 외않헤?

Atomic design is methodology for creating design systems. — Brad Frost -

아토믹 디자인은 2013년에 처음 공개되었어요. 리액트같은 컴포넌트 주도 개발 방식이 본격적으로 자리잡으면서 주목을 받기 시작했고요. 왜냐면 아토믹 디자인이 디자인 시스템을 위해서 생겨나긴 했지만 그 본질이 컴포넌트를 더 효과적으로 구성하는 것에 대한 방법론이다 보니까 프론트엔드 개발에서 디자인 패턴으로도 많이 쓰이고 있어요. 그래서 아토믹 디자인 적용기를 찾아보면 개발자들이 도입해서 쓰고 있는 경우가 훨씬 많아요. 근데 흥미로운게, 생각보다 회의적인 경험들이 많더라고요.

아토믹 디자인(Atomic Design) 적용기 : 한계점, 단점아토믹 디자인(Atomic Design) 적용기 : 한계점, 단점

“러닝커브가 높다”는 것은 아토믹 디자인은 컴포넌트 개념에 대한 높은 이해도를 필요로 하는데, 각 컴포넌트들을 어떻게 분류할지가 꽤나 모호하고 논의할 여지가 많아요. 이걸 디자이너가 설계해야 해서 오히려 의사소통에 장애가 되기 쉽다는 의미에요.

소프트웨어 디자인 관점에서 바라본 아토믹 디자인의 의미와 한계

Effective Atomic Design

그런데 이런 부정적인 경험에 가장 메인이 되는, 공통적인 이슈가 하나 있어요. 바로 아토믹 디자인의 개념이 추상적이라는 건데요. 공식 아토믹 디자인에서 보여주는 예시는 간단한 UI라서 좀 더 복잡한 UI를 설계할 때는 어느 단계로 분류해야 할지도 모호하고, 좀 더 복잡한 요구사항이 있을 때 개발적으로 참고할만한 가이드라인이 있는 것도 아니기 때문에 struggle하는 경험들이 많았어요.

더 잘 사용하자

그렇다면 아토믹 디자인은 정말로 빛 좋은 개살구일까요? 그건 또 아닌 것 같아요. 왜냐하면 Arc (아토믹 리액트)나 Line entry처럼 잘 사용하고 있는 사람들도 많거든요. 그럼 이들은 아토믹 디자인을 어떻게 적용했길래 잘 쓰고 있는 걸까요?

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. — Atomic Design -

이 문장이 아주 잘 설명해주고 있는 것 같아요. 아토믹 디자인은 선형의 프로세스가 아니다. 사용자 인터페이스를 전체로도 보고, 동시에 부분 모음으로도 볼 수 있게 도와주는 멘탈모델이다.

아토믹 디자인을 디테일한 사용법처럼 따라야하는 것으로 받아들이는 것이 아니라 아토믹 디자인의 컨셉을 이해하는거죠. 그리고 이를 업무에 적용하기 위해선 팀 구성원에 맞는 규칙을 그 안에서 새롭게 정의하는게 필요합니다.

그럼 Line entry가 아토믹 디자인을 자사의 프로덕트에 어떻게 적용하고 있는지 영상을 보시죠.

2:00–2:35 / 4:45–5:50 / 10:15–10:40 / 11:38- 12:10 / 14:00–15:12

2:00–2:35 / 4:45–5:50 / 10:15–10:40 / 11:38- 12:10 / 14:00–15:12

(영상 뒷부분은 디자인 시스템을 넘어서 디자인 개발 패턴으로 사용할 때 개발자분들이 고려해야하는 부분이 훨씬 많아서 압축적으로 Line entry의 경험을 보여드린거고요.)

Line entry가 아토믹 디자인을 맹목적으로 따라하려고 하는게 아니라, 아토믹 디자인이라는 멘탈 모델을 이용해서 자신들에게 맞는 디테일한 규칙을 정하면서 잘 사용하고 있는 대표적인 예라고 생각이 듭니다.

아토믹 디자인 2022 (업데이트)

아토믹 디자인이 세상에 처음 나온지 거의 10년이 되었습니다. 그동안 아토믹 디자인의 저자 Frost 뿐만 아니라 다른 디자이너들 또한 아토믹 디자인 모델을 발전시켜왔는데요, 오리지널 아토믹 디자인에 3차원을 부여했다고 할까요. 디자이너 Yeo가 소개하는 2022년의 아토믹 디자인을 보시죠.

Atomic design 2022: what we can learn from Eames and other design giants

1. Ions (Cid, 2019) are the subatomic design particles of the atoms, which contains the properties of the design component. In some design circles, these are known as design tokens , as shared by Frost.
2. Example: colour, padding, states.
3. Atoms (Frost, 2016) remain as the foundational building blocks, also known as components. No major changes here.
4. Examples: buttons, text input, labels
5. Molecules (Frost, 2016) are a combination of two or more atoms. They are larger UI components, which could also be known as patterns.
6. Examples: pagination, dialog box
7. Organisms (Frost, 2016) are when complexity begins. Just like in biology, a large range of combinations of molecules and atoms emerge. In design, we could see organisms as modules, features, or even as widget and simple applications.
8. Examples: Cards, navigation bars, date picker
9. Complex Organisms (NEW) are advanced life forms. The quickest reference would be animals, plants and human beings. As it turns out, products are similarly complex. Not only do they consist of more than templates of components, patterns and modules, they have flows across different pages or screens. Interestingly, this is where the “onion”(Mu, 2020) calls out the term “products”. I, on the other hand, chose to stick to the naming convention of the metaphor. I have also consolidated templates and pages under the same sequence, keeping the mental model intact.
10. Examples: User Interface, App, Web
11. Species (NEW) are a family of complex organisms of unique yet similar traits. In design, species can be referred to as product lines or portfolio. As more organizations see the value of design, and with advancements of our understanding of design systems, so is our ability to apply the entire gamut of design across products in organizations.
12. Examples: Suites, platforms, omnichannel

물론 이것보다 더 큰 개념(Beyond species)까지 고려할 수도 있습니다. 아토믹 디자인 멘탈 모델은 계속해서 확장하고 있어요.

In addition to all the web-capable devices we concern ourselves with today, we must understand that the device and web landscape is becoming bigger and more diverse all the time.

현재 2022년 디자인 시스템은 하나의 제품을 넘어 제품 군(product famailies)을 고려해야 하는 경우가 많아졌어요. 그래서 이렇게 큰 개념까지 등장하고 있는 거고요. 제품 군을 고려 할 때 아토믹 디자인에서 우리가 배운 멘탈 모델을 응용할 수 있을 것 같습니다.