디자인 시스템에 대해 처음 접했던 건 얼추 3년 전쯤의 일이었던 것 같다. 해외 아티클도 많이 뜨고 하던 와중에 요즘 실리콘 밸리에서 핫한 거라며 에어비앤비에서 일하는 디자이너가 한국에 와서 강연을 해준다고 하길래 업무 시간을 빼서 뚤레뚤레 갔다.
그런데 내용을 잘 들어보니 옛날 포털 같은 데서 하던 풍의 디자인 가이드나 psd로 컴포넌트 미리 만들어서 계속 복사해 쓰던 그것과 크게 다르지 않아서 갑자기 요즘 시대에 저게 왜 중요하지? 하고 어리둥절했던 기억이 난다.
그리고 3년이 지나니 발등에 불이 떨어져서 내가 디자인 시스템을 만들고 있네??? 현재의 UX/UI 디자인에 왜 디자인 시스템인지, 어떤 의미를 가지는지 개인적으로 회고해보려 글을 적는다.
스타트업 또한 프로덕트의 규모가 커졌다
한국에서의 린스타트업을 가리켜 귤이 회수를 건너와 탱자가 되었다고 불평했던 시절도 있었지만 시간은 흘렀고 2020년의 스타트업 바닥에는 빠르게 조금씩 빌드하고 유저의 반응을 봐서 변화하는 애자일 방식이 자리잡게 되었다.(한국에마저..) 그리고 실리콘밸리의 프로덕트는… 조금 많이 한국식 프로덕트 같아졌다. 규모가 커지고 이기능 저기능 다 집어넣는 포털과 비슷해졌다는 뜻이다. 현대의 모바일 포털을 요즘은 슈퍼앱이라는 새로운 이름으로 부르고 있다. 또, 서비스를 만들 때 iOS / Android / 반응형 웹을 지원하는 것이 기본 옵션으로 자리잡았는데 고려해야 하는 스크린의 가짓수가 적지 않다.
큰 프로덕트를 여러 명의 디자이너가 빠르게 디자인을 변경하다 보면, 메인 컬러가 비슷한 게 500개씩 나오고 같은 화살표 모양과 크기가 5억개씩 나오는 난리가 나게 마련이다. 개발자는 분명히 이거 전에 작업했던 거랑 같은 뭐시기 같은데 아무튼 조금 다르긴 다르니 리소스를 새로 받아 새로 작업해야 하고 이렇게 파편화된 스타일과 코드는 관리가 안 된다고 불평을 하기 시작한다. 규모가 큰 프로덕트에서, 디자인이 파편화되면 관리 비용이 늘어나고 품질이 떨어진다. 작은 프로덕트에서는 실금처럼 작았던 균열이 큰 프로덕트에서는 눈덩이처럼 커지는 것이다. 이 떨어진 품질은 서비스의 사용성에도 영향을 미치게 된다. 일관적으로 작동하지 않고, 시각적 요소가 제각각이라면 이 서비스에 신뢰하고 돈을 쓸 수 있을까? 그래서 일관성을 위해 기준점이 되는 공통 디자인 가이드를 만드는 일이 중요해졌다.
현대의 디자인 툴은 리소스의 구조화를 요구한다
변화가 너무 빠른 나머지 요즘은 Latte is horse..(라뗀 말이야..) 포토샵으로 UI 작업을 하던 시절이 있었다고 해야 할 판이다. 그때는 UI 디자인에 있어 공들인 스타일이 중요했다. 최대한 실제의 물건의 스타일을 따와서 세심하게 스크린 안의 메타포를 디자인했던 스큐어모피즘의 시대를 지나서도, 버튼을 버튼답게 만드는 세심한 스타일과 개성적인 레이아웃의 크리에이티브가 한동안 중요했다. 요즘은 대부분의 사용자가 모바일 터치 스크린에 익숙하다는 점을 전제한다. 또, 미적 관점과 크리에이티브보다 기술적인 효율과 비즈니스를 이해하는 관점이 디지털 프로덕트 디자인의 주류가 되었다. 스타일은 점점 단순해지고, 그에 따라 UI만 전담하기보다는 UX와 통합해서 일하는 포지션이 (한국에조차) 늘어났다. 하지만 이전부터 포털강국(…) K-프로덕트들은 늘 규모가 컸기 때문에 그 포토샵을 사용하던 시절조차 늘 디자인 가이드를 필요로 하여 이걸 어떻게 해야 사람들이 공통적으로 사용할 수 있을까 하는 고민은 늘 있었던 것 같다. 다만 요구되는 작업속도가 요즘처럼 그렇게까지 빠르지는 않았을 뿐이다.
그 시절 디자인 가이드를 만들던 프로세스를 떠올려봤다. 일단 PL이 주요 화면을 몇 개 만든 뒤 컨펌을 받는다. 그리고 컬러, 타이포, 컴포넌트 등의 공통된 요소를 추려 가이드용 PSD를 만들고 다른 화면을 칠 때 그 파일에서 ‘복사해서' 사용할 것을 요구한다. 그리고 팀원들이 화면을 만들면 파일을 일일이 확인해서 일관적이지 않은 부분에 대해 수정 요청을 하곤 했다.
스케치에서는 일찍부터 심볼과 레이어, 텍스트 스타일 기능을 제공했고 이 기능에 디자인 가이드를 넘어서 ‘디자인 시스템'으로 갈 수 있는 열쇠가 있다. 빠르게 증식하는 화면의 요소들을 공통된 스타일 혹은 컴포넌트로 직접 통제할 수 있는 것이다. 공통된 스타일과 컴포넌트를 통해 디자인 리소스를 잘 정리하고 통제할 수만 있다면 기초적인 디자인 시스템은 이미 완성되었다고 할 수 있다. 다만 작업자가 많아지고 더 빠른 작업 속도를 요구할 수록 이 자체가 어려워지기 때문에 여러가지 보조 수단과 문서가 필요하게 된다. 디자인 리소스의 체계와 가이드 문서가 완성된다면 5명 정도의 디자인팀을 위한 디자인 시스템의 2단계에 돌입했다고 할 수 있고, 나는 지금 이 단계의 작업을 비즈니스 프로젝트나 UX 개선 이외의 사이드 잡으로 1년 정도 계속하고 있는 중이다.
여기에서 규모가 더 커지면 디자인 시스템을 위한 전담 작업자가 생긴다. 당시 규모가 크지 않은 프로덕트를 하고 있던 내가 “이게 뭐야…” 하고 어리둥절했던 그 에어비앤비 디자이너 강연 행사에서 토스 디자이너들 만큼은 자신감 있는 얼굴을 하고 있었다. 아마도 이미 그때부터 디자인 시스템을 준비하고 있었고 본인들이 더 잘 한다는 확신이 있었을 것이다. 후에 TDS라는 디자인 시스템 발표를 보고서야 그 자신감의 정체에 대해 알게 되었다. 토스는 필요한 디자인 컴포넌트가 생기면 디자이너의 요청을 받아 시스템 담당자가 유지보수하고 워킹하는 코드와 연결을 꾀하는 일반적 대기업의 방식에서 좀 더 나아갔다. 아예 UI 디자인 스타일 및 일관성 관리에 대해서는 디자인 시스템 팀에 외주를 주고, 프로덕트 디자이너는 UX와 비즈니스에 더 집중하게끔 하는 시스템이라는 인상을 받았다.
언제 디자인 시스템을 만들어야 할까?
포토샵으로 UI 디자인을 하던 시절에는 모든 레이어에 이름을 붙이는 사람은 굉장히 특이한 사람 취급을 받았다.(내 얘기다.) 그러나 스케치는 말하는 대로~ 가 아니라 작업하는 대로~ 그대로 개발용 디자인 가이드가 나가는 특성이 있고, 효율적 시스템을 만들기 위해서는 사소하게는 이름부터 구조화를 해야 한다. 개발에서는 코딩 컨벤션이라고 부르는 그걸 디자이너도 신경써야 하는 그런 머리아픈 시대가 온 것이다. 본의 아니게 이직을 많이 하면서 타인이 작업한 스케치 파일을 많이 접하게 됐는데, 디자이너들의 스케치 사용 방법은 100이면 100 다 다르기 때문에 한 서비스를 작업하는 디자이너가 두 명이 되는 순간 공통 가이드와 작업 규칙이 있어야 하는 셈이다. 물론 풀 타임 디자이너가 두 명이 되는 순간은 언젠가 오기 때문에 미래의 나와 동료를 위해서 디자인 시스템을 만들어 두는 게 좋다고 생각한다. 2018년의 그 강연회 당시 에어비앤비에 계시던 한유진님은 언제 디자인 시스템을 만들어야 하냐는 질문에 “가능하면 빠른 것이 좋다" 라고 대답했는데 그 의미를 꽤 오랜 시간이 지나서야 깨달았다. 하지만 좀 더 디자인 시스템이 급한 회사들이 있다고 생각하는데 그 회사들의 특징은 다음과 같다.
- 서비스의 기능이 빠른 속도로 확장된다.
- 의사결정이 자주 바뀌는 등의 이유로 UX/UI 및 디자인 리소스를 자주 부분수정해야 한다.
- 디자이너가 3명 이상이다.
- 디자이너가 UX/UI를 통합해서 작업한다.
- 디자이너 인적 구성이 자주 바뀐다.
코드처럼 디자인 리소스를 관리해야 하는 필요 조건과도 거의 동일하다. 그래서 디자인 시스템 도입과 함께 디자인계의 github, 버전 관리 툴 Abstract도 도입해서 모두 개고생을 하고 있다…
어머 우리 회사잖아?
디자인 시스템은 일종의 사내 공통 규약이기 때문에 시스템을 만드는 것도 일이지만 도입하자고 설득하는 자체가 더 큰 일일 수도 있다. 나는 주로 기능 빌드가 빠른 회사들에 다니다 보니 버티고 버티다 시니어인 내가 입사했을 때는 이미 기능 파악조차 안 될 정도로 디자인 리소스가 엉망진창이 되어 있는 경우가 많았다. 시스템을 만들고 리소스를 재구조화하는 데는 시간이 필요한데, 비즈니스에서는 당연히 그런 걸 할 시간이 없다고 한다. 디자인 리소스가 바뀌면 디자인 가이드도 변경이 되는데, 변경 트래킹 및 새로 맞추기를 번거로워하는 개발자들도 있다. 또, 디자이너가 2명 이상이라면 100이면 100 툴 사용 및 구조화 방법이 다른 디자이너들끼리의 합의도 필요하다. 그래서 “왜 필요한지" “무엇이 바뀌는지" “무엇이 좋아지는지" 를 알리고 홍보하고 협의하는 일도 디자이너의 몫이다. 그래서 대대적인 디자인 시스템 작업에는 외부까지 이어지는 홍보 행사가 붙는가도 싶은데, 대부분 우리는 그렇게까지 디자인이 중요한 회사에는 못 다니고 있으니까… 많은 과거 시점의 나처럼 이미 현재의 리소스를 가지고는 UX/UI 디자인이 어렵기까지 한 상황에서 막연히 알음알음 PPT니 키노트를 그려가며 이걸 굳이 왜 해야 하는지 설명해야 하는 상황이 많을 거라고 생각한다. 미래의 나와 동료들을 위해, 무거운 몸을 이끌고 굳이 긴 글을 쓴 이유이다.
