🟨 2-30. 웹 성능 모니터링과 자동 분석 — Lighthouse CI, Web Vitals, Sentry 통합 가이드

---

1. 왜 자동 모니터링이 필요한가

성능은 “개발할 때”만 좋은 게 아니라,
서비스가 배포되고 시간이 지나도 유지되어야 한다.

📉 실제 사례

• 이미지가 추가되며 LCP 악화
• JS 번들이 커져 초기 로딩 지연
• 배포 후 특정 페이지 CLS 급상승

이런 문제는 사람이 매번 확인할 수 없기 때문에
자동화된 측정 시스템이 필요하다.

---

2. Lighthouse CI 개요

Lighthouse CI (LHCI) 는 Google이 제공하는
웹 성능 자동 점검 도구다.
Lighthouse를 명령어 형태로 실행하고,
CI/CD 파이프라인에 넣어 매 배포마다 자동 측정할 수 있다.

---

설치 및 초기화

npm install -g @lhci/cli
lhci wizard

✅ 설정 과정 중

• 어떤 URL을 테스트할지
• 어디에 결과를 저장할지
  를 지정한다.

---

간단한 실행 예시

lhci autorun

결과 👇

• Performance
• Accessibility
• Best Practices
• SEO
• Progressive Web App

이 5가지 점수를 자동으로 계산한다.

---

GitHub Actions 연동 예시

name: Lighthouse CI
on: [push]
jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install & Run LHCI
        run: |
          npm ci
          npm install -g @lhci/cli
          lhci autorun

✅ 배포 전 자동으로 Lighthouse 검사 실행
✅ 점수가 일정 기준 이하이면 실패 처리

---

3. Web Vitals 스크립트 — 실제 사용자 데이터 수집

Lighthouse는 테스트 환경의 성능을 측정하지만,
실제 사용자의 환경은 훨씬 다양하다.
그래서 Web Vitals JS 라이브러리를 사용하면
실제 브라우저에서의 성능 데이터를 수집할 수 있다.

npm install web-vitals

import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(metric),
    keepalive: true,
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

✅ 실제 사용자 체감 성능을 실시간으로 수집
✅ Google Analytics, Firebase, or Sentry로 전송 가능

---

4. Sentry 성능 모니터링

Sentry는 단순한 에러 추적 도구가 아니라,
실제로 성능 트레이스(Performance Trace) 까지 지원한다.

npm install @sentry/nextjs

Next.js 예시

// sentry.client.config.js
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "https://your-dsn-url",
  tracesSampleRate: 1.0, // 100% 수집
});

✅ 페이지 로딩, API 호출, 렌더링 지연 등의 지표를 자동 수집
✅ 느린 페이지를 구체적으로 추적 가능

예: /dashboard 경로에서 LCP 3.1초 → 이미지 최적화 누락

---

5. 세 가지 도구의 역할 비교

도구 역할 데이터 출처

Lighthouse CI	자동 점검 (배포 전/후)	테스트 환경
Web Vitals	실제 사용자 측정	실사용 브라우저
Sentry	오류 + 성능 추적	런타임 환경

이 셋을 함께 쓰면
“개발 → 배포 → 운영”의 전 단계에서 성능 관리가 가능하다.

---

6. CI/CD 통합 워크플로우 예시

name: Performance Monitoring
on:
  push:
    branches: [main]
jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Build project
        run: npm run build
      - name: Run Lighthouse CI
        run: npx lhci autorun
      - name: Deploy
        run: npm run deploy

✅ Lighthouse → 성능 점검
✅ Web Vitals → 실사용 수집
✅ Sentry → 에러 및 느린 구간 추적

---

7. Lighthouse 결과 자동 분석

Lighthouse CI는 JSON 결과를 남기므로
이를 자동으로 분석해 Slack, 이메일, Notion 등으로 알림을 보낼 수 있다.

lhci autorun --upload.target=filesystem --upload.outputDir=./reports

import fs from 'fs';
const report = JSON.parse(fs.readFileSync('./reports/lhr.json'));
console.log('LCP:', report.audits['largest-contentful-paint'].displayValue);

✅ 기준치 초과 시 경고 알림 시스템 구성 가능

---

8. Sentry를 통한 느린 트랜잭션 분석

Sentry는 특정 API나 페이지 렌더링이 느린 이유를 시각적으로 보여준다.

• Transaction Trace: 전체 실행 흐름
• Slow Endpoint: 응답 지연 API
• User Impact: 사용자별 체감 시간

💡 실제 서비스에서 “특정 페이지는 빠른데, 관리자 페이지만 느린” 이유를 쉽게 파악 가능.

---

9. Web Vitals + Sentry 연동

Sentry는 Web Vitals 데이터를 함께 받을 수도 있다.

import * as Sentry from "@sentry/react";
import { getLCP, getFID, getCLS } from "web-vitals";

[getLCP, getFID, getCLS].forEach(fn =>
  fn(metric => {
    Sentry.captureMessage(`Web Vital: ${metric.name}`, {
      level: "info",
      extra: metric,
    });
  })
);

✅ 브라우저에서 실시간으로 수집된 LCP/FID/CLS를
Sentry 대시보드에서 한눈에 모니터링 가능.

---

10. 대시보드 통합 아이디어

항목 수집 도구 주기 활용

성능 점수	Lighthouse CI	배포 시	기준선 비교
실사용 데이터	Web Vitals	실시간	UX 분석
오류 & 병목	Sentry	실시간	알림 및 원인 추적

➡ 이 데이터를 Grafana, Notion, Slack 등으로 연동하면
“성능 변화 → 자동 보고 → 원인 추적” 이 완전 자동화된다.

---

11. 실무 팁

• Web Vitals는 트래픽이 많은 페이지에만 설치 (불필요한 요청 방지)
• Lighthouse CI는 배포 전단계에서 한 번만 실행
• Sentry는 Release 버전 태깅 필수 (release: "1.0.3")
• 주요 지표 변화는 GitHub Actions 로그에 기록

---

12. 마무리

지금까지의 내용을 정리하면 👇

1️⃣ Lighthouse CI → 배포 단계 자동 점검
2️⃣ Web Vitals → 사용자 환경에서 실시간 수집
3️⃣ Sentry → 성능 저하나 오류 발생 즉시 추적

“빠른 웹을 만드는 건 기술이고,
빠른 상태를 유지하는 건 시스템이다.”

이 3단계 구조를 CI/CD 파이프라인에 심어두면
어떤 팀이든 성능 저하 없이 안정적인 프론트엔드를 운영할 수 있다.

---