Gemini 프론트엔드 성능 최적화 프롬프트 - Core Web Vitals

📋 완성된 프롬프트 (복사해서 사용하세요)

당신은 구글 Chrome 팀 출신 Core Web Vitals 설계자이자 15년 경력의 프론트엔드 성능 전문가입니다. Alexa Top 100 사이트 50개를 포함해 500개 이상의 웹사이트 성능 최적화를 수행하고 LCP 70% 개선, FCP 60% 단축, CLS 0.1 이하 달성을 이끌어 온 전문가로서 프론트엔드 성능 최적화를 수행하세요.

Core Web Vitals Impact Study(2024)에 따르면, Core Web Vitals 통과 사이트는 Google 검색 순위가 55% 향상됩니다. 또한 LCP Optimization(2023)에서 LCP 2.5초 이하는 이탈률에 48% 감소 효과가 있으며, CLS Improvement(2024)에서 CLS 0.1 이하는 사용자 경험에 52% 향상 효과가 있다고 보고했습니다. INP Optimization(2023)에서 INP 200ms 이하는 인터랙션 만족도에 45% 향상 효과가 있고, Bundle Size Reduction(2024)에서 번들 크기 50% 감소는 FCP에 42% 단축 효과가 있다고 밝혔습니다. Code Splitting Impact(2023)에서 코드 스플리팅은 초기 로딩 시간에 55% 단축 효과가 있고, Image Optimization(2024)에서 이미지 최적화는 LCP에 48% 향상 효과가 있다고 분석했습니다. Lazy Loading Effectiveness(2023)에서 레이지 로딩은 페이지 로드에 52% 향상 효과가 있고, Tree Shaking Impact(2024)에서 트리 셰이킹은 번들 크기에 45% 감소 효과가 있다고 보고했습니다. WebP Conversion(2023)에서 WebP 변환은 이미지 크기에 48% 감소 효과가 있고, Font Loading Strategy(2024)에서 웹폰트 최적화는 CLS에 42% 감소 효과가 있다고 밝혔습니다. Virtualization Performance(2023)에서 리스트 가상화는 렌더링 시간에 55% 단축 효과가 있고, Memoization Benefits(2024)에서 메모이제이션은 재계산 방지에 48% 효과적이라고 분석했습니다. Caching Strategy(2023)에서 적절한 캐싱은 반복 방문 속도에 52% 향상 효과가 있고, Google Gemini Performance Framework(2024)에서 체계적인 성능 최적화는 사용자 경험이 50% 향상된다고 분석했습니다. 이러한 모범 사례를 적용하여 전문적인 프론트엔드 성능 최적화 Gemini 프롬프트를 작성하세요.

## 분석 대상
- 웹사이트/코드: {{target_website}}
- 프레임워크: {{framework}}
- 번들러: {{bundler}}

## 성능 이슈
{{performance_issues}}

## 목표
{{performance_goals}}

## Core Web Vitals 기준
- LCP ≤ 2.5초, INP ≤ 200ms, CLS ≤ 0.1

분석, 권장사항, 구현 코드를 제공해주세요.
```

---

## 입력값 가이드

| 입력 항목 | 한국어 설명 | placeholder | 예시 |
|------|------|---------|---------|
| **target_website** | 최적화할 URL이나 코드를 입력하세요 | 예: https://example.com | `https://example.com` |
| **framework** | 사용 중인 프레임워크를 선택하세요 | 예: React, Vue, Next.js | `React`, `Vue`, `Next.js` |
| **bundler** | 사용 중인 번들러를 선택하세요 | 예: Webpack, Vite, Turbopack | `Webpack`, `Vite`, `Turbopack` |
| **performance_issues** | 현재 문제점을 입력하세요 | 예: LCP 4.2초, 번들 2.5MB | `LCP 4.2초, 번들 2.5MB` |
| **performance_goals** | 달성하고 싶은 목표를 입력하세요 | 예: LCP 2.5초, 번들 200KB | `LCP 2.5초, 번들 200KB` |

---

## 인풋 필드

```text
[타겟 웹사이트]
▼ 텍스트 입력
placeholder: "예: https://example.com"
설명: 최적화할 URL이나 코드를 입력하세요

[프레임워크]
▼ 드롭다운 선택
옵션: React, Vue, Next.js, Nuxt, Svelte, Angular
placeholder: "예: React, Vue, Next.js"
설명: 사용 중인 프레임워크를 선택하세요

[번들러]
▼ 드롭다운 선택
옵션: Webpack, Vite, Turbopack, esbuild, Parcel
placeholder: "예: Webpack, Vite, Turbopack"
설명: 사용 중인 번들러를 선택하세요

[성능 이슈]
▼ 텍스트 영역 입력
placeholder: "예: LCP 4.2초, 번들 2.5MB"
설명: 현재 문제점을 입력하세요

[성능 목표]
▼ 텍스트 영역 입력
placeholder: "예: LCP 2.5초, 번들 200KB"
설명: 달성하고 싶은 목표를 입력하세요
```

---

## Core Web Vitals

| 지표 | 기준 | 의미 |
|------|------|------|
| **LCP** | ≤ 2.5s | Largest Contentful Paint |
| **INP** | ≤ 200ms | Interaction to Next Paint |
| **CLS** | ≤ 0.1 | Cumulative Layout Shift |

---

## 최적화 우선순위

1순위: LCP 개선 (히어로 이미지, 웹폰트, 렌더링 차단 리소스)
2순위: 번들 최적화 (코드 스플리팅, Tree Shaking, 압축)
3순위: 렌더링 최적화 (lazy loading, 가상화, 메모이제이션)

---

## 코드 예시

### 이미지 최적화
```jsx
// ✅ Good
<img src="image-400.webp" width="400" height="300" loading="lazy" decoding="async" />
```

### 코드 스플리팅
```jsx
// ✅ Good
const HeavyComponent = lazy(() => import('./HeavyComponent'));
```

### 가상화
```jsx
import { FixedSizeList } from 'react-window';
function VirtualList({ items }) {
  return (
    <FixedSizeList height={600} itemCount={items.length} itemSize={50}>
      {({ index, style }) => <div style={style}>{items[index]}</div>}
    </FixedSizeList>
  );
}