Atomic Design Pattern과 UI 디자인 실무

UI 디자인에 직접 경험이 없다면,

 

많은 경우 '디자인'이라는 단어를

 

단순히 '심미적으로 보기 좋게 그린다'는 정도로 생각하실 것 같습니다. 

 

 

 

 

그러나 

 

 

 

 

실제 업무를 진행하다 보면, 

 

UI 디자인에서 말하는 디자인은

 

(당연히 심미적인 부분도 중요하지만)

 

'구조를 설계한다'는 의미가 더 적절할 것 같습니다. 

 

 

 

 

불과 몇 년 전(2015~2016년)만 해도

 

상당수 UI·UX 디자인 작업은

 

PPT와 PhotoShop의 콜라보로 이루어졌지만, 

 

이제는 거의 대부분의 실무에서

 

Figma, Framer, Adobe XD 같은 프로그램을 사용하고 있는 것 같습니다. 

 

 

이러한 UI 디자인 프로그램들은 

 

픽셀을 기반으로 벡터 그래픽을 그린다는 점에서 기존 디자인 프로그램들과 비슷하지만

 

컴포넌트를 활용해 구조를 설계하기에 더 적합하다는 것에서 차이가 있습니다.

 

물론 PhotoShop을 활용해 디자인을 할 때에도 서비스 구조를 어느 정도 염두에 두고 레이어 정리를 열심히 했었지만, 프로그램 자체가 구조를 설계하는 데에는 적합하지 못했던 것이 사실입니다.

 

 

 

 

그렇다면, 

 

이번 글에서는

 

UI 디자인 방법론 중 하나인 Atomic Design Pattern을 통해

 

'구조를 설계한다'는 것이 어떤 의미인지

 

그리고

 

어떻게 UI 디자인 실무에 적용되는지를 알아보도록 하겠습니다.

 

Atomic Design은 인터페이스 디자인 시스템을 보다 의도적으로 그리고 명확한 순서와 계층 구조로 구축하는 방향을 제시하기 위해 Brad Frost가 만든 방법론입니다.

Atomic Design Principles & Methodology 101 | Adobe XD Ideas

 

 

 

 

Atomic Design Pattern에 대한 설명을 읽어보면, 뭔가 당연하다(?)는 듯한 느낌을 받지만

 

실제 UI 디자인 업무를 진행할 때, 알고 모르고에서 오는 차이는 정말 큰 것 같습니다.

 

 

 

 

내용을 짧게 요약하면,

 

"웹 또는 앱을 디자인할 때 UI 컴포넌트를 아래와 같이 다섯 가지 단계를 기준으로 설계하자"라고 할 수 있습니다. 

1. Atom
2. Molecule
3. Organism
4. Tamplate
5. Page

 

 

 

 

물론 "Atomic Design Pattern이 정답이니 이 방식으로 디자인을 해야 해!"라는 것이 아니고,

 

"UI 디자인을 할 때 이런 방식으로 생각하고 접근할 수도 있구나?"라는 느낌을 받는 것이 훨-씬 중요합니다. 

 

그리고 그러한 방법 중 하나가 Atomic Design Pattern인 것입니다. 

 

 

 

  

그럼 UI 디자인 예시를 한번 살펴보도록 하겠습니다.

 

[그림 1] 컴포넌트 정리가 되지 않은 디자인 시안(좌) / Atomic Design Pattern이 적용된 디자인 시안(우)

 

 

두 디자인 시안에서 차이가 느껴지시나요?

 

왼쪽의 디자인 시안은 컴포넌트 정리가 되지 않은 디자인 시안이고,

 

오른쪽의 디자인 시안은 Atomic Design Pattern을 참고하여 컴포넌트를 정리한 디자인 시안입니다.

 

 

 

 

사실, 이미지 파일 형태의 디자인 시안만을 놓고 본다면

 

두 시안 사이에는 차이가 존재하지 않습니다. 

 

 

 

 

그러나 

 

디자인 시안의 목적은 이를 기준으로 웹 또는 앱 서비스가 개발되도록 하기 위함인데,

 

이때 두 디자인 시안 사이에는 정말 큰 차이가 발생하게 됩니다. 

 

 

즉, 디자이너는 디자인 시안을 가지고 기획자 또는 개발자와

 

끊임 없이 소통을 해야만 하는데,

 

이 과정을 효율적으로 만들기 위해서는

 

디자인 시안의 보여지지 않는 부분에 대해서도 디자인이 필요합니다. 

 

 

[그림2] 컴포넌트 정리가 되지 않은 디자인 시안(좌) / Atomic Design Pattern이 적용된 디자인 시안(우)

 

위 컴포넌트 트리 구조는 [그림 1]과 동일한 디자인 시안의 것으로

 

왼쪽은 컴포넌트 정리가 되지 않은 , 오른쪽은 Atomic Design Pattern을 참고하여 컴포넌트를 정리한 것입니다.

 

디자인 시안에서는 볼 수 없었던 차이가,

 

시안 내 보이지 않는 부분인 곳에서는 완전히 다른 것을 확인할 수 있습니다.

 

 

포토샵을 기준으로 생각해보면,

 

레이어의 이름을 의미 있게 작성하고, 위계와 순서에 맞게 정리를 하는 것과 같습니다. 

 

(물론, 실제 UI 디자인 실무에서는 그 외에도 layout, constraints 등 조건도 알맞게 설정해야 합니다.)

 

 

 

 

이렇게 정리를 해야 하는 이유는

 

보기에 좋기 때문이 아니고,

 

두 가지 핵심적인 이유가 있기 때문입니다.

 

 

 

첫 번째 이유는

 

UI 디자인의 가장 큰 특징 중 하나인 반응형 디자인(responsive design) 때문입니다.

 

[그림 3] 컴포넌트 정리가 되지 않은 디자인 시안(좌) / Atomic Design Pattern이 적용된 디자인 시안(우)

 

다들 알고 계시겠지만,

 

UI 디자인은 최종 사용자와의 접점 환경을 알 수가 없습니다.

 

즉, 책이나 간판, 포스터, 제품 등은 디자인이 구현되면

 

그 자체가 최종 사용자가 보는 것과 일치합니다.

 

그러나 웹이나 앱 서비스의 경우 디자인이 구현되더라도

 

최종 사용자가 사용하는 디바이스에 따라 차이가 발생합니다.

 

 

그렇기 때문에 UI 디자이너는

 

여러 디바이스 해상도를 고려하여 디자인을 해야 합니다.

 

여기서 UI 디자이너가 모든 해상도 각각에 대해 디자인 시안을 작성하기에는 (가능하긴 하지만) 비효율적이므로

 

디자인을 하는 과정에서 전체적인 컴포넌트의 구조와 위치, 크기 등의 제한 조건을 알맞게 설정해야 합니다. 

 

그리고 이런 방식에 대한 가이드를 주는 디자인 방법론 중 하나가 Atomic Design Pattern입니다.

 

 

 

 

두 번째 이유는

 

디자인 시안을 기준으로 다른 팀원들과 효율적으로 소통할 수 있기 때문입니다. 

 

[그림 4] Atomic Design Pattern에 따른 UI 컴포넌트 디자인 예시

 

UI 디자인을 하다보면, 

 

하나의 같은 페이지지만 상황에 따라 일부 컴포넌트가 조금씩 바뀌는 경우가 많습니다. 

 

 

예를 들어,

 

위 예시를 기준으로 찜하기(하트 아이콘)을 클릭 한 경우와 그렇지 않은 경우

 

같은 페이지지만 두 가지 시안으로 나뉘는 경우가 발생합니다. 

 

조금만 더 복잡한 서비스라면

 

경우의 수는 순식간에 2개에서 4개로, 4개에서 8개로 증가할 것입니다. 

 

 

이는 디자이너에게도 시련을 안겨주지만,

 

개발자의 입장에서도 마찬가지입니다. 

 

 

그렇기 때문에 UI 디자이너는 

 

구조와 위계에 맞는 컴포넌트를 중심으로 디자인을 해야 합니다. 

 

이를 통해 특정 페이지가 아닌 컴포넌트가 갖는 상태 및 속성에 대해 이야기함으로써

 

개발자와 좀더 효율적으로 소통할 수 있습니다. 

 

그리고 역시 적절한 구조와 위계의 컴포넌트를 정리하는 방법론 중 하나가 Atomic Design Pattern입니다.

 

 

 

 

이처럼 

 

Atomic Design Pattern은 실무에서 활용할 수 있는 디자인(설계) 방법론이며,

 

UI 디자이너는 이를 통해

 

(꼭 Atomic Design Pattern이 아니더라도, 그외 다양한 디자인 방법론을 활용해)

 

더 효율적인 UI 디자인 업무를 수행할 수 있습니다. 

 

 

 

 

---

Atom

가장 작은 컴포넌트

속성(property)을 가질 수 없으며, 상태(status)만 가질 수 있음

 

Molecule

Atom을 활용해 만든 작은 컴포넌트

속성(property)을 가질 수 있음

 

- 상태는 컴포넌트 자체가 가질 수 있는 변수

- 속성은 보다 하위의 컴포넌트에게 상속할 수 있는 변수 

 

Organism

Molecule과 Atom을 활용해 만든 큰 컴포넌트

일반적으로 생각하는 최종 컴포넌트

 

Template

실제 페이지(page)와 동일하나 데이터가 없는 페이지

즉, 와이어프레임

​

Page

실제(또는 더미) 데이터가 적용된 페이지

즉, UI 디자인 시안