쇼핑몰이나 회사 홈페이지 운영 중 방문자가 어디서 이탈하는지 감으로만 짐작하고 계신가요. Microsoft Clarity를 사용하면 추적 코드를 설치하고, 세션 녹화 및 히트맵을 통해 실제 이탈 지점을 시각적으로 확인할 수 있습니다. 본 가이드는 무료인 Clarity 프로젝트를 생성하고 설치를 검증한 뒤 Copilot 요약으로 분석하는 전 과정을 다룹니다.
대상: 쇼핑몰·블로그·홈페이지 운영자, 마케팅 담당자
예상 결과: Clarity 프로젝트 설치 완료 및 세션 녹화·히트맵·Copilot 요약 확인
확인 기준일: 2026-08-16
목차
Microsoft Clarity란 무엇인가요
Microsoft Clarity는 웹사이트와 앱 사용자의 상호작용을 분석하는 행동 분석 도구입니다. 방문자가 페이지를 어떻게 스크롤하고, 어디를 클릭하며, 어디서 멈추는지 시각적으로 보여줍니다. 주요 기능은 세션 녹화, 히트맵, 이벤트 및 퍼널 추적, 그리고 Copilot과의 대화형 요약입니다Microsoft Learn — Clarity 개요.
이 도구는 영구 무료 서비스이며, 유료 버전으로 업그레이드해야 하는 의무가 없습니다. 다만, 만 18세 미만을 주요 대상으로 하는 웹사이트나 앱에는 사용해서는 안 된다는 제약이 있으므로 주의하세요Microsoft Learn — Clarity 개요.
Copilot 기반 인사이트 기능은 방대한 양의 녹화 영상과 히트맵 데이터를 요약해 핵심 사용자 행동을 빠르게 파악할 수 있게 돕습니다. 복잡한 데이터를 일일이 훑어보지 않고도 핵심 이슈를 추출하는 데 유용합니다.
사전 준비 사항
Clarity 설치를 시작하기 전에 다음 세 가지가 갖춰져 있어야 합니다.
- 코드 삽입 권한: 사이트의
<head>영역에 추적 코드를 붙여넣을 수 있는 관리자 권한이 필요합니다. 워드프레스, 쇼피파이, 스퀘어스페이스, 윅스와 같은 플랫폼을 사용한다면 해당 플랫폼에서 지원되는 연동 방식을 선택할 수 있습니다Microsoft Learn — Clarity 수동 설치 방법. - Microsoft 계정: Microsoft Clarity 사이트에 로그인하기 위한 Microsoft 계정이 필요합니다.
- 개인정보 처리방침 고지: 방문자의 세션 데이터(클릭, 스크롤 등)를 수집한다는 사실을 사이트의 개인정보 처리방침에 명시해야 합니다. Clarity는 기본적으로 민감한 콘텐츠를 마스킹하지만, 데이터 수집 자체에 대한 동의 절차나 고지는 운영자의 책임입니다.
Clarity 설치 및 프로젝트 생성 단계
Microsoft Clarity 사이트에 접속해 로그인한 뒤, 새 프로젝트를 생성합니다. 프로젝트 이름과 추적할 사이트의 URL을 입력하세요. 이후 설정(Settings) 메뉴로 이동해 설치(Setup) 탭을 선택합니다Microsoft Learn — Clarity 수동 설치 방법.
설치 방법은 서드파티 플랫폼 연동, 수동 설치, NPM 설치 세 가지가 있습니다. 가장 일반적인 수동 설치 방법을 기준으로 설명합니다.
1. 추적 코드 복사
설치 화면에서 '수동 설치'를 선택하면 추적 코드가 표시됩니다. 이 코드를 전체적으로 복사하세요. 코드는 <script> 태그로 구성되어 있습니다.
2. 사이트에 코드 삽입
복사한 코드를 웹사이트 소스의 <head> 태그 내부에 붙여넣습니다. 대부분의 경우 <head> 영역에 넣는 것이 권장됩니다.
<head>
<!-- 기존 메타 태그 등 -->
<script type="text/javascript">
// Microsoft Clarity Tracking Code here
</script>
</head>
워드프레스를 사용한다면 'Header and Footer Scripts'와 같은 플러그인을 활용해 <head> 영역에 코드를 삽입할 수 있습니다. 쇼피파이나 스퀘어스페이스는 Clarity 설치 화면에서 플랫폼을 선택하면 상세 가이드가 제공되므로 해당 안내를 따르세요Microsoft Learn — Clarity 수동 설치 방법.
3. 설치 확인 방법
코드를 삽입했는지 확인하려면 사이트의 한 페이지를 새로고침한 뒤 개발자 도구(Chrome 기준: F12)를 엽니다. Network 탭에서 clarity.ms/collect로 향하는 POST 요청이 있는지 확인하세요. 이 요청이 보인다면 설치가 성공적으로 완료된 것입니다Microsoft Learn — Clarity 수동 설치 방법.
또는 Clarity 대시보드에서 실시간 접속자 수가 표시되거나, 짧은 시간 내에 첫 번째 세션 녹화가 쌓이는지 확인해도 됩니다. 코드를 넣으면 데이터 수집이 즉시 시작됩니다.
데이터 분석: 히트맵과 세션 녹화
설치가 완료되면 방문자가 사이트를 이용할 때마다 데이터가 쌓이기 시작합니다. Clarity는 기본적으로 봇 트래픽을 감지해 세션 수와 분석에서 제외하므로, 인간 사용자의 행동만 주로 보게 됩니다. 대시보드 상단에서 제외된 봇 세션 수를 확인할 수 있습니다Microsoft Learn — Clarity 수동 설치 방법.
히트맵(Heatmaps) 활용
히트맵은 방문자들이 페이지의 어디를 가장 많이 클릭했는지, 얼마나 스크롤했는지를 색상으로 표현한 지도입니다.
- 클릭 히트맵: 사용자가 빈번하게 클릭하는 요소와, 클릭하려다 실패한(없는 링크나 버튼) 요소를 구분해 보여줍니다. 이탈률이 높은 페이지에서 핵심 행동 유도 버튼이 잘 보이지 않는지 확인하세요.
- 스크롤 히트맵: 방문자가 페이지의 어느 지점까지 스크롤하는지 보여줍니다. 중요한 내용이 스크롤 하단에 위치해 아무도 보지 못하고 있는지 파악할 수 있습니다.
세션 녹화(Session Recordings) 분석
세션 녹화는 개별 방문자가 사이트를 사용하던 모습을 영상처럼 재생해 줍니다. 여기서 '라그'(Lag, 마우스를 흔드는 등 혼란스러운 행동)나 '릴릭트'(Rage click, 같은 버튼을 연속으로 빠르게 클릭) 같은 이상 행동을 필터링할 수 있습니다.
특정 페이지에서 이탈하는 세션만 필터링해 재생하면, 사용자들이 어떤 요소 때문에 당황했는지 또는 무엇을 찾다가 포기했는지 시각적으로 확인할 수 있습니다. 다만 Canvas 요소나 서드파티 iFrame 내부의 행동은 캡처되지 않는 한계가 있습니다Microsoft Learn — Clarity 수동 설치 방법.
Copilot 요약으로 인사이트 추출하기
수많은 세션 녹화를 일일이 보는 것은 비효율적입니다. 이때 Copilot 기능을 활용합니다. Clarity는 Copilot과의 대화 및 요약을 지원하여, 녹화와 히트맵 데이터를 텍스트로 빠르게 분석해 줍니다Microsoft Learn — Clarity 개요.
대시보드에서 Copilot 기능을 활성화한 뒤, "최근 이탈률이 높은 페이지의 주요 클릭 패턴은 무엇인가요?"와 같은 질문을 할 수 있습니다. 그러면 시스템이 해당 기간의 데이터를 분석해 핵심 행동을 요약해 줍니다. 이를 통해 막힌 지점을 빠르게 식별하고 A/B 테스트 방향성을 설정하는 데 활용할 수 있습니다.
자주 묻는 질문 및 주의사항
Q. 민감한 정보(이름, 카드 번호 등)가 녹화에 남나요?
A. Clarity는 기본적으로 사이트의 민감한 콘텐츠를 마스킹(검은 상자로 가림)하는 기능을 제공합니다. 하지만 100% 완벽하지 않을 수 있으므로, 개인정보 수집 고지를 반드시 진행하고 필요시 추가적인 마스킹 설정을 검토하세요.
Q. 쿠키 동의 팝업과 연동되나요?
A. Clarity는 기본적으로 쿠키를 사용합니다. 만약 GDPR 등 규정을 준수하기 위해 Clarity의 쿠키 설정을 끄면, 동의를 따로 전달해야 하고 세션이 여러 페이지로 연결되지 않을 수 있습니다. 이 경우 녹화가 단일 페이지 단위로 끊겨 분석에 한계가 생길 수 있으니 주의하세요Microsoft Learn — Clarity 수동 설치 방법.
Q. 구글 애널리틱스(GA4)와 함께 쓸 수 있나요?
A. 가능합니다. Clarity 설정에서 구글 애널리틱스와 구글 태그 관리자와의 연동을 설정할 수 있습니다. 양쪽 데이터를 교차 분석하면 정량적 데이터(GA4)와 정성적 데이터(Clarity)를 결합한 더 입체적인 인사이트를 얻을 수 있습니다Microsoft Learn — Clarity 수동 설치 방법.
참고 자료
'하루 한 툴' 카테고리의 다른 글
| Google Slides 발표 녹화: Vids 연동, 30분 제한 및 Chrome/Edge 필수 조건 (0) | 2026.08.27 |
|---|---|
| Sheets Canvas로 스프레드시트를 칸반·대시보드로 바꾸기: 계정 확인부터 생성까지 (0) | 2026.08.25 |
| Slack AI 요약과 Recap 사용법: 요금제별 기능 차이와 설정 가이드 (0) | 2026.08.23 |
| NotebookLM 업무 자료 질문법: 무료 한도와 답변 근거 검증 절차 (0) | 2026.08.22 |
| Gemini로 긴 PDF 보고서 요약하기: 업로드 한도 관리와 결과 검증 절차 (0) | 2026.08.19 |