바이브 코딩 플랫폼에 Clarity 설치

Bolt.new, Lovable, Replit, Vercel 같은 최신 플랫폼으로 웹사이트를 만들고 있다면, Microsoft Clarity를 빠르고 간편하게 추가할 수 있습니다. 이러한 플랫폼들은 AI 기반 또는 프롬프트 기반 워크플로우를 활용하여 최소한의 수동 코딩으로 웹사이트를 생성하고 관리할 수 있어, 빠른 프로토타이핑이나 개인 사이트, 경량 웹 앱에 안성맞춤입니다.

AI 및 노코드 도구로 만든 사이트에 Clarity를 추가하는 방법

Clarity 계정에 로그인합니다. New project를 선택합니다.
Name과 Website 정보를 입력합니다. Add new project를 선택하면 Getting Started 페이지로 이동합니다.
Settings로 이동합니다. Overview 페이지에서 Project ID(예: skskgpszpc)를 복사합니다.
코딩 플랫폼에서 Assistant 또는 Prompt input을 열고 다음과 같이 입력합니다:
```
add Microsoft Clarity with project id as skskgpzspc
```

플랫폼이 제공한 Project ID를 사용하여 Clarity 스크립트를 사이트의 HTML에 자동으로 삽입합니다. 통합이 완료되면 페이지가 인터랙티브 상태가 될 때 Clarity가 로드되어 다음을 수행할 수 있습니다:

클릭, 스크롤, 페이지 뷰 같은 사용자 상호작용을 추적합니다.
Heatmap과 Session Recording에 접근하여 사이트에서의 사용자 행동을 더 잘 이해할 수 있습니다.

플랫폼별 예시

플랫폼	샘플 프롬프트	결과
Bolt.new	Add Microsoft Clarity with project ID as `XXXXXXXXXX`.
Lovable.dev	Add Microsoft Clarity with project ID as `XXXXXXXXXX`.
Replit AI	Add Microsoft Clarity with project ID as `XXXXXXXXXX`.
Vercel	Add Microsoft Clarity with project ID as `XXXXXXXXXX`.

FAQ

자주 묻는 질문에 대한 답변은 설치 FAQ를 참고하세요.

더 알아보기

번역: jh.lee@medibuilder.com with Claude Code