Umami 히트맵 켜기, 세션 녹화 없이 클릭 위치만 보는 법

버튼을 어디에 두면 눌릴지, 사람들이 페이지를 어디까지 내려 읽는지는 숫자 표만으로는 잘 안 보여요. 히트맵은 그 질문에 한 장의 그림으로 답해 줘요. 이 글은 방문 분석 도구 Umami 의 히트맵을, 사용자의 화면을 녹화하지 않는 방식으로 켜는 순서를 정리해요.

혹시 이런 고민 있으신가요?

• 랜딩 페이지를 고치고 싶은데, 사람들이 어디를 보고 어디를 누르는지 감으로만 짐작하고 있어요.
• 히트맵 도구는 화면 전체를 녹화한다던데, 사용자가 올린 문서나 입력한 내용까지 남을까 봐 걱정돼요.
• 히트맵을 켰는데 한참 지나도 점이 거의 안 찍혀서, 설정이 잘못된 건지 방문이 없는 건지 모르겠어요.

이 글을 읽으면

• 히트맵이 답하는 질문과 퍼널, 클릭 이벤트가 답하는 질문을 나눌 수 있어요.
• 히트맵만 켜고 세션 녹화는 꺼 두는 설정을 직접 따라 할 수 있어요.
• 브라우저 개발자 도구로 정말 좌표만 나가는지 확인하고, 표본 비율을 언제 낮출지 숫자로 정할 수 있어요.

1단계. 히트맵이 답할 질문을 먼저 정하기

히트맵은 사람들이 화면의 어느 지점을 눌렀는지, 페이지를 얼마나 깊이 내려갔는지를 색으로 겹쳐 보여 주는 보고서예요. 많이 눌린 곳은 뜨겁게, 안 눌린 곳은 차갑게 그려요. 체온 사진처럼 한눈에 쏠림이 보여서 히트맵이라고 불러요.

켜기 전에 이 도구가 어떤 질문의 담당인지 정해 두면 숫자가 겹치지 않아요. 저희는 이렇게 나눴어요.

퍼널은 사용자가 목표까지 거치는 단계를 순서대로 놓고 단계마다 몇 명이 남는지 세는 방법이에요. 히트맵은 퍼널을 대신하지 않아요. 퍼널이 "어느 단계에서 나가나요"를 알려 주면, 히트맵은 그 단계의 화면에서 "그래서 왜 못 찾았을까"를 짐작하게 도와줘요.

한 가지 규칙만 지켜요. 한 사건을 두 곳에서 세지 않아요. 히트맵에 찍히는 클릭을 따로 이벤트로 또 보내면, 같은 일에 숫자가 두 개 생겨요. 버튼별 클릭 수가 꼭 필요하다면 히트맵이 아니라 커스텀 이벤트로 세요.

2단계. 히트맵만 켜고 세션 녹화는 끄기

Umami 에는 비슷해 보이는 기능이 두 개 있어요. 하나는 히트맵이고, 하나는 세션 녹화예요. 히트맵은 3.2.0 버전부터, 세션 녹화는 3.1.0 버전부터 들어 있어요. 자세한 설명은 각각 히트맵 문서와 녹화 문서에 있어요.

둘의 차이는 무엇을 남기느냐예요.

저희가 확인한 방법은 소스를 읽는 거였어요. 3.4.0 버전의 녹화기 코드는 시작할 때 세션 녹화 설정이 꺼져 있으면 화면 구조를 뜨는 라이브러리를 아예 시작하지 않고, 클릭 좌표와 스크롤 비율, 화면 크기만 내보내요. 그래서 "히트맵만 켜고 녹화는 끈다"는 설정이 실제로 좌표만 나가는 설정이에요.

여러분의 서비스가 사용자가 올린 문서, 입력한 이름, 결제 정보처럼 남기고 싶지 않은 내용을 화면에 그린다면, 이 선택이 중요해요. 마스킹 기능이 있더라도 화면에 그려진 내용이 한 번 기록되면 그 뒤의 일을 장담하기 어려워요. 처음부터 모으지 않는 쪽이 설명하기도 쉽고 지키기도 쉬워요.

3단계. 네 가지 조건을 차례로 맞추기

히트맵은 한 군데만 켜서는 안 돼요. 이 네 가지가 모두 맞아야 점이 찍혀요.

첫째, 녹화기 스크립트를 추적 스크립트 옆에 실어요. 녹화기는 기본 추적 스크립트가 만들어 두는 세션 정보를 기다려서 쓰기 때문에, 추적 스크립트가 먼저 떠야 해요. 둘 다 defer 로 싣고 문서 안에서 추적 스크립트를 앞에 두면 그 순서로 실행돼요.

<script defer src="https://analytics.example.com/script.js"        data-website-id="사이트-아이디"        data-domains="www.example.com"></script><script defer src="https://analytics.example.com/recorder.js"        data-website-id="사이트-아이디"        data-domains="www.example.com"></script>

data-domains 는 이 스크립트가 데이터를 보낼 주소를 제한하는 속성이에요. 개발 서버나 미리보기 배포에서 실수로 운영 사이트에 점이 찍히는 일을 막아 줘요. 녹화기 주소를 따로 환경 변수로 두지 않고 추적 스크립트 주소에서 script.js 를 recorder.js 로 바꿔 만들면, 설정이 하나로 유지돼요.

네 조건 중 하나만 빠져도 점이 찍히지 않아요

둘째, 분석 도구의 사이트 설정에서 히트맵을 켜요. 녹화기는 시작할 때 이 사이트의 설정을 서버에서 읽어 오고, 꺼져 있으면 아무것도 하지 않아요. 스크립트만 심고 설정을 안 켜면 아무 오류도 없이 조용히 비어 있어요. 이게 가장 흔한 실패예요.

셋째, 표본 비율을 올려요. 표본 비율은 방문자 중 몇 퍼센트를 기록할지 정하는 값이에요. 기본값은 0.15 라서 방문자 스무 명 중 세 명만 남아요. 방문이 거의 없는 초기에는 이 값 때문에 히트맵이 비어 보여요. 처음에는 1.0 으로 두고 전부 받아야 켜졌다는 사실부터 확인할 수 있어요.

넷째, 보고서가 여러분의 페이지를 프레임으로 열 수 있게 허용해요. 히트맵 보고서는 실제 페이지를 작은 창에 띄우고 그 위에 점을 겹쳐 그려요. 그러려면 여러분의 서비스가 분석 도구 주소의 프레임 삽입을 허용해야 해요. 허용하지 않으면 보고서에는 점만 있고 배경 페이지가 빈 칸으로 나와요.

Next.js 라면 설정의 headers 함수에서 응답 헤더를 줄 수 있어요.

async headers() {  return [    {      source: "/(.*)",      headers: [        {          key: "Content-Security-Policy",          value: "frame-ancestors https://analytics.example.com;",        },      ],    },  ]},

frame-ancestors 는 "내 페이지를 프레임으로 열 수 있는 주소"를 적는 지시어예요. 헤더를 아예 안 주면 브라우저가 제한 없음으로 받아들이니, 허용할 주소 하나를 명시하는 쪽이 예측하기 쉬워요. 반대로 보안 면적이 느는 일이기도 해서, 분석 도구 주소 하나만 적고 나머지는 열지 않아요.

4단계. 정말 좌표만 나가는지 눈으로 확인하기

설정을 켰다면 "들었던 대로" 동작하는지 직접 확인해요. 믿을 수 있는 방법은 브라우저의 네트워크 탭이에요.

1. 히트맵을 켠 페이지를 열고 개발자 도구의 네트워크 탭을 켜요.
2. 페이지 여러 곳을 누르고 끝까지 스크롤해요.
3. 수집 주소로 나가는 요청 몇 개를 열어, 본문의 type 값을 봐요.

type 이 heatmap 인 요청만 있어야 정상이에요. record 타입이 하나라도 있으면 세션 녹화가 실제로는 켜져 있다는 뜻이에요. 사이트 설정으로 돌아가 녹화를 다시 꺼요.

사이트 설정 화면에서도 두 값을 눈으로 확인해요. 세션 녹화가 꺼져 있고 표본 비율이 1.0 인지요. 저희는 이 두 확인을 체크리스트로 만들어 두고, 설정을 바꾸는 사람이 그 자리에서 직접 하게 해요. 설정 값은 도구 안에만 있어서 코드 리뷰에서는 보이지 않기 때문이에요.

히트맵이 켜진 걸 확인한 뒤에는 보고서에서 점이 페이지 위에 제대로 그려지는지도 봐요. 점은 있는데 배경이 빈 칸이라면 3단계의 프레임 허용을 다시 살펴봐요.

그리고 사용자에게 알려요. 클릭 좌표와 스크롤 깊이를 기록한다는 문장을 개인정보 처리 안내에 넣어요. 어떤 동의 절차가 필요한지는 사는 나라와 서비스 성격에 따라 달라서 이 글이 대신 판단할 수 없어요. 다만 무엇을 기록하는지 적는 일은 켜기 전에 끝내 두는 편이 좋아요.

5단계. 표본 비율을 낮출 기준과 읽을 화면 정하기

처음에는 1.0 으로 시작하지만, 방문이 늘면 저장량이 걱정돼요. 기준을 숫자로 정해 두지 않으면 아무도 낮추지 않아요. "트래픽이 늘면"은 기준이 아니에요.

저희가 정한 기준은 이래요. 히트맵을 켠 화면 가운데 하나라도 하루 방문이 500 을 넘는 날이 한 주 이어지면 0.3 으로 낮추고, 그 아래로는 건드리지 않아요. 이 숫자는 이렇게 나왔어요.

• 히트맵이 답하는 질문은 "클릭이 어디에 모이는가"이고, 그 그림은 세션 수백 개면 읽혀요.
• 0.3 으로 낮춰도 하루 500 방문이면 150 세션이 남고, 한 주면 한 화면에 1,000 세션이 넘어요.
• 한 세션이 남기는 히트맵 행이 수십 개 규모라고 보면, 하루 500 방문에 1.0 이면 하루 만 행 단위예요.

마지막 줄은 가설이에요. 세션당 행 수를 실제로 재 보지 않고 소스의 전송 방식으로 추정한 값이에요. 녹화기는 이벤트가 20개 쌓이거나 5초가 지날 때마다 비우고, 스크롤은 최대 깊이가 갱신될 때만 보내요. 실제 수는 화면 길이와 클릭 빈도에 달렸어요. 켜고 한 주가 지나면 분석 도구의 데이터베이스에서 행 수를 세어 기준을 고쳐요.

여기에는 한 가지 비대칭이 있어요. 표본 비율을 낮추면 그 뒤로 덜 쌓일 뿐 이미 쌓인 데이터는 그대로예요. 반대로 낮춰 둔 기간은 나중에 올려도 메워지지 않아요. 그 기간의 히트맵은 계속 표본이에요. 그래서 의심스러울 때는 높은 쪽에 두는 게 맞아요.

마지막으로 읽을 화면을 골라요. 이 도구는 주소(location.href)로 화면을 가르기 때문에, 한 주소 위에서 입력, 결과, 완료 같은 여러 단계가 바뀌는 흐름은 클릭이 한 장에 겹쳐 그려져 읽을 수 없어요. 저희는 히트맵이 쓸모 있는 화면을 랜딩, 소개, 템플릿 목록 같은 정적인 세 장으로 보고, 흐름 안쪽은 이벤트로 봐요. 흐름의 단계마다 주소를 바꾸면 해결되지만, 화면 구조를 건드리는 일이라 히트맵 하나 때문에 할 일은 아니에요.

자주 묻는 질문

Q1. 히트맵을 켜면 페이지가 느려지나요?

저희는 속도를 재 보지 않았어요. 녹화기는 별도 스크립트라서 defer 로 불러 첫 화면 그리기를 막지 않게 하는 것까지가 할 수 있는 조치예요. 중요한 화면이라면 켠 전후로 로딩 지표를 직접 비교해 보세요.

Q2. 쿠키 동의 배너가 필요한가요?

이 글이 법적 판단을 대신할 수는 없어요. 쿠키 사용 여부와 상관없이 무엇을 기록하는지 알리는 문장은 개인정보 처리 안내에 넣어요. 배너가 필요한지는 서비스가 있는 나라의 규정에 따라 확인하세요.

Q3. 보고서에 점은 있는데 배경 페이지가 비어 있어요.

보고서가 여러분의 페이지를 프레임으로 열지 못하는 거예요. 3단계의 프레임 허용 헤더가 실제 응답에 나가는지 확인하고, 허용 주소가 분석 도구의 주소와 정확히 같은지 보세요. 프록시가 다른 헤더를 덧붙이고 있다면 그쪽도 살펴봐요.

정리

• 히트맵은 어디를 누르고 어디까지 읽는지를, 퍼널과 이벤트는 단계와 횟수를 답해요. 한 사건은 한 곳에서만 세요.
• 남기고 싶지 않은 내용이 화면에 그려지는 서비스라면 히트맵만 켜고 세션 녹화는 꺼요.
• 녹화기 스크립트, 사이트 설정, 표본 비율, 프레임 허용 네 조건이 모두 맞아야 점이 찍혀요.
• 네트워크 탭에서 요청 본문의 type 이 heatmap 뿐인지 직접 확인해요.
• 표본 비율은 1.0 으로 시작하고, 낮출 기준을 숫자로 적어 두며, 읽을 화면은 주소가 갈리는 정적인 페이지로 골라요.

히트맵은 많이 모으는 도구가 아니라, 적게 모아도 질문 하나에 답하는 도구예요.