바이브코딩으로 배포는 했는데, 사용자가 어떻게 쓰는지 모르겠다면?

탁유진·2026년 4월 23일

MS 기술노트

목록 보기

2/3

들어가며

"바이브코딩으로 배포했는데... 그 다음은 뭐 하지?"

Cursor랑 Claude로 며칠 만에 서비스 하나 뚝딱 만들어본 적 있으신가요?

저도 그랬습니다. 아이디어 떠오른 날 바로 배포까지 했었는데요, 그런데 배포 후 며칠 지나니까 이런 생각이 들었습니다.

"사람들이 진짜 쓰고는 있는 걸까?"

1. 배포하면 끝? 사실 아니다

처음엔 배포 자체가 목표니까 거기까지만 보입니다. 링크 공유하고, 주변에 알리고, 오픈하는 순간까지는 정말 설렙니다.

근데 며칠 지나면 질문이 바뀝니다.

사람들이 들어오긴 하나?
들어왔으면 내가 만든 대로 쓰고 있나?
아니면 어디선가 막혀서 그냥 나가버린 건가?

바이브코딩의 강점은 '빠르게 만든다'는 건데, 배포 이후에 이 질문들에 답을 못하면 다음에 뭘 고쳐야 할지 감이 안 잡힙니다. 기능을 더 붙여야 하나, UI를 바꿔야 하나, 아님 홍보가 문제인가 — 전부 "추측으로만" 굴러가게 됩니다.

💡 배포는 끝이 아니라 시작점
정확히 말하면 사용자와의 대화가 시작되는 시점입니다. 내 서비스가 진짜 살아남으려면 사람들이 어떻게 반응하는지를 계속 들어야 합니다!

2. 개선의 재료는 '사용자 행동 데이터'

병원 가면 의사가 진단부터 하죠?
어디가 아픈지 모르면 수술할 수도 없으니 말입니다.
서비스도 똑같습니다. 지금 어디서 사용자가 막히는지를 알아야 뭘 고칠지가 나옵니다.

이때 많이 쓰는 게 Google Analytics(GA4) 같은 도구입니다. 방문자 수, 이탈률, 전환율 같은 지표를 잘 보여줍니다.

그런데 숫자만으론 한계가 있습니다.

이탈률 70%라는 숫자가 있다고 가정해봅시다. 이게 높은 건지 낮은 건지는 페이지 종류에 따라 다릅니다. 더 답답한 건, 숫자는 어디서 나갔는지는 알려줘도 왜 나갔는지는 말해주지 않는다는 겁니다.

버튼 위치가 이상했던 건지, 글씨가 안 보였던 건지, 원하는 정보가 없었던 건지... 숫자 뒤에 있는 맥락을 보지 못합니다.

그래서 제가 오늘 소개할 도구는

3. Microsoft Clarity를 소개합니다

👉 Microsoft Clarity 바로가기

Microsoft Clarity는 Microsoft가 만든 무료 웹 분석 도구입니다. GA4처럼 숫자만 집계하는 게 아니라, 사용자가 실제로 화면에서 어떻게 움직였는지를 시각적으로 보여줍니다.

처음 써봤을 때 제일 좋았던 건 "아, 이건 숫자로는 절대 못 봤겠다" 싶은 게 바로 보인다는 점이었는데요

💡 Clarity가 특별한 이유
Clarity는 사용자 행동을 이벤트 로그로 기록합니다. 덕분에 저장 용량이 훨씬 적고, 마치 사용자 화면을 녹화한 것 처럼 재현할 수 있으며, 완전 무료로 제공됩니다.

특히 두 가지 기능이 강력합니다.

1) 히트맵 — 사용자가 어디에 눈길을 두는지

히트맵은 사용자의 클릭, 스크롤, 마우스 움직임을 색깔로 시각화해주는 기능입니다. 뜨거운 색(빨강, 주황)이 반응이 많은 구역, 차가운 색일수록 관심 밖 구역입니다.

이 Clarity를 제가 만든 페이지에 붙여봤는데, 생각도 안 했던 영역이 히트맵 1위였습니다. 반대로 히어로섹션의 버튼은 거의 클릭이 없어서 "아, 사용자는 내가 예상한 대로 움직이지 않는구나"를 한 번에 알았습니다.🥲

히트맵에도 종류가 있습니다.

클릭 히트맵: 어디를 가장 많이 눌렀는지
스크롤 히트맵: 페이지를 얼마나 내려서 읽는지
영역 히트맵: 어느 구간에 마우스가 가장 오래 머물렀는지

특히 스크롤 히트맵은 "내 중요한 콘텐츠가 사람들이 내려가지도 않는 위치에 있었네"를 알게 해주기 때문에, 페이지 구조 재설계할 때 거의 무조건 보게 됩니다.

2) 레코딩 — 사용자 화면을 어깨 너머로 보기

레코딩은 말 그대로 사용자가 내 서비스에서 어떻게 움직였는지를 재현해서 보여주는 기능입니다. 클릭, 스크롤, 페이지 이동까지 사용자 한 명의 여정을 그대로 볼 수 있습니다.

영상처럼 보이지만 사실 진짜 영상은 아닙니다. Clarity는 화면을 녹화하는 게 아니라 이벤트 로그를 저장해뒀다가 나중에 재생 엔진으로 시뮬레이션해주는 방식이기 때문입니다.

처음 레코딩을 볼 때는 기분이 이상했습니다.

내가 만든 화면에서 진짜 사람이 마우스를 이리저리 움직이다가, 어떤 버튼 앞에서 한참 망설이다가, 갑자기 뒤로 가기를 누르는 걸 보면 제가 서비스 제작자가 아닌 제 3자가 된 기분입니다.

근데 이 점이 진짜 강력한 이유는 "여기서 왜 이탈이 많지?"라는 질문에 숫자는 답을 못 하지만, 레코딩 하나만 봐도 "아, 이 사람은 이 버튼이 클릭되는 줄 몰랐구나"가 바로 보인다는 것입니다.

4. 내 서비스에 붙이는 법 (1분컷)

Clarity 세 단계가 전부입니다!

1) Clarity에서 새 프로젝트 만들기

Clarity 홈에서 새 프로젝트를 만들고 사이트 URL을 입력하면 고유한 추적 코드가 바로 발급됩니다.

2) 추적 코드 복사

이렇게 생긴 코드 스니펫이 나옵니다.

    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_PROJECT_ID");