UX 히트맵으로 타임머신처럼 디자인과 데이터 관리하기

안녕하세요 뷰저블입니다. 실제 웹 사이트 위에 UX 데이터를 시각화하는 그로스 해킹 툴, ‘뷰저블리’의 ‘타임머신’ 기능을 활용하면 ‘디자인과 데이터의 히스토리를 관리’할 수 있습니다. 왜 디자인과 데이터 히스토리를 관리해야 하는지 그 중요성을 설명하고 구체적인 사용법, 활용 방안을 소개하겠습니다. 

Pain-Point 발견 

어느 기업의 일상적인 업무 메신저

김대리, 1월부터 10월까지 서비스가 어떻게 계속 개편되었는지 한눈에 비교해볼 순 없을까? 주요 지표도 함께 알 수 있다면 정말 좋을 텐데 말이야

업무 현장에서 종종 위와 같은 상황을 마주치지 않으신가요? 날로 서비스는 개선되지만 그와 관련된 히스토리를 관리하리란 쉽지가 않습니다. 데이터도, UI도 말이죠. 매번 디자이너에게 GUI 시안을 요청하는 일은 어느 조직에서나 매우 빈번한 일입니다. 또한, 화면과 UI 요소별 일일이 대조하며 다양한 데이터를 기록하기란 시간이 만히 걸리며 또한 결코 만만치 않습니다.

실무자의 업무 효율화를 달성하기 위해서는 어떻게 해야 좋을까요? 쉽게 히스토리를 관리할 수는 없는 것일까요?

Pain-Point 해결, 뷰저블리 타임머신 기능의 탄생

그래서 뷰저블리는 고민했습니다. 어떻게 하면 웹 사이트 디자인과 함께 데이터까지 쉽게 관리하고 또 저장할 수 있을까 하고 말이죠. 고민 끝에 탄생한 기능이 바로 ‘타임머신’입니다. 타임머신이라는 이름처럼 원하는 때로 돌아가 데이터와 웹 사이트 UI를 확인하고 또 저장까지 할 수 있는 똑똑한 친구입니다. 타임머신에서 저장한 이력이 남아서 언제 어떤 데이터를 다운로드하였는지도 알 수 있습니다. 아래가 실제 타임머신을 통해 다운로드한 뷰저블 메인 페이지의 1주일간 데이터입니다. 실제 웹 사이트 해상도에 맞게 PDF로 저장됩니다.

뷰저블리 타임머신 기능으로 직접 히스토리 관리해보기

그럼 저와 함께 직접 타임머신 기능을 활용해볼까요? 

<타임머신 기능을 이용하기 위한 네 가지 스탭>

[스탭 1] 타임머신 기능에 진입하기
[스탭 2] 데이터 수집 기간 설정하기
[스탭 3] 다운로드 버튼 누르기
[스탭 4] PDF 파일 다운로드하기

[스탭 1] 타임머신 기능에 진입하기

먼저 내비게이션 바 오른쪽의 타임머신 버튼을 클릭하여 기능에 진입해주세요. ‘다운로드’ 메타포를 지닌 아이콘과 동일합니다. 마우스를 호버 하면 ‘타임머신’ 레이블이 표기됩니다.

[스탭 2] 데이터 수집 기간 설정하기

아래가 진입한 타임머신 기능의 모습입니다. 기존 신규/재방문 등의 세그먼트를 조작할 수 있던 기능들이 사라지고 다운로드 버튼과 언제 다운로드를 하였는지 히스토리를 볼 수 있는 테이블이 생성되었습니다. 확인하고자 하는 데이터의 수집 기간을 설정해주세요. 최대 약 3개월까지의 데이터를 확인하 수 있습니다.

[스탭 3] 다운로드 버튼 누르기

다음으로는 왼쪽의 ‘다운로드’ 버튼을 눌러주세요. 버튼을 누르면 설정한 데이터 수집 기간 내 화면 캡처가 시작됩니다. 하루 최대 10번까지 가능합니다.

다운로드 버튼을 누르셨나요? 화면 캡처가 진행되는 동안에는 아래처럼 로딩 화면으로 변경됩니다. 데이터 수집기간이 길수록 로딩 시간이 약간 길어질 수 있습니다. 

[스탭 4/마지막 단계] PDF 파일 다운로드하기

아래오 같은 팝업이 표기되었다면 다운로드할 화면의 예제 이미지를 확인하고 본격적으로 다운로드를 시작할 수 있게 됩니다. ‘예(다운로드)’ 버튼을 눌러서 히트맵 화면을 PDF 다운로드해주세요.

다운로드가 완료되었다면 아래처럼 다운로드한 히스토리가 남습니다. 해당 일자의 스크린 캡처와 데이터를 언제든지 계속 재 다운로드할 수 있죠. 정말 편리하지 않나요? 

뷰저블리로 달라진 업무 효율

화면 스크린 숏을 따기 위해 GUI 시안을 요청할 필요도, 데이터를 실제 웹 사이트 위에 시각화하거나 데이터를 추출하기 위해 이벤트 스크립트 코드를 삽입할 필요도 없어지게 되었습니다. 뷰저블리 타임머신 기능으로 업무 효율화가 100배 개선된 셈이죠! 어떠한가요? 뷰저블리를 활용하여 지금 바로 웹 사이트 데이터와 스크린숏을 관리하세요.