그런데 막상 페이지를 고쳐야 하는 입장이 되면, 이런 숫자만 들고는 손이 잘 움직이지 않습니다. 대시보드가 “이 페이지 이탈률이 높습니다”라고 알려 줘도, 그래서 어디를 어떻게 손봐야 하는지까지는 말해 주지 않기 때문입니다. 그러다 보면 자연스럽게 그다음 질문이 떠오릅니다. 사용자는 이 페이지에 들어와서 무엇을 하다가 나갔을까요?

이 질문에 답하지 못한 채 페이지를 고치면 결국 감으로 고치는 셈입니다. 그리고 감으로 고친 것은 나중에 효과를 따져 볼 방법도 마땅치 않습니다.

마이크로소프트 클라리티(Microsoft Clarity)는 이 구간을 채우는 무료 도구입니다. 이 글은 도구 소개에서 멈추지 않고, 제 사이트에 붙여 한 주를 관측하며 데이터를 잘못 읽을 뻔했던 지점들과 그 뒤에 세우게 된 기준까지 담았습니다.

미리 요점만 콕 집어보면?

마이크로소프트 클라리티는 기존 분석 도구가 답하지 못하는 “어떻게” 구간을 채우는 무료 도구로, 세션 레코딩·열 지도·스마트 이벤트를 제공합니다.
열 지도는 색보다 클릭 수 총합과 필터 상태를 먼저 확인하고, 세션은 길이보다 활성 시간과 AI 요약을 직접 검증하며, 관측 기간은 요일 기준 한 주기로 잡는 편이 결론이 덜 흔들렸습니다.
도구는 관측 장비이지 판독 장비가 아니며, 무료로 붙일 수 있는 도구일수록 그 데이터를 언제 믿을지에 대한 기준을 함께 세워 두는 편이 좋습니다.

마이크로소프트 클라리티란?

먼저 클라리티가 기존 분석 도구와 무엇이 다른지, 그리고 왜 무료로 쓸 수 있는지부터 살펴봅시다.

1) 집계가 답하지 못하는 구간

기존 분석 도구가 답하는 질문은 “얼마나”입니다. 방문자 수, 페이지뷰, 이탈률 같은 것들입니다. 반면 페이지를 개선하려는 사람이 궁금한 것은 “어떻게”에 가깝습니다. 어디까지 읽고 내려갔는지, 어떤 요소를 눌렀는지 말입니다.

클라리티는 이 “어떻게” 구간을 담당합니다. 즉, 기존 도구를 대체하는 물건이 아니라 비어 있던 칸을 채우는 도구에 가깝습니다.

2) 무료이고, 사이트가 느려지지 않습니다

체험 기간이나 유료 기능이 따로 있는 형태가 아니라 전체가 무료입니다. 수집된 데이터는 내 서버가 아니라 마이크로소프트 쪽에 저장되므로, 사용자가 늘어도 내 사이트가 느려지지 않습니다. 다만 무료에는 대가가 붙어 있는데, 이 부분은 마지막 절에서 다루겠습니다.

어떤 기능을 제공할까?

기능은 크게 셋입니다. 각각이 어떤 질문에 답하는 도구인지를 중심으로 살펴보겠습니다.

1) 세션 레코딩(session recording)

세션 레코딩은 사용자의 화면 조작을 영상처럼 재생해 줍니다. 마우스가 어디로 움직였고 어디에서 스크롤을 멈췄는지가 그대로 보입니다. 실시간 관찰도 되고, 녹화되므로 나중에 몰아서 볼 수도 있습니다.

2) 열 지도(heatmap)

열 지도는 여러 세션을 겹쳐 한 화면으로 요약해 줍니다. 클릭 지도는 클릭이 몰린 위치를, 스크롤 지도는 사용자가 어디까지 내려갔는지를, 주의 지도는 화면에 오래 머문 영역을 색으로 보여줍니다.

3) 스마트 이벤트(smart events)

스마트 이벤트는 같은 곳을 연타하는 rage click, 클릭되지 않는 요소를 누르는 dead click처럼 문제를 암시하는 행동을 자동으로 잡아 줍니다. 해당 세션만 걸러 볼 수 있고, 세션마다 AI 요약도 붙습니다.

설치와 첫 관측

설치는 짧게 끝나지만, 직후에 한 번 헤매게 되는 구간이 있어 함께 적었습니다.

1) 프로젝트 만들고 스크립트 넣기

프로젝트를 만들면 설치 방법을 고르는 화면이 나옵니다. 여러 방식 중 수동 설정이 단순합니다. 아래 스크립트를 문서의 `<head>`에 넣으면 됩니다. 구글 애널리틱스를 붙여 본 적이 있다면 익숙한 방식입니다.

<!-- 클라리티 추적 스크립트 -->
<script type="text/javascript">
  (function (c, l, a, r, i, t, y) {
    c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
    t = l.createElement(r); t.async = 1;
    t.src = "https://www.clarity.ms/tag/" + i;
    y = l.getElementsByTagName(r)[0];
    y.parentNode.insertBefore(t, y);
  })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>

프레임워크를 쓰면 넣을 위치가 프로젝트마다 다릅니다. 저는 이 코드를 그대로 복사해 AI 에이전트에 넘기고 “프로젝트 구조에 맞게 삽입해 달라”고 요청했습니다.

2) 설치 직후에 겪은 일

여기서 저는 한 번 당황했던 부분이 있었는데요. 실시간 세션은 곧바로 잡혔지만 열 지도는 한동안 비어 있었습니다. 코드를 다시 확인하고 배포를 다시 걸어 보기도 했지만 설치는 정상이었고, 대부분의 기능이 활성화되기까지 두 시간 정도가 걸렸습니다. 실시간 세션이 잡히고 있다면 기다리는 편이 좋습니다.

직접 써보며 세운 기준

여기서부터가 이 글의 중심입니다. 기능을 아는 것과 그 데이터로 판단하는 것은 다른 일이었습니다.

1) 열 지도는 색보다 클릭 수 총합을 먼저 봅니다

열 지도가 위험한 이유는 비율을 색으로 환산해 보여주기 때문입니다. 비율은 분모가 작아도 계산됩니다. 세션이 열 건이든 만 건이든 화면 어딘가는 붉게 표시되고, 눈으로 보기에 두 화면은 똑같이 그럴듯합니다.

제 사이트의 클릭 지도가 그랬습니다. 한 주 동안 이 페이지는 98번 열렸고 클릭은 66번이었는데, 그 66번을 39개 요소가 나눠 가집니다.

Clarity 클릭 열 지도 화면, 왼쪽 순위 목록에서 ‘첫 레슨부터 시작’ 버튼이 7클릭(10.61%)으로 클릭 1위에 올라 있다 — <출처: 작가, Clarity 캡처>

1위는 ‘첫 레슨부터 시작’ 버튼으로 10.61%였습니다. 두 자리 퍼센트라 그럴듯하지만 실제 클릭 수는 7번입니다. 2위도 7번, 3위부터 5위는 나란히 3번(4.55%)입니다. 상위 다섯 개가 `7, 7, 3, 3, 3`이니 누군가 네 번만 더 눌러도 3위가 1위와 동률이 됩니다. 이런 분포에서 순위를 읽는 것은 의미가 없습니다.

그래서 저는 클릭 지도를 열면 색이나 순위보다 클릭 수 총합을 먼저 봅니다. 이 숫자가 두 자리에 머물면 순위는 읽지 않고 넘어갑니다. 퍼센트의 분모가 조회수(98)가 아니라 전체 클릭 수(66)이라는 점도 함께 봅니다. 어떤 버튼이 30%라고 해서 방문자의 30%가 눌렀다는 뜻이 아니고, 한 사람이 세 번 누르면 그 세 번이 모두 분자에 들어갑니다.

그래도 이 표본으로 읽을 수 있는 것은 있었습니다. 공들여 만든 소개 문구와 카드 영역에는 클릭이 거의 찍히지 않았고, 대신 사이드바 목차 항목들에 흩어져 찍혔습니다. 순위는 못 믿어도 “강조한 곳과 실제로 눌리는 곳이 다르다”는 방향성만큼은 보였습니다.

2) 필터가 걸렸는지부터 확인합니다

열 지도에는 기기, 유입 경로, 사용자 같은 필터가 있습니다. 무엇을 걸었느냐에 따라 같은 페이지가 전혀 다른 화면이 됩니다.

Clarity 스크롤 열 지도, 특정 사용자로 필터를 걸어 5~10% 구간 방문자가 4명(100%)뿐인 데이터 스크롤 표가 함께 떠 있다 — <출처: 작가, Clarity 캡처>

위는 같은 페이지의 스크롤 지도인데, 특정 사용자 한 명으로 필터를 건 상태라 표본이 4뷰입니다. 필터를 풀면 앞의 클릭 지도처럼 98뷰가 잡히니, 같은 페이지 같은 기간인데 표본이 스물네 배 차이 납니다. 어느 쪽이 맞고 틀린 문제가 아니라 서로 다른 질문에 답하고 있을 뿐입니다. 문제는 화면만 봐서는 필터 여부를 알아채기 어렵다는 점입니다. 그래서 열 지도를 근거로 인용할 때는 필터 상태를 함께 적어 둡니다.

주의 지도도 같은 필터로 본 화면입니다. 상단이 붉고 20% 아래 구간은 평균 소요 시간이 1초 미만이었습니다.

Clarity 주의 지도, 페이지 상단은 붉게 20% 아래 구간은 평균 소요 시간 1초 미만으로 파랗게 표시된 스크롤 구간별 표 — <출처: 작가, Clarity 캡처>

다만 체류가 길다는 사실만으로는 정독인지 혼란인지 구분되지 않습니다. 잘 쓰여서 오래 읽은 것일 수도, 어려워서 다시 읽은 것일 수도, 뭘 눌러야 할지 몰라 멈춰 있던 것일 수도 있습니다. 셋 다 같은 붉은색입니다. 주의 지도는 결론이 아니라 좌표에 가깝습니다.

3) 무슨 신호를 볼지는 사이트 규모가 정합니다

한 주 동안 쌓인 세션은 172건이었습니다. 이걸 앞에서부터 재생하는 것은 172번 중 몇 번이 걸리기를 기다리는 일에 가깝습니다. 그래서 레코딩을 목록이 아니라 검색으로 다뤘습니다. 가설을 세우고 해당하는 세션만 걸러서 봤습니다.

세션 신호 표: 빠른 뒤로 가기 27.91%(48건), dead click 23.84%(41건), rage click 0.58%(1건), 과도한 스크롤 0%(0건) — <출처: 작가, Claude로 생성>

퍼센트만 보면 네 가지 모두 지표처럼 보입니다. 그런데 세션 수로 바꾸면 절반은 쓸 수가 없습니다. rage click은 이름이 알려져 있어 먼저 찾게 되는 신호인데, 제 사이트 규모에서는 일주일에 1건이었습니다. 1건으로는 경향을 말할 수 없습니다. 반대로 dead click 41건과 빠른 뒤로 가기 48건은 들여다볼 만한 양입니다. 괄호 안은 한국어 화면의 표기입니다.

4) 세션은 길이순으로 정렬하지 않습니다

긴 세션부터 여는 것은 자연스러운 선택처럼 보이지만 그렇지 않았습니다. 아래는 12분 46초짜리 세션인데, 클라리티가 붙여 준 요약을 보면 01:20부터 12:45까지가 페이지가 숨겨진 상태였습니다. 실제로 화면을 보고 있던 시간은 1분 남짓입니다.

Clarity 세션 레코딩 재생 화면, 12분 46초 세션의 재생 타임라인과 클릭 마커, AI가 정리한 세션 인사이트 텍스트가 나란히 보인다 — <출처: 작가, Clarity 캡처>

이 세션만의 특성이 아닙니다. 같은 기간 대시보드값이 총 시간 13.4분에 활성 시간 4.2분, 세 배 차이였습니다. 어느 쪽 숫자를 집었는지 확인하지 않으면 관심의 크기를 세 배로 부풀려 읽게 됩니다.

AI 요약도 결론이 아니라 좌표로 씁니다. 화면에 “인사이트는 AI를 통해 지원되므로 실수가 가능합니다”라고 적혀 있습니다. 위 세션도 요약이 00:38과 01:06에 문제가 있었다고 알려 주는데, 저는 그 판단을 믿는 대신 그 시점으로 건너뛰어 직접 확인합니다.

5) 관측 기간은 요일 한 주기로 잡습니다

며칠 치 데이터는 하루치를 여러 번 본 것에 가까울 수 있습니다. 트래픽은 요일에 따라 성격이 갈리기 때문입니다. 사흘 치로 판단하면 그 사흘의 성격에 결론이 끌려갑니다.

그래서 조회 구간을 날짜 수가 아니라 요일 기준으로 잡습니다. 이 글의 데이터도 일요일 오전부터 다음 일요일 오전까지 딱 7일입니다. 며칠을 봤느냐가 아니라 주중과 주말이 한 번씩 다 들어왔느냐를 기준으로 삼는 편이 결론이 덜 흔들렸습니다.

Clarity 대시보드 개요, 세션 172건·세션당 페이지 4.12·스크롤 깊이 74.15%·활성 시간 4.2분(총 13.4분)과 빠른 뒤로 가기 27.91% 등 Insights 카드 — <출처: 작가, Clarity 캡처>

그 한 주 동안 쌓인 것이 세션 172건, 고유 사용자 104명이었습니다. 하루 평균 25건 안팎이라, 하루치만 떼면 어떤 지표든 몇 사람의 행동에 좌우되는 양입니다. 한 주를 채워야 세션당 페이지 수 4.12, 평균 스크롤 깊이 74.15% 같은 값을 판단 근거로 꺼낼 수 있었습니다.

6) 클라리티 단독으로는 결론이 나지 않습니다

클라리티는 페이지 안에서 벌어진 일을 잘 보여주는 대신, 그 사용자가 어디에서 왔는지에는 약합니다. 제 경우 짝으로 쓰는 도구는 비틀리입니다. 비틀리는 어떤 경로로 몇 명이 눌러서 들어왔는지를 보여주고, 클라리티는 그렇게 들어온 사람이 무엇을 했는지를 보여줍니다. 링크 바깥은 비틀리가 맡고 링크 안쪽은 클라리티가 맡는 셈입니다.

그래서 한쪽만으로는 답이 안 나옵니다. 비틀리에서 클릭이 많이 잡혀도 그 유입이 좋았는지는 알 수 없고, 클라리티에서 행동이 이상해 보여도 어느 경로로 도착했는지는 좁히기 어렵습니다.

다만 두 숫자를 나란히 놓고 비교하지는 않습니다. 비틀리는 링크 클릭을, 클라리티는 세션을 셉니다. 한 사람이 두 번 눌러도 한 세션으로 묶일 수 있고, 링크를 거치지 않고 들어온 사람은 비틀리에 잡히지 않습니다. 절대값을 맞추기보다 각 도구 안에서의 변화를 보는 편이 실용적입니다.

실무 적용과 주의할 점

마지막으로 도입 단계에서 확인할 것들을 정리해 보도록 하겠습니다.

1) 마스킹은 보안과 관측의 맞교환입니다

클라리티 이용약관에는 수집된 정보를 마이크로소프트가 활용할 수 있다는 조항이 있습니다. 금융이나 의료처럼 개인정보 민감도가 높은 서비스라면 그대로 도입하기 어려울 수 있습니다. 대신 특정 영역을 수집에서 제외하는 마스킹을 설정할 수 있습니다.

<!-- 이 영역은 레코딩에서 가려집니다 -->
<div data-clarity-mask="true">
  <span>{{ user.email }}</span>
  <span data-clarity-unmask="true">주문 상태: 배송 중</span>
</div>

여기서 판단이 필요합니다. 마스킹을 건 영역은 레코딩에서도 보이지 않습니다. 보안을 위해 가린 만큼 관측 능력을 잃는 셈입니다. 입력 폼을 통째로 가리면 개인정보는 지켜지지만 사용자가 어느 칸에서 멈췄는지도 함께 사라집니다. 그래서 저는 폼 단위가 아니라 값이 들어가는 요소 단위로 가립니다.

2) 도입을 미루는 편이 나은 경우

이 도구가 어울리지 않는 상황이 두 가지 있습니다. 하나는 앞서 이야기한 민감 정보 중심의 서비스이고, 다른 하나는 아직 트래픽이 충분히 쌓이지 않은 사이트입니다.

트래픽이 적은 경우가 조금 더 까다롭습니다. 설치해 두는 것 자체는 부담이 없지만, 데이터가 적은 상태에서 열 지도를 열면 오독의 위험만 커집니다. 판단 근거가 아니라 판단을 왜곡하는 화면이 되는 셈입니다. 설치는 해 두되, 일정 기준을 넘기기 전까지는 대시보드를 열지 않는 편이 낫습니다.

마치며

클라리티는 무료이고, 설치는 스크립트 하나를 넣는 것으로 끝나고, 화면은 직관적입니다. 도입 장벽이 낮다는 점에서 개인 프로젝트나 소규모 서비스에 잘 어울립니다.

다만 직접 운영해 보고 남은 감각은 조금 다릅니다. 이 도구가 준 것은 답이 아니라 질문이었습니다. 열 지도의 붉은 영역은 “여기가 문제다”라고 말해 주지 않습니다. “여기서 무언가 일어나고 있으니 확인해 보라”고 말할 뿐입니다.

여기 정리한 여섯 가지는 특별한 기법이 아닙니다. 데이터를 다룰 때 원래 지켜야 하는 것들에 가깝습니다. 그런데 행동 데이터는 화면이 직관적이라서 오히려 이 기본을 건너뛰게 만드는 힘이 있습니다. 숫자로 된 지표는 해석이 필요하다는 사실을 스스로 알려주지만, 붉게 물든 화면은 이미 해석이 끝난 것처럼 보이기 때문입니다.

도구는 관측 장비이지 판독 장비가 아닙니다. 무료로 붙일 수 있는 도구일수록, 그 데이터를 언제 믿을지에 대한 기준을 함께 세워 두는 편이 좋습니다.

*이 글은 AI의 도움을 받아 작성했습니다. (예제 코드 생성 및 교정/교열)

<참고>