brunch

You can make anything
by writing

C.S.Lewis

by kayros Nov 14. 2024

히트맵 분석의 끝판왕, MS Clarity

구글 애널리틱스와 함께 사용하면 더 많은 인사이트를 얻을 수 있어요 :)

히트맵 분석(Heatmap Analysis)방문자의 데이터를 화면에 시각적으로 표현해서 사용자가 웹사이트나  앱에서 어떻게 행동하는지 분석하는 방법입니다. 주로 웹페이지에서 특정 요소에 대한 사용자의 클릭, 스크롤, 마우스 이동 등을 색깔로 표시하여 방문자들이 어떤 액션을 했는지 쉽게 이해할 수 있습니다. 히트맵 분석의 주요 목적은 사용자 행동 패턴을 이해하고, 이를 바탕으로 UX(사용자 경험)를 개선하는 것으로 많은 기업에서 히트맵 분석을 통해 사용자 행동을 분석하고 개선하고 있습니다.


예를 들어, 히트맵 분석을 통해 사용자가 웹사이트에서 어느 부분에 가장 관심이 있는지, 클릭 빈도가 높은 영역은 어디인지, 스크롤이 어느 지점까지 이뤄지는지 등을 파악할 수 있습니다. 저는 히트맵 분석 솔루션으로 마이크로소프트(MS)에서 서비스하는 'Clarity(클라리티)'를 애용합니다. 히트맵 분석 뿐만 아니라 '세션 레코딩' 기능도 제공하기 때문에 특정 세그먼트 유저를 정량적으로 분석하는데 안성맞춤입니다. 이번 글에서는 제가 왜 수많은 히트맵 솔루션 중에서 'Clarity'를 선택했는지, 구글 애널리틱스와 함께 사용하면 어떤 인사이트를 얻을 수 있는지에 대해 설명드리겠습니다.




원래 히트맵 분석의 최강자는 'Hotjar'라는 서비스였습니다. 아직도 많은 기업에서 'Hotjar'를 통해 히트맵 분석을 하는데 최근 들어 'Clarity' 이용자들이 증가하면서 'Hotjar'에서 많이 갈아타는 느낌입니다. 아래 자료를 보시면 전 세계에서 트래픽이 많이 발생하는 상위 100만개 웹사이트에서 양쪽 솔루션을 설치한 숫자를 그래프로 보여줍니다. 빨간색 곡선은 내리막길을 걷고 있지만, 파란색 곡선은 급격하게 올라가고 있습니다. 개인적으로 조간만 역전이 되지 않을까 싶은데 'Clarity'를 한번 써보면 왜 이게 히트맵 분석의 끝판왕인지 수긍하실 겁니다.


일단, 웹사이트 트래픽에 관계없이 일단 비용이 무료이고 전수 데이터를 보여줍니다. 데이터 샘플링이 없다는 얘기죠. 반면, 'Hotjar'는 유료에요. 무료인데 유료 솔루션 만큼의 기능을 제공하니 사람들이 'Hotjar'를 이용할 필요가 없는거죠. 심지어 앱 데이터도 히트맵 형태로 분석할 수 있습니다. 아마 MS에서는 무료로 서비스를 제공하는 대신 수집한 데이터를 광고나 다른 목적으로 사용할 겁니다. 세상에 공짜는 없으니까요. 결정적으로 설치가 쉽고 굉장히 직관적인 UI로 구성되어 있는 게 장점이라고 생각해요.



설치 방법은 간단합니다. 모든 솔루션이 그렇듯이 'Clarity' 스크립트를 웹사이트 head 섹션에 삽입해주시면 됩니다. 설치 스크립트는 프로젝트 단위로 조회할 수 있는데 개발팀에 웹사이트에 스크립트 추가를 요청하시거나 구글 태그 관리자를 사용하실 경우 HTML 태그 유형을 사용해서 스크립트를 설치하시면 됩니다. 워드프레스, Shopify를 사용하는 경우 설정에서 연동 기능을 제공해서 클릭 몇 번으로 설치가 가능합니다. 앱도 사용 언어 및 환경에 따른 설치 가이드 문서를 제공하고 있어요. 스크립트를 설치하고 몇 분이 지나면 실시간으로 데이터가 수집되는 게 확인되며, 다음 날부터 전날 데이터를 분석할 수 있습니다.



처음 접속하면 아래 화면과 같은 대시보드를 보여줍니다. 일반적인 분석 솔루션과 유사하고, 상단에 세션을 비롯한 주요 지표를 보여줍니다. 방문자가 어디에서 유입되었고 가장 많이 방문하는 페이지는 어디인지, 기기 카테고리 및 브라우저 등의 기준으로도 데이터를 체크할 수 있습니다. 최근에는 퍼널 분석도 추가되어서 기본적인 사용자 행동 분석은 가능합니다. 이런 종류의 데이터는 사실 구글 애널리틱스에서도 체크 가능한데요. 'Clarity'에서만 제공하는 데이터가 있습니다.



이를테면, '배달 못한 클릭(dead click)'이나 '빠른 뒤로 가기' 액션을 예로 들 수 있는데요. '배달 못한 클릭'을 설명드리면 가끔 특정 영역에 링크가 있는 줄 알고 클릭했는데 링크가 없어서 당황하신 경험이 종종 있을 거에요. 이런 클릭이 전체 클릭에서 얼마나 되는지, 어떤 영역에서 'dead click'이 발생했는지를 별도의 설정 없이 자동 트래킹하므로 바로 확인할 수 있어요. 의외로 이런 영역이 상당히 많은데 구글 애널리틱스에서는 이를 확인할 방법이 없습니다. 'Clarity'가 왜 보조 솔루션으로 딱인지 아시겠죠?


구글 애널리틱스에서는 히트맵 분석 기능을 제공하지 않기 때문에 'Clarity'가 출시되기 전에는 해당 기능을 제공하는 솔루션을 병행해서 사용했는데요. 앞에서 언급한 'Hotjar'와 '뷰저블' 같은 솔루션을 써봤지만 'Clarity' 업데이트가 워낙 빠르게 되고 있어서 요즘에는 'Clarity'만 사용해서 사용자 행동을 분석하고 있습니다. 아래 화면을 보시면 기기별 히트맵 데이터를 'Desktop'과 'Mobile' 기준으로 확인할 수 있는데 빨간 영역이 클릭이 많이 발생한 영역입니다.



클릭 순위도 바로 확인할 수 있고 영역별 클릭 비중도 볼 수 있습니다. GA에서 이런 데이터를 확인하려면 각 영역별 태깅을 하는 등의 작업이 필요하고 이를 위해서는 구글 태그 매니저도 알아야 하고, 개발팀과 수많은 커뮤니케이션이 필요해요. 하지만 'Clarity'는 기본 스크립트만 삽입하면 데이터 수집은 알아서 해주는 방식입니다. 물론 수집된 데이터를 분석하는건 사람이 해야겠지만요. 쉽게 말해서 데이터 수집하는 과정이 굉장히 신경쓸게 많은데 거의 다 알아서 해준다고 생각하셔도 되요.



저는 특정 유저를 세그먼트로 만들어서 해당 유저가 실제로 어떤 액션을 했는지 확인합니다. 쉽게 말해, '체크아웃' 단계를 진입했는데 구매를 하지 않은 유저의 실제 마우스 액션을 영상으로 볼 수 있습니다. 이런 데이터를 얻으려면 유저를 섭외해서 특정 과제를 주고 화면을 녹화해서 이를 다시 정리하는 등의 작업이 필요했는데요. '세션 레코딩'이라고 하는 기능을 활용하면 사용성을 비롯해서 고객이 어떤 지점에서 어려움을 겪고 있는지 등의 데이터를 영상으로 확인할 수 있습니다. 필터 기능이 잘 되어 있어서 웬만한 유저는 다 추출해서 조회할 수 있습니다. UX 리서처나 디자이너 직군에 계신 분들이라면 정말 반할만한 기능이지요 :)



수집된 데이터를 분석할 때 AI의 도움을 받는 기능도 있습니다. 저는 데이터를 본격적으로 탐색하기 전에 AI가 요약한 내용을 먼저 체크하는데요. 박수를 칠 정도의 요약은 아니지만, 제가 발견하지 못했을 내용을 미리 체크해 볼 수 있습니다. 데이터가 많아지면 AI는 더 많은 인사이트를 줄 수 있을까요. 아직까진 잘 모르겠습니다. 모든 상황을 종합해서 분석하고 액션 플랜까지 도출하는 건 아직까지 인간의 영역이라고 생각해요. AI가 인간보다 더 분석을 잘하는 날이 오면 은퇴하기보다는 최대한 그들을 활용해서 더 많은 인사이트를 뽑아내야 하지 않을까 싶네요.





히트맵 분석을 아직 해본 적이 없으시거나 관심이 있으신 분들은 'Clarity' 강력히 추천드립니다. 메인으로는 구글 애널리틱스나 엠플리튜드 같은 솔루션을 사용하시고, 메인을 보조하는 용도로 활용해보시면 기존에는 볼 수 없었던 사용자 행동 데이터를 확보할 수 있으실 거에요. 단, 사용 비용이 무료다보니 고객 지원이나 기능에 문제가 있을 때 답변을 받을 수 없어요. 예상컨데, 데이터에 아직 익숙하지 않은 실무자 분들은  'Clarity'의 매력에 퐁당 빠지게 되실 겁니다. 사용하시면서 궁금한 점이 있으시면 댓글로 남겨주세요. 제가 아는 선에서 답변드릴께요 :)

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari