원티드 앱 한눈에 보기, 버드아이 뷰
* 이 글은 원티드 전사 발표 시간에 공유한 내용을 담고 있습니다.
시작하기 전에
안녕하세요, 프로덕트 디자이너 이상효입니다. 이번에는 최근 프로덕트 디자인 팀에서 진행한 프로젝트, '버드아이 뷰'에 대해 소개드리려고 합니다.
저는 프로덕트 디자이너로서 웹사이트나 아이폰, 안드로이드 앱 같은 디지털 서비스를 통해 '고객의 경험을 고민하고 설계'하는 역할을 맡고 있습니다. 그런데 과연 이것이 프로덕트 디자이너만 하는 일일까요? 대부분의 직장인은 직무에 관계없이 고객에 대해 고민하고, 그 경험을 어떤 식으로든 설계하고 있을 것이라고 생각합니다. 그렇다면 담당자로서 고객에게 더 좋은 서비스를 전달하기 위해 어떤 고민을 하면 좋을까요? 고민의 깊이나 방향성은 개인이나 팀별로 매우 다르겠지만 일단 현재 우리 회사의 제품을 잘 알수록 어떤 고민이든 더욱 효과적으로 해볼 수 있을 것입니다.
원티드는 채용을 비롯해 구직자의 커리어 성장을 돕는 서비스로, 이를 더 잘하기 위해 지속적으로 개선되고 있습니다. 그런데 이렇게 변화무쌍한 디지털 제품을 다루는 IT회사에서는 우리 제품이 어떤 형태를 갖고 있는지 한눈에 파악하기 어렵습니다. 버드아이 뷰는 이런 문제를 해결하기 위해 시작된 프로젝트인데요, 원티드 서비스의 미래를 고민하는 담당자들이 서비스의 형상을 빠르게 파악하고, 이를 통해 더 나은 서비스를 고민할 수 있게 되기를 바라며 진행되었습니다.
'버드아이 뷰'는 무슨 뜻일까요? 새가 하늘을 날며 먹잇감을 찾을 때 높이 올라가서 아래를 내려다보는 것처럼, 원티드 서비스를 내려다볼 수 있는 프로젝트라는 뜻입니다. 이를 통해 원티드 구성원들이 우리 서비스를 전체적인 시각으로 볼 수 있도록 도와줍니다. 마치 지도 앱처럼요.
언제 필요할까요?
그러면 언제 이런 버드아이 뷰가 필요할까요? 이렇게 몇 가지 예시를 들어볼 수 있을 것 같습니다.
신규 입사자가 원티드 서비스 구조를 빠르게 이해하고 싶을 때
PO, 디자이너가 새로운 플로우 기획, 디자인을 위해 이전 버전의 화면 플로우가 궁금할 때
개발자가 어느 화면에 어떤 데이터가 붙어있는지 확인하고 싶을 때
이외에도 정말 다양한 직무에서 다양한 시점에 활용할 수 있는데요, 이해를 돕기 위해 조금 더 구체적인 사례 중심으로 설명해 보겠습니다.
문제 상황 예시
원티드 담당자가 일을 하려면 원티드 제품을 알아야 합니다. 내가 원하는 화면이 어떻게 생겼는지, 플로우가 어떤지 확인하기 위해 앱을 켭니다.
모바일 화면을 확인했으니, 내가 어떤 맥락에서 무슨 일을 진행해야 하는지 알아야 합니다. 컴퓨터를 켜고 기획문서를 확인합니다.
문서를 통해 기획 의도와 일의 맥락을 파악했습니다. 이를 다시 한번 확인하기 위해 다시 앱을 켜고 원하는 플로우에 진입합니다. 추가 기록과 커뮤니케이션을 위해, 화면을 캡처합니다.
이렇게 기획 문서를 확인하고, 앱으로 돌아와 캡처하기를 반복합니다. 다 모이면 모두 모아 내 컴퓨터에 스크린샷 파일을 옮기고, 이를 활용해 문서를 업데이트합니다.
그런데 모든 상황에서 원활하게 화면을 확인할 수 있을까요? 원티드 담당자가 갖고 있는 디바이스는 아이폰 하나인데, 실제 배포된 서비스는 정말 다양한 환경에서 보이게 됩니다. 담당자가 원활하게 업무를 진행하려면 다양한 상황에서 우리 화면이 어떻게 보이는지 알아야 합니다. 아래와 같은 상황이 있을 것 같습니다.
다크 모드
안드로이드 폰
이벤트 데이터
이전 버전 화면 등
문제는, 다양한 화면을 일일이 확인하려면 시간이 너무 오래 걸린다는 것입니다.
아이폰을 가진 담당자가 재택 중에 안드로이드 화면을 확인해야 할 경우, 회사에 방문하거나 퀵 서비스를 이용해야 합니다.
핸드폰의 다크 모드/라이트 모드 전환 방법을 모른다면, 이런 것도 전부 배워 가며 확인해야 합니다.
그런데 원티드 담당자가 버드아이 뷰를 접하고 갑자기 편안해졌다고 합니다. 어떻게 된 건지 한번 같이 살펴볼까요?
온보딩
버드아이 뷰는 피그마라는 툴로 만들어졌습니다. 피그마는 UI 디자인 툴 중 하나인데요, 링크를 공유하면 모든 원티드 담당자가 원하는 화면을 바로 확인할 수 있다는 장점이 있습니다. 버드아이 뷰에서는 이 기능을 적극적으로 활용해 친절한 설명 페이지를 먼저 확인하도록 설계했고, 직관적인 가이드를 통해 피그마에 대해 잘 모르는 사람도 무리 없이 빠르게 프로젝트를 살펴볼 수 있도록 배려했습니다.
INDEX
온보딩 문서를 확인한 이후에는 안드로이드나 아이폰 화면으로 넘어갈 수 있게 됩니다. 이 페이지의 도입부에 목차(Index) 화면을 만들었어요. 원티드 담당자는 목차에 표시된 원티드 속 서비스를 클릭해, 원하는 화면의 플로우로 바로 이동할 수 있습니다.
조감도 모드
조감도 모드 화면의 예시입니다. 인덱스 옆을 둘러보면 주요 플로우를 한눈에 확인할 수 있는데요, 이런 식으로 앱에 꼭 들어가지 않아도 모든 화면을 플로우별로 확인할 수 있습니다. 현재 버드아이 뷰에서는 안드로이드 다크 모드와 iOS 라이트 모드를 제공하고 있는데요, 디자인 시스템에 만들어둔 컴포넌트와 실제 앱 스크린샷을 모두 활용해 만들었습니다. 여기서 전체 플로우를 확인하다가, 필요한 플로우 오른쪽에 있는 ▶️ 플레이 버튼을 누르면, 프로토타입 모드가 열리게 됩니다.
프로토타입 모드
클릭해서 프로토타입 모드를 확인해 보세요!플레이 버튼을 눌러 프로토타입 모드를 켜면 버드아이 뷰를 실제 앱처럼 사용해볼 수 있습니다. 주요 플로우의 인터랙션을 실제 화면과 최대한 유사하게 구현해 두었기 때문에, 앱에 들어가지 않아도 어떤 식으로 구현되어 있는지를 빠르게 확인할 수 있습니다.
데이터 모드
조감도 모드와 프로토타입만으로도 현재 원티드 서비스의 현황을 빠르게 파악할 수 있지만, 각 화면의 실제 데이터를 함께 조회할 수 있다면 그 효용은 훨씬 높아질 것이라고 판단했습니다. 마침 데이터팀에서도 원티드 이벤트 데이터를 모아 정리하는 작업을 진행하고 계셨고, 버드아이 뷰에서 이를 활용하면 원티드 담당자의 데이터 접근성을 크게 높일 수 있을 것이라고 생각했습니다.
버드아이 뷰에 데이터 모드가 활성화된 모습. 프로토타입에서도 동일하게 작동합니다. 그래서 커뮤니케이션을 통해 주요 데이터를 취합한 후, 버드아이 뷰에서 직접 활용할 수 있도록 '데이터 모드'를 따로 만들었습니다. 데이터 모드를 켜면 이벤트와 연동되어 있는 영역이 그림처럼 빛나고, 여기에 이벤트명을 함께 표시해 두었습니다. 여기서 링크를 클릭하면 바로 데이터 팀에서 관리하고 있는 앰플리튜드(데이터 분석 툴)의 해당 데이터 링크로 바로 이동할 수 있습니다.
버드아이뷰 데이터모드를 통해 앰플리튜드의 적절한 데이터에 바로 랜딩된 모습링크를 클릭해 해당 데이터로 이동한 모습입니다. (보안을 위해 모든 수치는 임의로 재구성하거나 모자이크 처리했습니다) 이미 이벤트명을 데이터팀에서 잘 정리해 주신 덕분에, 원한다면 여기서도 클릭 몇 번으로 국가나 기간 등 이벤트명 속 세부 데이터를 확인할 수도 있는 상태입니다.
결론
아무리 좋은 프로젝트라도 활용하는 사람이 없다면 의미가 퇴색될 것입니다. 버드아이 뷰에 관심 있는 분들이 더욱 편하게 문의할 수 있도록 프레젠테이션 말미에 관련 슬랙 채널을 가이드했고, 데이터팀과 지속적으로 협업하며 이벤트명이 추가될 때마다 버드아이 뷰도 함께 고려하며 지속적으로 발전시키고 있습니다.
마치며
고마우신 분들버드아이 뷰는 프로덕트 디자인 팀이 주도해서 만들었지만 다양한 분들의 도움과 자문이 있었기 때문에 가능했던 프로젝트인데요, 이 자리를 빌려 다시 한번 감사 인사를 드립니다.
원티드 프로덕트 디자인 팀에서는 버드아이 뷰뿐만 아니라, 여러 흥미로운 문제를 정의하고 해결해 나가려고 노력하고 있습니다. 저희와 함께 문제를 정의하고 해결할 프로덕트 디자이너 분들을 애타게 찾고 있어요. 원티드 채용에도 많은 관심 부탁드리며 글을 마치겠습니다. 감사합니다.
