디자인 시스템에 데이터 뿌리기
데이터가 흐르는 원티드 프로덕트 디자인팀
원티드 프로덕트 디자인팀은 현재 디자인 시스템을 작업 중에 있고, 원티드 WAY에 입각. 디자인 시스템에 어떻게 데이터를 잘 녹일 수 있을지에 대한 고민을 하였습니다. 저희는 많은 고민 끝에 두 가지 방향성을 가질 수 있었는데요. 그럼 이 두 가지 방향성이 실제로 어떻게 디자인 시스템 구축 & 운영에 적용되고 있는지 비유를 통해 차근차근 상세히 설명드려보도록 하겠습니다.
1. 데이터 접근성 확보
저희는 첫 번째 방향성인 데이터 접근성 확보를 위해 프로덕트 디자인팀에서 작업 중인 버드 아이뷰에 데이터를 붙이는 작업을 시도하였습니다.
<사진 출처 : 영화 매트릭스>저희가 버드 아이뷰를 작업한 이유는 원티드의 서비스들을 기획하거나 디자인할 때 작업자들이 전체 플로우를 한눈에 파악하기 힘들어 작업이 누락된다거나 관련 히스토리 파악에 시간이 오래 걸리는 부분이 있어 이를 개선하고 싶었기 때문인데요. 이러한 버드 아이뷰 작업 중 서비스의 플로우만이 아니라 서비스 플로우 탐색 중, 관련 데이터까지 한눈에 확인할 수 있다면 더 좋을 것 같다는 아이디어를 프로덕트 디자이너이신 이상효께서 말씀 주셔서 실제 작업에 적용해 보게 되었습니다. (때마침 버드 아이뷰를 위해 수집된 각 화면들과 데이터팀에서 관리하는 관련 이벤트들의 작명 규칙을 통일하여 더욱 원활한 콜라보가 이루어질 수 있었습니다!)
<사진 출처 : 영화 매트릭스>저희가 만든 버드 아이뷰는 원티드 서비스의 주요 플로우들을 한눈에 확인 가능하며 원티드의 구성원이면 별도의 권한이 없이도 누구나 마음껏 원티드의 서비스 구석구석을 마음껏 테스트해 볼 수 있는데요. 마치 위의 짤 속 매트릭스 NEO가 매트릭스 안에서 상상하는 모든 것을 실현하듯 자유롭게 테스트를 할 수 있을 것이라 생각합니다.
<사진 출처 : 영화 매트릭스>그리고 앞서 말씀드린 것 같이 이 자유로운 버드 아이뷰에 저희는 데이터를 붙였고, 버드 아이뷰 상에서 데이터 모드를 켜게 된다면 위의 짤과 같은 느낌을 받으실 수 있을 것 같습니다. 단순히 플로우를 파악하는 것이 아닌 플로우의 주요 지점들에서 사용자들이 어떻게 행동하는지에 대한 데이터 접근이 가능하며, 이렇게 접근한 데이터를 통해 더욱 쉽게 관련 인사이트들을 도출해 볼 수 있을 것이라 기대합니다.
<사진 출처 : 영화 매트릭스>데이터 모드까지 연동된 버드 아이뷰는 현재 원티드 내부에 배포 완료되었으며 기획, 디자인 직군만이 아닌 전 직군에서 다양한 용도로 활용 중에 있습니다.
2. 데이터를 활용하여 생산성 높이기
데이터를 활용한 생산성 높이기를 위해 저희는 현재까지 진행하였던 디자인 시스템의 활용 테이터를 수집하는 작업부터 진행하였습니다. 과거 프로덕트 디자인팀은 디자인 시스템을 활용하여도 디자인 시스템의 활용 데이터를 수집할 수 있는 수단이 없었는데요. 그래서 저희는 이러한 문제를 해결하고자 리서치를 시작하였고, 그 결과 슬로스라는 스케치 플러그인을 찾아낼 수 있었습니다. 그리고 슬로스라는 프로그램을 통해 지난 2분기 배포된 디자인 시스템을 각 디자이너들이 3분기 동안 얼마만큼 활용하였는지를 측정해 볼 수 있었는데요. 그 측정 결과는 아래 보이시는 것과 같습니다.
<슬로스를 통해 얻은 데이터>디자인 시스템 적용률은 전체 17.71%로 이는 지난 3분기 동안 작업된 전체 75만 603개의 디자인 세부 작업물 중 13만 389개에 해당하는 것입니다. 기존 디자인 작업 방식이 디자이너가 하나하나 디자인을 제작하는 방식이었다면, 디자인 시스템 배포 이후는 선행된 작업물을 가져다 쓰는 것으로 제작 방식이 조금 변화하였는데요. 세부 작업 하나당 디자인, 개발, QA를 통틀어 전체 제작 시간을 약 1분씩 절약하였다.. 가정하였을 때 저희는 디자인 시스템을 통해 지난 3분기 동안 제품 제작 공수를 약 223시간 을 줄였다고 추정해 볼 수 있을 것 같습니다. 현재 디자인 시스템 코드화 완료율이 12.5% 정도인 것에 비해 디자인 시스템 적용률이 완료율을 상회하는 것은 상당히 고무적인 결과라 볼 수 있을 것 같은데요. 이러한 데이터들은 앞으로 디자인 시스템 제작 및 운영 효율화에 참고할 예정이며 더 나아가 디자인 시스템의 정량적 임팩트 측정에도 활용해 볼 수 있을 것이라 기대하고 있습니다.
<하지만 아직 슬로스 사용이 쉽진 않다.>다만 슬로스라는 플러그인의 업데이트가 느리고 데이터를 얻기 위해 스케치 파일을 수동으로 설정하고 프로그래밍을 해야 하다 보니 활발히 사용하기에는 아직 무리가 있습니다. 원티드 프로덕트 디자인팀에서는 이러한 단점을 보완할 좀 더 명확한 대안들을 여전히 고민 중에 있습니다.
마무리
<사진 출처 : 영화 매트릭스>프로덕트 디자인팀은 앞서 설명드렸던 2가지 방향성에 맞추어 계속 데이터가 잘 흐를 수 있는 디자인 시스템을 만들어 나갈 예정입니다. 앞으로도 계속 진화할 원티드 디자인 시스템에 많은 관심 부탁드리며 이 글과 연계된 버드 아이뷰 관련 아티클과 원티드랩의 채용공고들도 한 번씩 확인 부탁드립니다. 감사합니다!
글. 프로덕트 디자이너 김석희
