세션 녹화·히트맵을 무료로, Microsoft Clarity 시작
Microsoft Clarity는 마이크로소프트가 무료로 제공하는 웹 행동 분석 도구다. 히트맵과 세션 녹화로 방문자의 실제 클릭과 스크롤을 보여주며, 추적 코드 한 줄만 넣으면 데이터가 쌓인다.
Microsoft Clarity는 마이크로소프트가 2020년 10월 정식 공개해 무료로 제공하는 웹 사용자 행동 분석 도구다. 방문자가 페이지에서 어디를 클릭하고 어디까지 스크롤하는지 히트맵으로 보여주고, 실제 세션을 영상처럼 다시 재생해준다. 사이트에 추적 코드 한 조각을 넣으면 그날부터 데이터가 쌓이기 시작한다.
Clarity가 실제로 보여주는 것
핵심은 크게 세 가지다. 히트맵, 세션 녹화, 그리고 대시보드에 정리된 인사이트다. 마이크로소프트 공식 FAQ에 따르면 Clarity는 트래픽 일부만 기록하는 샘플링 없이 전체 세션을 수집하고, 매달 1억 명이 넘는 사용자에게서 1페타바이트 이상의 데이터를 처리한다.
히트맵은 클릭이 몰린 지점과 스크롤이 멈추는 위치를 색으로 표시한다. 어떤 버튼이 무시되는지, 사용자가 페이지 절반도 안 보고 떠나는지 한눈에 드러난다.
- 클릭 히트맵: 방문자가 어느 영역을 누르는지 색 농도로 표현
- 스크롤 히트맵: 페이지의 어느 지점까지 읽고 이탈하는지 확인
- 세션 녹화: 마우스 이동과 클릭을 실제 흐름 그대로 재생
인사이트 화면에는 개발자가 놓치기 쉬운 신호가 모여 있다. 마이크로소프트 공식 문서 기준으로 rage click은 같은 요소를 짧은 시간에 반복해서 누르는 클릭, dead click은 눌렀는데 화면에 아무 피드백이 없는 클릭, quick back은 이동한 페이지에서 곧바로 되돌아오는 행동이다. 페이지에서 발생한 자바스크립트 오류가 잡히기도 한다.
어떻게 설치하나
설치는 스크립트 한 조각을 사이트 head에 넣는 게 전부다. Clarity에서 프로젝트를 만들면 추적 코드를 발급해주는데(대시보드의 Settings → Setup → Installation methods → Install manually에서 복사), 이걸 모든 페이지가 공유하는 레이아웃이나 공통 헤더에 붙이면 된다. 웹을 넘어 모바일 앱까지 함께 추적하려면 Project ID 하나로 Android·iOS를 묶는 방법을 참고하면 된다.
코드를 직접 건드리기 어려운 환경이라면 태그 매니저를 쓰면 된다. 구글 태그 매니저에서는 Custom HTML 태그에 추적 코드를 붙이고 트리거를 All Pages로 지정한다. 워드프레스·쇼피파이 같은 플랫폼에서는 연동 플러그인을 이용하는 방법도 있는데, 워드프레스에는 마이크로소프트가 배포하는 공식 Clarity 플러그인이 있다. 어느 쪽이든 추적 코드가 페이지마다 정확히 한 번씩 로드되는지만 확인하면 된다. 같은 코드를 중복으로 넣으면 데이터가 왜곡된다.
설치 후에는 페이지 어디서든 전역 clarity 함수를 쓸 수 있다. 세션에 꼬리표를 달아 두면 나중에 녹화를 골라 볼 때 검색 조건이 된다.
// 세션에 커스텀 태그 달기 — 대시보드 필터로 쓸 수 있다
clarity("set", "plan", "pro");
// 로그인 사용자를 식별하고 싶을 때 (값은 해시 처리되어 저장된다)
clarity("identify", "user-1023");설치 코드 발급과 기능 안내는 Clarity 공식 사이트에서 확인할 수 있다.
코드를 넣고 실제 방문이 발생한 뒤 데이터가 대시보드에 반영되기까지는 시간이 걸린다 — 마이크로소프트 공식 FAQ에 따르면 몇 시간 정도다. 배포 직후 화면이 비어 있다고 당황하지 말고 잠시 기다렸다가 다시 확인하자.
Google Analytics와 무엇이 다른가
Google Analytics가 몇 명이 왔고 어디서 이탈했는지 숫자로 알려준다면, Clarity는 그 사람이 화면에서 실제로 무엇을 했는지 보여준다. 정량 지표와 정성 관찰의 차이다. 방문 이전 단계, 곧 검색 노출과 클릭이 궁금하다면 웹마스터 도구 점검 글로 그림을 완성할 수 있다.
| 구분 | Google Analytics | Microsoft Clarity |
|---|---|---|
| 데이터 성격 | 정량 — 방문 수·이탈률·전환 같은 숫자 | 정성 — 히트맵·세션 녹화 같은 화면 기록 |
| 답하는 질문 | 몇 명이 왔고 어디서 이탈했나 | 그 화면에서 무엇을 하다 막혔나 |
| 쓰임새 | 문제 페이지를 숫자로 찾기 | 그 페이지에서 원인을 눈으로 확인 |
그래서 둘은 경쟁 관계라기보다 짝을 이룬다. GA에서 특정 페이지의 이탈률이 유독 높다는 걸 발견했다면, 같은 페이지의 Clarity 세션 녹화를 열어 사용자가 어디서 막혔는지 눈으로 확인하는 식이다. Clarity는 GA4와 공식 연동도 제공한다. 마이크로소프트 공식 문서에 따르면 Clarity의 Settings → Setup에서 Google Analytics integration을 연결하면 대시보드에 Google Analytics 탭이 생기고, GA4 쪽에는 해당 세션 녹화로 바로 이동할 수 있는 'Clarity Playback URL' 맞춤 측정기준이 자동 생성돼 두 데이터를 나란히 놓고 보기 편하다.
언제 열어보면 좋은가
새 기능을 배포한 직후가 가장 쓸모 있다. 지표가 예상과 다르게 움직일 때 세션 녹화를 열면 원인이 코드인지 UI인지 빠르게 가려낼 수 있다. 이때 배포 버전을 clarity("set", "release", "v2.1.0")처럼 태그로 남겨 두면 녹화 필터에서 배포 전후 세션을 나눠 비교할 수 있다 — 마이크로소프트 공식 FAQ에 따르면 새로 추가한 태그는 30분에서 2시간 안에 프로젝트에 반영된다.
폼 이탈이 잦은 화면, 전환이 일어나야 하는데 멈춰 있는 페이지, 문의가 반복되는 기능을 우선순위로 보면 좋다. 사용자가 어느 입력칸에서 손을 멈추는지, 어떤 버튼을 못 찾는지 눈으로 확인하는 것만으로도 다음에 고칠 지점이 분명해진다.
데이터를 읽을 때 주의할 점
도구를 붙이는 것보다 해석이 어렵다. 몇 가지만 미리 알아두면 헛발질을 줄일 수 있다.
- 세션 하나에 휘둘리지 말자. 한 사람의 특이 행동을 전체 경향으로 착각하기 쉽다. 여러 세션에서 반복되는 패턴을 찾는다.
- rage click이 잡혔다고 무조건 버그는 아니다. 클릭할 수 있어 보이지만 실제로는 아닌 요소가 원인일 때가 많다.
- 개인정보를 신경 쓰자. 마이크로소프트 공식 문서에 따르면 마스킹 모드는 Strict·Balanced·Relaxed 세 가지고 기본값은 민감한 텍스트만 가리는 Balanced이며, 입력칸 내용은 어느 모드에서든 가려진다. 그래도 민감한 폼이 제대로 가려지는지 Settings → Masking에서 직접 확인하는 편이 안전하다.
- 트래픽이 적은 페이지는 표본이 부족해 히트맵을 믿기 어렵다. 데이터가 어느 정도 쌓인 뒤 판단한다.
- 보존 기간이 있다. 마이크로소프트 데이터 보존 정책 기준 세션 녹화 재생 데이터는 30일, 히트맵 데이터는 9개월 보존되고, 즐겨찾기하거나 라벨을 단 녹화만 9개월까지 남는다. 다시 볼 세션은 그 자리에서 즐겨찾기해 두자.
정리하면 Clarity는 마이크로소프트가 공식 FAQ에서 영구 무료·트래픽 상한 없음을 밝힌, 부담 없이 붙여볼 수 있는 정성 분석 도구다. 숫자만으로는 안 보이던 사용자의 진짜 움직임을 짧은 시간에 확인할 수 있다. 다만 도구가 답을 대신 내주지는 않는다. 녹화를 열어 직접 보고, 반복되는 패턴을 골라내고, 개선 가설을 세워 다음 배포에 반영하는 흐름을 몸에 익히는 게 핵심이다.