Vercel Web Analytics 요금과 설치: Enable 버튼만으로는 안 되는 이유

클라우드 인프라2026년 8월 15일글: 홍서진, Duolabs7분 읽기analytics blog model-anthropic-claude-opus-5 nextjs technical-note vercel

회사 홈페이지의 방문자 수를 Vercel 대시보드에서 보려고 Web Analytics를 켰습니다. Enable을 누르고 잠시 기다렸는데 지표가 0이었습니다. 스크립트를 넣어야 한다는 걸 그때 알았고, 넣고 배포한 뒤에도 한 번 더 헷갈렸습니다. 그 과정을 정리했습니다.

요금부터 확인했습니다

Enable 대화상자에 선택지가 둘이었습니다.

	요금
Web Analytics	플랜에 포함. 다만 이벤트가 과금됩니다
Web Analytics Plus	위에 더해 월 $10 고정

"Included in your plan"이라는 문구 때문에 무료라고 읽기 쉬운데, 바로 아래에 작은 글씨로 $30 per additional 1M events prorated가 붙어 있습니다. 공식 요금표를 확인하니 Pro 플랜의 포함 이벤트는 없고 1,000건당 $0.03입니다. Hobby는 월 5만 건이 포함입니다.

즉 기능 사용료는 없고 이벤트마다 과금입니다. 규모를 계산해보면 이렇습니다.

월 페이지뷰 1만    →  $0.30
월 페이지뷰 10만   →  $3
월 페이지뷰 100만  →  $30

Plus는 보관 기간이 24개월로 늘고 커스텀 이벤트 속성이 8개가 되며 UTM 파라미터를 지원합니다. 저는 캠페인을 돌리고 있지 않아서 기본형만 켰습니다.

Enable은 준비만 시킵니다

대시보드에서 켜면 "Get Started" 화면이 나오고, 거기서야 패키지를 설치하라고 알려줍니다. 저는 그 화면을 제대로 안 읽고 지표만 새로고침하고 있었습니다.

npm i @vercel/analytics

App Router에서는 @vercel/analytics/next에서 가져옵니다. 루트 레이아웃의 <body> 안 아무 곳에나 두면 됩니다.

import { Analytics } from "@vercel/analytics/next";

// ...
        <SWRProvider>
          <Nav />
          <main>{children}</main>
          <Analytics />
        </SWRProvider>

배포했는데 HTML에 없었습니다

커밋하고 배포한 다음 확인했습니다.

curl -s https://example.com | grep -o "_vercel/insights[^\"']*"

아무것도 안 나왔습니다. 배포가 안 붙은 줄 알고 배포 목록을 뒤졌습니다. 그런데 운영 배포의 빌드 로그에는 제 커밋 해시가 찍혀 있었습니다.

Cloning github.com/... (Branch: main, Commit: 0b69eac)

중간에 한 번 더 잘못 짚었습니다. 응답 헤더에 age: 487이 있어서 8분 전 캐시를 보고 있는 줄 알았습니다. 캐시를 우회해서 다시 받아도 결과는 같았습니다.

클라이언트에서 주입되기 때문이었습니다

<Analytics />는 서버가 렌더한 HTML에 <script> 태그를 직접 넣지 않습니다. 하이드레이션이 끝난 뒤 클라이언트에서 스크립트를 붙입니다. 그래서 curl로 받은 초기 HTML에는 흔적이 없는 게 정상입니다.

확인하려면 JS 번들을 봐야 했습니다.

# HTML 에서 청크 주소를 뽑아 각각 뒤진다
curl -s https://example.com \
  | grep -oE '/_next/static/chunks/[^"]+\.js' | sort -u \
  | while read c; do
      curl -s "https://example.com$c" | grep -q "_vercel/insights" \
        && echo "found: $c"
    done

found: /_next/static/chunks/1p8yok3jqdcg6.js

여기서 나오면 제대로 들어간 겁니다. 스크립트 자체도 같은 도메인에서 서빙되는지 같이 봤습니다.

curl -s -o /dev/null -w "%{http_code}\n" https://example.com/_vercel/insights/script.js
# 200

브라우저 개발자도구 네트워크 탭을 열었으면 30초 만에 끝났을 일입니다. 서버 쪽 도구만 쓰다 보니 클라이언트에서 일어나는 일을 서버 응답에서 찾고 있었습니다.

CSP를 쓴다면

보안 헤더에 Content-Security-Policy를 걸어둔 상태였습니다. 스크립트가 외부 도메인에서 오면 script-src에 호스트를 추가해야 하는데, 확인해보니 그럴 필요가 없었습니다.

스크립트   /_vercel/insights/script.js
비컨       /_vercel/insights/view

Vercel에 배포된 사이트에서는 둘 다 같은 출처를 씁니다. script-src 'self'와 connect-src 'self'만 있으면 통과합니다. Vercel이 이 경로를 자기 네트워크 레벨에서 처리하기 때문입니다.

이미 자체 집계가 있다면

이 사이트에는 원래 자체 페이지뷰 기록이 있었습니다. 방문자 식별자와 세션, 유입 도메인, UTM을 데이터베이스에 남깁니다. 그래서 Vercel 것을 굳이 켜야 하나 잠깐 고민했습니다.

성격이 다릅니다.

	자체 집계	Vercel
저장	애플리케이션 데이터베이스	Vercel 대시보드
비용	행이 쌓이고 조회가 전송량	이벤트당 $0.03/1,000
잡는 것	방문자·세션·유입·UTM	페이지뷰·방문자
프로젝트 간 비교	안 됨	됨

결정적이었던 건 마지막 줄입니다. 사이트가 여러 Vercel 프로젝트로 쪼개져 있어서, 어느 쪽에 트래픽이 몰리는지를 한 화면에서 보려면 Vercel 쪽이 필요했습니다.

그리고 둘 다 클라이언트 스크립트라 봇을 못 잡습니다. 보통은 단점인데, 지금은 그 성질을 진단에 쓰고 있습니다. 데이터베이스 전송량이 이상하게 높은 걸 추적하는 중인데, 페이지뷰가 낮은데 전송량이 높으면 사람이 아니라는 뜻이 되기 때문입니다.

정리

Enable은 스위치일 뿐이고 패키지와 컴포넌트가 있어야 수집됩니다
기본형은 월정액이 없고 이벤트당 과금입니다. 1,000건에 $0.03
설치 확인은 HTML이 아니라 JS 번들이나 브라우저 네트워크 탭에서 합니다
같은 출처를 쓰므로 CSP에 도메인을 추가할 필요가 없습니다

자체 집계가 이미 있다면 중복이 맞습니다. 그래도 켤 만한 이유는 프로젝트가 여러 개일 때, 그리고 데이터베이스를 거치지 않는 두 번째 관측점이 필요할 때입니다.