프론트엔드 모니터링 도구: Vercel

Vercel Speed Insights

Speed Insights는 단순 점수 측정이 아니라 실제 사용자 환경 데이터를 수집합니다. 이를 통해 내 컴퓨터에서는 빠른 사이트가 실제 유저에게는 왜 느린지 분석할 수 있습니다.

핵심 지표와 RES

• FCP (First Contentful Paint): 첫 요소가 뜨는 속도. 폰트나 CSS 차단 리소스를 확인해야 합니다.
• LCP (Largest Contentful Paint): 가장 큰 콘텐츠가 화면에 나타나는 시간. (2.5초 이내가 Good)
• INP (Interaction to Next Paint): 사용자의 클릭/입력에 대한 반응 속도.
• CLS (Cumulative Layout Shift): 시각적 안정성. (페이지 레이아웃이 얼마나 덜 흔들리는지)
• FID(First Input Delay): 사용자가 상호작용을 했을 때 해당 입력을 처리할 때까지 걸리는 시간
• TTFB (Time to First Byte): 서버 응답 속도.
• RES (Real Experience Score): 위 지표들을 종합하여 0~100점으로 환산한 점수입니다. 90점 이상이면 Green(Good)으로 분류됩니다.

심층 기능

대시보드에서 특정 지표를 클릭하면 다음 세부 정보를 볼 수 있습니다.

• URL/Path별 분석: 어떤 페이지가 유독 느린지 특정합니다.
• 국가별(Country) 분석: 접속한 사용자의 국가별 지표 확인합니다.
• Selector Attribution: 단순히 "CLS가 높다"고 알려주는 것을 넘어, 어떤 구체적인 HTML 요소가 레이아웃 시프트를 유발했는지 대시보드에서 직접 집어내 줍니다.
• P75/P90/P95 필터: 전체 사용자의 상위 75%, 90% 경험을 분리해서 볼 수 있어, 소수의 저사양 기기 유저가 겪는 병목 현상을 정밀하게 분석할 수 있습니다.

사용방법

vercel 에 배포한(할) 프로젝트에 @vercel/speed-insights의존성을 추가하고, 다음과 같이 추가하면 됩니다. 이때 사용하는 프레임워크에 따라 react, next 등을 선택하면 됩니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { SpeedInsights } from '@vercel/speed-insights/react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <SpeedInsights />
  </StrictMode>,
);

실제 내부 동작

1. 브라우저 내장API(PerformanceObserver)를 사용하여 데이터 측정
2. SpeedInsights 컴포넌트에서 WebVitals 이벤트 리스너를 등록하여 측정값을 사용자 세션 단위로 수집
3. 측정 완료 시점에 sendBeacon() 으로 비동기 전

Vercel Web Analytics

일반적인 분석 도구(GA4 등)와 달리 Vercel Analytics는 쿠키를 사용하지 않으며, 사용자 개인 정보를 수집하지 않는 GDPR 준수형 도구입니다.

방문자 식별 방식

쿠키 대신 요청 헤더의 정보를 해싱하여 방문자를 구분합니다. 이는 브라우저의 '쿠키 차단' 설정에 영향을 받지 않으면서도 익명성을 유지하는 방식입니다.

커스텀 이벤트

단순한 페이지 뷰를 넘어, 특정 버튼 클릭이나 폼 제출 같은 비즈니스 액션을 추적할 수 있습니다.

• 이벤트 속성: track('Signup', { plan: 'pro' })와 같이 데이터 속성을 함께 전송하여 유료 전환율 등을 분석할 수 있습니다.
• 서버 사이드 트래킹: 최근 업데이트를 통해 클라이언트뿐만 아니라 Next.js Server Actions 등 서버 환경에서도 이벤트를 기록할 수 있게 되었습니다.

import { track } from '@vercel/analytics';

// 예: 회의 생성 성공 트래킹
track('MeetingCreated', { platform: 'web', role: 'presenter' });

• 이탈 분석 특정 버튼 클릭 전후의 데이터를 비교하여 UX 병목 구간을 찾습니다.
• Referrers 분석: 사용자가 어디를 거쳐 오는지 파악해 랜딩 페이지 성능을 최적화합니다.

사용 방법

vercel 에 배포한(할) 프로젝트에 @vercel/analytics의존성을 추가하고, 다음과 같이 추가하면 됩니다. 이때 사용하는 프레임워크에 따라 react, next 등을 선택하면 됩니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Analytics } from '@vercel/analytics/react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <Analytics />
  </StrictMode>,
);

실제 내부 동작

1. Analytics 컴포넌트에서 페이지로드 & 라우트 변경을 감지
2. pageview, route change (SPA), referrer, user-agent, viewport size 이벤트 감지 (쿠키 없이 동작)
3. fetch() 혹은 navigator.sendBeacon() 으로 메시지 전송

참고자료

• vercel 모니터링 도구 문서
• vercel 속도 측정 문서