microsoft clarity 사용해보기

heegon·2026년 4월 27일

목록 보기
18/18

정말 초초초초 초간단한 아이디어 하나만으로 시작해서 배포까지 했던 정말 간단한 웹사이트가 하나 있다.
DueDateTimer.
마감시간을 기준으로 남은 시간을 돌려준다는. 알람과 타이머를 합친 간단한 아이디어 하나로 시작했다.

그렇게 방치하고 버려둔지 약 2년.
벨로그를 보다가 microsoft clarity 라는 기술을 접하게 되었다. 사용자의 커서 이동, 스크롤, 접속 횟수 등 내가 배포한 웹 서비스에 대해 데이터를 정리해서 보여주는 서비스였다. 가장 좋은 것은 '영구 완전 무료'.

너무 신기해서 바로 DueDateTimer 프로젝트를 가져와서 적용해 보았다.

사용법은 정말 간단하다.

먼저 microsoft의 Clarity 사이트에 접속한다.

+새 프로젝트 버튼을 누르고

성명에는 Clarity에서 사용할 이름을,
웹 사이트 URL에 배포한 사이트 URL 주소를,
웹 사이트 업계에는 서비스 분야를 선택해주면 끝이다.

아마 웹 사이트 뿐만 아니라 앱 어플리케이션에도 사용 가능한 것 같다.

그리고 시간이 지나서 데이터가 쌓이면

위와 같은 대시보드 창이 출력된다.

나는 첫 대시보드 화면을 접하기까지 약 2시간이 소요된 것 같다.

빨간색 동그라미로 표시해놓은 동영상 카메라 같은 부분을 클릭하면

다음과 같은 화면이 보인다.
맨 왼쪽 재생 버튼을 누르면 사용자의 웹사이트 마우스 커서 이동을 영상으로 만들어서 보여준다.

사용하고 분석해본 결과,
화면이 회색이 되면 마우스가 해당 웹사이트를 벗어났다는 것 같고
클릭을 많이할수록 마우스 부분이 빨간색으로 표현된다.
단순 마우스 이동 경로는 주황색으로 표현된다.

오른쪽에는 웹사이트 사용시간, 마우스 클릭 횟수, 페이지 (화면 이동 횟수) 가 간단하게 보여진다.

위 이미지와 같이 마우스 이동 경로가 주황색 선으로 표현된다. 그리고 왼쪽에는 세션 인사이트라고 하여 유저의 서비스 이용 내용에 대하여 정리를 해주는 부분이 있다.

새로운 기술을 접하면 일단 무조건 사용을 해보는게 중요해진 시대가 된 것 같다.

profile
❤️

0개의 댓글