game-fe-agent/skills/verify-perf/SKILL.md

name, description

name	description
verify-perf	Nuxt 프로젝트의 성능 병목을 분석하고 Core Web Vitals 기준으로 코드 스플리팅, 이미지 최적화, SSR/ISR 전략 등 구체적인 개선 방안을 제시합니다. 다음 상황에서 반드시 사용하세요: - "성능 최적화해줘", "Lighthouse 점수 올려줘" - "LCP가 느린데 어떻게 해?", "번들 사이즈 줄여줘" - Core Web Vitals 기준 미달 시 개선 방향이 필요할 때

성능 최적화 분석 (verify-perf)

Nuxt 프로젝트 → 성능 병목 자동 분석 → Core Web Vitals 개선 가이드 생성.

언제 사용하는가

• 배포 전 성능 기준(LCP < 2.5s / CLS < 0.1 / INP < 200ms) 충족 여부 확인 시
• Lighthouse 점수 80+ 달성을 위한 구체적 액션이 필요할 때
• 번들 사이즈 증가, 이미지 로딩 지연 등 특정 성능 문제가 있을 때

Core Web Vitals 목표

지표	목표	기준
LCP (Largest Contentful Paint)	< 2.5s	가장 큰 콘텐츠 렌더링
CLS (Cumulative Layout Shift)	< 0.1	레이아웃 안정성
INP (Interaction to Next Paint)	< 200ms	입력 반응성
FCP (First Contentful Paint)	< 1.8s	첫 콘텐츠 노출

---

작업 순서

Phase 1: 코드 분석

1. 아래 파일을 읽어 성능 관련 설정을 파악한다.

   • nuxt.config.ts: 이미지 모듈, SSR 설정, 번들러 옵션
   • pages/ 및 components/: 이미지 태그, 폰트 로딩, 라이브러리 import
   • package.json: 번들 크기 영향이 큰 패키지 확인

2. 일반적인 병목 패턴을 체크한다.

   번들 크기

   • import * from '...' (tree-shaking 비활성화)
   • 전체 import 라이브러리 (lodash, moment 등)
   • 대형 아이콘 라이브러리 전체 import

   이미지

   • <img> 직접 사용 (Nuxt <NuxtImg> 미사용)
   • width, height 미지정 (CLS 발생)
   • 레이지 로딩 미적용

   렌더링 전략

   • 정적 콘텐츠에 useFetch 남용
   • 불필요한 CSR 컴포넌트

Phase 2: 개선 방안 생성

이미지 최적화

<!-- Before -->
<img src="/hero.jpg" alt="히어로" />

<!-- After: Nuxt Image 모듈 활용 -->
<NuxtImg
  src="/hero.jpg"
  alt="히어로"
  width="1200"
  height="600"
  loading="lazy"
  format="webp"
/>

번들 최적화

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue', 'pinia'],
          }
        }
      }
    }
  }
})

SSR / SSG / ISR 전략

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // 정적 홈
    '/products/**': { swr: 3600 },     // ISR: 1시간 캐시
    '/dashboard/**': { ssr: false },   // CSR: 인증 필요 페이지
  }
})

컴포넌트 지연 로딩

<!-- 무거운 컴포넌트 lazy 로딩 -->
<LazyHeavyChart v-if="isVisible" />

Phase 3: 우선순위 정렬

발견된 개선사항을 impact/effort 매트릭스로 정렬한다:

• 🔴 High impact, Low effort → 즉시 적용
• 🟡 High impact, High effort → 스프린트 계획
• 🟢 Low impact, Low effort → 여유 있을 때
• ⚪ Low impact, High effort → 보류

---

출력 형식

## 성능 분석 리포트

### 현황 추정
- 예상 LCP: ~ (분석된 병목 기준)
- 주요 이슈: [번들 사이즈 | 이미지 | 렌더링 전략]

### 🔴 즉시 적용 (High impact, Low effort)
1. [문제] → [해결책 + 코드]

### 🟡 스프린트 계획 (High impact, High effort)
1. [문제] → [해결 방향]

### 예상 개선 효과
- LCP: Xs → Xs
- 번들: XkB → XkB (XX% 감소)