📝 docs: 여러 문서 및 파일 삭제

2026-05-21 21:56:04 +09:00
parent 607ef1a435
commit 8876998acd
51 changed files with 7076 additions and 3085 deletions
--- a/.claude/skills/verify-perf/SKILL.md
+++ b/.claude/skills/verify-perf/SKILL.md
@@ -0,0 +1,141 @@
+---
+name: verify-perf
+description: |
+  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: 개선 방안 생성
+
+#### 이미지 최적화
+```vue
+<!-- Before -->
+<img src="/hero.jpg" alt="히어로" />
+
+<!-- After: Nuxt Image 모듈 활용 -->
+<NuxtImg
+  src="/hero.jpg"
+  alt="히어로"
+  width="1200"
+  height="600"
+  loading="lazy"
+  format="webp"
+/>
+```
+
+#### 번들 최적화
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  vite: {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vendor: ['vue', 'pinia'],
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+#### SSR / SSG / ISR 전략
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  routeRules: {
+    '/': { prerender: true },          // 정적 홈
+    '/products/**': { swr: 3600 },     // ISR: 1시간 캐시
+    '/dashboard/**': { ssr: false },   // CSR: 인증 필요 페이지
+  }
+})
+```
+
+#### 컴포넌트 지연 로딩
+```vue
+<!-- 무거운 컴포넌트 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% 감소)
+```