데이터 수집을 위한 Clarity 설정기

첫번째 데이터 수집기인 GA 다음에 다른 데이터 수집기인 Clarity를 설정합니다.

GA는 방문자에 대한 정보(방문지역, DAU 등)이라면 Clarity는 방문자가 우리 서비스에 들어와서 어떤 행동을 하는지를 알수 있습니다. 어떤 버튼을 주로 클릭하는지, 스크롤을 얼마나 내리는지. 를 알수 있습니다.

UI/UX에 대한 지식이 미흡한 관계로 MVP 이후에 계속해서 사용자 반응을 보고 개선해나가기 위해서는 이러한 데이터가 필요하다고 판단하였습니다. 따라서 일단 설정하고 데이터를 수집하는것을 목표로 하였습니다.

아울러 모두 무료이기 때문에 최대한 빠르게 적용하여 데이터를 수집하는것이 중요하다고 생각했습니다.

MS Clarity란?

Microsoft Clarity는 웹사이트 방문자의 행동을 시각적으로 분석할 수 있는 무료 사용자 행동 분석 도구입니다.

클릭, 스크롤, 페이지 이동 같은 사용자 인터랙션을 자동으로 추적하며, 이를 Heatmap(히트맵)과 Session Recording(세션 리플레이) 형태로 제공합니다.

히트맵(Heatmap): 사용자가 페이지에서 가장 많이 클릭하거나 시선을 집중한 영역을 색상으로 시각화해, UI 개선에 필요한 인사이트를 제공합니다.

세션 리플레이(Session Replay): 실제 사용자의 화면 이동, 클릭, 스크롤 동작을 동영상처럼 재생해볼 수 있습니다. 이를 통해 사용자의 흐름을 직관적으로 파악하고, 이탈 구간이나 UX 문제를 손쉽게 발견할 수 있습니다.

인사이트 & 필터링: 트래픽 소스, 디바이스, 브라우저 등 다양한 조건으로 세션을 필터링할 수 있으며, “rage click(연속 클릭)”, “dead click(무효 클릭)” 등 행동 패턴도 자동 탐지합니다.

완전 무료로 제공되며, 페이지 수나 세션 수에 제한이 없습니다.

Google Analytics와 함께 사용하면 **정량적 데이터(GA)**와 **정성적 데이터(Clarity)**를 함께 분석할 수 있습니다.

설정방법

역시나마 이번에도 AI와 사이트에서 가이드해주는 방식으로 진행해보려고 합니다.

일단 Clarity 사이트에 접근합니다.

https://clarity.microsoft.com/

가입한 뒤에 프로젝트를 생성합니다.

 

새프로젝트 버튼을 누르고, 프로젝트 세팅을 진행합니다.

• 저희는 웹사이트이기 때문에 웹사이트 값을 넣었습니다.
  • 성명 : weggle-plus
  • 웹사이트 URL: https://weggle-plus.co.kr
  • 웹 사이트 업계 : B2C 서비스

 

그러면 이제 우리 서비스에 코드를 넣으면 됩니다.

저희는 빠르게 하기 위해서 NPM을 사용하여 설치하였습니다.

이제 프롬프트를 작성해봅시다.

우리 서비스에 Clarity를 적용할꺼야.
NPM을 사용하여 설치할꺼니 아래의 지침을 참고해줘.

## 지침
@microsoft/clarity
Microsoft Clarity is a comprehensive, free behavioral analytics tool designed to give you in-depth insights into user behavior on your website. With Clarity, you can utilize session replays, heatmaps, insights, and the Clarity Copilot feature, which provides intelligent summaries and actionable insights to help you optimize your site more effectively and drive data-driven decisions.

The Clarity NPM package will help you bring Clarity directly to your website.

Installation
Add this package as a dependency in your project.
```
npm install @microsoft/clarity
```
Then import the library in your code

import Clarity from '@microsoft/clarity';
Initialize Clarity
To activate the Clarity project, Clarity needs to be initialized with the Clarity project ID. To get the Clarity project ID, go to your Clarity project > Settings > Overview

```
// Make sure to add your actual project id instead of "yourProjectId".
const projectId = "yourProjectId"

Clarity.init(projectId);
```

Parameters
projectId: String (Required)
Description: The ID of the project.


## 프로젝트 ID
(발급받은 프로젝트 ID를 여기에 넣습니다.)

 

 

• 이번에는 copilot Agent + Cloude Code 4를 사용하여 생성합니다.

결과

좋습니다! 
Microsoft Clarity를 성공적으로 프로젝트에 적용했습니다. 다음과 같이 작업이 완료되었습니다:

완료된 작업

ClarityComponent 생성: src/app/components/common/ClarityComponent.tsx 파일을 생성하여 Clarity 초기화 로직을 구현했습니다.
환경변수 설정: .env.local (개발 환경) .env.production (프로덕션 환경)
두 파일에 NEXT_PUBLIC_CLARITY_PROJECT_ID 환경변수를 추가했습니다.

레이아웃 통합: 이미 layout.tsx에서 ClarityComponent가 import되고 사용되고 있어서 별도 수정이 필요하지 않았습니다.
사용 방법

실제 Clarity 프로젝트 ID를 받으시면, 다음 단계를 따라 설정하세요:
프로젝트 ID 설정: .env.local과 .env.production 파일에서 yourProjectId 부분을 실제 발급받은 Clarity 프로젝트 ID로 교체하세요.
개발 서버 재시작: 환경변수 변경 후 개발 서버를 재시작하세요.

주요 특징
환경변수 기반: 개발과 프로덕션 환경에서 각각 다른 프로젝트 ID를 사용할 수 있습니다.
클라이언트 사이드 초기화: 'use client' 지시어를 사용하여 브라우저에서만 Clarity가 초기화됩니다.
에러 처리: 프로젝트 ID가 설정되지 않은 경우 콘솔에 경고 메시지를 출력합니다.

이제 Microsoft Clarity가 웹사이트에 통합되어 사용자 행동 분석, 세션 리플레이, 히트맵 등의 기능을 활용할 수 있습니다!

 

// src/app/components/common/ClarityComponent.tsx

'use client';

import { useEffect } from 'react';
import { clarity } from '@microsoft/clarity';

export default function ClarityComponent() {
  useEffect(() => {
    // Clarity 프로젝트 ID를 여기에 입력하세요
    const projectId = process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID;
    
    if (projectId) {
      clarity.init(projectId);
    } else {
      console.warn('Clarity project ID가 설정되지 않았습니다. NEXT_PUBLIC_CLARITY_PROJECT_ID 환경변수를 확인해주세요.');
    }
  }, []);

  return null;
}

• 저희 서비스는 next.js를 사용하고 있습니다. 따라서 next.js에 맞게 적용합니다.
• env 파일이 생성되었으니, 거기에 PROJECT_ID도 들어가있는것을 확인할수 있습니다.

결론

• UI에 대해서의 데이터 기반으로 결정을 하기 위해서는 필수라고 생각됩니다.
• 데이터란 일단 수집하고 계속해서 확인하는것도 중요합니다.
• 한달 뒤 데이터를 기반하여 리팩토링을 진행해보려고 합니다. 한달 뒤 글을 기대해주세요.

 

About WegglePlus

WegglePlus는 문제를 정의하고, 이를 해결하는 여러 개의 서비스를 설계·개발·운영합니다.
이 블로그는 그 과정에서의 기술적 선택과 시행착오를 공유합니다.

https://weggle-plus.co.kr