디자인 시스템

서비스 디자인에 대하여

시각 디자인 구조

디자이너는 이제 막 연구를 시작한 화학자 같습니다. 지도 교수 없이 실험 도구만 가지고 실험을 하는 것 같죠. 수소 분자에 어떤 분자를 결합하면 물이 되는지 알아내기 위해 온갖 원소들을 결합해나갑니다. 색을 바꿔보고 아이콘 타입을 바꿔보면서 어떻게 하면 내가 의도한 대로 사용자가 느낄지 상상하면서요. 실험실이 폭발하지 않고 안전하고 효율적으로 디자인을 실험해 볼 수 있을까요? 

실험을 시작하기 전에 어떤 것들을 결합해야 할지 이해하는 게 필요할 겁니다. 이런 발상으로 Bradfrost에서 제시한 Atomic Design이라는 개념이 있습니다. 디자인의 요소를 화학적으로 분석해 각 단계별 요소들을 구분한 개념입니다. 

Atom 색, 서체, 아이콘 와 같은 최소한의 단위

Molecules 폼, 썸네일, 검색 박스와 같은 Atom이 합쳐진 작은 단위의 컴포넌트

Organism 리스트, 내비게이션 박스와 같이 Molecules이 합쳐진 컴포넌트

Structure 메인 페이지, 검색 페이지 등과 같이 다양한 컴포넌트가 조합된 페이지

서비스 디자인 구조

물 분자를 보고 강에서 바다로 물이 흘러가는 모습을 상상하기는 어려울 것입니다. 눈의 움직임과 인지에 집중된 시각 디자인과는 다르게 서비스 디자인은 상호작용할 수 있기 때문에 사용자의 행동이 중요하며, 사용자는 실제 세계에서 비슷하게 경험한 상황을 상상하며 행동합니다.  사용자는 문을 열고(버튼 터치) 새로운 공간으로 이동(페이지 이동)하며 자신이 이전에 학습했던 방식대로 행동할 것입니다. 이러한 과정이 디자인 패턴입니다.

디자인 패턴은 건축에 가깝습니다. 가정집, 호텔, 전시관 등 목적에 따라 큰 구조가 달라지고 각 공간에서 필요한 기능에 따라 공간의 형태가 달라지는 것처럼 말입니다. 객실에는 침대나 의자가 있고 화장실에는 세면대와 비데가 있듯이 사용자는 자그마한 모바일 스크린에서도 비슷한 멘탈 모델을 갖게 됩니다. 경험하지 못한 구조에서는 길을 헤매게 될 것입니다. 로비로 들어가는 문이 20개가 넘게 있다던가 화장실에 들어갔는데 세면대가 없다던가.

폴아웃 쉘터 플레이 과정이야말로 서비스 디자인 과정과 비슷하다 느꼈습니다.

디자인 시스템

구조에 대한 이해가 넓어지고 디자인 툴이 간편해지면서 반복 작업을 줄이고 일관된 경험을 유지하는 다양한 디자인 시스템이  개발되었습니다. 대표적인 Material Design 뿐만 아니라 Facebook나 Airbnb과 같이 기업만의 아이덴티티가 담긴 디자인 시스템도 있습니다. 회사에서 사용할 디자인 시스템을 만들려면 Atomic Design 개념만으로도 충분하지만 서비스의 성격에 따라 필요한 것이 달라질 것입니다. Material Design처럼 100~800 단계로 모든 색을 쓸 일은 거의 없을 것이기 때문입니다.

라디오 버튼을 보고 전체 디자인을 상상하기는 힘들듯 처음부터 사용할 디자인 요소를 정하는 것은 어렵습니다. 나뭇잎을 보고 숲 전체의 윤곽을 볼 수 있으려면... 나무의 생태와 주변 대기질과 날씨와 토양질까지 알고 있다면 알 수 있을 겁니다. 모든 일들이 그렇듯 큰 목표와 대략적인 윤곽을 잡은 뒤  작은 디테일을 챙길 것입니다. 간단한 스케치로 구조를 설계한 뒤 제작하려는 디자인 시스템의 한계를 어디까지 할 것인지 정합니다.

서비스의 성격에 따라 이미지 중심, 텍스트 중심일 수도 있으며, 신규 론칭한 서비스, 라이브 중인 서비스, 긴 기간 동안 운영된 서비스에 따라 필요한 것이 달라집니다. 존재하는 모든 디자인 요소들을 제작할 수는 없기 때문에 시스템에서 반복되는 요소가 무엇인지 파악한 뒤 필요한 요소를 디자인합니다. 다만 자세하고 상세한 규칙으로 인해 특정 페이지에서 지나치게 여백이 많아지거나 서체가 읽기 힘들어지는 등 적절하지 못한 디자인을 만들어 낼 수도 있기 때문에 규칙은 최소화하는 것이 좋을 것입니다.