GA4를 열심히 세팅해 두고도 이런 순간이 옵니다. 결제 페이지 이탈률이 유독 높다는 건 알겠는데, 사용자가 그 화면에서 정확히 무엇 때문에 멈췄는지는 숫자만으로 알 수가 없죠. 이탈률 68%라는 값에는 “어디에서 막혔는지”가 담겨 있지 않으니까요.
이럴 때 곁들이기 좋은 도구가 무료 히트맵 도구인 마이크로소프트 클라리티(Microsoft Clarity)입니다. 이번 글에서는 클라리티 사용법을 실무 순서대로 정리해 보겠습니다. 어떤 도구인지, 클라리티 설치 후 무엇부터 설정해야 하는지, 히트맵과 세션 리코딩을 어떻게 보면 좋은지, 그리고 GA4를 이미 쓰고 있다면 연동이 어디까지 되는지까지 다룹니다.
마이크로소프트 클라리티는 어떤 도구인가
클라리티는 마이크로소프트가 제공하는 행동 분석 도구입니다. 사용자가 화면에서 어디를 클릭했고 어디까지 스크롤했는지를 색으로 보여주는 히트맵, 개별 사용자의 화면 조작을 영상처럼 재생하는 세션 리코딩이 핵심 기능입니다.
가장 큰 특징은 두 가지입니다.
- 전 기능이 무료입니다. 세션 리코딩, 히트맵, AI 인사이트까지 포함해 별도 유료 플랜이 없습니다.
- 트래픽 제한이 없습니다. 월 세션 수에 따라 요금이 올라가거나 수집이 끊기는 구조가 아닙니다. 다만 프로젝트당 하루 10만 세션까지 리코딩이 저장되고 이를 넘어서면 샘플링이 적용되며, 리코딩 보관 기간은 30일입니다.
이 두 가지 덕분에 “일단 깔아두고 필요할 때 본다”가 가능한, 도입 부담이 거의 없는 도구입니다. 웹뿐 아니라 모바일 앱도 지원해서 Android, iOS, Flutter, React Native, Cordova·Ionic용 SDK가 각각 제공됩니다.
클라리티 대시보드 화면입니다. 상단 메뉴는 대시보드, 레코딩, 히트맵, 설정 네 개이고 이 글에서 다룰 기능도 이 구조를 따라갑니다. 설치 직후에는 왼쪽 끝에 시작하기 탭이 하나 더 보입니다. 계정 언어 설정에 따라 메뉴 이름이 한국어와 영문 중 하나로 나오는데, 히트맵 메뉴가 특히 헷갈립니다. 한국어 UI에서는 히트맵을 [열 지도]로 번역해 둔 점을 먼저 알아두시면 메뉴에서 헤매지 않습니다.
1. 클라리티 설치하기
클라리티에 가입해 프로젝트를 만들면 상단에 시작하기 탭이 생기고, 여기서 설치 방법을 고르게 됩니다. 카드 세 장이 나란히 뜨는데 이 세 가지가 설치 경로 전부입니다.
Google Tag Manager와 함께 설치
GTM을 이미 쓰고 있다면 이 방법이 가장 편합니다. 클라리티가 사이트에서 GTM을 찾아내면 카드에 발견됨 표시가 붙고, 설정 시작 버튼을 누르는 것만으로 연결이 끝납니다. 태그를 직접 만들고 싶다면 기존 방식대로 맞춤 HTML 태그에 클라리티 스크립트를 넣고 [All Pages] 트리거를 연결해도 됩니다. 개발 부서 배포를 기다리지 않아도 되고, 나중에 제거하거나 조건을 거는 것도 쉽습니다.
수동으로 설치
발급받은 스크립트를 웹사이트 모든 페이지의 [head] 영역에 넣습니다. 화면에서 추적 코드 받기 버튼을 누르면 붙여넣을 코드가 나옵니다. 가장 확실한 방법이지만 페이지 템플릿 수정 권한이 필요하고, 페이지가 늘어날 때마다 누락되지 않는지 챙겨야 합니다.
NPM을 사용하여 설치
NPM에서 Clarity 패키지를 내려받아 초기화 코드를 넣는 방식입니다. React나 Next.js처럼 빌드 과정을 거치는 프로젝트라면 이 경로가 자연스럽습니다. 화면의 지침 보기 버튼에 패키지 설치부터 초기화까지 순서가 정리되어 있습니다.
그럼 Shopify나 WordPress 같은 플랫폼을 쓰고 있다면 어떻게 할까요? 설치 화면에 별도 카드로 나오지는 않고, GTM 카드의 다른 플랫폼 사용 버튼을 누르거나 설정 안의 통합 메뉴로 들어가면 됩니다. Shopify, WordPress/WooCommerce, Wix, SquareSpace, Webflow, Bubble 등 20종 가까운 플랫폼이 준비되어 있어 코드를 직접 만지지 않고 연결할 수 있습니다.
설치 후에는 반드시 확인 절차를 거치세요. 클라리티 설정 화면에서 설치 상태를 확인할 수 있습니다. 리코딩은 코드를 넣는 즉시 들어오기 시작하고, 대시보드 집계는 몇 시간이 걸립니다. 리코딩이 하나도 잡히지 않는다면 스크립트가 일부 페이지에만 들어갔거나 동의 관리 도구에 막혀 있을 가능성이 큽니다.
2. 클라리티 설치 후 데이터가 쌓이기 전에 해둘 설정 3가지
설치하자마자 대시보드부터 보고 싶겠지만, 먼저 손봐야 할 설정이 있습니다. 이 세 가지는 데이터가 쌓인 뒤에 바꾸면 이전 데이터에 소급 적용되지 않습니다.
세 가지 모두 설정 메뉴 안에 있습니다. 아래 화면 왼쪽 사이드바에 마스킹, IP 차단, 스마트 이벤트가 차례로 있고, 뒤에서 다룰 GA4 연동은 맨 아래 [통합]에 있습니다.
마스킹(Masking) 확인하기
세션 리코딩은 사용자 화면을 그대로 재생하기 때문에 개인정보 노출 위험이 항상 따라옵니다. 클라리티는 기본적으로 텍스트를 가리는 마스킹을 적용하지만, 우리 서비스에서 어떤 영역이 민감한지는 우리가 더 잘 압니다. 주문자 정보, 연락처, 결제 수단이 노출되는 화면이 있다면 해당 요소를 마스킹 대상으로 명시해 두세요.
개인정보 처리방침에 행동 분석 도구 사용을 어떻게 기재해야 하는지는 아래 글에서 다뤘습니다. 클라리티도 같은 기준으로 검토하시면 됩니다.
내부 트래픽 제외하기
IP 차단 기능으로 사내 IP를 등록해 두세요. 등록하지 않으면 담당자가 검수하느라 돌아다닌 기록이 그대로 세션 리코딩에 쌓입니다. 트래픽이 적은 서비스일수록 내부 트래픽 비중이 커서 히트맵 결과가 눈에 띄게 왜곡됩니다.
스마트 이벤트와 퍼널 정의하기
클라리티에는 스마트 이벤트(Smart events)라는 기능이 있습니다. 별도 코드를 심지 않아도 특정 버튼 클릭이나 페이지 도달 같은 행동을 이벤트로 잡아주는 기능인데, 이걸 정의해 두면 퍼널(Funnels) 기능으로 단계별 이탈을 볼 수 있고, 세션 리코딩을 그 이벤트 기준으로 필터링할 수 있습니다.
여기서 한 가지 권해드리고 싶은 건, 이 스마트 이벤트 이름을 GA4 이벤트 이름과 맞춰두는 것입니다. GA4에서는 sign_up으로 부르는 행동을 클라리티에서는 [회원가입 완료]로 불러 두면, 나중에 두 도구를 오가며 볼 때 매번 머릿속에서 이름을 번역해야 합니다. 사소해 보이지만 두 도구를 같이 쓰는 기간이 길어질수록 차이가 납니다.
3. 클라리티 대시보드에서 먼저 볼 지표
클라리티 대시보드에는 다른 분석 도구에 없는 지표들이 있습니다. 사용자가 불편을 겪은 순간을 잡아내는 지표들인데, 이게 클라리티를 쓰는 가장 큰 이유이기도 합니다.
해외 자료를 보고 따라 하다 보면 영문 명칭과 한국어 UI 표기가 달라 헷갈리기 쉬우므로 함께 적어둡니다.
| 영문 명칭 | 한국어 UI 표기 | 무엇을 뜻하나 |
|---|---|---|
| Rage clicks | 빠른 클릭 | 같은 지점을 연달아 격하게 클릭한 경우. 눌리지 않는다고 느낀 것 |
| Dead clicks | 배달 못 한 클릭 | 클릭했지만 아무 반응이 없던 경우 |
| Excessive scrolling | 과도한 스크롤 | 필요 이상으로 위아래를 오간 경우. 찾는 걸 못 찾고 있는 것 |
| Quick backs | 빠른 뒤로 가기 | 페이지에 들어왔다가 곧바로 되돌아 나간 경우 |
| Script errors | 스크립트 오류 | 페이지에서 스크립트 오류가 발생한 경우 |
GA4의 이탈률이 “나갔다”는 사실만 알려준다면, 이 지표들은 “왜 나갔을지”에 대한 후보를 좁혀 줍니다. 특히 Dead clicks는 실무에서 자주 건집니다. 이미지 안에 버튼처럼 생긴 요소가 있는데 실제로는 링크가 걸려 있지 않은 경우, 사용자는 계속 누르고 있는데 우리는 모르고 있던 상황이 여기서 드러납니다.
Script errors도 눈여겨보세요. 마케터 입장에서는 넘기기 쉬운 항목이지만, 전환 스크립트가 실행되지 않아 데이터가 누락되는 상황과 직결될 때가 있습니다.
4. 클라리티 히트맵 3종 구분해서 쓰기
클라리티 히트맵은 종류가 나뉘어 있고, 각각 답해 주는 질문이 다릅니다. 앞서 말씀드린 대로 메뉴 이름은 한국어 UI에서 [열 지도]로 나옵니다. 아래 화면은 영문 UI라 [Heatmaps]로 표시됩니다.
- 클릭맵(Click): 어떤 요소가 실제로 눌렸는지 확인할 때. 왼쪽 패널에 클릭이 많은 순서로 요소가 나열되고 요소별 클릭 수와 비율까지 함께 보여줍니다
- 스크롤맵(Scroll): 우리가 중요하다고 생각한 정보가 사용자가 도달하는 지점 안에 있는지 확인할 때
- 주의맵(Attention): 사용자가 화면의 어느 구간에 오래 머물렀는지 확인할 때. 클릭이 없어도 오래 머무른 영역을 잡아냅니다
클릭맵 안에는 Click과 Area 보기가 따로 있습니다. Click은 개별 요소 단위, Area는 섹션 단위로 묶어 보여주므로 화면을 크게 나눠 비교하고 싶을 때 Area로 바꾸면 됩니다.
여기에 더해 클라리티가 구매 이벤트를 감지하는 프로젝트(대표적으로 Shopify 연동 프로젝트)에서는 전환 히트맵(Conversion heatmaps)을 쓸 수 있습니다. 클릭을 실제 구매와 연결해 어떤 요소가 매출로 이어졌는지 보여주는 기능입니다.
메뉴에 들어가면 볼 페이지를 먼저 고릅니다. URL을 직접 입력하거나 인기 페이지 목록에서 골라도 되고, 상단 필터로 기간과 기기를 함께 좁힐 수 있습니다.
클릭맵에서 특히 유용한 건 요소 목록의 세션 리코딩 보기 버튼입니다. 클릭이 몰린 요소를 발견했을 때 그 요소를 누른 사용자들의 세션 리코딩으로 바로 넘어갈 수 있어서, 히트맵에서 세운 가설을 곧장 확인할 수 있습니다.
상세 페이지를 개선할 때 가장 자주 쓰는 조합은 스크롤맵과 클릭맵을 겹쳐 보는 것입니다. 스크롤맵에서 사용자 대부분이 도달하지 못하는 지점을 확인하고, 그 위쪽에 클릭이 몰리는 요소가 무엇인지 클릭맵으로 확인하면 “무엇을 위로 올릴지”에 대한 답이 나옵니다.
5. 클라리티 세션 리코딩은 조건을 걸고 보기
세션 리코딩은 재미있지만 시간을 가장 많이 잡아먹는 기능이기도 합니다. 아무 조건 없이 최근 세션부터 재생하다 보면 한두 시간이 그냥 지나가고, 남는 건 “사용자들이 이렇게 쓰는구나” 정도의 인상뿐입니다.
필터를 먼저 거세요. 클라리티는 프릭션 지표와 스마트 이벤트를 기준으로 세션을 좁힐 수 있습니다.
- Rage clicks가 발생한 세션만
- 장바구니에는 담았지만 결제 이벤트가 없는 세션만
- 특정 유입 채널로 들어온 세션만
이렇게 좁히고 나면 열 개 남짓한 세션만 봐도 패턴이 보입니다. 자주 쓰는 조건은 세그먼트(Segments)로 저장해 두면 다음에 같은 관점으로 다시 볼 수 있습니다.
6. 클라리티 GA4 연동은 어디까지 되나
이미 GA4를 운영 중이라면 두 도구를 연동해 두는 편이 낫습니다. 클라리티 설정에서 GA4의 계정 ID, 측정 ID(G-로 시작), 속성 ID를 입력하면 연결됩니다.
다만 여기서 기대치를 정확히 맞춰두는 게 중요합니다. 연동이라는 말 때문에 두 도구가 양방향으로 이어질 거라 생각하기 쉬운데, 실제로는 그렇지 않습니다.
연동하면 되는 것
클라리티 안에서 GA4 데이터를 함께 볼 수 있게 됩니다. 유입과 전환 수치를 확인하러 GA4 탭을 따로 열지 않아도 되고, 클라리티에서 보던 화면 위에서 흐름을 이어갈 수 있습니다.
연동해도 안 되는 것
공식 문서에 두 가지 제약이 명시되어 있습니다.
- GA4의 세그먼트는 지원하지 않습니다.
- 클라리티는 재생(playback) URL을 GA4로 보내지 않습니다. GA4가 카디널리티가 높은 행을 받지 못하기 때문입니다.
두 번째가 특히 중요합니다. GA4 보고서에서 이상한 지점을 발견하고 그 행을 눌러 해당 세션 리코딩으로 바로 넘어가는 흐름, 연동이라고 하면 가장 먼저 기대하게 되는 그 동작이 지원되지 않는다는 뜻입니다.
Google Analytics4 Integration with Clarity | Microsoft Clarity 공식 문서
그래서 실무 흐름은 수동입니다
결국 GA4에서 문제를 찾고 클라리티에서 확인하는 작업은 사람이 손으로 잇게 됩니다. GA4에서 이탈이 큰 구간과 조건을 확인한 뒤, 같은 조건을 클라리티 필터에 다시 입력해 해당 세션을 찾아보는 식입니다.
앞에서 스마트 이벤트 이름을 GA4 이벤트 이름과 맞춰두라고 말씀드린 이유가 여기에 있습니다. 자동으로 이어지지 않기 때문에, 두 도구에서 같은 행동을 같은 이름으로 부르고 있는지가 실제 작업 속도를 좌우합니다.
한 가지 더 확인해 보실 것이 있습니다. 예전에 연동해 둔 계정이라면 GA4 쪽에 [Clarity Playback URL]이라는 맞춤 측정기준이 남아 있을 수 있습니다. 값의 종류가 지나치게 많은(고카디널리티) 측정기준은 보고서 행 한도를 빠르게 소진시켜 데이터가 (other) 행으로 묶이는 원인이 되므로, 연동 후 GA4 맞춤 정의 목록을 한 번 점검해 보시길 권합니다.
두 도구의 역할을 이렇게 나눠 생각하면 정리가 쉽습니다.
| 질문 | 보는 도구 |
|---|---|
| 얼마나 들어와서 얼마나 전환됐나 | GA4 |
| 어느 단계에서 얼마나 빠졌나 | GA4 |
| 그 단계에서 무엇 때문에 멈췄나 | 클라리티 |
GA4는 규모와 흐름을, 클라리티는 그 안의 개별 장면을 담당합니다. 순서도 대개 이 방향입니다. 클라리티를 먼저 열고 이상한 장면을 찾는 게 아니라, GA4에서 수치가 튀는 지점을 먼저 찾고 그 지점을 클라리티로 확인하는 순서가 훨씬 빠릅니다.
7. 클라리티 Copilot으로 요약 먼저 받기
클라리티에는 AI 기능인 Copilot이 들어가 있습니다. 대시보드 데이터에 대해 질문을 던지면 답을 정리해 주고, 세션 리코딩과 히트맵에 대해서도 요약을 만들어 줍니다. 여러 세션을 묶어 공통점을 정리해 주는 기능도 있습니다.
다만 Copilot 요약을 결론으로 삼지는 마세요. 실무에서 쓰기 좋은 방식은 순서를 바꾸는 것입니다. 먼저 요약을 받아 어디를 볼지 후보를 좁히고, 그다음 해당 세션이나 히트맵을 직접 확인해 판단하는 것이죠. 요약은 탐색 시간을 줄여 주는 용도이지 근거를 대신하지 않습니다.
클라리티로 할 수 없는 것
도구를 소개하는 글이지만 경계도 분명히 해두는 게 좋겠습니다.
- 최종 성과 검증에는 적합하지 않습니다. 구매한 상품이 무엇인지, 금액과 옵션은 어땠는지 같은 세부 정보를 다루는 도구가 아닙니다.
- 다수 사용자의 행동을 정량 비교하기에도 한계가 있습니다. 세션 리코딩은 본질적으로 개별 사례이고, 몇 개를 보고 전체 경향으로 단정하기 쉬운 함정이 있습니다.
- 그래서 판단 기준과 질문을 먼저 세워두지 않으면, 분석이 “우리 사이트 핫플레이스 확인”에서 끝나기 쉽습니다.
이 부분은 히트맵 분석을 어떤 태도로 접근해야 하는지 정리한 아래 글에서 더 자세히 다뤘습니다. 실제 B2B 웹사이트 개선 사례도 함께 담겨 있으니 이어서 읽어보시길 권합니다.
마무리
클라리티는 무료이고 트래픽 제한이 없어서 도입 판단에 드는 비용이 거의 없는 도구입니다. 그래서 “쓸까 말까”를 오래 고민하기보다 일단 설치해 두고, 필요한 순간에 열어보는 편이 낫습니다.
정리하면 이 순서입니다. 설치하고, 마스킹과 내부 IP를 정리하고, 스마트 이벤트를 GA4 이벤트 이름에 맞춰 정의해 두는 것. 그리고 실제로 볼 때는 GA4에서 이상한 수치를 먼저 찾고, 그 지점만 클라리티로 확인하는 것입니다.
사용자 행동 데이터 수집 구조를 설계하는 단계에서 어떤 도구를 어디까지 쓸지 정리가 필요하다면 오픈소스마케팅에 문의해 주세요. GA4를 중심으로 한 분석 환경 설계부터 보조 도구 활용까지 함께 정리해 드리겠습니다.
