Overview
디자인 시스템, 사업 확장을 위한 전략적 투자
원티드는 300만 MAU를 보유한 커리어 성장 플랫폼입니다. 채용 비즈니스의 폭발적인 성장을 발판 삼아, 커리어 콘텐츠, 커뮤니티, AI, 프리랜서 사업 등 다양한 신규 비즈니스를 기획, 운영하고 있습니다. 원티드 디자인 시스템은 비즈니스가 성장하며 발생할 수 있는 디자인 부채를 해결하고, 전사적으로 더욱 빠르게 제품을 출시하기 위해 운영되고 있는데요, 이를 통해 다양한 팀에서 원하는 UX를 통일성 있게, 효율적으로, 높은 수준으로 전달할 수 있게 합니다.
프로젝트를 맡을 당시 이미 필수적인 UI컬러나 아이콘, 버튼 등을 포함한 기초 시스템 작업이 진행된 상태였고, 저에게는 이를 진단하고 더 나은 시스템을 만드는 역할이 주어졌습니다.
Problem
낮은 접근성으로 인한 이해 격차
당시 원티드는 스케치와 제플린이라는 툴로 디자인 시스템을 제작, 배포하고 있었는데요, 시스템 컴포넌트가 포함하고 있는 정보량이 제한적이었고, 원본을 살펴볼 수 있는 사람도 적었습니다.
시스템을 널리 퍼트려 발전시키기 위해서는 구성원의 시스템 이해도와 친밀도를 높이는 과정이 필수적이라고 판단했고, 이에 시스템 접근성을 획기적으로 올릴 수 있는 방법을 고민했습니다.
데이터 기반 개선의 어려움
디자인 시스템을 맡게 된 저는 현황 파악을 위해 가장 먼저 실제 사용량을 확인하고 싶었는데요, 기존의 작업 방식으로는 디자인 시스템이 어떤 식으로 쓰이고 있는지 파악하기 어려웠습니다. 만들어둔 시스템이 어떤 화면에서 어떤 맥락으로 사용되고 있는지 알기 위해, 관련 데이터와 인사이트를 얻을 수 있는 방법을 검토했습니다.
Research
현행 시스템 장단점 파악
기존 시스템의 전사적인 접근성을 높이기 위해서는 모든 팀의 디자인 작업물을 피그마로 이전하는 것이 가장 효과적인 해결책이라고 생각했습니다. 피그마는 클라우드, 실시간 협업, 한층 고도화된 라이브러리, 컴포넌트 데이터 트래킹 등 디자인 시스템을 발전시킬 수 있는 여러 장점을 갖고 있었기 때문입니다.
하지만 이미 많은 시행착오와 논의 과정 속에 스케치 기반의 디자인 시스템이 구축되고 있었습니다. 이 점을 고려해 입사 후 몇 달간 현재 시스템 작업을 병행하며 각 툴의 장단점을 정리, 내부 구성원 설득을 위한 준비를 하기 시작했습니다. 디자이너, 개발자를 비롯해 전체 구성원의 업무 플로우에 영향을 끼칠 수 있는 사항이었기 때문에, 제품 자체의 장단점 외에도 인적, 재무적 비용을 모두 고려해 효용성을 비교, 검증, 설득하는 과정을 거쳤습니다.
Onbordings
사내 공유 제도 활용
마침 사내에 신설된 ‘사내 공유' 제도를 통해, 자신의 직무 관련 역량을 자유롭게 구성원에게 공유할 수 있게 되었는데요, 이를 활용해 세션을 기획하면 자연스럽게 새로운 툴에 대한 공감대를 이끌어낼 수 있을 것이라고 생각했습니다. 이를 검증하기 위해 두 가지 공유 세션을 기획하고 진행했습니다.
-
피그마로 이모지 만들기 - 이모지를 활발히 사용하고 있는 구성원 니즈를 발견하고, 누구나 피그마를 활용해 이모지를 만들고 메신저에 등록할 수 있는 세션을 진행, 재미있는 세션을 통해 피그마의 기본적인 기능과 효용을 자연스럽게 체감할 수 있도록 했습니다. Link
-
디자이너를 위한 피그마 세션 - 이모지 만들기 세션은 전사 구성원이 가볍게 참여할 수 있다는 장점이 있지만, 실무 적합성을 검증하려면 디자이너들의 공감대가 필요했습니다. 이에 전문가용 피그마 공유 세션을 기획해 디자이너 맞춤형 피그마 온보딩 세션을 여러 차례 진행했습니다.
세션 이후에도 구성원들의 관련 궁금증을 빠르게 해결하기 위해, #figma_study 라는 채널을 만들어 지속적으로 운영했습니다.
Migration
달리는 마차의 바퀴를 갈아끼우기
이렇게 시스템 적용에 대한 공감대를 형성했다고 하더라도, 제품 팀에서는 지속적으로 팀의 목표 달성을 위해 레거시 애셋을 그대로 사용해 디자인 업무가 진행되고 있었습니다. 이런 상황에서 다른 디자이너와 개발자의 적응 시간을 최대한 줄여줄 방법을 고민하게 되었고, 마이그레이션 작업을 통해 자연스럽게 제품 디자인 환경을 이전할 수 있도록 설계했습니다.
-
모든 스케치 파일을 피그마로 옮겨 디자인 시스템 UI컴포넌트를 상황에 맞게 다듬었습니다.
-
모든 프로덕트 디자이너별로 1:1 마이그레이션 미팅을 주선해 모든 파일을 함께 리뷰하고, 각 팀의 상황에 맞춰 디자인 파일의 디테일한 부분을 수정했습니다.
-
개발자와 함께 제품 속 아이콘과 컬러, 타이포그래피를 새로운 시스템으로 대대적으로 교체했고, 86%의 레거시 코드를 걷어내었으며, 아이콘 용량을 2배 이상 최적화하는 등 실제 제품에 적극적으로 적용했습니다.
