Heatmap, 금융 데이터에서 시작해 웹사이트로

한 줄로

빨강과 파랑으로 데이터의 강도를 표현하는 시각화입니다. 처음에는 월스트리트 트레이더의 도구였습니다.

어디서 왔나

데이터를 색의 강도로 표현하는 발상 자체는 19세기까지 거슬러 올라갑니다. 1873년 통계학자 토우산트 루세누이가 출간한 경제 통계 책에 이미 색의 농담으로 수치를 표현하는 표가 있었습니다.

"Heat map"이라는 단어 자체는 1991년 소프트웨어 디자이너 코맥 키니(Cormac Kinney)가 만들었습니다. 그는 월스트리트의 트레이더들을 위해 주식시장 데이터를 시각화하는 도구를 개발 중이었습니다. 빨간색은 떨어지는 주식, 초록색은 오르는 주식, 색의 강도는 변동폭, 사각형 크기는 시가총액이었습니다. 트레이더는 한 화면에서 시장 전체의 분위기를 한눈에 파악할 수 있었습니다.

이 도구가 큰 성공을 거두면서 "heat map"이 표준 용어가 됐습니다.

웹 분석으로 옮겨온 건 2005년입니다. 미국의 Crazy Egg라는 스타트업이 웹사이트의 클릭 위치를 빨강~파랑 그라데이션으로 표시하는 도구를 출시했습니다. 사용자가 어디를 많이 클릭하는지, 어디를 무시하는지가 한눈에 보였습니다.

이후 Hotjar, Mouseflow, FullStory 같은 도구가 같은 컨셉을 모바일과 스크롤, 세션 재생까지 확장했습니다.

지금 우리가 쓰는 방식

웹/모바일 분석에서 heatmap의 3가지 종류입니다.

1. Click map: 클릭 위치. 가장 많이 클릭된 영역이 빨강.

2. Scroll map: 사용자가 스크롤로 도달한 깊이. 위는 100%, 아래로 갈수록 색이 옅어집니다.

3. Move map: 마우스 움직임. 호버 패턴 분석.

한국 사례: 토스, 카카오뱅크, 네이버 페이 같은 핀테크 앱들이 heatmap을 적극 활용합니다. 한 화면에서 사용자가 의도와 다른 곳을 누르는 비율이 30%를 넘으면 즉시 디자인을 수정합니다.

한계: heatmap은 "어디를 클릭했는가"만 보여주지 "왜 클릭했는가"는 못 보여줍니다. 한 영역이 빨간색이면 그게 "잘 디자인됐기 때문"인지 "사용자가 헷갈렸기 때문"인지 모릅니다. 사용자 인터뷰와 heatmap을 같이 봐야 진단이 정확해집니다.

바이브 메이커가 챙길 한 가지

1인 랩에서 heatmap을 도입하는 가장 저렴한 길은 Microsoft Clarity입니다. 무료이고 한국어를 지원하며 세션 재생까지 함께 제공합니다. 단 한 번이라도 자기 앱의 heatmap을 보면 사용자가 본인 의도와 정확히 다른 곳을 클릭하는 경험을 합니다. 그 한 번이 디자인 의사결정을 바꿉니다.

관련

Clickmap · Scrollmap · Session replay