안녕하세요, 구독자님 😊
복잡한 IT를 한입 크기로 잘라 전해 드리는 뉴스레터, 이정환의 한입 IT입니다.
바이브코딩을 하시는 분들, 그리고 개발자분들이라면 한 번쯤 이런 궁금증을 가져보셨을 겁니다. 내가 만든 이 웹사이트를 실제 사용자들은 어떻게 쓰고 있을까? 어떤 버튼을 가장 많이 누를까? 스크롤은 어디까지 내려보다가 그냥 나가버릴까? 방문자 수나 페이지뷰 같은 숫자만으로는 도무지 알 수 없는 영역이죠.
그런데 마이크로소프트가 만든 클라리티(Clarity) 라는 도구를 쓰면, 마치 내 웹사이트에 CCTV를 설치해 둔 것처럼 사용자들의 행동을 아주 쉽게 들여다볼 수 있습니다. 심지어 완전 무료이고, 설치에는 1분도 걸리지 않습니다. 오늘은 이 클라리티가 정확히 무엇을 보여주는 도구인지, 그리고 어떤 점을 주의해서 써야 하는지 제대로 정리해 드리겠습니다.
사용자의 화면을 실시간으로 지켜볼 수 있습니다
클라리티의 가장 대표적인 기능은 세션 레코딩입니다. 이름 그대로, 사용자가 내 사이트에서 무엇을 했는지를 화면 녹화하듯 그대로 기록해 주는 기능인데요.
여기서 놀라운 점은 이게 실시간이라는 겁니다. 지금 이 순간 내 사이트에 들어와 있는 사용자의 마우스가 어디로 움직이는지, 어떤 메뉴 위에서 잠시 멈칫하는지, 결국 무엇을 클릭했는지를 실시간으로 지켜볼 수 있습니다. 정말 CCTV를 보고 있는 기분이 들 정도죠.
물론 하루 종일 화면만 들여다보고 있을 수는 없습니다. 그래서 모든 세션은 자동으로 녹화되어 저장됩니다. 나중에 시간이 날 때 몰아서 돌려보는 것도 얼마든지 가능합니다.
여기에 더해, 클라리티는 AI 인사이트라는 기능도 제공합니다. 녹화된 세션 하나하나를 처음부터 끝까지 볼 여유가 없을 때, AI가 해당 사용자의 행동을 요약해 간단하게 정리해 주는 기능입니다. "이 사용자는 상품 페이지에서 한참 머물다가 결제 단계에서 이탈했다" 같은 흐름을 문장으로 먼저 파악한 뒤, 자세히 볼 세션만 골라서 재생하면 훨씬 효율적으로 분석할 수 있습니다.
클릭, 스크롤, 주목도를 색으로 보여주는 열 지도
세션 레코딩이 개별 사용자 한 명의 이야기라면, 여러 사용자의 데이터를 한데 모아 보여주는 기능도 있습니다. 바로 열 지도(히트맵) 입니다. 클라리티의 열 지도는 크게 세 가지를 보여줍니다.
첫 번째는 클릭 지도입니다. 사용자들이 내 페이지의 어떤 지점을 가장 많이 클릭했는지를 시각적으로 보여줍니다. 많이 클릭된 부분일수록 붉은색으로 진하게 표시되기 때문에, 페이지를 한 번 훑어보는 것만으로도 사용자들이 어떤 항목에 관심을 갖고 있는지 아주 직관적으로 파악할 수 있습니다. 내가 제일 공들여 만든 버튼은 아무도 안 누르고, 엉뚱한 텍스트를 다들 클릭하고 있더라는 사실을 여기서 발견하게 되는 경우도 많습니다.
두 번째는 스크롤 지도입니다. 사용자들이 보통 어디까지 스크롤을 내려보고 페이지를 떠나는지를 색깔로 보여주는데요. 랜딩 페이지를 만들었는데 정작 핵심 메시지가 대부분의 사용자가 도달하지도 못하는 위치에 있다면, 그건 콘텐츠 문제가 아니라 배치 문제겠죠. 스크롤 지도는 그 경계선을 눈으로 확인시켜 줍니다.
세 번째는 주의 지도입니다. 사용자가 가장 오래 머물러 살펴본 영역이 어디인지를 보여주는 기능입니다. 페이지 전체가 파란색인데 특정 영역 하나만 빨갛게 표시되어 있다면, 바로 그곳이 사용자들의 시선을 붙잡은 지점이라는 뜻입니다.
클릭은 '무엇을 눌렀는가', 스크롤은 '어디까지 봤는가', 주의는 '무엇을 오래 봤는가'를 알려줍니다. 이 세 가지를 겹쳐서 해석하면, 숫자로만 보던 이탈률이 왜 그렇게 나왔는지 비로소 설명이 되기 시작합니다.
사용자가 늘어도 사이트가 느려지지 않을까요?
여기까지 들으시면 한 가지 걱정이 생기실 수 있습니다. 이렇게 많은 데이터를 계속 기록하면, 사용자가 늘어났을 때 웹사이트가 느려지는 게 아닐까 하는 걱정이죠.
결론부터 말씀드리면 그런 걱정은 하지 않으셔도 괜찮습니다. 클라리티는 수집한 모든 데이터를 마이크로소프트의 데이터베이스에 저장하기 때문입니다. 내 서버나 내 데이터베이스에 부담을 주는 구조가 아닙니다.
그래서 만약 데이터 처리 쪽에 문제가 생기더라도, 그건 마이크로소프트 쪽의 문제이지 내 사이트가 느려지거나 멈추는 상황으로 이어지지는 않습니다. 개인 프로젝트든, 트래픽이 제법 나오는 서비스든 이 부분은 안심하고 도입하셔도 좋습니다.
가격은 완전 무료, 다만 약관은 한 번 읽어보세요
그런데 역시 가장 중요한 건 가격이죠? 놀랍게도 클라리티는 완전 무료입니다.
기간 제한이 있는 체험판도 아니고, 핵심 기능만 따로 떼어내 유료로 파는 구조도 아닙니다. 지금까지 소개해 드린 세션 레코딩, AI 인사이트, 열 지도 전부를 그냥 통으로 무료로 쓸 수 있습니다.
다만 무료인 데는 이유가 있습니다. 이용약관을 보시면, 클라리티를 통해 수집된 정보를 마이크로소프트가 이용할 수 있다는 조항이 들어 있습니다. 그래서 금융이나 의료처럼 사용자의 개인정보가 극도로 민감하게 다뤄져야 하는 서비스에서는 도입이 조금 어려울 수 있습니다.
그렇다고 방법이 아예 없는 건 아닙니다. 클라리티는 특정 요소가 수집되지 않도록 마스킹을 설정하는 등 커스터마이징 기능을 제공합니다. 이름, 이메일, 카드 번호처럼 노출되면 안 되는 영역을 지정해 가려둘 수 있다는 뜻이죠.
이런 설정만 잘 잡아두면 대부분의 프로젝트에서는 큰 문제 없이 적용하실 수 있을 겁니다.
정리하자면, 무료라는 건 결국 데이터를 일정 부분 공유하는 대가라는 점을 인지하고 쓰시면 됩니다. 내 서비스가 다루는 정보의 민감도를 먼저 따져보고, 필요한 부분은 마스킹으로 막아두는 것. 이 두 단계만 거치면 충분합니다.
설치는 정말 1분이면 끝납니다
마지막으로 설치 방법을 간단히만 짚어보겠습니다.
먼저 클라리티 사이트에 접속해 원하는 방식으로 회원가입과 로그인을 진행합니다. 로그인하면 프로젝트를 만들라는 안내가 나오는데요. 여기에 내 웹사이트 주소를 넣어주면 됩니다. Vercel에 배포하셨다면 그 배포 주소를 넣으시면 됩니다.
프로젝트를 만들면 설치 방법을 고르는 화면이 나옵니다. 여기서는 수동 설정을 선택하시는 게 가장 쉽고 빠릅니다. 그러면 사이트에 삽입할 추적 코드가 나오는데, 복사 버튼을 눌러 그대로 복사합니다.
그다음이 요즘 방식이죠. 복사한 코드를 클로드나 코덱스 같은 코딩 에이전트에게 그대로 붙여넣고, 이 코드를 프로젝트에 적용해 달라고 요청하시면 됩니다. 잠시 기다리면 알아서 적절한 위치에 삽입해 줍니다. 이후 변경사항을 커밋하고 푸시하면 Vercel이 해당 버전으로 배포를 시작합니다.
배포가 완료된 뒤 사이트에 직접 한 번 들어가 보세요. 클라리티 대시보드에 내 방문 기록이 잡히기 시작하고, 실시간 세션도 바로 확인하실 수 있습니다. 다만 열 지도를 비롯한 대부분의 기능은 데이터가 어느 정도 쌓여야 활성화되기 때문에, 두 시간 정도는 여유를 두고 기다려 주시는 게 좋습니다.
더 자세한 설치 과정은 스크린샷과 함께 핸드북에 정리해 두었습니다. 보고 따라 하시면 정말 1분 만에 끝나니, 아래 영상의 설명란에 있는 링크를 확인해 주세요.
마무리
정리해 보겠습니다. 마이크로소프트 클라리티는 세션 레코딩으로 사용자의 행동을 CCTV처럼 보여주고, AI 인사이트로 그 행동을 요약해 주며, 열 지도로 클릭과 스크롤과 주목도를 한눈에 확인시켜 주는 도구입니다. 내 서버에 부담을 주지 않고, 가격은 완전 무료이며, 민감한 정보는 마스킹으로 가릴 수 있습니다.
내가 만든 서비스를 사용자들이 정말 내 의도대로 쓰고 있는지는, 결국 직접 봐야 알 수 있습니다. 오늘 클라리티를 붙여두시고, 며칠 뒤 쌓인 데이터를 한 번 열어보세요. 아마 예상과 전혀 달랐던 지점이 하나쯤은 반드시 보이실 겁니다. 그리고 그 지점이 바로, 서비스를 다음 단계로 끌어올릴 첫 번째 단서가 될 겁니다.
영상으로 더 자세히 보기
글로 설명한 화면들이 실제로 어떻게 움직이는지는 영상으로 보시는 편이 훨씬 이해가 빠릅니다. 오늘 다룬 내용을 영상으로도 정리해 두었으니 아래 링크에서 확인해 주세요.
의견을 남겨주세요