위메프가 디자인시스템에 딥다이브한 사연

구글, 애플, 마이크로소프트, IBM, 스타벅스, 아우디, 우버, 에어비앤비, 알리바바, 세일즈포스, 쇼피파이…

이들 글로벌 기업의 공통점이 있다면 뭘까요? 여러가지를 꼽을 수 있겠지만 저는 오늘 ‘디자인시스템’ 이야기를 하고 싶습니다. 궁극적으로는 위메프가 현재 만들고 있는 ‘디자인시스템’ 이야기지요.

명칭 때문에 디자이너들만의 시스템이라고 오해할 수 있지만 디자인시스템은 제품이나 서비스를 만드는 모든 구성원에게 필요한 솔루션입니다. 공통의 언어와 가이드를 제시함으로써 기획-개발-디자인 영역의 간극을 해소하고 중복 업무를 줄여서 디자인 자산을 효율적으로 쓸 수 있는 일련의 과정을 만들어 주거든요. 즉 업무의 효율화죠.

업무 효율화로 기획, 개발, 유지 보수 등의 속도가 향상돼 보다 근본적인 문제 해결에 시간을 쓸 수 있게 도와준다는 점, 그리고 사용자에게 일관된 브랜드 경험까지 줄 수 있다는 점에서 디자인시스템을 도입하는 기업이 늘어나고 있습니다.

디자인을 구조화 한다고요? 왜죠?

가볍게 역사를 살펴보면 1977년 ‘패턴 랭귀지’란 개념을 담은 책(Christopher Alexander)에서 출발해 2000년부터 2010년까지는 시각적인 패턴 정리 정도로 회자됐는데요. 2011년경부터 프론트엔드 기술의 폭발적 성장과 함께 UI(User Interface) 디자인 패턴을 시스템화 하려는 시도가 늘어났어요.

교과서라 할 수 있는 구글 머티리얼디자인이 2014년 세상에 나오면서 본격적으로 IBM, 세일즈포스, 쇼피파이, 우버 그리고 국내에서도 토스, 뱅크샐러드, 라인, 배민 등과 같은 기업들이 디자인시스템을 도입하기 시작했습니다. 특히 세계 3위 이커머스 회사인 쇼피파이의 성공사례가 인상 깊은데요. 공통적으로 린(Lean)한 개발 문화가 있는 기업에서 필수 시스템으로 구축하는 추세라고 할 수 있습니다.

기업이 성장할수록 제품과 서비스는 다양하고 복잡해집니다. 동시에 조직도 대규모화, 세분화되면서 각 부서의 싱크를 맞추는 일이 점점 어려워지게 되죠. 이런 과정에서 디자인과 개발 역시 공통기준이나 가이드 없이 매번 새로운 것을 만들어서 반영하게 되는, 일종의 파편화를 겪게 됩니다.

파편화 문제는 중복된 업무 부담과 이에 따라 발생하는 불필요한 조직 내 커뮤니케이션을 유발하게 되죠. 이로 인해 제품과 서비스의 일관성이 무너지고 결국 사용자에게 부정적인 경험을 주게 됩니다.

위메프는 제품∙서비스의 다양성이 적었을 때는 ‘스케치’ 프로그램 도입으로 디자인 라이브러리를 구축해 효율성을 지킬 수 있었는데요. 성장을 거듭할수록 개발 규모나 콘텐츠가 방대해지면서 앞서 말한 파편화 상황을 피할 수 없게 되었습니다.

그 예로 '더 보기’ 버튼 하나에 각기 다른 목적이 생겨나고, 폰트 크기, 컬러, 곡선 각도 등이 미묘하게 다른 경우도 나오기 시작했습니다. 또 동일한 기능의 인터페이스 위치나 동작 방향이 제각각인 경우도 등장했어요. 결국 불필요한 요소들을 디자인과 개발부서 모두 유지 보수 범위에 포함하면서 작업자 레벨의 업무 효율성을 낮추는 결과를 초래했죠. 이대로 문제를 방치하면 안 된다는 결론이 나왔습니다.

디자인 자산 관리, 이제 디자인시스템에 맡겨주세요!

많은 기업이 이러한 파편화 문제를 해결하기 위해 디자인시스템을 도입합니다. 위메프 역시 오래 고민했던 디자인시스템 프로젝트를 올해 상반기에 본격적으로 시작했습니다. 디자이너, 개발자, 기획자가 공동의 목표를 가진 스쿼드 조직에 함께 모여서 말이죠.

디자인시스템은 서비스 출시 전후에 따라 도입 방향이 나뉩니다. 서비스 전이라면 디자인시스템을 포함해 개발하고 출시하면 됩니다. 그렇지만 이미 서비스 중인 상황이라면 기존 고객 경험을 유지하면서 개발을 진행해야 하니 더 어렵고 신중할 수밖에 없습니다. 마치 달리고 있는 차의 바퀴를 멈추지 않고 하나씩 바꾸는 것과 같으니 말입니다.

위메프는 당연히 후자에 해당합니다. 이미 대규모화된 디자인 자산을 체계적으로 분류하고 정의한 뒤, 조직 내 개발 환경을 파악해 어느 레벨까지 디자인시스템으로 대응할지 결정해야 했습니다.

핵심은 기준을 마련하는 일이었습니다. 소통하기 위한 규칙을 잘 만들어야 부서 간 지식 격차와 정보 비대칭에 구애 없이 수월하게 업무가 진행될 수 있기 때문입니다. 디자인시스템이 위메프의 또 다른 언어인 셈이죠.

이제 디자인시스템의 초기 주요 구축 과정을 단계별로 살펴보겠습니다.

Step 1 원칙 세우기

회사의 핵심 가치와 브랜드 정체성을 담은 철학 그리고 뛰어난 사용자 경험을 위한 디자인 원칙 등 다양한 구성원이 언어나 시각적 일관성을 유지하며 일할 수 있도록 체계적인 원칙을 세워 방향을 제시합니다.

Step 2 핵심 요소 정의

브랜드의 필수적 시각 요소인 컬러, 텍스트, 아이콘 여백부터 모션, 라이팅, 보이스톤 등의 정서적 요소까지 정의하고 개발합니다. 이 단계는 빠른 제품 확장에 도움이 되기 때문에 되도록 다양한 상황을 많이 고려하는 것이 좋습니다.

Step 3 컴포넌트 제작

컴포넌트는 사용자와 제품이 상호작용을 하기 위한 최소단위를 말하는데요. 탑 내비게이션 혹은 리스팅 같은 것이라 할 수 있습니다. 이러한 요소들이 반복적으로 등장해 재사용성이 높다고 판단되면 개발을 진행합니다.

Step 4 피드백 반영

이러한 과정으로 디자인시스템 개발이 끝나면 비로소 본격적인 시작입니다. 적용 범위를 늘려가면서 피드백을 받으며 시스템을 개선하고 자산의 신규 추가와 사용 빈도가 떨어지는 것의 정리를 지속해야 합니다. 또한 자주 사용하는 페이지의 템플릿 단위 개발도 병행하는 것이 좋습니다.

디자인이 똑똑해지면 개발자도 사용자도 편해집니다

디자인시스템은 데이터가 한 곳에 저장되고 편집되도록 정보를 구조화해야 한다는 SSOT(Single Source Of Truth, 단일 진실 공급원)을 핵심 개념으로 삼고 있습니다. 그렇다면 디자인시스템을 통해 얻을 수 있는 것, 또 궁극적으로 얻고자 하는 것은 뭘까요?

바로 고객 만족입니다. 회사에 구조적 효율화가 갖춰지면 직원들은 중복업무와 리소스를 줄여 더 나은 고객 경험을 위한 시간에 투자할 수 있게 되고 자연스레 고객 만족도 또한 올라갈 것이라고 기대하는 거죠! 같은 기준에 맞춰 일을 하니 서비스의 통일성과 일관성은 당연히 높아지고, 사용자 입장에선 적은 학습으로도 쉽고 편하다는 인상을 받게 됩니다.

매번 같은 것을 다시 만드는 일이 없어지니 구성원들의 만족도는 올라갈 수밖에 없습니다. 디자이너와 개발자는 사전에 정의된 요소를 빠르게 가져다 쓸 수 있기 때문에 협업 시 불필요한 커뮤니케이션을 하지 않고요. 특히 빠듯한 기한 내 데이터를 통해 가설과 검증을 반복하는 과제가 있을 경우 이러한 시스템화가 큰 도움이 될 수 있습니다.

디자인시스템이 반영된 제품은 필수 요소의 구체적 정의부터 사용이 빈번한 보편적 요소들까지 컴포넌트화가 잘 되어있기 때문에 특정 부분에만 전체적 변경이 있다고 하더라도 빠른 대응이 가능합니다. 새로운 제품을 추가할 때에도 개발 초기에 즉시 응용이 가능하기 때문에 기업의 확장성 또한 좋아집니다.
물론 디자인시스템이 만능 해결사는 아닐 것입니다. 제품이 엄격한 틀에 갇혀 창의성의 기회가 제한될 수 있는 점은 항상 주의해야 합니다. 고객의 니즈나 외부환경은 늘 변화하기 때문에 언제든 유연하게 변경과 개선이 가능한 아키텍처를 지향해야겠죠.

아울러 디자인이라는 것은 주관적인 판단 영역이라 다양한 관점을 수용하는 자세가 필요합니다. 충분한 사전 테스트를 통해 검증된 사용자 경험 혹은 개발 코드들을 현재의 고객 경험과 제품 컨디션에 맞춰 반영하려고 노력해야 하죠.

위메프 디자인시스템의 공식 명칭은 WDS(WEMAKEPRICE Design System)입니다. 현재 진행형이고요! 불필요한 시간사용을 줄여 사용자를 향해 깊이 고민할 시간을 확보하고 우리가 잘하는 일을 훨씬 더 잘 할 수 있게 돕는 것, 구성원들의 꾸준한 관심과 피드백으로 서비스와 회사의 성장을 뒷받침하는 체제로 만드는 것이 목표입니다.