히트맵
한 줄 정의
방문자들이 페이지의 어디를 많이 클릭하고, 어디까지 스크롤했는지를 모아서 색깔로 겹쳐 보여 주는 분석 화면입니다. 따뜻한 색(빨강·주황)일수록 반응이 많은 곳입니다.
어떻게 작동하나
- 원리: 사이트에 추적 코드를 심어 두면 클릭·스크롤 같은 행동을 모아 페이지 화면 위에 색으로 그려 줍니다. 마이크로소프트 클래리티(Clarity) 문서는 PC·태블릿·모바일의 클릭과 스크롤을 추적해 자동으로 히트맵을 만든다고 설명합니다.
- 색의 뜻: 클래리티 클릭맵은 인기가 많은 구역일수록 색이 따뜻해진다고 안내하고, 핫자(Hotjar)를 운영하는 콘텐츠스퀘어(Contentsquare) 가이드도 빨강·주황을 활동이 많은 영역으로 설명합니다.
| 종류 | 보는 것 |
|---|---|
| 클릭맵 | 어디를 클릭(모바일은 탭)했는지. 링크가 아닌 곳 클릭도 잡힘 |
| 스크롤맵 | 페이지의 어느 지점까지 몇 %가 내려왔는지 |
| 무브맵 | 데스크톱에서 마우스가 움직인 곳 (콘텐츠스퀘어 가이드) |
| 레이지 클릭 | 짧은 시간에 같은 좁은 영역을 연달아 클릭한 곳 (답답해서 막 누른 흔적) |
| 데드 클릭 | 눌렀는데 아무 반응이 없던 곳 |
- 기기별로 따로: 클래리티는 PC·태블릿·모바일을 골라 볼 수 있습니다. 같은 페이지라도 화면 배치가 달라 기기별로 나눠 봐야 합니다.
예시(가상 숫자): 상세페이지 방문자 1,000명 중 가격표 위치까지 스크롤한 사람이 400명이면 스크롤맵에는 그 지점이 **40%**로 표시됩니다. 60%는 가격을 보기 전에 나간 셈입니다. (검산: 400 ÷ 1,000 = 0.4)
쉽게 풀어 말할 때
"매장에 CCTV 달아서 손님이 어느 진열대 앞에 오래 서 있고 어디는 그냥 지나치는지 보는 거랑 비슷해요. 웹페이지 위에 손님들이 누른 자리를 빨갛게 칠해 주니까, '아무도 안 누르는 버튼'이나 '다들 여기서 나가는 구간'이 한눈에 보여요."
업계 말로 말할 때
- "스크롤맵 보니까 모바일은 절반 넘게 리뷰 섹션 전에 이탈해요. 핵심 USP를 첫 화면으로 올리죠."
- "상품 이미지에 레이지 클릭이 몰려 있어요. 확대될 줄 알고 누르는 것 같으니 확대 기능 붙여 보겠습니다."
- "CTA 버튼보다 그 옆 배너 문구에 클릭이 더 많네요. 링크 없는 데드 클릭이라 버튼 위치를 다시 잡아야겠어요."
실무 팁
- 기기별로 나눠서 봅니다. PC와 모바일은 화면 배치가 달라 합쳐 보면 해석이 틀어집니다. 우리 사이트 유입에서 비중이 큰 기기부터 확인합니다.
- 레이지·데드 클릭은 개선 후보 목록입니다. 반응이 없는데 계속 눌리는 곳은 사용자가 '눌릴 것'이라고 기대하는 자리입니다. 링크를 달거나 디자인을 바꾸고, 바꾸기 전후를 비교합니다(A/B 테스트, CTA 항목).
- 히트맵은 '어디서'를 보여 주지 '왜'는 아닙니다. 이탈 구간을 찾았으면 세션 녹화나 고객 의견(VOC)으로 이유를 확인하고, 전환율 같은 숫자로 개선 효과를 판단합니다(랜딩 페이지, 상세페이지 항목).
헷갈리기 쉬운 말
확인 퀴즈
마이크로소프트 클래리티 문서 기준으로, 사용자가 짧은 시간에 같은 좁은 영역을 연달아 클릭한 곳을 보여 주는 것은?
정답과 풀이 보기
정답: 3번. 레이지 클릭은 짧은 시간 안에 같은 작은 영역을 빠르게 반복 클릭한 곳입니다. 2번 데드 클릭은 눌렀는데 반응이 없던 곳이고, 1번 스크롤맵은 어디까지 내려왔는지를 봅니다.