🟨 2-31. 프론트엔드 자동화의 완성 — CI/CD + 성능 모니터링 + 에러 리포팅 통합 시스템 구축
1. 목표 개요
자동화의 핵심은 “배포 이후까지 관리되는 시스템”이다.
한 줄로 요약하면 👇
코드 푸시 → 자동 빌드 → 성능 점검 → 배포 → 실사용 모니터링 → 알림 및 리포트 생성
2. 통합 시스템 구조
┌───────────────────────────────┐
│ GitHub Actions │
│ (CI/CD + Lighthouse CI 실행) │
└───────────────┬───────────────┘
│
▼
┌────────────────────────┐
│ 배포 환경 (Vercel, AWS) │
│ Web Vitals & Sentry 활성화 │
└────────────────────────┘
│
▼
┌────────────────────┐
│ 데이터 수집 서버 (Node.js / Supabase) │
│ - Web Vitals Metric 저장 │
│ - Error 로그 저장 │
└────────────────────┘
│
▼
┌────────────────────┐
│ Notion / Slack / Email Report │
│ 매일/주간 성능 리포트 자동 전송 │
└────────────────────┘
✅ 각 단계가 자동으로 연결되어 “성능 유지형 프론트엔드”를 완성한다.
3. CI/CD + Lighthouse 자동화
GitHub Actions 설정
name: Frontend CI/CD
on:
push:
branches: [main]
jobs:
build-test-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: npx lhci autorun --upload.target=temporary-public-storage
- name: Deploy to Vercel
run: npx vercel --prod
✅ main 브랜치 푸시 →
Lighthouse CI 점검 →
배포 후 URL 자동 측정
결과는 GitHub Actions log 또는 Slack으로 바로 알림 가능하다.
4. 배포 후 Web Vitals + Sentry 활성화
Next.js 기준 통합 예시
// _app.tsx
import * as Sentry from "@sentry/nextjs";
import { getCLS, getFID, getLCP } from "web-vitals";
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
tracesSampleRate: 1.0,
});
function reportWebVitals(metric) {
Sentry.captureMessage(`Web Vital: ${metric.name}`, {
level: "info",
extra: metric,
});
}
export function reportWebVitals(metric) {
if (metric.value > threshold(metric.name)) {
fetch("/api/vitals", {
method: "POST",
body: JSON.stringify(metric),
keepalive: true,
});
}
}
✅ 실사용자의 LCP, FID, CLS 수집
✅ Sentry 대시보드에서 동시에 확인
✅ 임계치 초과 시 서버로 전송
5. Web Vitals 서버 수집 API
// /pages/api/vitals.js
export default async function handler(req, res) {
const body = JSON.parse(req.body);
console.log("Received Web Vital:", body);
// 예: Supabase / PostgreSQL 저장
await saveMetricToDB(body);
res.status(200).json({ success: true });
}
✅ 실시간으로 사용자 성능 데이터를 저장
✅ Supabase / PlanetScale / Aiven MySQL 모두 사용 가능
6. 자동 리포트 생성
일별 또는 주간 단위로 성능 지표를 요약해 Slack이나 Notion으로 전송한다.
import { WebClient } from "@slack/web-api";
const slack = new WebClient(process.env.SLACK_TOKEN);
async function sendWeeklyReport(metrics) {
const msg = `
📊 **Weekly Performance Report**
- LCP 평균: ${metrics.LCP.toFixed(2)}s
- FID 평균: ${metrics.FID.toFixed(1)}ms
- CLS 평균: ${metrics.CLS.toFixed(2)}
`;
await slack.chat.postMessage({ channel: "#performance", text: msg });
}
✅ 매주 일정 시간에 자동 실행
✅ Core Web Vitals 변화를 지속적으로 추적 가능
7. 알림 트리거 (Sentry + Slack 연동)
Sentry는 성능 문제나 JS 오류가 발생하면
자동으로 Slack이나 이메일로 알림을 전송할 수 있다.
Sentry → Project Settings → Alerts → Integrations → Slack
- Error 발생 시 실시간 Slack 알림
- 특정 URL에서 LCP 3초 초과 시 경고
- 성능 하락 시 주간 리포트에 자동 반영
8. CI/CD + 성능 자동화 요약
단계 도구 역할
| ① 코드 푸시 | GitHub Actions | Lighthouse 자동 점검 |
| ② 배포 | Vercel / AWS | 빌드 및 배포 |
| ③ 사용자 데이터 수집 | Web Vitals | LCP/FID/CLS 실시간 수집 |
| ④ 오류 모니터링 | Sentry | JS, 네트워크, 렌더링 에러 감지 |
| ⑤ 알림 & 리포트 | Slack / Notion / Email | 자동 보고 |
✅ 이 시스템을 구축하면,
개발자가 코드를 수정해도 성능 저하가 즉시 감지되고
원인 추적까지 자동화된다.
9. 확장 전략 — 성능 기준선 자동 비교
매 배포마다 Lighthouse 점수를 저장해두고,
이전 버전 대비 변화를 시각화할 수도 있다.
const prev = JSON.parse(fs.readFileSync('./prev-report.json'));
const current = JSON.parse(fs.readFileSync('./current-report.json'));
if (current.performance < prev.performance - 5) {
slack.chat.postMessage({
channel: "#performance",
text: `⚠️ 성능 저하 감지: ${prev.performance} → ${current.performance}`,
});
}
✅ “배포 후 성능이 떨어졌을 때” 즉시 알림
10. 장점 요약
항목 효과
| 자동 검증 | 배포 시마다 Lighthouse 실행 |
| 실시간 감지 | Web Vitals로 사용자 체감 데이터 추적 |
| 문제 탐지 | Sentry가 느린 요청·에러 실시간 감시 |
| 자동 보고 | Slack/Notion으로 리포트 발송 |
| 지속 개선 | 성능 기준선 자동 비교로 퀄리티 유지 |
11. 마무리
이제 프론트엔드 개발은 “빌드하고 끝나는 일”이 아니다.
배포 이후에도 사용자 경험을 자동으로 측정하고,
문제를 즉시 감지·보고·개선하는 순환 시스템을 만들어야 한다.
“좋은 성능은 한 번의 최적화가 아니라,
반복 가능한 프로세스에서 나온다.”
이 구조를 도입하면,
작은 스타트업부터 대형 서비스까지
모든 배포가 “품질 보장된 자동화 사이클” 안에서 이루어진다.