안녕하세요 오늘은 SPA, 패럴렉스, 적응형, 반응형 등 다양한 Rich UI를 지원하며 실제 웹 사이트 위에 그대로 히트맵 데이터를 시각화하는 UX 분석 툴 ‘뷰저블리’의 탄생 비화를 간단히 소개하고자 합니다.
사용자의 Pain-Point로 출발하는 기능 개선
Pain-Point 발견 : 기존 히트맵 툴들은 웹 페이지를 캡처한 이미지 위에 데이터를 시각화하였습니다.
기존 히트맵은 먼저 웹 페이지를 캡처하는 과정이 필요합니다. Hover 해야만 나오는 히든 레이어나 클릭해야만 추가적인 레이어가 펼쳐지는 캐러셀, 드롭다운 리스트의 히트맵 데이터를 확인할 수 없다는 단점이 존재합니다. 특별한 개발상의 커스텀 과정을 거쳐야만 데이터를 볼 수 있었습니다.
뷰저블에서는 히든 스폿(Hidden Spot)이라는 기능을 지원하여 클릭 또는 호버 해야만 나오는 레이어의 데이터를 2 Depth까지 지원하였습니다. 하지만 그 이상 Depth가 생길 경우 확인이 불가능하였습니다. 예를 들어 캐러셀 같은 경우에는 화살표 UI를 클릭하면서 3 Depth 이상의 데이터를 확인해야 하지만, 기존 히트맵으로는 데이터를 알 수 없죠.
데이터를 보기 위해 커스텀을 요청하다 보니, 개발 이슈 관리 툴인 레드 마인(Redmine, 현재는 JIRA를 사용하고 있습니다.)에는 항상 관련 글들이 넘쳐났습니다. 캡처가 제대로 되지 않는다, 특정 페이지의 특정 UI를 커스텀해달라 등등의 글들이 매일 올라왔습니다.
해결 방안 도출 : 실제 웹 사이트 위에 데이터를 시각화하였습니다
그래서 우리는 고민했습니다. 어떻게 하면 이런 문제를 해결할 수 있을까 하고 말이죠. 해결 방법은 간단했습니다. 바로 실제 웹 사이트 위에 데이터를 시각화하는 것입니다. 이렇게 하면 마치 사용자의 시각에서, 마치 사용자처럼 웹 페이지를 탐색하고, 작동시켜볼 수 있을 뿐만 아니라 숨겨진 요소의 데이터까지 모두 확인할 수 있게 됩니다.
Depth에 따라 펼쳐지는 다양한 UI에 대해 사용자가 얼마나 도달하고, 관심을 가지며 콘텐츠를 소비하는지를 파악할 수 있게 되었습니다! 또한 패럴렉스 사이트처럼 다양한 형태의 웹 사이트를 어떻게 캡처할 지에 대한 스크린숏 캡처 이슈가 사라지게 되었죠!
프로토타입 제작
그래서 우리는 당장 실행으로 옮겨 프로토타입을 제작하였습니다. 아래가 실제 뷰저블 웹 사이트 위에 데이터를 시각화한 프로토타입입니다. 오형욱 소프트웨어 개발자가 수고해주셨습니다. 현 뷰저블리와는 많이 간소하고 다른 모습이죠? 먼저 클릭과 무브 히트맵에 대해 시각화 작업을 진행하였습니다.
서비스화 : 뷰저블리로 탄생
프로토타입 제작 후 테스트를 거쳐 정식적으로 서비스화를 실시하였습니다. 클릭, 무브 히트맵 외에 노출, 관심 히트맵도 특화 기능으로 추가하였습니다. 노출 히트맵은 콘텐츠가 사용자가에게 얼마나 노출되었는지, 관심 히트맵은 노출된 콘텐츠 중 얼마나 관심(Hover)을 가졌는지를 정량화 및 시각화하여 보여줍니다.
뷰저블리에서 제공중인 4가지 특화된 히트맵
1) 클릭 히트맵 : 사용자가 어떤 요소들을 얼마나 많이 클릭하였는지 파악할 수 있습니다. 클릭이 많이 일어난 요소는 붉게 표기됩니다. 전환 요소의 경우, 사용자의 최종 목적지가 어떤 곳인지를 알 수 있으며 비전환 콘텐츠인 경우 사용성 이슈 또는 관심 콘텐츠를 알 수 있습니다.
2) 무브 히트맵 : 사용자의 마우스 움직임을 추적하여 Hover를 시각화한 히트맵입니다. 마우스 움직임이 많이 일어날수록 붉게 노출됩니다. 사용자가 아티클을 얼마나 꼼꼼히 읽었는지, 관심 영역은 어느 곳인지 등을 알 수 있습니다.
3) 노출 히트맵 : 콘텐츠 요소들이 페이지 내 방문자에게 얼마나 노출되었는지를 정량적인 수치로 확인할 수 있습니다.
4) 관심 히트맵 : 노출된 콘텐츠에 실제로 접근하여 살펴본 사용자 비율을 파악할 수 있는 특화된 기능입니다.
실제 웹 사이트 위에 사용자 데이터를 시각화함으로써 생겨난 효과는 엄청났습니다. 일단 스크린숏 캡처에 대한 이슈가 사라짐으로써 관련 운영 공수를 최소화할 수 있게 되었습니다. 사용자 입장에서는 패럴렉스 사이트처럼 Rich UI를 지원하는 웹 사이트 데이터까지 볼 수 있게 되었죠. 다른 글로벌 서비스에서는 찾아볼 수 없는 뷰저블리만의 특화된 기능입니다.
실제 뷰저블리로 데이터를 시각화한 페이지 살펴보기
아래 페이지에서 실제 뷰저블리 데이터를 살펴볼 수 있습니다.
아래 스크린 숏으로 보이는 이미지의 실제 데이터를 직접 눈으로 확인해보세요!
실제 뷰저블리 데이터 확인하러 가기
