티스토리 방문자 행동 분석 Clarity 설치 설정 방법

블로그 2026. 5. 27. 15:46

블로그에서 방문자가 어디를 클릭하고 얼마나 오래 머물고 어떤 경로로 움직이는지 알고 싶다면 Clarity이 필수입니다.
무료인 Clarity는 Heatmap, 세션 녹화, Rage Click 분석 등으로 사용자 행동을 파악하는 데 매우 유용합니다.
구글 애널리틱스와 함께 사용하면 좋습니다.
구글 애널리틱스는 숫자 데이터 중심이고 Clarity는 더 직관적이며 방문자 행동의 시각화에 특화되어 있습니다.

Clarity

마이크로소프트에서 제공하는 무료 사이트입니다.
사용자의 행동을 분석해서 시각화해서 보여줍니다.

https://clarity.microsoft.com

Microsoft Clarity - Free Heatmaps & Session Recordings

Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.

clarity.microsoft.com

Clarity 특징
세션 리플레이 (Session Replay)	실제 사용자가 웹사이트를 방문했을 때 마우스를 어떻게 움직이고 클릭했는지 녹화 영상처럼 확인할 수 있습니다.
히트맵 (Heatmaps)	사용자가 가장 많이 클릭한 영역과 스크롤을 내린 정도를 시각적으로 보여주어 어떤 콘텐츠가 인기가 많은지 한눈에 파악할 수 있습니다.
사용자 인사이트 자동 감지	사용자가 페이지를 빠르게 반복해서 클릭하거나(Rage Clicks) 아무 반응이 없는 요소를 클릭하는 등 답답함을 느끼는 구간을 AI가 자동으로 분석하고 라벨링해 줍니다.
구글 애널리틱스 연동	유입 경로 데이터와 실제 사용자 행동 영상을 결합하여 종합적인 분석이 가능합니다.
웹사이트 속도 영향 최소화	가벼운 추적 코드로 설계되어 웹사이트 로딩 속도 저하를 최소화합니다

가입

사이트로 가서 MS 계정이나 구글 계정으로 가입을 합니다.

1. 사이트에 접속합니다.

https://clarity.microsoft.com

Microsoft Clarity - Free Heatmaps & Session Recordings

Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.

clarity.microsoft.com

2. Microsoft 계정 또는 Google 계정으로 로그인합니다.

3. 새 프로젝트 만듭니다.
새 프로젝트 추가 버튼을 클릭합니다.

4. 프로젝트 정보를 입력하고 새 프로젝트 추가를 클릭합니다.
프로젝트 이름을 입력합니다.
웹사이트 URL에 티스토리 블로그 주소 입력합니다.

5. 수동으로 설치를 클릭합니다.

6. 티스토리 HTML 편집에서 Clarity 코드를 입력합니다.
티스토리 관리자 > 스킨 편집
HTML 편집 모드로 전환해서
태그 안쪽 바로 위에 Clarity 코드를 붙여 넣습니다.
적용 버튼 클릭합니다.

<head>
    ... 기존 코드들 ...
    
    <!-- Microsoft Clarity -->
    <script type="text/javascript">
        (function(c,l,a,r,i,t,y){ ... })();  // Clarity에서 제공한 전체 코드
    </script>
</head>

사용

1. 구글 애널리틱스와 연동합니다.

구글 계정으로 연결해서 사이트를 연결합니다.

2. IP 차단을 클릭합니다.

통계데이터에 포함되지 않도록 자신의 IP를 추가합니다.

3. 팀 구성원을 추가합니다.

4. 마스킹을 선택합니다.

Clarity에서 마스크 설정은 개인정보 보호를 위해 매우 중요한 기능입니다.
이메일, 비밀번호, 전화번호, 카드번호 등 민감 정보가 녹화되는 것을 방지합니다.

모드	설명	추천 대상	추천도
엄격함 ( Strict )	거의 모든 텍스트와 이미지를 마스킹	개인정보가 매우 많은 사이트	과도함
균형 잡힘 ( Balanced )	민감한 내용(이메일, 숫자, 입력창)만 마스킹	대부분의 일반 사이트	추천
편안한 ( Relaxed )	입력창만 마스킹 일반 텍스트는 거의 노출	콘텐츠 중심 블로그/뉴스	추천

5. AI 가시성

AI Bot Activity을 알 수 있습니다.
DNS를 Cloudflare로 사용 중이라면 Clarity AI Visibility에도 Cloudflare를 연결하는 것이 가장 좋습니다.
Settings → AI Visibility 탭 이동
Connect CDN 또는 Add Integration 버튼 클릭
Cloudflare 선택
Cloudflare 계정 연결 진행

https://dash.cloudflare.com/profile/api-tokens?name=Microsoft+Clarity+AI+Visibility

Cloudflare Dashboard | Manage Your Account

dash.cloudflare.com

6. 레코딩
실시간 녹화 기능입니다.
가장 먼저 활성화되는 기능입니다.
방문자가 여러 번 페이지에 접속하고 스크롤, 클릭 등의 행동을 해야 활성화됩니다.
보통 최초 데이터 수집 후 2~24시간 정도 걸립니다.

7. 열 지도

Heatmap 기능은 방문자들이 페이지에서 어디를 많이 클릭하고 어디까지 스크롤했는지 시각적으로 보여주는 기능입니다.

Clarity는 설치 직후에는 대부분의 탭이 비활성화되어 있습니다.

Clarity 탭 활성화 조건
데이터 수집 시간	설치 후 최소 30분 ~ 몇 시간 정도 기다려야 합니다.
실제 방문자 유입	Clarity는 실제 사용자 방문이 있어야 데이터를 쌓습니다.
데이터 처리 시간	방문이 있어도 Clarity가 데이터를 분석하고 대시보드에 반영하는 데 시간이 걸립니다.

요약

1. Clarity https://clarity.microsoft.com

2. 구글 애널리틱스 연동
3. 세션 녹화, Heatmap

[블로그] - 티스토리 관리자 초기 설정 방법

티스토리 관리자 초기 설정 방법

처음 티스토리 블로그를 개설하면 관리자 페이지에서 설정하는 것이 좋습니다. 콘텐츠 설정 , 플러그인 등을 해야 합니다.콘텐츠 설정글쓰기 시 기본으로 저장할 글 상태는 공개 로 설정합니다.

blog.baobtree.com

[블로그] - 티스토리 구글 서치 콘솔 설정 방법

티스토리 구글 서치 콘솔 설정 방법

구글 서치 콘솔Google Search Console 자신의 사이트가 구글 검색 결과에서 어떻게 노출되고 있는지 모니터링하고 문제를 발견해서 개선하며 검색 퍼포먼스를 향상시키고 최적화하는 도구입니다. 사

blog.baobtree.com

[블로그] - 티스토리 구글 애널리틱스 설정 방법

티스토리 구글 애널리틱스 설정 방법

구글 애널리틱스Google Analytics 구글 애널리틱스는 Google이 제공하는 무료 웹 분석 서비스입니다. 웹사이트나 모바일 앱의 방문자 데이터와 사용자 행동을 추적하고 분석할 수 있는 도구입니다. 실

blog.baobtree.com

[블로그] - 티스토리 네이버 애널리틱스 설정 방법

티스토리 네이버 애널리틱스 설정 방법

네이버 애널리틱스네이버 애널리틱스는 네이버에서 제공하는 무료 웹 로그 분석 서비스입니다. 사이트 방문자의 이용 행태, 유입 경로, 인기 페이지 정보 등을 분석합니다. 실시간 데이터 추적

blog.baobtree.com

[블로그] - 티스토리 네이버 서치어드바이저 설정 방법

티스토리 네이버 서치어드바이저 설정 방법

네이버 서치어드바이저네이버 서치어드바이저는 등록한 웹사이트가 네이버 검색 결과에 잘 노출되도록 관리하고 진단하는 도구입니다. 네이버 애널리틱스가 방문 후 분석 이라면 서치어드바

blog.baobtree.com

[블로그] - 티스토리 빙 웹 마스터 도구 설정 방법

티스토리 빙 웹 마스터 도구 설정 방법

2025.11.26 - [블로그] - 티스토리 구글 애널리틱스 설정 방법 마이크로소프트가 만든 Bing에서도 구글 서치 콘솔과 동일한 서비스인 빙 ( Bing ) 웹마스터 도구가 있습니다. Bing에 내 사이트가 어떻게

blog.baobtree.com

[블로그] - 티스토리 IP 추적 statcounter 설정 사용

티스토리 IP 추적 statcounter 설정 사용

블로그에서 IP을 추적하려면 StatCounter을 설치해서 확인하는 방법이 있습니다. StatCounter는 CCTV처럼 방문자별 IP, 위치, 브라우저, 접속 시간 등을 기록합니다. 같은 IP에서 짧은 시간 내 반복 광고

blog.baobtree.com

[블로그] - 티스토리 방문자 행동 분석 Clarity 설치 설정 방법

티스토리 방문자 행동 분석 Clarity 설치 설정 방법

블로그에서 방문자가 어디를 클릭하고 얼마나 오래 머물고 어떤 경로로 움직이는지 알고 싶다면 Clarity이 필수입니다. 무료인 Clarity는 Heatmap, 세션 녹화, Rage Click 분석 등으로 사용자 행동을 파악

blog.baobtree.com

저작자표시 비영리 변경금지 (새창열림)

'블로그' 카테고리의 다른 글

티스토리 IP 추적 statcounter 설정 사용 (0)	2026.04.21
블로그 이미지 WebP 변환 사이트 (0)	2026.04.14
무료 티스토리 파비콘 아이콘 생성 사이트 (0)	2026.03.26
티스토리 구글 에드센스 수동 광고 Ads.txt 설정 (0)	2026.03.10
무료 사진 배열 콜라주 사이트 (0)	2026.01.22

ABOUT ME

세상의 이모저모 세상의 이모저모

Clarity

가입

사용

요약

'블로그' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Clarity

가입

사용

요약

'블로그' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바