당근마켓과 원티드에는 ‘디자인 시스템’ 이라는 내부 제품을 만들고 있는 직군이 있어요. 바로 플랫폼 디자이너입니다. 플랫폼 디자이너는 서비스의 디자인 시스템을 만들고 운영하는, 비유하자면 디자이너를 위한 디자이너라고 할 수 있을 것 같아요. (플랫폼 디자이너가 더 궁금하시다면 이 글을 참고해 주세요)
이번 글에서는 두 회사의 플랫폼 디자이너가 진행한 ‘디자인시스템 기술교류' 세션에 대해, 원티드 디자이너의 관점에서 다루도록 할게요. (feat. 원티드 프로덕트 디자이너 박민선님, 당근마켓 프론트엔드 엔지니어 애쉬, 프로덕트 디자이너 헤이즐)
디자인 시스템이란?
‘기술교류' 라는 단어는 디자이너의 관점에서 바라보면 조금 생소할 수도 있을 것 같아요. 디자이너들 사이에 널리 쓰인 단어는 아니었다고 생각하거든요. 이번 세션을 기술교류라고 이름지은 이유를 설명하려면, 먼저 디자인 시스템이 무엇인지 조금 더 설명하면 좋을 것 같아요.
성장하는 IT서비스일 수록 유저에게 다양한 이야기를 들려주고 싶어할 거예요. 서비스의 유저가 다양해질 수록 실험해보고 싶은 가설도 많아질 것이고, 여러 가설을 짧은 시간에 많이 검증할수록 제품의 성공 확률을 높일 수 있으니까요.
그런데 이 대목에서 문제가 발생해요. 짧은 시간에 다양한 이야기를 들려주려면 많은 디자이너와 개발자가 동시다발적으로 제품을 개발해야 하고, 이 때 일관된 규칙이 없다면 10명의 디자이너는 10가지 다른 시각 언어로 유저와 소통할 수밖에 없거든요. 이런 사태가 오랫동안 지속되면 어떻게 될까요?
•
개발자 A가 저번 달에 만들어둔 버튼을 개발자 B가 또 만드는 비효율이 생겨요.
•
디자이너 A와 B가 같은 용도로 서로 다른 두 가지 버튼을 만드는 비효율이 생겨요.
•
여러 기능을 사용하는 유저는 화면마다 전혀 다른 스타일을 마주하게 돼요.
•
이런 상황이 반복되면 유저는 서비스 자체에 집중할 수 없게 되고, 서비스 신뢰도에도 영향을 미칠 수 있어요.
이런 상황을 미연에 방지하고 디자이너들이 더욱 빠르고 일관적인 톤으로 제품 아이디어를 구체화할 수 있으려면 일관적이면서도 효율성 있는 방식의 디자인 시스템 개발이 필요합니다.
기술교류, 왜 하기로 했을까?
최근에는 여러 디자인 툴, 협업 툴의 발전으로 디자인 시스템을 상당히 고도화할 수 있게 되었어요. 시스템으로 만든 컬러나 버튼이 실제 제품에 얼마만큼 사용되었는지 측정해볼 수도 있고, 디자인 시안에서 다크모드를 클릭 한 번으로 생성해볼 수도 있으며, 시스템에 필요한 디자인 컴포넌트를 빠르게 제작해 실제 서비스처럼 배포할 수도 있게 되었거든요. 플랫폼 디자이너는 이런 여러 가지 방법을 활용해 가장 효과적으로 제품의 시각 언어를 정의, 전파하기 위해 고민합니다. 툴이나 기술 트렌드뿐 아니라, 같이 일하는 다른 디자이너분들과 지속적으로 소통하며 시스템을 발전시키는 역할을 하고 있어요.
디자인 시스템을 만들다 보면 다양한 시행착오도 함께 생기게 되는데요, 그러던 와중 ‘다른 곳에서는 어떻게 시스템을 만들고 발전시키고 있을까?’ 라는 궁금증이 들었어요. 이런 의문은 원티드 플랫폼 디자이너만 갖고 있던 것은 아니었고, 이에 당근마켓의 플랫폼 디자이너분들과 의기투합해 교류 세션을 갖기로 했습니다.
어떤 주제가 오갔을까?
원티드에서는…
1.
원티드 디자인 시스템
a.
친근한 원티드의 브랜드톤을 일관되게, 효율적으로 제품에 전달하려고 해요.
b.
일관된 시각 언어를 통해 디자인&개발 조직의 효율성을 높이고, 이를 통해 제품조직 전체 임팩트(성과) 를 높일 수 있어요.
c.
제품은 밑빠진 독에 비유할 수 있는데, 독의 밑구멍을 좁히고 용량을 높이려면 효율적으로 문제 해결을 위한 제품 개선이 필요합니다.
d.
제품을 건강하게 만들기 위해서는 수질(리텐션)이 개선될 필요가 있는데, 이 때 디자인 시스템이 자동 여과기 역할을 할 수 있습니다.
e.
시스템이 고도화될 수록 더욱 양질의 컴포넌트를 다수의 디자이너가 효율적으로 활용할 수 있게 됩니다.
f.
이를 잘하기 위해, 디자이너뿐 아니라 개발자와의 소통도 무척 중요하고, 원티드에서는 이를 위해 적극적으로 개발자 분들과 소통하고 있습니다.
2.
폰트 시스템 feat. Pretendard, Wanted Sans
a.
웹, 앱 전반에 걸쳐 서비스하고 있는 원티드에 프리텐다드라는 폰트를 적용하게 되었어요.
b.
이를 통해 플랫폼과 관계없이 일관된 시각 경험을 전달할 수 있습니다.
c.
각 환경별 시스템 폰트가 달라 발생하는 시각보정, 디자인 QA시간을 줄일 수 있습니다.
d.
디자이너가 폰트 패밀리, 자간, 행간 등 시각적인 요소에 신경쓰는 시간을 절약할 수 있어요.
e.
폰트 시스템은 모든 컴포넌트의 근본이 되므로, 향후 더 높은 수준의 컴포넌트 제작시에도 중요한 역할을 할 것으로 기대하고 있어요.
f.
이외에도 'Wanted Sans'라는 원티드 브랜드 서체를 빠르게 제작해 내부 배포하는 등, 원티드 브랜딩과 시스템 사이의 접점도 신경쓰고 있어요.
3.
버드아이뷰 Link
a.
버드아이뷰는 디자이너뿐 아니라 원티드 구성원 전체의 효율성을 높이기 위한 프로젝트였어요. 업무를 진행하기 위해서는 어떤 화면이 어느 환경에서 어떤 내용을 담고 있는지 빠르게 파악해야 하는데, 한 명의 구성원이 갖고 있는 디바이스만으로는 제품을 통해 원하는 내용을 파악하는 데 시간이 오래 걸리거든요.
b.
원티드 구성원은 버드아이뷰를 통해 원티드 주요 서비스를 여러 각도에서 한눈에 볼 수 있게 되고, 이를 통해 원하는 맥락을 보다 빠르게 파악할 수 있어요.
c.
버드아이뷰는 크게 세 가지 모드(조감도 모드, 프로토타입 모드, 데이터 모드)를 제공하는데요, 이를 니즈에 맞게 활용하면 화면 정보 접근성을 크게 높일 수 있거든요.
d.
웹에서 쉽게 접근할 수 있는 피그마와 앰플리튜드의 기능을 적극적으로 활용했고, 프론트, 데이터팀 등 많은 팀에서 도움을 주셨어요. 완성도를 높인 후 전사 구성원에게 공유해 언제든 업무에 활용할 수 있게 만들었고, 이 연장선상으로 버드아이 뷰는 현재도 신규 입사자 디자인 온보딩에 적극적으로 활용되는 중이에요.
당근마켓에서는…
1.
SEED 디자인 시스템
a.
당근마켓 디자인 시스템은 SEED(씨앗) Design system 이라는 이름을 갖고 있어요.
b.
좋은 씨앗을 통해 농부(디자이너, 개발자)가 농사를 제품(당근)으로 발아할 수 있게 되기를 바라는 의도가 담겨져 있다고 해요.
c.
디자이너가 행복하게 디자인할 수 있는 환경을 만들고 싶다는 마음을 담아, 디자인 시스템을 만들고 운영하고 있어요. 프로덕트 디자이너 온보딩에 진심인 편이에요.
d.
플랫폼 디자이너와 프로덕트 디자이너가 티타임할 수 있는 일정을 정기적으로 열어 두고, 디자이너들의 피드백을 상시로 받기 위해 노력하고 있어요.
e.
프로덕트 디자이너를 대상으로 UT를 진행하고, 그 인사이트를 디자인 시스템 개선에 활용해요.
2.
피그마 플러그인 Themer
a.
디자이너가 디자인하고 싶은 OS(안드로이드, iOS 등)를 쉽게 선택하고 바꿔낄 수 있는 환경을 만들어 두었어요. 디자이너는 플러그인을 실행해 클릭 한 번으로 손쉽게 시안의 OS를 설정할 수 있어요.
b.
다크/라이트모드의 컬러 시스템을 연동시켜 두었어요. 디자이너는 플러그인을 실행해 클릭 한 번으로 라이트모드, 다크모드를 쉽게 변경하고, 이상한 부분이 없는지 미리 확인할 수 있어요.
3.
당근마켓 전용 피그마 플러그인
a.
디자이너는 플러그인을 활용해 자신의 디자인 시안에 디자인 시스템이 얼마만큼 반영되었는지 점검할 수 있어요.
b.
디자인 시안의 시스템 점유율을 %로 보여주는데, 이 때 친근한 UX writing 을 활용해요. 예를 들면, [디자인 시스템을 0% 사용하셨네요 
예니가 당신에게 1:1을 신청합니다] 같이요.
예니가 당신에게 1:1을 신청합니다] 같이요.느꼈던 점은?
1.
디자인 시스템을 1차적으로 사용하거나 리뷰하는 분들은 각 회사의 프로덕트 디자이너분들이신데요, 당근마켓에서는 프로덕트 디자이너와 더욱 밀접하게 일하기 위해 시스템 제작 과정과 결과물 곳곳에 인간적인 터치를 많이 넣어둔 점이 인상깊었어요.
2.
원티드에서도 Themer를 적극적으로 활용하고 있지만, 이걸 더 고도화해서 디자이너분들이 원하는 OS에서 바로 작업할 수 있도록 세팅한 점이 인상깊었어요. 원티드 디자인 시스템에 맞는 방식으로 적용해볼 수 있겠다는 생각이 들었습니다.
3.
기술교류 세션은 당근마켓 오피스에서 이루어졌는데요, 꽃다발과 스티커, 굿즈를 아낌없이 나눠주셔서 기뻤습니다 세션이 끝난 후 진행해주신 오피스 투어도 즐거웠어요.
세션이 끝난 후 진행해주신 오피스 투어도 즐거웠어요.마치며
원티드와 당근마켓 서비스의 성격은 무척 다른데요. 그렇기 때문에 서로 고민하는 지점도 비슷한 듯 달랐던 점도 많았고, 기술교류를 통해 이런 다른 점들을 알게 되며 서로의 디자인 시스템을 더욱 다각도로 발전시킬 수 있는 계기가 되었던 같아요. 바쁘신 와중에 시간 내서 준비해주신 두 회사의 모든 분들께 감사드리며, 글을 마치도록 하겠습니다
글. 원티드 디자이너 이상효