디자인 시스템은 디자인이 아닙니다
너도나도 디자인 시스템(feat. 이게 다 피그마 때문?)
바야흐로 디자인 시스템의 시대다. UX/UI를 조금이라도 다뤄본 사람이라면 디자인 시스템을 모르는 경우가 드물고, 실제로 경험해 본 사람도 많아졌다. 이제는 신입 디자이너의 포트폴리오에서도 디자인 시스템 작업이 포함된 사례를 흔히 볼 수 있다. 이처럼 업계 전반의 실력이 상향 평준화되고, 관련 도구가 빠르게 발전하면서, 디자인 시스템뿐 아니라 UI를 다루는 전체적인 수준도 크게 향상되고 있다.
디자인 시스템이 디자이너의 필수 코스가 된 이유는 단연 피그마의 등장과 발전 덕분이다. 피그마는 디자이너의 업무 방식을 짧은 시간 안에 급격히 바꿔놓았다. 불과 3~4년 전만 해도 포토샵이나 일러스트레이터로 웹디자인을 하던 나로서는, 지금처럼 개선된 디자인 환경이 반갑기도 하지만 한편으로는 갈수록 도구를 다루는 테크니션으로서의 디자이너만 양산되는 듯한 현실에 아쉬움이 남는다. 이번 글에서는 디자인 시스템을 왜 ‘디자인’이라고 보기 어려운지, 그 이유와 생각을 정리해 보고자 한다.
디자인 시스템이 뭐길래
포트폴리오를 첨삭하며 여러 디자이너와 이야기를 나누다 보면, 모두가 공통적으로 사용자의 불편함을 찾아내고 이를 해결하는 것이 디자이너로서 가장 중요한 역할이라는 점을 알고 있다. 디자이너라면 당연히 그래야 한다는 것도 모두 동의한다. 하지만 도구가 너무 빠르게 발전하다 보니, 도구 공부를 소홀히 하면 금세 도태될 것 같은 불안감에 테크닉에 지나치게 집착하는 경우가 많다. 나 역시 이전보다 기술 공부에 훨씬 더 많은 시간을 투자하고 있다.
피그마를 다루는 디자이너에게 가장 어려운 디자인 기술이 뭐냐고 물어보면, 디자인 시스템이라고 답하는 사람이 절반 이상이다. 피그마에서 가장 어렵고도 복잡한 기술이 집약된 파트가 바로 디자인 시스템 구축과 관리, 운영이다. 디자인 시스템이 뭐길래 다들 디자인 시스템을 외치는 걸까?
디자인 시스템을 뜯어보자
디자인 시스템의 정의
잘 모르는 것이 있을 때, 그걸 알기 위해 가장 먼저 해야 할 일은 뭘까? 바로 모르는 것의 개념, 즉 뜻을 찾는 것이다. 그렇다면 디자인 시스템을 이해하려면 가장 먼저 디자인 시스템의 정의와 개념부터 알아야 한다. 개념을 정의하는 일은 생각보다 훨씬 중요하다. 이를 통해 자신이 무엇을 모르는지 정확히 파악할 수 있고, 그에 따라 무엇을 찾아야 할지도 명확해지기 때문이다.
디자인 업계의 바이블이자 도덕인 닐슨 노먼 그룹에서는 디자인 시스템에 대해 다음과 같이 정의하고 있다.
‘A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.’
‘디자인 시스템은 확장가능한 디자인을 관리하기 위한 기준들의 모음집이다. 이는 다양한 페이지와 채널에 존재하는 불필요한 중복을 줄이고, 매체를 뛰어넘는 공통된 디자인 언어와 일관된 시각 경험을 제공함으로써 실현된다.’
이 정의만 읽으면 다소 추상적이다. 중요한 키워드를 중심으로 행간을 읽어보면 다음 3가지의 중심 키워드를 찾을 수 있다.
- ‘a set of standards’
- ‘reducing redundancy’
- ‘a shared language and visual consistency’
즉, 어떤 기준들의 집합이자 모음이라는 게 핵심 개념이다. 그 모음집은 불필요하게 중복되는 디자인이나 개발을 줄여야 하고, 공통의 언어 체계를 가지고 있어야 한다는 뜻이다. 디자인 시스템의 개념을 살펴보면, 생각보다 ‘디자인’에 대한 이야기가 없다. 분명 디자인 시스템을 처음 접하는 디자이너들은 뭔가 피그마에서 뚝딱거리며, 컴포넌트를 그려내는 무언가로 생각하고 있을 텐데, 정작 디자인 시스템은 UI를 디자인하는 것과는 거리가 멀어 보인다.
디자인 시스템의 개념을 다시 정리하면, 공통의 언어 체계를 갖춘 기준들의 모음이다. 즉, ‘확장성 있는 디자인을 위해 불필요한 중복을 줄이는 공통된 언어 체계’라는 뜻이다. 이 개념이 매우 중요하다. 그런데 디자이너들은 디자인 시스템을 피그마로 먼저 알게 되고, 피그마 안에서 다루는 기능들로만 디자인 시스템을 접한다.
이 부분이 바로 디자인 시스템의 현실과 이상 사이의 괴리다. 피그마에서 디자인 시스템을 만들기 위해 제공하는 기능들은 디자인 시스템의 극히 일부분에 불과하다. 그래서 디자이너들이 디자인 시스템을 공부하고 파악하기 어려운 것이다.
디자인 시스템은 ‘언어’다
우선 디자인 시스템의 정의에서 왜 ‘언어 체계’라는 표현이 나오는지를 먼저 알아야 한다. 언어라는 건 일단 의사소통의 수단으로 사용된다. 한국어 화자들은 한국어를 사용하는 사람들과 의사소통이 가능하다. 영어 화자는 영어 화자들과 소통이 가능하다. 당연히 한국어만 가능한 사람은 영어만 가능한 사람과 말이 통하지 않는다. 그렇기 때문에 언어는 사회적이다. 같은 언어 체계를 공유하는 사람들이 모이면 문화가 생겨나고, 외부에서는 그 문화를 이해하기 힘들다. 쉬운 예시로는 ‘우리’라는 말을 많이 쓰는 한국어 화자를 이해하기 어려워하는 영어 화자들을 생각해 보면 된다.
또 언어는 임의적이라는 특징이 있다. 예를 들어, 나무에서 열리고, 빨갛고 새콤달콤한 과실을 한국어 화자는 ‘사과’라고 부르기로 약속한다. 우리끼리 ‘사과’라는 말을 빨간 열매에 대응시키는 것이다. 어떤 신이 나타나 ‘이건 사과라고 불러라’라고 정해주고 홀연히 떠나는 게 아니다. 또한 나 혼자 사과를 ‘아메리카노’라고 불러도 소통이 되지 않는다. 나 역시 사과라고 불러야 하고, 그건 한국어를 쓰는 사람들 간의 합의와 약속이다. 영어 화자에게 아무리 ‘사과’라고 천천히 말해도 영어 화자는 ‘apple’이라고 하지 않는 이상 영원히 이해할 수 없다. 이것이 언어의 대표적인 속성들이다.
디자인 시스템은 그래서 언어 체계다. 우리 회사의 프로덕트 팀이라는 집단이 공유하는 말이다. 우리의 디자인 시스템을 쓰는 팀끼리만 대화가 가능하다. 우리 제품에서 ‘배너’라고 부르는 무언가를 옆 회사 사람들은 뭔지 모를 것이다. 반대로 옆 회사 사람들이 뭔가를 ‘오버레이 화면’이라고 지칭하더라도 우리는 모른다. 예를 들어, 어떤 UI를 ‘고양이’라고 불러도 우리 팀이 합의만 한다면 ‘고양이’라고 부르면 된다는 것이다. 이렇게 모두 제각각이라, 디자인 시스템을 파악하고 공부하기 어려운 부분이다.
디자인 시스템에 있어야 하는 것
디자인 시스템이 어려운 이유는 또 있는데, 바로 디자인만 있는 게 아니라는 점이다. 흔히 디자인 시스템이라고 해서 보면 UI 디자인 결과물만 담겨 있는 경우가 많다. 엄밀히 따지자면 그건 시스템이 아니라 UI 키트나 스타일 가이드에 더 가깝다. 그렇다면 키트가 아닌 디자인 시스템에 있어야 하는 건 뭘까? UI 디자인 결과물은 물론, 사용법이나 문법(UX)과 코드까지 있어야 한다. 다시 말하자면, 디자인 시스템은 문서여야 한다. 피그마 컴포넌트만 달랑 넣어 놓고 디자인 시스템 구축이라고 하는 건, 디자인 시스템에 대해 잘못 알고 있는 것이다.
버튼 하나를 넣어도 버튼에 대한 구체적인 설명이 모두 있어야 한다. 가장 교과서적인 예시는 역시나 머티리얼 디자인이다. 처음 머티리얼을 공부할 때 UI 생김새만 보고 마는 경향이 있는데, 사실은 문서 자체가 중요하다. UI를 그리는 것은 가장 나중의 문제다. 머티리얼이라는 구글의 디자인 시스템 문서에 담긴 콘텐츠가 중요하다.
머티리얼 디자인에서 버튼을 찾아보면, 다양한 종류의 버튼이 있다. 이 중에 어느 하나를 누르더라도 요약(Overview), 규격과 속성 등 스펙(Spec), 가이드라인(Guideline), 접근성(Accessibility)까지 4가지 구성을 볼 수 있다. 디자인 시스템이란 어떤 것을 설명할 때 이 4가지 항목이 모두 있어야 한다는 뜻이다.
그래서 어렵다. 아무리 간단해 보이는 UI라도 상세한 규격부터 크기, 상태 값, 토큰 등 생소한 개념도 필요하고, 언제 쓰고 안 쓰는지에 대한 규칙, 문구를 넣는다면 문구에 대한 UX 라이팅 원칙 등이 있어야 한다. 현실적으로 업무에 집중하면서 동시에 디자인 시스템을 이정도 수준으로 다룬다는 건 막대한 투자가 필요한 일이다. 그래서 어렵고 찾기도 힘들다. UI를 다루는 디자이너의 꽃이 디자인 시스템이라고 불리는 이유다. 그만큼 컴포넌트와 UI의 이해도가 깊고, 숙련되어 있다는 방증이기도 하다.
또한 디자인 시스템은 우리 팀을 위한 제품이다. 사용자를 위한 제품을 꾸준히 개선하는 것이 디자이너의 할 일이다. 디자인 시스템도 우리 팀을 위한 하나의 제품이기 때문에 꾸준히 개선하는 비용이 필요하다. 한 번 비용을 투자해서 만들고 끝이 아니라는 것이다. 꾸준히 비용이 들어가는데, 효율을 올리는 것이 중심이다 보니 사용자를 대상으로 하는 일반 제품에 비해 그 효과가 가시적이지도 않다.
그럼에도 디자인 시스템을 만들려면?
그럼 영원히 디자인 시스템을 못 만드냐고 물으면 그건 또 아니다. 디자인 시스템의 정석은 머티리얼 디자인이지만, 우리가 모두 그런 수준의 제품을 만들 수 있는 것도 아니고, 그렇게 해볼 수 있는 회사도 많지 않다. 그럼에도 결국 우리 팀이 사용하는 UI 언어를 조금씩 통일해야만 발전할 수 있다. 그 발전을 위해 어떤 시도를 할 수 있을까?
일단 디자인 시스템이라는 거창하고 규모 있는 개념은 잊자. 대신 우리 제품에서 사용하는 UI를 한곳에 모은다고 생각해 보자. 한곳에 모았다면, 디자이너가 이 UI를 어떻게 쓰는지 대략적인 규칙이 있을 것이다. 규칙이 없더라도 습관적으로 언제, 어떻게 쓰는지 파악할 수 있다.
이 습관과 규칙을 노션이든 피그마든 어딘가에 메모하는 게 디자인 시스템으로 가는 첫 시작이다. 메모했다면, 이제 개발자들과 이야기해 보자. 이러한 규격의 UI를 반복적으로 사용할 것 같은데, 개발에서도 미리 만들어 두고 쓸 수 있는지, 또는 디자이너는 이걸 이러한 개념으로 만들어 쓰는데, 개발자도 그런지 등을 묻자. 이게 디자인 시스템의 시작이자 전부다. 그러니 처음부터 피그마에서 거창하게 무언가를 만들려고 하지 말자. 그것은 디자인 시스템이 주는 허상이다.
디자인 시스템은 ‘프로덕트 시스템’이다
디자인이 아닌 시스템
지난한 이야기를 했지만 결국 디자인 시스템은 별것 없다. 우리 팀 모두가 UI를 바라보는 관점과 사용하는 패턴을 모아두는 문서다. 디자인 시스템이라고 해서 뭔가를 기대했다면, 뭔가 복잡한 내용과 수많은 텍스트만 볼 뿐이다. 여기서 한 가지에 주목해 보자. 우리가 다루는 건 ‘디자인 시스템’이다. 그렇다면 ‘시스템’이란 뭘까?
표준국어대사전에서는 ‘필요한 기능을 실현하기 위하여 관련 요소를 어떤 법칙에 따라 조합한 집합체.’라고 서술하고 있다. 다시 말하면, 특정 규칙에 따라 요소들을 조합해 둔 것을 뜻한다. 우리나라 말로는 체계라고 하는데, 유기적으로 움직이게 하는 구성 요소들의 조합이라고 이해할 수 있다. 톱니바퀴 여러 개가 맞물려 돌아가는 정교한 기계를 연상하면 쉽다. 위에서 언급했던 닐슨 노먼의 디자인 시스템 정의에서 ‘a set of standards’와 일맥상통한다. 디자인 시스템은 체계다.
디자인 시스템은 ‘디자인’이라는 말이 들어가다 보니, 디자이너의 전유물로 여겨지는 경우가 많다. 실제로 지금까지 그래온 곳도 많고, 여전히 많은 사람들이 디자이너만 다루는 것으로 인식하고 있다. 그래서 많은 디자이너들이 디자인 시스템으로 고통받고 있다. 여기서 중요한 건, 디자인 시스템에서 ‘디자인’은 설계라는 것이다. 제품을 ‘설계’하는 체계, 즉 제품이 효율적으로 운영될 수 있도록 구성요소를 조합하는 체계다. 즉, 디자인 시스템은 ‘디자인’이 중요하기보단, ‘시스템’이 더욱 중요한 것이다. ‘시스템’에 방점이 찍혀야 한다.
UI를 정교하게 그려내는 것이 중요한 게 아니다. UI에 대한 팀의 이해를 통일시켜서, 오히려 UI에 신경 쓰지 않고 제품에만 집중할 수 있도록 만들어야 한다. 디자인 시스템은 제품에 대한 시스템, ‘프로덕트 시스템’이기도 하다. 오히려 디자인에만 얽매이는 ‘디자인 시스템’보다는 ‘프로덕트 시스템’이 더 적합하지 않을까 싶다. 이번 글을 통해 디자인 시스템이 체계로서 팀의 협업과 제품 개발에 중요한 역할을 한다는 점을 깊이 이해하는 데 도움이 되길 바란다.
©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.
