디자인 생산성을 높이는 피그마 플러그인을 만들어보자 1부: 디자인 편

이번 글에서는 디자인옵스TF의 프로젝트 중 하나인, 피그마 플러그인 ‘데이터브릿지’ 개발 과정을 중심으로, 어떤 고민들을 했고, 반복적인 디자인 작업과 불편한 리소스 수급을 어떻게 해결해 나갔는지 공유하겠습니다😀

‘디자인옵스’라는 단어가 다소 생소하실 수 있을 것 같은데요. 저희도 아직 디자인옵스 TF에 대한 명확한 정의를 내리기엔 경험이 부족하지만, 작게는 일과 일 사이의 불편을 해소하며 디자인 프로세스를 개선하고, 더 나아가 일하는 문화를 바꾸는 것을 목표로 하고 있습니다.

여러분은 UT(유저 테스트)를 위해 어떤 과정을 거치시나요?

우아한형제들에서는 매주 실제 고객을 만나는 ‘배민보이스데이’라는 리서치 프로그램을 진행하고 있는데요, 이를 통해, 고객과의 인터뷰, UT 등을 통해 프로덕트의 문제점을 발굴하거나, 신규 기능 및 개선 사항을 테스트를 하고 있습니다.
이 과정에서 디자이너들이 겪는 비효율적인 순간들을 발견하게 되었어요.

첫 번째, 프로토타입을 실제처럼 만들기 위한 반복 작업

프로토타입이 실제와 다를수록 인터뷰이(Interviewee)가 몰입하지 못했고, 몰입도는 UT의 진행과 인사이트 확보에 큰 영향을 주었습니다. 그러다 보니, 디자이너는 프로토타입이 실제처럼 느껴지도록 이미지, 이름, 가격, 평점, 리뷰 수, 배달 예상 시간, 배지 등 다양하고 많은 정보를 연출하는 데 많은 시간과 노력을 투자해야 했어요.

디자이너의 피땀눈물

두 번째, 적합한 디자인 에셋과 정보를 찾기 위해 소모되는 시간
음식 및 상품을 다루는 서비스 특성상 여러 종류의 이미지 사용이 많은데, 회사 내 리소스가 어드민, NAS, 구글 드라이브 등 흩어져 있어 곳곳을 돌아다니며 이미지를 찾아야 했어요. 매번 다시 찾기에는 번거로움이 크다보니 일부 디자이너는 수많은 이미지를 로컬에 저장해 두기도 했어요.

업무에 필요한 정보는 이미 서버 데이터에 있지만,
디자이너들은 활용할 정보를 선별하는 것부터 시작해서 직접 이미지를 교체하고 텍스트를 복사하고 붙여 넣는 등 재가공하는 과정들을 거쳐야 했어요.
프로덕트 디자이너가 본질적인 작업에 더 많은 시간을 쓸 수 있도록 돕고 싶었고, 이에 공감하고 관심을 보여 주신 개발자분들이 합류하여 본격적으로 디자인옵스TF 여정을 시작하게 되었어요.

"이 방식이 정말 최선일까?"

비효율을 발견하긴 했지만, 이 문제가 반드시 해결해야 할 만큼 중요한지에 대해서는 확신이 없었어요.
그래서 먼저 프로덕트 디자인 조직 내에 비슷한 고민이 있었는지 살펴보고, 그 과정에서 겪었던 시행착오들도 함께 들여다보았습니다. 정보를 채우는 과정에서의 비효율을 해결한다면 반복 작업과 업무 시간을 크게 줄일 수 있을 거라고 판단했고, 그제야 무엇을 어떻게 만들면 좋을지에 대한 고민을 시작할 수 있었습니다.

어떤방식으로 해결할지 고민하던 중,
동료의 인터뷰에서 제일 많이 나왔던 이야기가 힌트가 되었는데요.

여러 어드민이나 플랫폼, 웹사이트 등을 왔다 갔다 하는 부분도 비효율의 한 축이었기에
이 모든 것을 워크스페이스인 피그마에 제공하고자 했습니다.

첫 MVP 모델은 굉장히 간단했습니다. MVP다 보니 말 그대로 최소한의 기능만 있었고 푸드, 커머스, 사장님 비즈니스 등 여러 도메인 정보를 다루게 될 때 플러그인이 어떻게 작동할 수 있을지 상상이 잘 가지 않았어요. 따라서, 도메인별로 실제 사용한다면 어떤 식으로 쓰게 될지, 무엇을 필요로 할지 등 유의미한 사용 경험을 제공하기 위해, 필요한 최소한의 기능은 무엇인지 찾고자 서로의 생각을 조금 더 발산하여 스케치하는 시간을 가졌어요.

한창 이야기를 나누던 중, 시안은 곧 여러 기능으로 가득 차게 되었고, 화면은 복잡해졌어요.
문득, 너무 많은 것들을 제공하고 싶어 하는 우리의 모습을 발견하게 되었죠.

본래 해결하고자 했던 “디자이너의 반복 노동😭”과 “원하는 데이터를 손쉽게 적용”이라는 유의미한 사용 경험에 다시 집중해서, 기능들을 덜어내기 시작했어요.
물론, 이 과정이 쉽지 않았는데
기능을 줄이면, 가능성을 없애는 기분이 들기도 했고,
많은 기능이 있어야 임팩트가 있지 않을까라는 의심도 생겼던 것 같아요.
한 번에 많이 대신 “조금 엉성해도 되니까 빠르게 배포해 봐요”를 외치면서 콤팩트한 기능 추구와 빠른 개발 기조를 유지했고, 프로젝트를 함께하는 구성원 간 접점이 있고 사용이 많을 것 같은 ‘커머스 상품’ 버전을 만들기로 결정했어요. 리스트를 구성하는 최소 단위인 ‘가게와 카테고리’를 좁힐 수 있는 장치만 추가하여 개발 착수 후 1달 내 MVP 버전의 ‘데이터브릿지’를 출시했어요.

지금 돌아보니, 즉각적인 반응을 보고, 다시 빠르게 보완할 수 있었던 부분이 사이드프로젝트에서 텐션을 잃지 않고 지금까지 달리게 할 수 있던 부분이었던 것 같아요.

데이터브릿지는 어떻게 동작할까요?

데이터브릿지에 구축되어 있는 배달의민족 데이터와 디자인 부문의 많은 디자인 에셋을 모았고, 이제 한 번의 클릭이면 피그마 컴포넌트에 손쉽게 적용할 수 있어요!

🪄 데이터브릿지로 이런 작업이 가능해요.

여러 케이스의 카드정보를 실제 데이터로 변경

배달의민족 서비스에 있는 데이터를 클릭 한 번으로 적용할 수 있게 되어 좀 더 몰입감 있는 프로토타입을 만들 수 있게 되었고, 이미지 찾기, 정보 직접 입력, 레이어 켜고 끄기 등 비효율을 최소화했어요.

빠르게 출시한 MVP 버전의 효용을 확인한 후 기능과 데이터 풀을 하나씩 확장했어요.

편의 기능 추가: 최근 사용

최근에 불러온 데이터 값을 숏컷으로 제공하는 단순한 기능이지만 많은 구성원분들이 유용하게 사용하는 기능인데요. 시안을 제작할 때 하나의 정보가 여러 곳에 적용되어야 하는 빈도 및 케이스가 많았고, 구성원 인터뷰에서도 비슷한 힌트를 얻기도 했습니다. 백로그를 살펴보던 중 ‘최근 사용 기능이 재사용 편의 측면에서 임팩트가 있을 것’이란 부분에 모두가 공감하였고, 해당 미팅 직후 즉시 착수하여 기민하게 배포한 사례예요.

편의 기능 추가: 데이터 세부 설정

실제 데이터 연동이 까다롭거나, 값을 임의로 지정하고 싶은 경우 세부 설정화면을 통해 원하는 구간을 좀 더 정밀하게 설정할 수 있어요.

편의 기능 추가: 다양한 이미지 리소스

사내에 흩어져 있던 그래픽 리소스, 결제사 로고 등 UI 작업에 자주 사용하는 이미지들도 한곳에 모아 제공했어요. 작업하던 환경에서 벗어나지 않으면서도 손쉽게 적용할 수 있게 되었어요

사용 허들 완화: 레이어명 원클릭 변경

레이어명을 기반으로 데이터를 맵핑하거나 노출 여부를 랜덤하게 제어하다보니, 레이어명 규칙을 갖게 되었어요. 하지만 이를 모두가 외울 수 없는 점에 주목하여 외우지 않아도 유추하여 손쉽게 적용할 수 있게 플러그인 사용 허들을 낮추고자 했어요

결과적으로, 데이터 수정에 들이던 비효율적인 시간을 줄이고 디자이너가 더 중요한 작업에 집중할 수 있게 했어요.

데이터브릿지를 도입한 뒤,
작업 방식에 작은 변화가 생겼어요

실제로 여러 가지가 바뀌는데요,

작업 효율이 오르고 시간이 크게 단축되었어요

UT를 준비하며, 데이터를 수정하는 데 걸리는 시간이 평균 3시간이상에서 10여 분으로 눈에 띄게 줄었어요.
디자이너는 데이터를 다루는 데 드는 시간을 절약하고, 창의적인 작업에 더 많은 시간을 투자할 수 있었어요.

인터뷰 몰입도가 향상되었어요

실제 데이터를 적용함으로써 UT가 더 구체적이고 현실적으로 진행되었어요. 프로토타입을 요청할 때 미안함을 느끼던 다른 직군의 동료들도, 데이터브릿지의 적용 이후, 조금 더 가벼운 마음으로 요청할 수 있게 되었어요.

많은 프로덕트 디자이너가 실무에 사용하고 있어요

데이터브릿지의 DAU(일 평균 사용자 수)는 전체 타깃의 약 25% 수준인데요,
데이터 풀이 추가됨에 따라, 그래프도 귀엽게 상승하고 있습니다. 현재 목표는 전체 타깃의 50%가 일주일에 2~3회 접속하게끔 하려고 하고 있어요.

앞으로의 데이터브릿지

데이터브릿지는 주요 사용자인 프로덕트 디자이너 동료들부터 다른 직군 구성원분들까지 인터뷰하면서 문제해결 프로세스상 비효율을 제거하고, 더 나은 일하는 문화를 만들기 위해 영역을 계속 넓혀가고 있어요. 현재는 실데이터를 연동하는 단계, 다음 단계에서는 아래와 같이 구축된 데이터베이스를 바탕으로 새롭게 생성할 수 있는 기능을 계획하고 있어요.

도메인별 데이터 풀 확장

생성형 AI 활용

계속해서 비효율적인 반복 작업 시간을 줄이는 작은 변화부터 협업 효율을 높이는 데 도움을 줄 수 있는 고민 등을 이어갈 예정인데요. 디자인 조직뿐만 아니라 문제를 함께 해결하는 동료들이 더 창의적이고 중요한 작업에 몰입할 수 있게 되길 바라고 있습니다!

앞으로도 데이터브리지를 비롯한 우아한형제들 디자인옵스TF의 여정을 계속해서 공유드릴게요 🙂

데이터브릿지의 생생한 개발 과정이 궁금하시다면, 2부 개발편도 함께 읽어보세요 🙂
👉 디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편