바이브코딩, 왜 WebP를 디폴트로 설정해야 하는가

AI가 생성한 코드는 기본적으로 PNG를 쓴다. 그 한 줄의 습관이 LCP를 망친다.

바이브코딩이 이미지를 잊는 이유

바이브코딩의 흐름은 빠르다. 아이디어 → 프롬프트 → 배포까지 몇 시간이면 끝난다. 하지만 그 속도가 만드는 맹점이 하나 있다. 이미지 포맷이다.

Claude, Cursor, Bolt, v0 같은 AI 코드 생성 도구가 뱉는 이미지 관련 코드는 대부분 이렇게 생겼다:

// AI 생성 기본값 — 포맷 설정 없음
import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero.png"    // ← PNG 하드코딩
      alt="hero"
      width={1200}
      height={630}
    />
  )
}

포맷을 명시하지 않으면 업로드된 원본 파일 그대로 서빙된다. 빠른 프로토타이핑 단계에서 Figma에서 뽑은 PNG를 그냥 넣는 경우가 대부분이다. 그 PNG가 프로덕션까지 그대로 올라간다.

WebP가 실제로 얼마나 가벼운가

숫자로 보는 것이 빠르다. Google이 공개한 WebP 인코딩 비교 데이터 기준이다.

브라우저 지원도 더 이상 문제가 아니다. 2025년 기준 전 세계 브라우저의 97% 이상이 WebP를 지원한다. IE를 지원하지 않는 프로젝트라면 폴백 없이 WebP만 써도 된다.

Core Web Vitals와 직결되는 이유

Google은 LCP(Largest Contentful Paint)를 Core Web Vitals의 핵심 지표로 삼는다. LCP는 뷰포트에서 가장 큰 콘텐츠 요소가 렌더링되는 시간이다. 대부분의 경우 그 요소는 히어로 이미지다.

• 🟢
  LCP 2.5초 이하 — Good

  WebP 최적화 + CDN 캐싱 설정 시 달성 가능한 구간. Google 검색 순위에 긍정적으로 작용한다.
• 🟡
  LCP 2.5~4초 — Needs Improvement

  PNG 히어로 이미지를 CDN 없이 서빙하면 자주 도달하는 구간. 바이브코딩 초기 배포의 전형적인 상태다.
• 🔴
  LCP 4초 이상 — Poor

  대형 비압축 PNG + 느린 원서버 + 모바일 환경이 겹치면 쉽게 도달한다. 이탈률이 급등하는 구간이다.

이미지 포맷 하나로 LCP 구간이 달라진다. WebP로 이미지 크기가 30% 줄면 네트워크 전송 시간이 그만큼 줄고, LCP가 직접적으로 개선된다. 바이브코딩으로 랜딩 페이지를 만들고 광고를 붙이는 시나리오에서 LCP는 전환율에 직결된다.

프레임워크별 WebP 디폴트 설정 — 3줄 레시피

바이브코딩 환경에서 자주 쓰는 스택 기준으로 WebP를 디폴트로 강제하는 설정을 정리했다.

Next.js — next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/webp'],   // ← WebP 우선 출력
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    minimumCacheTTL: 60,          // ← 캐시 TTL (초)
  },
}

module.exports = nextConfig

Next.js의 next/image는 이 설정만으로 업로드된 원본 이미지를 WebP로 자동 변환해 서빙한다. 소스 파일이 PNG여도 브라우저에는 WebP가 전달된다.

Vite + React — vite-imagetools 또는 빌드 플러그인

import { defineConfig } from 'vite'
import { imagetools } from 'vite-imagetools'

export default defineConfig({
  plugins: [
    imagetools({
      defaultDirectives: new URLSearchParams({
        format: 'webp',        // ← 기본 포맷 강제
        quality: '80',        // ← 품질 설정
      })
    })
  ]
})

Vite 환경에서는 vite-imagetools가 빌드 시 이미지를 WebP로 변환한다. 임포트 구문 한 줄로 적용된다.

// 빌드 시 hero.png → hero.webp로 자동 변환
import heroUrl from './hero.png?format=webp&quality=80'

export default function Hero() {
  return <img src={heroUrl} alt="hero" />
}

Nginx — 정적 파일 서빙 시 WebP 우선 설정

map $http_accept $webp_suffix {
  ""                  "";
  "~*webp"           ".webp";   # Accept 헤더에 webp 포함 시
}

server {
  location ~* \.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
    expires 30d;
  }
}

WebP 파일이 동일 경로에 존재할 경우 브라우저가 지원하면 자동으로 WebP를 서빙한다. cwebp CLI로 사전 변환해두는 방식이다.

바이브코딩 프롬프트에 WebP를 명시하는 방법

설정 파일을 고치는 것보다 더 근본적인 해결책이 있다. 프롬프트 자체에 WebP 요구사항을 박아두는 것이다. AI는 명시된 제약을 잘 따른다.

히어로 섹션 컴포넌트를 
만들어줘. 배경 이미지가 
있고 CTA 버튼이 있어야 해.

히어로 섹션 컴포넌트를 
만들어줘. 이미지는 반드시 
WebP 포맷을 사용하고, 
next/image에 width·height·
priority 속성을 포함해줘.

프롬프트에 WebP를 명시하면 AI가 처음부터 최적화된 코드를 생성한다. 나중에 PNG를 WebP로 바꾸는 리팩터링 비용이 사라진다. IMLAB에서는 프로젝트 CLAUDE.md에 이미지 관련 컨벤션을 명시해 모든 에이전트 세션에 자동 적용되도록 관리한다.

## 이미지 컨벤션

# 포맷
- 모든 정적 이미지는 WebP 포맷 사용
- PNG·JPEG 직접 사용 금지 (변환 후 사용)
- 투명도 필요 시 WebP 무손실 모드 사용

# Next.js 사용 시
- 반드시 next/image 사용 (img 태그 사용 금지)
- width, height 명시 필수
- 히어로 이미지에 priority 속성 추가

# 품질
- 사진 계열: quality=80
- 일러스트·UI: quality=90

FAQ

핵심 요약표