Design System Culture

2021 - 2024

Overview

디자인 시스템, 사업 확장을 위한 전략적 투자

원티드는 300만 MAU를 보유한 커리어 성장 플랫폼입니다. 채용 비즈니스의 폭발적인 성장을 발판 삼아, 커리어 콘텐츠, 커뮤니티, AI, 프리랜서 사업 등 다양한 신규 비즈니스를 기획, 운영하고 있습니다. 원티드 디자인 시스템은 비즈니스가 성장하며 발생할 수 있는 디자인 부채를 해결하고, 전사적으로 더욱 빠르게 제품을 출시하기 위해 운영되고 있는데요, 이를 통해 다양한 팀에서 원하는 UX를 통일성 있게, 효율적으로, 높은 수준으로 전달할 수 있게 합니다.

프로젝트를 맡을 당시 이미 필수적인 UI컬러나 아이콘, 버튼 등을 포함한 기초 시스템 작업이 진행된 상태였고, 저에게는 이를 진단하고 더 나은 시스템을 만드는 역할이 주어졌습니다.

Problem

낮은 접근성으로 인한 이해 격차

당시 원티드는 스케치와 제플린이라는 툴로 디자인 시스템을 제작, 배포하고 있었는데요, 시스템 컴포넌트가 포함하고 있는 정보량이 제한적이었고, 원본을 살펴볼 수 있는 사람도 적었습니다.

시스템을 널리 퍼트려 발전시키기 위해서는 구성원의 시스템 이해도와 친밀도를 높이는 과정이 필수적이라고 판단했고, 이에 시스템 접근성을 획기적으로 올릴 수 있는 방법을 고민했습니다.

데이터 기반 개선의 어려움

디자인 시스템을 맡게 된 저는 현황 파악을 위해 가장 먼저 실제 사용량을 확인하고 싶었는데요, 기존의 작업 방식으로는 디자인 시스템이 어떤 식으로 쓰이고 있는지 파악하기 어려웠습니다. 만들어둔 시스템이 어떤 화면에서 어떤 맥락으로 사용되고 있는지 알기 위해, 관련 데이터와 인사이트를 얻을 수 있는 방법을 검토했습니다.

Research

기존 시스템의 전사적인 접근성을 높이기 위해서는 모든 팀의 디자인 작업물을 피그마로 이전하는 것이 가장 효과적인 해결책이라고 생각했습니다. 피그마는 클라우드, 실시간 협업, 한층 고도화된 라이브러리, 컴포넌트 데이터 트래킹 등 디자인 시스템을 발전시킬 수 있는 여러 장점을 갖고 있었기 때문입니다.

하지만 이미 많은 시행착오와 논의 과정 속에 스케치 기반의 디자인 시스템이 구축되고 있었습니다. 이 점을 고려해 입사 후 몇 달간 현재 시스템 작업을 병행하며 각 툴의 장단점을 정리, 내부 구성원 설득을 위한 준비를 하기 시작했습니다. 디자이너, 개발자를 비롯해 전체 구성원의 업무 플로우에 영향을 끼칠 수 있는 사항이었기 때문에, 제품 자체의 장단점 외에도 인적, 재무적 비용을 모두 고려해 효용성을 비교, 검증, 설득하는 과정을 거쳤습니다.

Onbordings

마침 사내에 신설된 ‘사내 공유' 제도를 통해, 자신의 직무 관련 역량을 자유롭게 구성원에게 공유할 수 있게 되었는데요, 이를 활용해 세션을 기획하면 자연스럽게 새로운 툴에 대한 공감대를 이끌어낼 수 있을 것이라고 생각했습니다. 이를 검증하기 위해 두 가지 공유 세션을 기획하고 진행했습니다.

1. 피그마로 이모지 만들기 - 이모지를 활발히 사용하고 있는 구성원 니즈를 발견하고, 누구나 피그마를 활용해 이모지를 만들고 메신저에 등록할 수 있는 세션을 진행, 재미있는 세션을 통해 피그마의 기본적인 기능과 효용을 자연스럽게 체감할 수 있도록 했습니다. Link
2. 디자이너를 위한 피그마 세션 - 이모지 만들기 세션은 전사 구성원이 가볍게 참여할 수 있다는 장점이 있지만, 실무 적합성을 검증하려면 디자이너들의 공감대가 필요했습니다. 이에 전문가용 피그마 공유 세션을 기획해 디자이너 맞춤형 피그마 온보딩 세션을 여러 차례 진행했습니다.

세션 이후에도 구성원들의 관련 궁금증을 빠르게 해결하기 위해, #figma_study 라는 채널을 만들어 지속적으로 운영했습니다.

Migration

달리는 마차의 바퀴를 갈아끼우기

이렇게 시스템 적용에 대한 공감대를 형성했다고 하더라도, 제품 팀에서는 지속적으로 팀의 목표 달성을 위해 레거시 애셋을 그대로 사용해 디자인 업무가 진행되고 있었습니다. 이런 상황에서 다른 디자이너와 개발자의 적응 시간을 최대한 줄여줄 방법을 고민하게 되었고, 마이그레이션 작업을 통해 자연스럽게 제품 디자인 환경을 이전할 수 있도록 설계했습니다.

1. 모든 스케치 파일을 피그마로 옮겨 디자인 시스템 UI컴포넌트를 상황에 맞게 다듬었습니다.
2. 모든 프로덕트 디자이너별로 1:1 마이그레이션 미팅을 주선해 모든 파일을 함께 리뷰하고, 각 팀의 상황에 맞춰 디자인 파일의 디테일한 부분을 수정했습니다.
3. 개발자와 함께 제품 속 아이콘과 컬러, 타이포그래피를 새로운 시스템으로 대대적으로 교체했고, 86%의 레거시 코드를 걷어내었으며, 아이콘 용량을 2배 이상 최적화하는 등 실제 제품에 적극적으로 적용했습니다.

Bird’s eye view

원티드 앱의 주요 화면을 한 눈에, 데이터와 함께

피그마 툴에 대한 온보딩 세션은 여러 차례 진행했지만, 실질적으로 구성원의 업무 시간을 줄여줄 수 있는 프로젝트를 통해 더욱 큰 임팩트를 낼 수 있을 것이라고 판단했습니다.

버드아이 뷰는 접근성이 높은 피그마의 특징과 원티드의 정제된 이벤트 데이터를 활용한 프로젝트인데요, 원티드 주요 서비스와 데이터 흐름을 한눈에 볼 수 있게 만든 프로젝트입니다. 더 나은 서비스를 기획하는 구성원 누구나 쉽고 빠르게 원티드 제품을 파악할 수 있게 만들어, 효율적인 전사 업무 프로세스 안착에 기여하였습니다.

관련 아티클 Link

Public Release

신뢰 기반의 디자인 시스템

유일한 담당 디자이너였던 시절을 지나, 2년 간 원티드 디자인 시스템은 4명의 디자인 플랫폼팀이 관리하는 큰 프로젝트가 되었고, 지속적으로 개선되어 왔습니다.

다만 인프라 프로젝트는 항상 ‘중요하지만 급하지는 않은' 프로젝트가 되기 쉽기 때문에, 직접적인 제품 개선 및 출시에 우선순위를 내어 주는 경우가 많습니다. 이를 극복하고 우선순위를 조율하기 위해서는 더욱 적극적인 내,외부적인 신뢰가 필요했습니다. 이를 위해 디자인 시스템의 일부를 추려 피그마 커뮤니티에 라이브러리 형태로 공개했고, 월간디자인, 디자인나침반 등 여러 디자인 매체에 소개되었으며, 커뮤니티에 공개된 한국 시스템 중 가장 높은 다운로드 수를 기록하고 있습니다.

Public Speakings

HR 플랫폼 원티드의 브랜딩과 디자인 시스템의 시너지

피그마 리더스 밋업, 인프런, 노트폴리오, 원티드랩, 디자인스펙트럼 등 다양한 곳에서 디자인시스템 관련 발표, 강연을 진행했습니다.

이러한 활동은 직장인의 커리어 여정을 응원한다는 원티드의 브랜드 가치와 시너지를 낼 수 있는 동시에, 그 동안 진행했던 디자인시스템 관련 활동을 업계에 알리는 수단으로 매우 효과적이었습니다.

Results

디자인 툴을 모두의 툴로

현재까지 원티드 디자인 시스템은 여러 시행착오를 겪으며, 다음과 같은 결과를 얻었습니다.

• 전사 구성원 피그마 사용률 · 100%
• 디자인 시스템 평균 사용률 · 38%
• 라이브러리 다운로드 수 · 8.7K

• 7월 사용량 · 측정 불가
• 10월 사용량 · 약 16,100 회 w/ figma
• 1월 사용량 · 약 380,000 회 w/ figma