15장: 분석과 모니터링
배포 후에도 할 일이 있다
배포하고 링크를 공유했습니다. 그런데 사람들이 실제로 들어오는지, 어디서 막히는지, 에러가 나고 있는지 — 아무것도 모릅니다. 코드가 돌아가고 있다는 건 알지만, 그 안에서 무슨 일이 벌어지는지는 모릅니다.
이 장에서는 두 가지를 다룹니다. 첫째, 사람들이 어떻게 서비스를 쓰는지 파악하는 분석(Analytics). 둘째, 에러가 났을 때 알아차리는 모니터링(Monitoring).
Vercel Analytics: 가장 빠른 시작
Vercel로 배포했다면 분석 도구를 바로 쓸 수 있습니다. Vercel Analytics는 별도 서비스 가입 없이, 코드 몇 줄만 추가하면 됩니다.
확인할 수 있는 것들:
- 방문자 수: 오늘, 이번 주, 이번 달 방문자
- 페이지뷰: 어느 페이지를 많이 보는지
- 유입 경로: 어디서 들어왔는지 (구글 검색, 직접 입력, 링크 클릭 등)
- 기기와 브라우저: 모바일/PC 비율, 어떤 브라우저를 쓰는지
- 국가: 어느 나라에서 접속하는지
무료 플랜으로 최근 30일치 데이터를 볼 수 있습니다.
설치하기
Vercel Analytics를 이 프로젝트에 추가해줘.
AI가 해주는 작업은 두 가지입니다. @vercel/analytics 패키지를 설치하고, app/layout.tsx에 <Analytics /> 컴포넌트를 추가합니다. 코드 한 줄이 전부입니다.
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
)
}
GitHub에 올리면 Vercel이 재배포하고, 이후 방문자부터 데이터가 쌓이기 시작합니다. Vercel 대시보드 → 프로젝트 → Analytics 탭에서 확인할 수 있습니다.
Vercel Speed Insights: 페이지 속도 측정
앞 장에서 검색 엔진이 "이 페이지는 쓰기 편한가?"를 로딩 속도로 판단한다고 했습니다. Speed Insights는 실제 방문자의 페이지 로딩 속도를 측정합니다. 어떤 페이지가 느린지, 얼마나 느린지를 Vercel 대시보드에서 바로 확인할 수 있습니다.
설치 방법은 Analytics와 동일합니다.
Vercel Speed Insights를 이 프로젝트에 추가해줘.
@vercel/speed-insights 패키지를 설치하고 <SpeedInsights /> 컴포넌트를 추가하면 됩니다. Analytics와 나란히 넣으면 됩니다.
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
)
}
배포 후 Vercel 대시보드 → Speed Insights 탭에서 확인할 수 있습니다. 속도가 느린 페이지가 보이면 AI에게 최적화를 요청하면 됩니다.
Speed Insights에서 /products 페이지의 LCP가 4초로 나와.
이 페이지 로딩 속도를 개선해줘.
더 필요할 때: 다른 분석 도구들
Vercel Analytics는 방문자 수와 페이지뷰 같은 기본 지표를 빠르게 파악하기 좋습니다. 하지만 "회원가입 버튼을 몇 명이 클릭했는지", "가입 폼 어느 단계에서 이탈하는지" 같은 상세한 행동 데이터가 필요해지면 전문 분석 도구를 추가할 수 있습니다.
대표적인 선택지입니다.
Google Analytics — 가장 널리 쓰이는 분석 도구입니다. 데이터를 수년간 무료로 보관하고, 구글 광고와 연동됩니다. 앞 장에서 설정한 Google Search Console과 연결하면 검색 유입부터 사용자 행동까지 한눈에 볼 수 있습니다.
PostHog — 이벤트 추적, 세션 녹화, 기능 플래그, A/B 테스트를 한 도구에서 제공합니다. 오픈소스이고 무료 플랜이 넉넉해서 개인 프로젝트에 추천하는 도구입니다.
어느 도구든 Claude Code에게 설치를 맡기면 됩니다.
에러 모니터링: 문제를 사용자보다 먼저 알기
분석 도구는 "얼마나 많이 쓰는지"를 알려줍니다. 에러 모니터링은 "뭔가 잘못되고 있는지"를 알려줍니다.
배포된 서비스에서 에러가 나도 여러분은 모릅니다. 개발자 도구를 직접 열어보지 않는 이상, 에러는 조용히 쌓입니다. 사용자가 포기하고 나가거나, 불편하다는 피드백을 남길 때야 비로소 알게 됩니다.
앞서 소개한 PostHog도 에러 추적 기능을 포함하고 있어서, 분석과 모니터링을 한 도구로 해결하고 싶다면 PostHog 하나만 써도 됩니다. 별도 에러 모니터링 도구가 필요하다면 Sentry(sentry.io (새 탭에서 열림))를 가장 많이 씁니다. 에러가 발생하는 즉시 어느 파일 몇 번째 줄에서, 어떤 사용자 환경에서, 얼마나 자주 일어나는지를 기록하고 이메일로 알려줍니다.
분석 데이터로 뭘 해야 하나
데이터를 수집하기 시작하면, 무엇을 봐야 할지 막막할 수 있습니다.
처음 2주: 데이터가 쌓이는 걸 지켜봅니다. 판단하기에는 데이터가 너무 적습니다. 대신 기준선을 파악합니다. 하루 평균 방문자가 몇 명인지, 어느 페이지를 가장 많이 보는지.
질문 하나씩 답을 찾습니다. "사람들이 가입 후에 실제로 기능을 쓰는가?" "모바일 사용자가 데스크톱보다 이탈률이 높은가?" 이런 질문에 답하는 데 집중합니다.
에러가 나오면 바로 처리합니다. Sentry에 에러가 쌓이기 시작하면 하나씩 확인합니다. 자주 발생하는 에러부터 처리합니다.
AI에게 데이터를 해석해달라고 할 수도 있습니다.
Vercel Analytics를 보니까 아래처럼 나와.
- 전체 방문자: 320명 (최근 7일)
- /register 페이지뷰: 180회
- /dashboard 페이지뷰: 40회
회원가입 페이지는 많이 보는데 대시보드는 적게 봐.
어떻게 해석할 수 있고, 뭘 확인해봐야 할까?
✏️ 실습: Vercel Analytics 연결하고 데이터 확인하기
1단계: Vercel Analytics를 설치합니다.
Vercel Analytics를 이 프로젝트에 추가해줘.
2단계: 변경사항을 GitHub에 올립니다.
커밋하고 GitHub에 올려줘.
3단계: 배포가 완료되면 배포 주소를 직접 몇 번 방문합니다. 여러 페이지를 돌아다닙니다. Vercel 대시보드 → Analytics 탭에서 방금 방문한 데이터가 들어오는지 확인합니다.
분석과 모니터링은 설정해두면 알아서 데이터를 쌓습니다. 처음에는 숫자가 작아서 의미없어 보일 수 있습니다. 하지만 서비스를 쓰는 사람이 생기면서 패턴이 보이기 시작합니다. 무엇이 잘 되고, 무엇이 안 되는지. 이 데이터가 다음에 무엇을 만들지 결정하는 기준이 됩니다. 다음 장에서는 AI의 능력을 더 확장하는 MCP와 스킬을 다룹니다.
참고자료