셀프서비스 디자인시스템 #1 – 디자이너 편
안녕하세요. 저는 우아한형제들 배민사장님디자인팀 플랫폼디자이너 태주희입니다.
(아마도 디자이너로서는 테크 블로그에 처음으로 글을 쓰는 것 같네요.)
저는 1년 전 셀프서비스팀의 프로덕트 디자이너로 일할 때 셀프서비스 디자인시스템을 만들었던 이야기와 그로부터 1년 후인 지금은 어떤 변화가 있었는지에 대한 이야기를 해보려고 합니다.
배달의민족 서비스에는 앱을 통해 음식을 주문하시는 B2C고객과, B2B고객인 가게를 운영하는 업주님들이 계십니다.
셀프서비스팀은 B2B고객인 업주님들이 배달의민족을 잘 이용할 수 있도록 다양한 feature를 개발하고 서비스하는 팀입니다.
그 중 대표적인 서비스가 배민사장님광장 https://ceo.baemin.com/ 인데요.
업주님들은 배민사장님광장에서 제공하는 배민셀프서비스 기능을 통해 가게의 운영 시간을 변경하시기도 하고, 메뉴 정보를 수정하시기도 하는 등 배달의민족 내의 본인 가게를 운영/관리하고 있습니다.
2020년 초에 배민셀프서비스 전면 개편 프로젝트가 있었는데요, 프로젝트 시작부터 완료, 그 후의 운영하는 과정까지
기획, 개발, 사업 등 여러 직군들과의 협업이 있었습니다. 그 과정에서 일을 더 잘하기 위해 만들어진 “디자인시스템”에 대해 소개하려 합니다.
ㅤ
ㅤ
셀프서비스팀은 왜 디자인시스템을 만들게 되었나?
ㅤ
수동적, 비효율적
우아한형제들의 개발/플랫폼 조직은 도메인별로 분리되어 있습니다. 가게, 업주, 메뉴, 광고, 혜택 등 다양한 feature를 고도화하는 조직들이 있고, 배민사장님광장 서비스는 B2B 플랫폼으로써 도메인별 feature의 가치들을 업주님에게 잘 전달하기 위해 노력하고 있습니다.
하지만, 다양한 요구사항이 서로 다른 조직들에서 들어오기 때문에 서비스 내 지면들에서 일관성 있는 UX를 제공하기가 어려웠습니다. 예를 들어, 정보를 수정하는 기능을 추가한다고 했을 때 다이얼로그를 띄울지, 페이지 전환으로 할지 각 도메인별로 서로 다른 방식의 요구사항이 들어오게 되었던 거죠.
업무 프로세스도 여러 조직의 요구사항을 취합하여 문서화 후 디자인과 개발이 진행되는, 흔히 말하는 water-fall 방식의 프로세스였습니다.
일하는 방식을 바꾸다
배민사장님광장의 배민셀프서비스 전면 개편 프로젝트가 시작되었을 즈음. (모든 프로젝트가 그러하듯) 작업 시간이 무한하지 않기 때문에, 목표 기한 내에 완료하기 위해서 우리는 무언가를 바꿔야만 했습니다. 기존에 제공하고 있던 feature를 줄이거나 퀄리티를 포기할 수는 없었기 때문에, 저희팀은 혁신하고자 하는 대상을 비효율적이었던 프로세스로 정했고, 기존의 water-fall 방식에서 벗어나 다양한 직군들이 병렬로 업무를 진행할 수 있도록 하는 새로운 프로세스를 찾기로 했습니다.
병렬로 업무를 진행하려면 무엇이 필요할까요? 신뢰나 전문성 만큼이나 필요한 것이 협업자들간의 싱크라고 생각합니다.
ㅤ
어떤 종류의 기능은 항상 이렇게 동작한다. 어떤 종류의 정보는 항상 이렇게 표현한다.
ㅤ
모든 협업자에게 이런 생각이 싱크되어 있다면? 기획은 UI 배치와 순서 때문에 정책 결정이 늦어지지 않을 것이고,
개발은 디자인이 없어도 화면을 만들어 낼 수 있을 것이고, 디자인은 UX를 거시적인 관점에서 고민할 수 있게 될 것이라고 생각했습니다.
기획, 디자인, 개발 직군이 함께 (피같은 💦) 2주의 시간을 들여 다양한 어젠다에 대해 논의하고 원칙들을 만들어 나갔습니다.
- 다양한 도메인의 정보들을 어떤 기준으로 분해하고 조합할 것인가?
- 정보의 조회와 편집 UI를 시각적으로 어떻게 구분할 것인가?
- 강조할 것과 그렇지 않은 것들을 어떻게 구분할 것인가?, 강조가 겹치면 어떻게 조정할 것인가?
- Common, Edge, Corner 케이스들에 대한 정의와 Edge, Corner 케이스들의 UX 저해를 어떻게 격리할 것인가?
- 도메인별로 다른 데이터 IO, API 응답을 일관성 있게 처리하게 하는 방법은?
- Mobile first, 반응형 웹을 위한 UI 배치/피드백 시나리오
- Form 유효성 체크에 대한 일관성 있는 인터랙션 시나리오
- 점검, 장애 시의 UI 피드백
일관성은 UX의 가장 중요한 요소 중 하나입니다. 작업자들이 먼저 원칙을 고민했더니 자연스레 일관성이 생겨나고 다양한 프로토콜과 가이드가 모여 시스템을 만들어 나갈 수 있었습니다.
큰 틀이 결정된 후 디자인 라이브러리가 구축됐고, 완전히 싱크된 6명의 프론트엔드 개발자들은 프로토콜에 따라 React 컴포넌트를 구현했습니다. 그리고 일주일 만에 디자인시스템이 만들어졌습니다. 타이트한 일정 속에서 프로젝트를 진행하면서 우리가 살아남기 위해 필요했고 그렇게 만들어진 우리의 절박함이 담겨있는 결과물이었습니다.
ㅤ
ㅤ
ㅤ
디자인시스템
ㅤ
ㅤ
디자인시스템으로 구축된 셀프서비스 메인 화면입니다.
ㅤ
ㅤ
ㅤ
디바이스별, 폼컨트롤 개수별로 모든 컴포넌트들은 일정한 규칙 하에 레이아웃이 자동으로 변형됩니다.
ㅤ
ㅤ
ㅤ
셀프서비스 내의 모든 정보는 카드 형태의 조합으로 이루어져 있습니다. 마찬가지로 폼 컨트롤의 종류나 노출 수에 따라 레이아웃이 변형됩니다.
ㅤ
ㅤ
ㅤ
위 4개 지면은 업주, 가게, 메뉴, 광고로 도메인이 각각 다르지만 일관성 있는 구조와 UX를 제공합니다.
ㅤ
ㅤ
ㅤ
일하는 방식의 변화
ㅤ
각 직군들의 일하는 방법이 어떻게 변했을까요?
- 기획자는 기존에 화면을 그리는 데에 쓰던 시간을 단축하고 시스템 정책 정의에 더 집중할 수 있게 되었습니다.
- 디자이너는 User Flow를 그리는데 집중하고, UX 개선에 더 많은 시간을 투자할 수 있게 되었습니다. 세부 화면 작업은 기획자와 같이 Figma로 그려진 화면을 보면서 기획 의도에 맞게 나왔는지, 컴포넌트 사용이 적절한지 실시간 코멘트로 의견을 주고받고, 필요에 따라 컴포넌트를 제작하고 고도화 하기도 합니다. 그리고 모바일 화면만 그려서 전달하고 나머지 디바이스별 화면은 개발 이후 디자인QA 진행 시 검토합니다. 이제 픽셀 단위의 오차는 찾아낼 필요가 없어졌기 때문에 디자인QA 시간도 훨씬 단축되었습니다.
- 개발자는 기획 화면을 기반으로 디자인 기다릴 필요 없이 개발 작업에 바로 들어갈 수 있습니다. 컴포넌트를 조합하여 모바일 화면만 만들면 나머지 해상도/디바이스 별로 고민하지 않아도 됩니다. 코드가 깔끔해지고 생산성은 좋아집니다.
ㅤ
ㅤ
개발이 상세 디자인 없이도 진행된다면 많은 것이 달라질 수 있습니다. 바로 병렬로 일이 진행될 수 있다는 것인데요.
이렇게 우리는 일하는 방식을 바꾸어서 시간을 절약할 수 있었습니다.
ㅤ
더 나은 디자인시스템을 위해서
디자이너로서 저의 업무 변화에 대해 더 자세히 말씀드릴게요.
이제 기획자, 개발자들과는 React 컴포넌트라는 같은 언어로 이야기 합니다. 그로 인해 불필요한 커뮤니케이션이 줄어들었어요. 그리고 데스크탑 화면을 위한 디자인을 (거의) 하지 않아요. 각 화면의 틀어진 1px를 찾아낼 필요도, 검수용 가이드를 만들 필요도 없습니다. 어떨땐 새로운 feature에 대해 디자인 작업 없이! 개발이 완료된 화면이 잘 구성됐는지 확인만 하는 경우도 있어요.
대신 고객의 피드백을 기반으로 각 화면을 끊임없이 탐구하고 유저 동선과 컨텍스트를 경험하며 더 나은 UX를 고민합니다. 기획자와 디자이너들이 일주일에 한 번씩 워크숍을 하고 있는데, 그 자리에서 이 고민들을 토대로 계속해서 개선(gardening)하려 노력하고 있습니다.
그 노력의 결과들은 시스템 마이그레이션 가이드로 작성되어 개발자들에게 전달되고 서비스에 빠르게 반영됩니다.
ㅤ
ㅤ
ㅤ
그 후 1년
ㅤ
위 글을 처음 작성한지도 벌써 1여 년 정도가 지났는데요.
지금은 디자인시스템을 기준으로 일하는 것이 모두에게 당연해졌으며 이 때 만든 디자인시스템을 셀프서비스뿐만 아니라 다른 유사 서비스와도 공유하여 사용하고 있습니다. 또 서비스의 feature가 고도화됨에 따라 그에 맞춰 디자인시스템도 같이 확장하고 고도화되면서 우리가 일하기에 더 좋은 모습의 시스템으로 계속해서 변화해 가고 있는 중입니다.
사장님 공통 디자인시스템
최근에는 “우리의 서비스는 각각 다르지만 서비스를 이용하는 사용자는 같아” 라는 전사적 공감대가 생겼고 업주 고객향 모든 서비스(배민셀프서비스, 배민사장님광장, 배민상회, 배민아카데미)를 통합적 관점에서 보기 시작하게 되면서 그동안 챙기지 못했던 흩어져있던 서비스들의 사용성이나 일관성에 대한 고민과 함께 많은 움직임이 있었습니다.
그 중 하나로 ‘공통디자인TF’ 라는 조직이 신설되었는데요. TF구성원인 플랫폼 전담 디자이너와 프론트엔드 개발자가 긴밀하게 이슈를 공유하고 논의하면서 이제는 하나의 팀을 넘어 업주 고객향 모든 서비스에 활용할 수 있도록 한, 상위 개념의 ‘사장님 공통 디자인시스템’을 새롭게 준비하고 있습니다.
디자인시스템은 좋은 UX를 제공하기 위한 프로토콜, 가이드, 디자인, 코드로 이루어진 시스템입니다.
디자인시스템을 만들려고 시작한 것이 아닌, 더 일을 잘 하기 위한 고민의 결과, 그리고 수단으로써 디자인시스템이 탄생했고 지금은 한 단계 더 나아가기 위한 또 다른 시작을 앞두고 있는데요. (아직도 할 게 많아요)
좋은 UX를 제공하려는 우리의 고민과 노력이 고객에게도 잘 전달되기 바랍니다.
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ