원티드 디자인 시스템 적용기

서비스에 디자인 시스템을 어떻게 적용해야 할까?

디자인 시스템은 여전히 업계의 이슈이고, 디자인 시스템의 효율성과 필요성에 대해서 이제는 디자이너, 개발자가 아니어도 많은 분들이 공감하시고 계십니다. 그런데 막상 디자인 시스템을 어떻게 시작해야 할지, 혹은 디자인 시스템을 작업하였지만 실제 서비스에 어떻게 반영해야 할지 모르겠다.. 와 같은 의문들은 여전히 남아있는데요. 오늘은 원티드의 디자인 시스템 적용 사례를 통해 여러분들의 이러한 의문을 조금이나마 풀어드리기 위해 글을 남기게 되었습니다. 어려운 내용들을 최대한 배제하고 이해하기 쉽게 비유를 통해 글을 적어 보았으니 재미있게 봐주셨으면 좋겠네요. 

레고를 조립하기 위해 레고 블록부터 만들던 시절이 있었다.

우선 디자인 시스템을 레고에 비유해 보겠습니다. 디자인 시스템이 없던 시절의 레고 조립은 위쪽 상단 그림과 같았습니다. 플라스틱을 녹여 틀에 붓고 그것들을 식혀 블록이 완성되면 블록 하나하나를 조립을 하여 우리가 원하는 레고 자동차도 만들고 레고 비행기도 만들었습니다. 하지만 우리가 구축하고 있는 디자인 시스템에서는 블록을 만드는 공수를 줄이고 미리 블록들을 만들어 놓아 위쪽 하단 그림과 같이  빠르게 레고 자동차와 레고 비행기들을  만드는 일들을 진행할 수 있도록 하는 것을 목표로 두고 있습니다. 실제로 이렇게 조립만을 할 수 있는 환경이 구현된다면 제작 속도를 많이 줄일 수 있겠죠?

서비스 = 거대한 저수지, 유저 = 저수지 안의 물고기

그렇다면 이렇게 효율적인 디자인 시스템을 원티드의 작업자분들은 어떠한 방식으로 서비스에 적용시키고 있는 것일까요? 이내용 또한 비유를 통해 설명해 보도록 하겠습니다. 우리의 서비스는 거대한 저수지와 같습니다. 저수지 안에는 많은 물고기들이 살고 있고 여기서 물고기는 유저를 상징합니다. 그리고 여기서 물의 수질은 서비스에서의 디자인, UX, 로딩 속도 등과 같은 서비스의 퀄리티를 상징하죠. 원티드에서는 보다 많은 물고기들을 모으기 위해 스쿼드(원티드가 일하는 목적 중심 단위 조직)를 운영하고 있고, 각 스쿼드에서는 물고기가 더 많이 살 수 있도록 저수지의 수질 관리에 많은 노력을 기울이고 있습니다.

그런데 현재의 저수지 수질은 좋은 편이 아닙니다. 그 이유는 저수지 구축 당시의 만든 구조물(레가시 코드 & 레가시 디자인)들이 오래되어 낙후되었고 저수지 안에 저희의 생각보다 더 많은 물고기들이 들어오게 되면서 수질 관리의 공수 또한 많아졌기 때문이죠. 즉, ‘물고기 = 유저’가 살기 최적화된 환경이 아니게 되었습니다. 그럼 ‘물을 한 번에 다 빼고 새로운 물로 교체해 한번에 수질을 개선하면 되지 않을까요?’라는 반문이 들 수도 있을 것 같습니다. 하지만 이미 많은 물고기들이 살고 있는 저수지에 물을 한 번에 교체하기란 역시 쉬운 일이 아닙니다.

한동이 한동이 장인의 느낌으로..

그렇다면 그동안 원티드에서는 어떠한 방식으로 수질을 관리해 왔을까요? 과거 스쿼드에서는 수질을 수동적 방식으로 관리하고 있었습니다. 물을 스쿼드의 디자이너와 개발자들이 직접 길러서 물에 들어 있는 불순물도 정제하고 물에 약도 쳐서 깨끗한 물을 만들었습니다. 그러다 보니 계속 정수를 하여도 물의 상태가 빠르게 나아지지 않았고 물의 수질을 개선하는 작업들도 너무 고단하였죠. (제일 처음 비유한 것처럼 레고 블록을 하나하나 만들고 있는 상황의 연속..)

앞으로는 버튼 누르는 공수 만으로도 수질을 개선할 수 있다.

저희는 이러한 문제들을 해결하기 위해 디자인 시스템 라이브러리라는 자동 여과기를 도입하였습니다. 스쿼드의 디자이너와 개발자분들에게 자동 여과기 사용법들을 교육하여 수동으로 수질을 정수하는 고단한 방식이 아닌 기계 사용법만 익혀도 수질 개선이 필요할 때 여과기의 버튼만을 조작해 빠르게 수질을 개선할 수 있게 말이지요. (이미 만들어진 레고 블록들을 활용하여 간단하게 조립할 수 있는 버튼!) 그런데 여기서 또 다른 문제가 발생합니다. 바로 디자인 시스템 라이브러리 즉 자동 여과기를 만드는 데는 시간이 좀 걸리다는 점이지요.

저희는 일단 상반기 동안 저수지에 사용될 자동 여과기 본체를 만드는 작업에 집중하였습니다. 본체 안에는 색상과 텍스트 스타일이라는 최소한의 기본 필터링 기능이 탑재되어 있었고, 현재는 여과기 안에 들어갈 여러 가지 필터들을 계속 만들고 있습니다. 이 필터들은 버튼 스타일, 탭 스타일 등 다양한 디자인 요소들도 구성되어 있고요. 이렇게 저희는 현재의 여과기 본체에 필터들을 부지런히 장착 중이며 올해 안에는 이 자동 여과기 안에 들어갈 모든 필터들을 만드는 것을 목표로 작업 중에 있습니다.

지금까지의 비유들이 잘 이해되셨을까요? 비유를 빼고 실제 작업자들 관점에서 정리를 한번 해보겠습니다. 디자인 시스템 작업자들은 각 스쿼드의 디자이너와 개발자들이 쓸 디자인 라이브러리와 개발 라이브러리를 구축 후 각 팀과 전사에 배포를 진행합니다. 그리고 배포된 라이브러리를 활용해 모든 디자이너와 개발자들이 실제 제품 개발을 스쿼드 및 팀에서 진행합니다. 이렇게 작업이 진행되다 보면 원티드 서비스의 퀄리티 개선은 점차 자연스럽게 이루어질 것이고 작업 속도 또한 지속적으로 빨라질 것입니다. 그리고 이 공통의 라이브러리는 관리자를 두어 지속 운영해 디자인 시스템을 관리합니다.

이처럼 쉽지만은 않은 디자인 시스템 코드화를 진행해온 지 원티드에서 어느덧 7개월이 지났습니다. 앞으로 계속 진행될 원티드의 디자인 시스템에 많은 관심과 호응 부탁드리며 디자인 시스템을 통해 더욱 단단한 서비스로 거듭날 원티드도 많은 기대 부탁드리겠습니다. 읽어주셔서 감사합니다!

글. 프로덕트 디자이너 김석희