제일 잘 아는줄 알았지만, 제일 알지 못했던

학교 동아리 내에서 단순히 포트폴리오 용으로 디자인시스템을 개발해 본적이 있다. 하지만 그냥 개발에만 집중하다 보니 디자인 시스템의 근본적인 개념과 철학에 대해서는 고민해본적이 없는 것 같다. 먼저 디자인 시스템의 정의에 대해 확립해보자

디자인 시스템이란?

나는 단순히 디자인 시스템이 중복되는 UI를 재사용이 쉽도록 한곳에 모아진 시스템 정도로만 이해하고 있었다.

얼핏 봐도 낮고 얕은 수준의 정의이다. 실제로 우리 회사 프론트엔드 리드님께 디자인 시스템을 개발해보고 싶다는 포부를 던지고 “디자인 시스템의 정의가 뭐냐?”는 질문을 받았다. 나는 그 질문에서

중복되는 UI의 재사용률을 높이고 파편화 되지 않게 규격화하여 한곳에 모아둔 시스템이요. 😎

위와 같은 답변을 하고 “맡길 수 없다”라는 답변을 받았다. 이어서 “그러면 UI Kit과 다른점은 뭐냐?” 라는 질문이 왔고 나는 답할 수 없었다. 이유는 단순하다. 디자인 시스템을 “UI”라는 키워드에 대해서만 생각해봤기 때문이다. 디자인 시스템은 UI 만 규격화하고 집합 시켜놓은 시스템이 아니다.

Nielsen Norman Group, WebFlow 등 여러 기업의 기술 블로그에서는 디자인 시스템을 다음과 같이 말한다.

즉 디자인 시스템은 디자이너와 엔지니어가 일관된 제품 개발 또는 디자인을 위해 공유할 수 있는 모든 것(브랜딩 리소스, 가이드라인, UI, UX패턴, 디바이스 별 규격 등)을 재사용 가능하고 계속 발전할 수 있게 구성한 시스템을 말한다. 아까 말했던 UI Kit같은 경우에는 디자인 시스템의 내부에 포함된 작은 범위이다. 디자인 시스템은 모든 디자인의 표준을 관리하는 큰 집합이다.

대표적인 예시로 구글 Material Design System 이 있는데, 얘네들은 System, Foundation, Guidelines로 나누었다.

디자인 시스템이 고려해야 할 것들

위에서 디자인 시스템의 정의에 대해 알아봤다. 그러면 디자인 시스템이 디자인 시스템으로서 역할을 잘 할려면 어떻게 해야할까? 디자인 시스템은 위에서도 모든 것을 아우르는 거대한 하나의 시스템으로 말했었다. 따라서 가이드라인, UI, 브랜딩 리소스 등 제공하는 요소도 상당히 많을 것이다.

또한 디자인 시스템이 개발되면 모든 프로덕트의 코어부분을 차지할 확률이 높다. 따라서 기초 설계가 중요하다. 이런 기초 설계는 단순히 DDD나 MFA같은 소프트웨어 아키텍쳐 설계가 아닌 디자인 또는 도메인 측면에서의 설계를 말한다. 예를 들자면 디자인 원칙은 무엇으로 할 것이며, 이런 UI에는 어떻게 대응 할 것이고, 사용자에게 이 다음에는 어떤 화면을 보여줄지 같은 것을 말한다.

설계 뿐 아니라 구현 단계에서도 노력이 필요하다. 디자인 시스템의 장점중 하나인 재사용성이라는 이점을 챙겨야 하기에, 고유한 컴포넌트를 명확한 네이밍으로 분류하는 것이 중요하다. 쉽게 말해서 잘 추상화의 영역이다. A프로덕트, B프로덕트 모두에서 의미가 맞는 컴포넌트를 설계해야 한다.

하지만 아무리 잘 짜놓은 컴포넌트라고 해도 modal이나 overlay를 생성할때는 네이밍만으로 사용 방법을 유추하기는 어렵다. 내부로직을 까보는 방법도 있겠지만, 내부로직을 까보며 이해하는 시간도 걸리니 불필요한 리소스를 낭비하는 경우가 될 수 있다. 따라서 디자인 시스템에서 제공하는 요소에 대하여 파악하기 쉽도록 문서화 하는 것도 중요하다.

디자인 시스템의 장점

디자인 시스템은 여러가지 신경써야 할 부분들이 정말 많고, 많은 시간과 리소스를 쏟아야 한다. 하지만 이런 리소스 소모를 감수하고 기업들이 디자인 시스템을 만드는 이유는 무엇일까?

제일 근본적인 핵심은 브랜딩 리소스, UI/UX, 가이드라인 등을 규격화하고 한곳으로 모음으로서, 즉 모두가 알아들을 수 있는 언어로 통일함으로써 사용자, 디자이너, 엔지니어 + @가 원할한 소통을 할 수 있다는 것이다.

개발자가 추상화된 컴포넌트를 이름만보고 불러와 프로덕트를 개발하는 것 ,

디자이너가 기존 디자인 시스템 내부에 있는 디자인을 가져와 빠르게 프로토타입을 보여주는 것

정립된 원할한 소통을 기반으로 다음과 같이 커뮤니케이션 비용을 줄이고 효율성을 높일 수 있는 것이다.

디자인 시스템의 함정

많은 이점들을 주는 디자인 시스템이지만 리소스도 많이 들어간다고 했다. 따라서 규모가 작은 프로덕트에서는 디자인 시스템을 만드는 것이 오히려 역효과를 일으킨다. 작은 프로덕트에 디자인 시스템을 적용하면 안 되는거냐고 질문할 수 있겠지만, 페이지 몇 개 있는 프로젝트에 디자인 시스템을 적용한다고 했을 때 고유한 컴포넌트가 몇이나 나올지, 몇 명의 사용자가 이런 UX에 얼마나 민감할지를 생각해봐야한다. 즉 효율이 안 난다는 것이다. 오히려 디자인 시스템을 개발하기 위해 소모한 시간만 낭비될 뿐이다.

마치며

지피지기(知彼知己)라는 말이 있듯이 적(?)을 알아야 나를 안다는 마인드로 디자인 시스템을 맡기 전에 디자인 시스템에 대해 한번 알아봤다. 디자인 시스템도 하나의 솔루션인 만큼 여러 이점과 단점들을 가지고 있고, 상황에 영향을 받는다. 따라서 디자인 시스템을 도입이란 주제는, 많은 고민과 검토가 동반되어야 하는 부분이라고 생각된다.