Microsoft Clarity로 히트맵과 세션 녹화 분석 시작하기
Microsoft Clarity는 마이크로소프트가 무료로 제공하는 웹 사용자 행동 분석 도구다. 방문자가 페이지에서 어디를 클릭하고 어디까지 스크롤하는지 히트맵으로 보여주고, 실제 세션을 영상처럼 다시 재생해준다. 사이트에 추적 코드 한 조각을 넣으면 그날부터 데이터가 쌓이기 시작한다.
Clarity가 실제로 보여주는 것
핵심은 크게 세 가지다. 히트맵, 세션 녹화, 그리고 대시보드에 정리된 인사이트다.
히트맵은 클릭이 몰린 지점과 스크롤이 멈추는 위치를 색으로 표시한다. 어떤 버튼이 무시되는지, 사용자가 페이지 절반도 안 보고 떠나는지 한눈에 드러난다.
- 클릭 히트맵: 방문자가 어느 영역을 누르는지 색 농도로 표현
- 스크롤 히트맵: 페이지의 어느 지점까지 읽고 이탈하는지 확인
- 세션 녹화: 마우스 이동과 클릭을 실제 흐름 그대로 재생
인사이트 화면에는 개발자가 놓치기 쉬운 신호가 모여 있다. 눌러도 아무 반응이 없는 영역을 반복해서 누르는 rage click, 링크가 아닌 곳을 누르는 dead click, 들어왔다가 곧바로 뒤로 가는 행동 같은 것이다. 페이지에서 발생한 자바스크립트 오류가 잡히기도 한다.
어떻게 설치하나
설치는 스크립트 한 조각을 사이트 head에 넣는 게 전부다. Clarity에서 프로젝트를 만들면 추적 코드를 발급해주는데, 이걸 모든 페이지가 공유하는 레이아웃이나 공통 헤더에 붙이면 된다.
코드를 직접 건드리기 어려운 환경이라면 태그 매니저를 쓰거나, 워드프레스·쇼피파이 같은 플랫폼에서는 연동 플러그인을 이용하는 방법도 알려져 있다. 어느 쪽이든 추적 코드가 페이지마다 정확히 한 번씩 로드되는지만 확인하면 된다. 같은 코드를 중복으로 넣으면 데이터가 왜곡된다.
코드를 넣고 실제 방문이 발생한 뒤 데이터가 대시보드에 반영되기까지는 다소 시간이 걸릴 수 있다. 배포 직후 화면이 비어 있다고 당황하지 말고 잠시 기다렸다가 다시 확인하자.
Google Analytics와 무엇이 다른가
Google Analytics가 몇 명이 왔고 어디서 이탈했는지 숫자로 알려준다면, Clarity는 그 사람이 화면에서 실제로 무엇을 했는지 보여준다. 정량 지표와 정성 관찰의 차이다.
그래서 둘은 경쟁 관계라기보다 짝을 이룬다. GA에서 특정 페이지의 이탈률이 유독 높다는 걸 발견했다면, 같은 페이지의 Clarity 세션 녹화를 열어 사용자가 어디서 막혔는지 눈으로 확인하는 식이다. Clarity는 GA와 연동하는 기능도 제공한다고 알려져 있어, 두 데이터를 나란히 놓고 보기 편하다.
언제 열어보면 좋은가
새 기능을 배포한 직후가 가장 쓸모 있다. 지표가 예상과 다르게 움직일 때 세션 녹화를 열면 원인이 코드인지 UI인지 빠르게 가려낼 수 있다.
폼 이탈이 잦은 화면, 전환이 일어나야 하는데 멈춰 있는 페이지, 문의가 반복되는 기능을 우선순위로 보면 좋다. 사용자가 어느 입력칸에서 손을 멈추는지, 어떤 버튼을 못 찾는지 눈으로 확인하는 것만으로도 다음에 고칠 지점이 분명해진다.
데이터를 읽을 때 주의할 점
도구를 붙이는 것보다 해석이 어렵다. 몇 가지만 미리 알아두면 헛발질을 줄일 수 있다.
- 세션 하나에 휘둘리지 말자. 한 사람의 특이 행동을 전체 경향으로 착각하기 쉽다. 여러 세션에서 반복되는 패턴을 찾는다.
- rage click이 잡혔다고 무조건 버그는 아니다. 클릭할 수 있어 보이지만 실제로는 아닌 요소가 원인일 때가 많다.
- 개인정보를 신경 쓰자. Clarity는 입력값 마스킹 기능을 제공한다고 알려져 있지만, 민감한 폼이 제대로 가려지는지 직접 확인하는 편이 안전하다.
- 트래픽이 적은 페이지는 표본이 부족해 히트맵을 믿기 어렵다. 데이터가 어느 정도 쌓인 뒤 판단한다.
정리하면 Clarity는 부담 없이 붙여볼 수 있는 정성 분석 도구다. 숫자만으로는 안 보이던 사용자의 진짜 움직임을 짧은 시간에 확인할 수 있다. 다만 도구가 답을 대신 내주지는 않는다. 녹화를 열어 직접 보고, 반복되는 패턴을 골라내고, 개선 가설을 세워 다음 배포에 반영하는 흐름을 몸에 익히는 게 핵심이다.