최근 Star-Breaker-Raid 프로젝트의 일부 기능을 업데이트한 후, Vercel Dashboard에서 웹 서비스 상태를 점검하다가 Web Analytics 기능이 Hobby 요금제에서도 무료로 제공된다는 점을 알게 되었습니다.
이번 포스트에서는 Web Analytics 적용 과정과 간단한 후기를 정리해 보겠습니다.
Web Analytics란?
Web Analytics는 웹사이트 방문자에 대한 포괄적인 통계를 제공해주는 기능입니다.
방문자가 어느 페이지를 가장 많이 방문했는지, 어디서 유입됐는지, 어떤 운영체제와 브라우저를 사용하는지 등을 추적할 수 있습니다.
주요 기능:
✅ 개인정보 보호 중심
방문자 정보는 모두 익명 처리되며, 쿠키를 사용하지 않습니다.
✅ Vercel과 완벽 통합
외부 연동 없이 Vercel 대시보드에서 바로 확인 가능.
✅ 사용자 정의 이벤트 추적 가능
track()을 통해 버튼 클릭, 특정 기능 사용 등 사용자 행동 추적 가능.
⚙️ 적용 과정
- @vercel/analytics 설치
npm i @vercel/analytics
- layout.tsx에 적용
import { Analytics } from '@vercel/analytics/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='ko'>
<body>
{children}
<Analytics /> {/* 👈 여기서 추적 시작 */}
</body>
</html>
)
}
- Vercel로 배포
main브랜치에 코드를Push하면, Vercel의CI/CD 파이프라인을 통해 자동 배포가 이뤄집니다.
📈 대시보드에서 확인하기
이제 Star-Breaker-Raid에 접속한 사용자의 방문 기록을 Vercel Dashboard에서 실시간으로 확인할 수 있습니다
확인 가능한 정보:
- 방문 국가
- 사용 기기 (Mobile, Desktop 등)
- 운영 체제 및 브라우저
- 방문 경로 (Referrer)
Flags 사용자 이벤트 추적
track()을 이용하면 특정 사용자 행동을 추적할 수 있습니다. 예를 들어 로그인 버튼 클릭, 페이지 도달 등을 기록할 수 있습니다.import { track } from '@vercel/analytics' <button onClick={() => track('login-button-clicked')}> 로그인 </button>
Bounce Rate란?
Bounce Rate은 이탈률은 웹사이트에서 사용자가 단 한 페이지만 보고 아무런 추가 활동 없이 사이트를 떠난 비율을 의미합니다.
🔍 정의
Bounce Rate = (이탈 세션 수 ÷ 전체 세션 수) × 100
즉, 사이트에 들어와서 링크 클릭이나 스크롤, 탐색 없이 바로 떠난 세션의 비율입니다.
💡 예시
- A 사용자가 블로그 글 한 편만 읽고 나갔다면 → Bounce
- B 사용자가 글을 읽고 다른 글로 이동했다면 → Non-Bounce
📊 의미
-
Bounce Rate가 높다
→ 방문자가 콘텐츠에 관심이 없었거나, 원하는 정보를 찾지 못한 경우일 수 있음. -
Bounce Rate가 낮다
→ 사용자가 사이트 내에서 여러 활동(탐색, 클릭 등)을 했다는 의미.
🎯 언제 높아도 괜찮을까?
- 블로그, 뉴스 사이트처럼 단일 페이지에서 정보를 제공하는 경우.
예: "주소 찾기" 같은 간단한 기능 제공 → 사용자 목적 달성 후 바로 이탈.
마무리
Vercel Web Analytics는 별도 설정 없이 빠르게 통계를 확인할 수 있어서 앞으로 웹 관리하는데 지표가 될 것 같습니다. 지표에서 특이점이 있거나 개선해서 더 나아진 점이 있다면 다음 포스트에서 이 내용을 다루겠습니다.
[참고]
