마이크로소프트 클래리티(Clarity) 사용법: 무료 히트맵·세션 녹화

마이크로소프트 클래리티(Microsoft Clarity)는 방문자가 홈페이지에서 어디를 누르고 어디까지 내려 보는지를 히트맵과 세션 녹화로 보여주는 무료 행동 분석 도구입니다. GA4가 「몇 명이 어디서 왔는지」를 알려준다면, 클래리티는 「왜 문의하지 않고 나갔는지」를 화면으로 보여줍니다. 이 가이드는 기업 홈페이지 담당자를 위해 무료 범위와 제한, 설치 3가지, 히트맵·녹화·대시보드 지표 읽는 법, GA4 연동, 개인정보 설정, 문의 폼 이탈 지점 찾는 순서를 2026년 10월 마이크로소프트 공식 문서 기준으로 정리했습니다.

마이크로소프트 클래리티란? 무료 범위와 제한

클래리티는 마이크로소프트가 만든 사용자 행동 분석 도구로, 세션 녹화(Recordings), 히트맵(Heatmaps), 대시보드 인사이트, AI 요약(Copilot)을 제공합니다. 공식 FAQ는 클래리티를 「영구 무료」로 설명하며 트래픽 제한이나 유료 전환이 없다고 밝힙니다. 다만 녹화·보관 한도는 있으니 아래 기준을 확인하세요.

GA4와 역할이 어떻게 나뉘는지는 아래처럼 정리할 수 있습니다.

설치 방법 3가지: 직접 코드·GTM·워드프레스 플러그인

클래리티 설치는 가입과 프로젝트 생성 후 추적 코드를 모든 페이지의 <head>에 넣으면 끝납니다. clarity.microsoft.com에서 Sign up으로 가입하고 New project에 프로젝트 이름(Name)과 사이트 주소(Website)를 넣은 뒤 Add new project를 누릅니다. 마이크로소프트는 도메인마다 프로젝트를 따로 만들라고 권장합니다.

방법 1. 추적 코드 직접 삽입

1. 프로젝트에서 Settings > Setup으로 이동합니다.
2. Install manually의 Get tracking code를 눌러 코드를 복사합니다.
3. 홈페이지 공통 헤더 파일의 <head> 안에 붙여 넣습니다.

방법 2. 구글 태그 매니저(GTM)로 설치

GTM이 있다면 Settings > Setup > Google Tag Manager > Finish setup을 누르고 구글 계정 권한을 허용(Allow)한 뒤, GTM 계정·컨테이너를 고르고 Create and publish를 누르면 태그 생성과 게시가 한 번에 끝납니다.

GTM에서 직접 만들고 싶다면 공식 템플릿을 씁니다. GTM 「태그」 > 「새로 만들기」 > 「태그 구성」의 커뮤니티 템플릿 갤러리에서 Microsoft Clarity – Official을 추가하고, 프로젝트 ID(클래리티 주소 projects/view/{ID}/ 부분)를 넣은 뒤 트리거 All Pages로 저장·게시합니다. GTM을 여러 사람이 관리한다면 이 방식이 미리보기로 확인하기 편합니다. GTM 기본 개념은 구글 태그 매니저(GTM) 설치·사용법: 태그·트리거·문의 전환까지를 참고하세요.

방법 3. 워드프레스 공식 플러그인

워드프레스는 마이크로소프트가 배포하는 「Microsoft Clarity」 플러그인을 「플러그인」 > 「새 플러그인 추가」에서 설치·활성화합니다. 메뉴에 생긴 Clarity에서 Sign in을 누르고 기존 프로젝트를 골라 Continue를 누르거나 New project로 새로 만들면 연결이 끝납니다.

설치 확인하기

코드를 넣은 직후 프로젝트 화면에 접속 중인 사용자 수가 보이면 Watch now로 실시간 녹화를 볼 수 있습니다. 또는 브라우저 개발자 도구 Network 탭에서 https://www.clarity.ms/collect로 가는 collect 요청이 보이면 정상입니다. 대시보드 숫자는 몇 시간 뒤부터 채워집니다.

히트맵·세션 녹화 보는 법과 대시보드 지표

클래리티 화면은 여러 방문자를 모아 보는 히트맵, 한 명의 방문을 다시 보는 세션 녹화, 문제 세션을 골라 주는 대시보드 세 가지로 나뉩니다.

히트맵: 클릭·스크롤·영역

히트맵은 클릭과 스크롤을 모아 페이지 위에 색으로 보여주며, 최소 트래픽 조건 없이 PC·태블릿·모바일별로 자동 생성됩니다. Heatmaps 메뉴에서 페이지를 고르거나 주소 일부를 입력해 엽니다. 종류는 다섯 가지입니다.

• 클릭 맵(Click maps): 어떤 요소가 몇 번 클릭됐는지 보여줍니다. All clicks 외에 Dead·Rage·Error·First·Last clicks로 나눠 볼 수 있고, 마우스 좌표가 아니라 클릭한 요소 기준으로 집계합니다.
• 스크롤 맵(Scroll maps): 방문자 중 몇 %가 각 구간까지 내려왔는지 보여주고, 스크롤 전에 평균적으로 보이는 위치를 평균 폴드(Average fold)로 표시합니다.
• 영역 맵(Area maps): 직접 고른 영역 안의 클릭 합계를 보여줍니다.
• 전환 맵(Conversion maps): 쇼핑몰의 구매로 이어진 클릭을 보여줍니다.
• 주목 맵(Attention maps): 페이지 구간별로 머문 시간을 보여줍니다.

새 클릭은 30분 안에 반영됩니다. 파라미터만 다른 주소가 많다면 URL parameters 토글로 정확히 일치하는 주소만 볼지 묶어 볼지 고를 수 있습니다.

세션 녹화

세션 녹화는 동영상이 아니라 방문자가 본 페이지의 HTML과 클릭·스크롤 같은 동작을 기록해 재구성한 것이며, 30분 동안 동작이 없으면 세션이 끝납니다. Recordings 목록에는 녹화마다 진입·이탈 페이지, 리퍼러, 클릭 수, 기기가 표시되고 More details에서 이벤트 타임라인을 봅니다. 동작 없는 구간은 Skip inactivity로 건너뛰고, Copilot을 켜면 AI 요약도 볼 수 있습니다.

대시보드 지표: 데드 클릭·분노 클릭·과도한 스크롤

녹화를 다 볼 수는 없으니 대시보드 지표로 문제 세션을 먼저 고릅니다. 괄호 안이 공식 용어이고 한국어 이름은 이 글에서 옮긴 것입니다.

스마트 이벤트와 퍼널

스마트 이벤트(Smart events)는 클릭·페이지 방문을 묶어 「문의」 같은 행동 단위로 보여줍니다. Purchase, Add to Cart, Begin Checkout, Contact Us, Submit Form, Request Quote, Sign Up, Login, Download 9가지는 자동으로 찾고, 프로젝트 관리자가 Settings > Smart events > New event에서 최대 20개까지 직접 만들 수 있습니다. 이벤트와 페이지 방문을 순서대로 이으면 퍼널(Funnels)이 되어 전환율(Conversion rate), 전환 세션 수, 전환 소요 시간 중앙값을 보여줍니다.

AI 검색에서 들어온 방문 보기

대시보드 Referrer 카드의 Channels 탭에는 AI 답변 속 링크로 온 AIPlatform과 AI 안의 광고로 온 PaidAIPlatform 채널이 있습니다. 대상은 ChatGPT, Microsoft Copilot, Gemini, Claude, Perplexity 단독 웹사이트에서 온 방문이며, 검색엔진·업무 도구에 들어간 AI 기능은 빠지고 리퍼러가 숨겨지면 직접 유입으로 잡힙니다. 구글 AI 개요의 인용 조건은 구글 AI 모드·AI 개요에 홈페이지가 인용되려면? 공식 요건 정리에서 다뤘습니다.

GA4 연동: 할 수 있는 것과 없는 것

클래리티 GA4 연동은 클래리티가 GA4 데이터를 가져와 클래리티 안에서 보여주는 기능입니다. Settings > Setup > Google Analytics integration의 Get Started를 누르고 구글 로그인 후 웹 속성을 골라 Save합니다. 프로젝트 하나에 웹 속성 하나만 연결됩니다.

연결 후 Dashboards > Google Analytics에서 방문 개요, 획득 보고서, 인기 페이지, 국가·지역별·기기별 세션 카드를 보고, 각 항목에서 같은 기간의 녹화나 히트맵으로 넘어갈 수 있습니다.

캠페인별 행동은 UTM으로 보는 편이 직접적입니다. 클래리티 필터 Traffic 그룹의 Source, Medium, Campaign은 utm_source, utm_medium, utm_campaign 값으로 녹화와 히트맵을 걸러 줍니다. 네이버 광고 방문자만 골라 녹화를 보는 식입니다.

링크에 UTM 값을 붙이는 방법은 UTM 파라미터 만드는 법: 광고·메일 유입을 GA4에서 구분하기에 정리했습니다.

개인정보 설정: 마스킹·쿠키·처리방침 기재

클래리티는 화면 내용을 기록하므로 설치 전에 마스킹 모드, 녹화에서 뺄 페이지, 처리방침 기재 세 가지를 정합니다.

마스킹 모드

Settings > Masking에서 사이트 전체에 적용할 모드를 고릅니다. 마스킹된 내용은 클래리티로 업로드되지 않습니다.

• Strict: 화면의 모든 텍스트를 가립니다.
• Balanced(기본값): 숫자와 이메일 주소 같은 민감한 내용만 가립니다.
• Relaxed: 텍스트를 가리지 않습니다. 다만 입력칸과 드롭다운은 여전히 가려집니다.

입력칸 내용은 어느 모드에서든 가려지며 해제할 수 없습니다. 특정 영역은 Mask by element에 CSS 선택자를 등록하거나 HTML 요소에 data-clarity-mask="True"(가리기), data-clarity-unmask="true"(보이기) 속성을 붙입니다. 변경은 새 녹화부터 최대 1시간 안에 반영되고 지난 녹화에는 소급되지 않으며, 스타일시트 안의 내용은 마스킹되지 않습니다.

쿠키와 동의

클래리티는 퍼스트파티 쿠키 _clck(사용자 ID 유지), _clsk(여러 페이지를 한 녹화로 연결)와 마이크로소프트 도메인의 서드파티 쿠키(CLID, MUID 등)를 씁니다. 2025년 10월 31일부터 유럽경제지역(EEA)·영국·스위스 방문자는 동의 신호가 있어야 모든 기능이 동작하고, 동의가 없으면 페이지마다 세션이 끊깁니다. 해외 바이어가 많은 수출 기업은 쿠키 동의 배너와 클래리티 동의 API 연결을 검토하세요. 쿠키 사용 사실은 이용자에게 알려야 한다고 FAQ에 적혀 있습니다.

개인정보 처리방침에 적을 것

개인정보보호위원회 「2026 개인정보 처리방침 작성지침」은 제3자가 자동 수집 장치로 행태정보를 수집하도록 허용하는 경우 ① 수집 장치 명칭 ② 장치 종류 ③ 수집해 가는 사업자 ④ 수집해 가는 행태정보 ⑤ 수집 목적 ⑥ 거부 방법을 처리방침에 적도록 권장합니다. 클래리티는 아래처럼 정리할 수 있습니다.

GA4·광고 픽셀과 함께 적는 방법은 홈페이지 개인정보처리방침 만들기: 필수 항목과 작성지침 정리 (2026)에 정리했습니다. 이 표는 실무 예시이며 법률 자문이 아닙니다.

기업 홈페이지에서 실제로 보는 법: 문의 폼 이탈 지점 찾기

기업 홈페이지라면 클래리티를 「문의 폼을 쓰기 시작했다가 보내지 않은 사람」을 찾는 데 먼저 쓰세요. 순서는 이렇습니다.

1. 문의 완료 이벤트 확인: Settings > Smart events에서 자동으로 잡힌 Submit Form, Contact Us, Request Quote가 실제 접수와 맞는지 봅니다. 맞지 않으면 New event로 접수 완료 페이지 방문(Page visits)이나 제출 버튼 클릭(Button clicks)을 기준으로 만듭니다.
2. 퍼널 만들기: Settings > Funnels > New funnel에서 「문의 페이지 방문 → 문의 완료 이벤트」 순서로 단계를 끌어다 놓고 저장합니다.
3. 이탈 세션 걸러내기: Recordings 필터에서 Visited URL에 문의 페이지 주소를 넣고, Actions의 Entered text(입력함)를 고른 뒤, Smart events에서 문의 완료 이벤트를 제외(Exclude selection)합니다. 입력은 했지만 보내지 않은 세션만 남습니다.
4. 녹화 5~10개 보기: 멈추는 칸, 필수 항목 표시, 오류 메시지 위치, 개인정보 동의 체크박스, 모바일 키보드에 가려진 전송 버튼, 전송 버튼의 데드 클릭·분노 클릭을 확인합니다.
5. 고친 뒤 비교하기: 같은 필터를 세그먼트로 저장하고, 히트맵은 Heatmaps compare로 변경 전후를 나란히 봅니다. 두 안을 겨루려면 A/B 테스트란? 홈페이지에 적용하는 방법까지 정리의 방식으로 검증하세요.

폼의 개인정보 동의 체크박스와 안내 문구는 개인정보 수집·이용 동의서 양식: 홈페이지 문의폼 문구 예시를 참고하세요.

자주 묻는 질문

클래리티를 설치하면 홈페이지가 느려지나요?

마이크로소프트는 스크립트가 비동기로 동작해 로딩 속도에 영향을 주지 않는다고 설명합니다. 다른 태그가 많이 쌓인 사이트라면 설치 후 PageSpeed Insights로 한 번 측정해 두세요.

문의 폼에 입력한 연락처도 녹화되나요?

입력칸 내용은 모든 마스킹 모드에서 가려지고 업로드되지 않습니다. 다만 접수 완료 화면에 「홍길동 님의 문의가 접수되었습니다」처럼 입력값을 다시 보여주면 Balanced 모드에서도 이름이 남을 수 있으니 그 영역에 data-clarity-mask를 붙이거나 Strict 모드를 쓰세요.

웹닷은 홈페이지를 만들 때 GA4·클래리티 같은 분석 도구의 설치 위치와 개인정보 처리방침의 자동 수집 장치 항목을 빌드 단계에서 함께 점검합니다.

정리

마이크로소프트 클래리티는 무료로 히트맵과 세션 녹화를 제공해 GA4 숫자만으로는 알 수 없는 방문자 행동을 보여줍니다. 설치는 한 가지 방법으로 하고, 마스킹과 처리방침을 먼저 정한 뒤, 문의 폼처럼 성과와 직결된 페이지부터 살펴보세요.