블로그 방문자가 어느 글에서 이탈하는지, 광고 배너를 클릭하려다 마는지 궁금해서 구글 애널리틱스만 붙여놓고 방치하신 분들 많으실 겁니다. 숫자는 나오는데 정작 “왜”는 안 보이죠. 마이크로소프트 클래리티(Clarity)는 이 빈틈을 채워주는 무료 도구인데, 티스토리는 워드프레스처럼 플러그인 버튼 하나로 끝나지 않아서 연동 과정에서 막히는 분들이 꽤 많습니다.
핵심 요약
1. 티스토리는 플러그인 지원이 없어서, 클래리티 설치 스크립트를 스킨 편집 > HTML 편집에서 head 태그 안에 직접 삽입해야 합니다.
2. 스크립트는 <head> 바로 아래, 또는 </head> 태그 바로 위 어느 위치에 넣어도 정상 작동하지만, 다른 스크립트와 충돌 방지를 위해 위치를 통일해두는 게 좋습니다.
3. 설치 후 데이터 수집까지 보통 30분, 최대 2시간 정도 소요됩니다.
클래리티, 굳이 왜 따로 붙여야 하나
구글 애널리틱스는 “몇 명이 왔고, 어디서 왔고, 얼마나 머물렀는지”는 잘 보여주는데, “그 사람이 페이지 안에서 실제로 뭘 했는지”는 안 보여줍니다. 클래리티는 이 틈을 세션 리플레이와 히트맵으로 메워주는 도구예요. 방문자의 마우스 움직임, 클릭 위치, 스크롤 깊이를 영상처럼 재생해서 볼 수 있습니다.
티스토리 블로거 입장에서 특히 유용한 게, 광고 배치나 본문 목차 링크가 실제로 클릭되고 있는지 눈으로 확인할 수 있다는 점입니다. 저도 처음엔 “본문 상단 요약 박스가 다들 잘 보겠지”라고 막연히 생각했는데, 클래리티 히트맵을 붙이고 나서야 실제로는 절반 가까운 방문자가 그 부분을 그냥 스크롤로 지나친다는 걸 확인했습니다. 데이터 없이 감으로 판단하던 부분이 확 걷힌 거죠.
1단계: 클래리티 프로젝트 생성
- clarity.microsoft.com에 접속해 마이크로소프트 계정으로 로그인합니다.
- 대시보드에서 New Project(새 프로젝트)를 클릭합니다.
- 사이트 이름, 티스토리 블로그 도메인 주소, 카테고리를 입력하고 프로젝트를 생성합니다.
- 프로젝트가 생성되면
<script>태그로 감싸진 설치 코드가 표시됩니다. 이 코드 전체를 복사해둡니다.
여기서 한 가지, 도메인 주소는 https://를 포함한 정확한 블로그 주소로 입력하시는 게 좋습니다. 나중에 설치 확인(Verify Installation) 단계에서 도메인이 다르면 인식이 안 되는 경우가 있는데, 이게 은근히 초보자들이 자주 걸리는 지점입니다.
2단계: 티스토리 스킨 편집에 코드 삽입
워드프레스는 플러그인 검색창에 Clarity만 쳐도 몇 번의 클릭으로 연동이 끝나지만, 티스토리는 이런 연동 기능 자체를 제공하지 않습니다. 대신 스킨 HTML을 직접 편집하는 방식으로 처리해야 합니다.
- 티스토리 관리자 페이지 접속 → 꾸미기 > 스킨 편집으로 이동합니다.
- 우측 상단의 HTML 편집 버튼을 클릭합니다.
- HTML 소스 코드 상단에서
<head>태그를 찾습니다. - 복사해둔 클래리티 설치 스크립트를
<head>바로 아래 줄에 붙여넣습니다. - 우측 상단 적용 버튼을 눌러 저장합니다.
인터넷에 도는 가이드 중에는 </head> 바로 위에 넣으라고 안내하는 곳도 있고, <head> 바로 아래에 넣으라는 곳도 있는데, 실제로 둘 다 정상 작동합니다. 클래리티 스크립트 자체가 위치에 크게 민감하지 않거든요. 다만 실무적으로는 구글 애널리틱스나 애드센스 코드처럼 이미 head 안에 다른 추적 스크립트가 들어가 있는 경우가 많은데, 이럴 때는 기존 스크립트들 바로 아래 줄에 이어 붙이고 주석(<!-- Clarity 설치 코드 -->)을 남겨두는 습관을 들이시길 권합니다. 나중에 스킨을 교체하거나 코드를 정리할 때 어떤 코드가 무슨 역할인지 몰라서 헤매는 상황을 방지할 수 있습니다.
3단계: 설치 확인 및 데이터 수집 대기
코드를 저장했다고 바로 데이터가 뜨는 건 아닙니다. 클래리티 대시보드로 돌아가면 설치 상태가 “확인 중” 또는 “설치 대기”로 표시되는데, 실제로 방문자가 유입되면서 스크립트가 실행돼야 인식됩니다. 보통 30분 안에 인식되지만, 트래픽이 적은 블로그는 최대 2시간까지 걸릴 수 있습니다.
빨리 확인하고 싶다면 시크릿 모드로 본인 블로그에 직접 접속해서 몇 페이지 둘러본 뒤, 클래리티 대시보드의 Recordings 탭에서 방금 접속한 본인 세션이 녹화됐는지 확인하는 방법이 제일 확실합니다.
워드프레스 vs 티스토리, 연동 방식 차이
| 구분 | 워드프레스 | 티스토리 |
|---|---|---|
| 연동 방식 | 플러그인 설치 후 클릭 몇 번 | 스킨 HTML 직접 편집 필요 |
| 난이도 | 낮음 (비개발자도 쉬움) | 중간 (head 태그 위치 이해 필요) |
| 스킨 변경 시 | 플러그인은 그대로 유지됨 | 스킨을 새로 적용하면 코드가 사라지므로 재설치 필요 |
| 수정 편의성 | 플러그인 설정 화면에서 관리 | 코드를 직접 찾아서 수정해야 함 |
여기서 티스토리 사용자가 꼭 기억해야 할 부분이 하나 있습니다. 스킨을 새로 바꾸거나 테마를 교체하면 기존에 넣어둔 head 코드가 통째로 초기화됩니다. 워드프레스는 플러그인 형태라 테마를 바꿔도 유지되지만, 티스토리는 스킨 자체에 코드가 물려 있는 구조라 그렇습니다. 스킨 변경 계획이 있다면 클래리티뿐 아니라 애드센스, 구글 애널리틱스 코드까지 미리 메모장에 백업해두는 습관이 필요합니다.
설치 후 흔히 겪는 문제
“코드는 넣었는데 대시보드에 데이터가 안 뜬다” — 대부분 광고 차단 확장 프로그램(Adblock 등)이 원인입니다. 클래리티 스크립트가 추적 코드로 분류되어 차단되는 경우가 있으니, 확인할 때는 확장 프로그램을 끄고 테스트해보세요.
“저장했는데 블로그 화면이 깨졌다” — head 태그가 아닌 다른 위치(body 안쪽 등)에 잘못 삽입했거나, 기존 코드의 태그를 실수로 지운 경우입니다. 코드를 넣기 전 원본 스킨 HTML 전체를 복사해서 별도로 저장해두면, 문제가 생겼을 때 바로 되돌릴 수 있습니다.
“모바일 스킨에서는 녹화가 안 된다” — 티스토리는 PC 스킨과 모바일 스킨의 HTML이 별도로 관리되는 경우가 있습니다. 모바일 방문자 데이터까지 수집하려면 모바일 스킨 편집 화면에서도 동일한 코드를 삽입했는지 확인해야 합니다.
설치 체크리스트
- 클래리티 프로젝트 생성 시 정확한 https 도메인 주소를 입력했는지 확인
- 스킨 편집 전 기존 HTML 전체를 텍스트 파일로 백업
- 설치 스크립트를 head 태그 안에 정확히 삽입했는지 확인
- PC 스킨뿐 아니라 모바일 스킨에도 동일하게 삽입했는지 확인
- 시크릿 모드로 직접 접속해 Recordings 탭에서 설치 여부 최종 확인
설치까지 마치셨다면, 이제부터는 데이터를 어떻게 읽고 실제 블로그 개선에 반영할지가 관건입니다. 다음 글에서는 클래리티 히트맵을 보고 실제로 본문 구조를 수정했던 사례를 구체적으로 다뤄보겠습니다.
지금 바로 해야 할 한 가지
이 글에서 한 가지만 챙기신다면, 스킨 HTML을 수정하기 전에 원본 코드 전체를 반드시 백업해두는 것입니다. 이거 하나만 해두면 어떤 실수를 하더라도 몇 초 만에 원상복구가 가능합니다.
여러분은 클래리티를 설치하고 나서 가장 놀랐던 히트맵 결과가 있으신가요? 그리고 스킨을 바꾸면서 추적 코드가 날아가서 낭패 보셨던 경험이 있으신지 댓글로 공유해주시면 좋겠습니다.
이어서 읽으면 좋은 글로는 클래리티 히트맵 데이터로 블로그 본문 구조 개선하기, 구글 애널리틱스와 클래리티 함께 연동하는 법을 준비하고 있습니다.
본 포스팅은 정보 전달 목적이며, 실제 적용 시 발생하는 책임은 사용자에게 있습니다.