VIBE MASTER 부록 — 성능·비용 최적화 (AI API 30~70% 절감)

§1. AI API 비용 절감 — 7가지 합쳐 70% 절감

월 $300 → $90 가능. 단 한 가지 패턴(프롬프트 캐싱)이 절반

프롬프트 캐싱

시스템·문서 자동 캐시

-90%

모델 라우팅

단순 작업은 haiku로

-80%

Batch API

비실시간 작업 묶기

-50%

컨텍스트 압축

긴 대화 요약 후 재시작

-40%

한국어→영어

프롬프트만 영어, 응답 한글

-60%

스트리밍 + 조기 중단

사용자 닫으면 즉시 cancel

-30%

RAG로 컨텍스트 분리

매번 첨부 X, 필요할 때만

-50%

🎯 실전 — 합쳐서 70% 절감

각각 30~90% 절감이지만 중복 적용 시 단순 합산 X. 현실적 합산 = 약 70% 절감 (월 $300 → $90 수준). 가장 ROI 큰 셋: ① 프롬프트 캐싱 ② 모델 라우팅 ③ 한국어→영어.

§2. 프롬프트 캐싱 — 가장 큰 절감

시스템 prompt + 첨부 문서를 캐시 → 반복 호출 시 90% 비용 절감

Anthropic의 Prompt Caching은 cache_control 마커를 추가하면 자동 동작. 같은 시스템 prompt·문서를 반복해서 보낼 때 5분 동안 90% 할인 (cached 토큰 $0.30/M, 일반 $3/M).

api/chat.js — Prompt Caching 적용 Anthropic SDK

// 기존 — 매번 system 전체 다시 보냄 const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', system: longSystemPrompt, // 매번 5,000 토큰 청구 messages: [{ role: 'user', content: query }] }); // 개선 — system을 cache로 마킹 const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', system: [ { type: 'text', text: longSystemPrompt, cache_control: { type: 'ephemeral' } // 5분 캐시 } ], messages: [{ role: 'user', content: query }] }); // 첫 호출: 5,000 토큰 청구 (cache write 25% 추가) // 두 번째 호출 (5분 내): 5,000 토큰 → 500 토큰 청구 (90% 할인!)

💰 실전 효과

VIBE MASTER AI 튜터 예시: 시스템 prompt 약 600토큰. 사용자 100명이 평균 5질문 = 500회 호출.
캐싱 X: 600 × 500 = 30만 토큰 × $3/M = $0.90
캐싱 O: 600(첫) + 60×499(캐시) = 6만 토큰 × ~$0.30/M = $0.018 (98% 절감)

§3. 모델 라우팅 — 작업별 다른 모델

"하나로 다" 안 됨. 5배 비싼 opus를 단순 작업에 쓰는 건 낭비

claude-haiku-4-5

$1 / $5 per M

적합:
• 단순 분류 / 추출
• 짧은 응답 생성
• Webhook 검증 보조
• 자동 응답 분류
• 토큰 카운팅

claude-sonnet-4 ★

$3 / $15 per M

적합 (기본값):
• 코드 작성
• 복잡한 추론
• RAG 응답
• 콘텐츠 작성
• 대부분 이걸로 충분

claude-opus-4-7

$15 / $75 per M

적합 (드물게):
• 큰 시스템 설계
• 깊은 디버깅
• 어려운 문제 해결
• sonnet으로 안 되면

api/chat.js — 작업별 모델 라우팅 Router

// 사용자 query 분석 → 모델 선택 function selectModel(query, taskType) { // 단순 작업 → haiku (5배 저렴) if (taskType === 'classify' || query.length < 100) { return 'claude-haiku-4-5-20251001'; } // 복잡한 추론 → opus (드물게) if (taskType === 'deep-debug' || query.includes('복잡한')) { return 'claude-opus-4-7'; } // 기본값 — sonnet return 'claude-sonnet-4-20250514'; } // 또는 Vercel AI Gateway로 자동 라우팅 // (단순 fallback·로드밸런싱·비용 추적)

💡 통계 — VIBE MASTER 자체 측정

9 Stage AI 튜터 응답 100개 분석:
• 단순 (정의·예시): 35% → haiku로 충분
• 보통 (가이드·코드): 55% → sonnet (기본값)
• 복잡 (전체 설계): 10% → opus

모두 sonnet으로 처리 vs 라우팅: 비용 50% 절감

§4. Core Web Vitals — Lighthouse 90+ 만들기

SEO 점수에 직접 반영. Vercel은 절반 자동, 나머지 절반은 우리가

LCP

최대 콘텐츠 로딩

✅ < 2.5초
⚠️ 2.5~4초
❌ > 4초

INP

상호작용 응답 (FID 후속)

✅ < 200ms
⚠️ 200~500ms
❌ > 500ms

CLS

레이아웃 시프트

✅ < 0.1
⚠️ 0.1~0.25
❌ > 0.25

🚀 Lighthouse 90+ 7가지 액션

1. Next.js Image 컴포넌트 사용 (자동 WebP·lazy load)
2. 폰트 next/font로 (FOUT 방지·preload)
3. 큰 컴포넌트 dynamic import
4. Server Component 우선 (Client는 정말 필요할 때만)
5. 이미지 width·height 명시 (CLS 방지)
6. 외부 스크립트 next/script + strategy="lazyOnload"
7. CSS는 critical만 inline + 나머지 lazy

§5. Supabase DB 성능 — 인덱스 + 쿼리 최적화

사용자 100명까지 자동, 1,000명 넘으면 인덱스 필수

자주 쓰는 인덱스 패턴 SQL

-- 1. 자주 쓰는 WHERE 컬럼 단일 인덱스 CREATE INDEX idx_subs_user_id ON subscriptions(user_id); CREATE INDEX idx_subs_status ON subscriptions(status); -- 2. 복합 인덱스 (자주 쓰는 WHERE 조합) -- "활성 구독자 조회" 매일 cron 실행 → 핵심 CREATE INDEX idx_subs_active ON subscriptions(status, next_billing) WHERE status = 'active'; -- partial index, 더 작고 빠름 -- 3. 시간 기반 쿼리 인덱스 (BRIN) -- send_logs 같은 append-only 큰 테이블 CREATE INDEX idx_logs_sent_at ON send_logs USING brin(sent_at); -- 4. JSON 컬럼 인덱스 (GIN) -- topics 같은 배열·jsonb 컬럼 검색 CREATE INDEX idx_subs_topics ON subscriptions USING gin(topics); -- 5. 쿼리 EXPLAIN으로 인덱스 사용 확인 EXPLAIN ANALYZE SELECT * FROM subscriptions WHERE status = 'active' AND next_billing < NOW(); -- "Seq Scan" 보이면 인덱스 안 탐. "Index Scan" 정상

📊 인덱스 ROI

1만 row: 인덱스 X도 빠름 (10ms 이내)
10만 row: Seq Scan 100ms+ → Index Scan 1ms (100배 차이)
100만 row+: 인덱스 없으면 사이트 다운 위험

"인덱스 미리 만들기"가 거의 항상 정답 — 디스크 비용은 매우 저렴.

§6. 3층 캐싱 — 브라우저 / CDN / 서버

층	도구	대상	TTL 추천
1. 브라우저	HTTP Cache-Control 헤더	정적 자산 (JS·CSS·이미지)	1년 (immutable)
2. CDN	Vercel Edge Cache	SSG·ISR 페이지·이미지	1시간 ~ 1일
3. 서버	Vercel KV / Upstash Redis	API 응답·세션·rate limit	1분 ~ 1시간
4. DB	Supabase 자동 (PostgreSQL)	쿼리 plan·인덱스	자동

Next.js — Cache Components 패턴 (App Router) 2026 표준

// app/page.tsx export const revalidate = 3600; // 1시간 ISR async function getNewsletterCount() { 'use cache'; // Cache Components (Next 16+) return supabase.from('subscriptions').select('*', { count: 'exact' }); } // API endpoint 캐싱 — 1분 fresh + 5분 stale-while-revalidate return new Response(data, { headers: { 'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300' } });

§7. 비용 모니터링 — 매주 30분

"어디서 새는지 모르면 못 막음" — 정기 점검 의식

Anthropic Console → Usage — 모델별·일별 비용 그래프

Spend Limit 설정 — 월 $100 등 절대 한도. 넘으면 자동 차단

Vercel Analytics — Core Web Vitals 자동 측정

Supabase Dashboard → Reports — DB 사이즈·쿼리 시간·연결 수

Sentry Performance — API endpoint별 응답 시간 분포

n8n Workflow Executions — 실패율·평균 시간 로그

토스페이먼츠 콘솔 — 결제 성공률·평균 처리 시간

📅 주간 30분 의식 (매주 월요일 09:00)

Stage 7 워크플로우에 자동화: PostHog + Anthropic + Supabase 통계 조회 → Claude로 분석 → 텔레그램 자동 리포트. "Anthropic 비용이 지난주 대비 +50%" 같은 알림이 자동.