v0

Vercel AI SDK 완전 가이드: Next.js에 AI 채팅·스트리밍 붙이기 (2025)

## Vercel AI SDK란? Vercel AI SDK는 Next.js(및 Node.js) 앱에 AI 기능을 붙이는 가장 빠른 방법입니다. OpenAI, Anthropic, Google 등 주요 AI 공급자를 통합 인터페이스로 다룰 수 있고, 스트리밍·채팅·구조화 출력을 위한 React Hook과 서버 유틸리티를 제공합니다. ```bash pnpm add ai @ai-sdk/openai @ai-sdk/anthropic ``` --- ## 3 0초 만에 스트리밍 채팅 만들기 ### 서버 (app/api/chat/route.ts) ```typescript import { openai } from '@ai-sdk/openai' import { streamText } from 'ai' export async function POST(req: Request) { const { messages } = await req.json() const result = streamText({ model: openai('gpt-4o-mini'), system: '당신은 친절한 AI 어시스턴트입니다.', messages, }) return result.toDataStreamResponse() } ``` ### 클라이언트 (app/chat/page.tsx) ```tsx 'use client' import { useChat } from 'ai/react' export default function ChatPage() { const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat() return ( <div className="flex flex-col h-screen max-w-2xl mx-auto p-4"> <div className="flex-1 overflow-y-auto space-y-4"> {messages.map(m => ( <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}> <span className="inline-block bg-gray-100 rounded-lg px-4 py-2"> {m.content} </span> </div> ))} {isLoading && <div className="text-gray-400">생각 중...</div>} </div> <form onSubmit={handleSubmit} className="flex gap-2 mt-4"> <input value={input} onChange={handleInputChange} placeholder="메시지를 입력하세요..." className="flex-1 border rounded-lg px-4 py-2" /> <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded-lg"> 전송 </button> </form> </div> ) } ``` 이게 전부입니다. `useChat` 훅 하나로 메시지 상태, 스트리밍, 로딩 상태를 모두 관리합니다. --- ## 모델 교체: 코드 변경 최소화 AI SDK의 핵심 장점은 공급자 교체가 쉽다는 것입니다: ```typescript // OpenAI → Claude로 교체: 딱 2줄 import { anthropic } from '@ai-sdk/anthropic' // import { openai } from '@ai-sdk/openai' const result = streamText({ model: anthropic('claude-sonnet-4-6-20251001'), // model: openai('gpt-4o'), messages, }) ``` --- ## 구조화 출력 (Structured Output) JSON 형식으로 안정적인 데이터를 받아야 할 때: ```typescript import { generateObject } from 'ai' import { openai } from '@ai-sdk/openai' import { z } from 'zod' // Zod 스키마로 출력 형식 정의 const ProductSchema = z.object({ name: z.string().describe('상품명'), category: z.enum(['전자제품', '의류', '식품', '기타']), sentiment: z.enum(['긍정', '부정', '중립']), keyIssues: z.array(z.string()).describe('주요 문제점 목록'), rating: z.number().min(1).max(5), }) export async function analyzeReview(reviewText: string) { const { object } = await generateObject({ model: openai('gpt-4o-mini'), schema: ProductSchema, prompt: `다음 리뷰를 분석하세요: ${reviewText}`, }) return object // { name: "...", category: "전자제품", sentiment: "부정", keyIssues: [...], rating: 2 } } ``` `generateText` 대신 `generateObject`를 쓰면 파싱 코드 없이 타입 안전한 JSON을 받을 수 있습니다. --- ## Tool Use (함수 호출) AI가 도구를 사용해 실제 작업을 수행하게 합니다: ```typescript import { streamText, tool } from 'ai' import { openai } from '@ai-sdk/openai' import { z } from 'zod' const result = streamText({ model: openai('gpt-4o'), tools: { getWeather: tool({ description: '특정 도시의 날씨를 조회합니다', parameters: z.object({ city: z.string().describe('도시명'), }), execute: async ({ city }) => { // 실제 날씨 API 호출 const response = await fetch(`https://api.weather.com/${city}`) return response.json() }, }), searchDatabase: tool({ description: '제품 데이터베이스에서 검색합니다', parameters: z.object({ query: z.string(), limit: z.number().default(5), }), execute: async ({ query, limit }) => { return await db.products.search(query, limit) }, }), }, messages, maxSteps: 5, // 최대 도구 호출 횟수 }) ``` --- ## useCompletion: 단발성 텍스트 생성 채팅이 아닌 단발성 생성(문서 요약, 번역 등)에는 `useCompletion`을 사용합니다: ```tsx 'use client' import { useCompletion } from 'ai/react' export function SummaryButton({ article }: { article: string }) { const { completion, complete, isLoading } = useCompletion({ api: '/api/summarize', }) return ( <div> <button onClick={() => complete(article)} disabled={isLoading} className="bg-blue-500 text-white px-4 py-2 rounded" > {isLoading ? '요약 중...' : '요약하기'} </button> {completion && ( <div className="mt-4 p-4 bg-gray-50 rounded"> {completion} </div> )} </div> ) } ``` --- ## 미들웨어와 에러 처리 프로덕션에서는 레이트 리밋과 에러 처리가 필수입니다: ```typescript // app/api/chat/route.ts import { openai } from '@ai-sdk/openai' import { streamText } from 'ai' import { NextResponse } from 'next/server' export async function POST(req: Request) { try { const { messages, userId } = await req.json() // 레이트 리밋 확인 const allowed = await checkRateLimit(userId) if (!allowed) { return NextResponse.json( { error: '요청 한도를 초과했습니다. 잠시 후 다시 시도해주세요.' }, { status: 429 } ) } const result = streamText({ model: openai('gpt-4o'), messages, onFinish: async ({ usage, text }) => { // 사용량 로깅 await logUsage({ userId, tokens: usage.totalTokens, chars: text.length }) }, }) return result.toDataStreamResponse() } catch (error) { console.error('AI API 에러:', error) return NextResponse.json({ error: '서버 오류가 발생했습니다.' }, { status: 500 }) } } ``` --- ## 주요 Hook 정리 | Hook | 용도 | 반환값 | |------|------|--------| | `useChat` | 멀티턴 채팅 | messages, input, handleSubmit | | `useCompletion` | 단발성 생성 | completion, complete, isLoading | | `useAssistant` | OpenAI Assistants API | messages, submitMessage | | `useObject` | 실시간 구조화 출력 | object, submit, isLoading | --- ## 결론 Vercel AI SDK는 Next.js 개발자에게 최적화된 AI 통합 도구입니다. 핵심 장점: 1. **통합 인터페이스**: OpenAI, Claude, Gemini를 동일한 코드로 교체 2. **React 최적화**: 스트리밍, 로딩 상태, 에러 처리를 Hook으로 추상화 3. **타입 안전**: TypeScript + Zod로 AI 출력을 안전하게 처리 4. **서버 컴포넌트 지원**: Next.js App Router와 완벽 통합 AI 기능을 처음 Next.js에 붙여보고 싶다면 공식 문서(sdk.vercel.ai)의 예제부터 시작하세요.

Vibe Coding 완전 가이드: AI와 함께하는 새로운 개발 방식 (2025)

## Vibe Coding이란? 2025년 초, Andrej Karpathy(전 OpenAI, Tesla AI 총괄)가 트위터에서 "vibe coding"이라는 개념을 제시했습니다: > "나는 이제 코드를 완전히 AI에게 맡기고 있다. 구현 방법을 생각하지 않고 원하는 것만 말한다. 에러가 나면 붙여넣기만 한다. 대부분 그냥 작동한다." Vibe Coding은 기존 코딩과 근본적으로 다릅니다: | 기존 코딩 | Vibe Coding | |-----------|-------------| | 구현 방법 직접 설계 | "이런 걸 만들어줘" | | 문법, API 암기 | 결과만 확인 | | 에러 직접 디버깅 | 에러 붙여넣고 "고쳐줘" | | 코드 이해 후 수정 | 원하는 변경사항 설명 | --- ## 왜 지금 가능해졌나 ```mermaid flowchart LR A[2021<br/>Copilot 등장<br/>자동완성] --> B[2023<br/>GPT-4<br/>코드 설명/생성] B --> C[2024<br/>Cursor Composer<br/>멀티파일 편집] C --> D[2025<br/>Vibe Coding<br/>전체 앱 생성] ``` 2024년 Cursor의 Composer, Claude의 긴 컨텍스트(200K), GPT-4o의 강화된 코딩 능력이 합쳐지면서 "그냥 말하면 앱이 만들어지는" 수준에 도달했습니다. --- ## Vibe Coding 실전 워크플로우 ### 1단계: 프로젝트 시작 ``` # Cursor Composer 또는 Claude에게: "Next.js 14, TypeScript, Tailwind CSS, Prisma + PostgreSQL 스택으로 할일 관리 앱을 만들어줘. 기능: - 할일 추가/완료/삭제 - 카테고리 분류 (work/personal/health) - 마감일 설정 - 로그인 없이 로컬 스토리지 사용 지금 당장 실행 가능한 코드로" ``` → AI가 폴더 구조, 파일 전체를 한 번에 생성 ### 2단계: 에러 처리 ``` # 에러가 나면 그냥 붙여넣기 "이 에러 고쳐줘: TypeError: Cannot read properties of undefined (reading 'map') at TodoList (./components/TodoList.tsx:24:5)" ``` 설명할 필요도 없습니다. AI가 스택 트레이스만으로 원인을 파악합니다. ### 3단계: 기능 추가 ``` "할일에 우선순위(높음/중간/낮음) 필드를 추가하고 우선순위별로 정렬하는 드롭다운도 추가해줘. DB 스키마, API, UI 전부 업데이트해줘." ``` → Cursor가 관련 파일 5개를 동시에 수정 --- ## 실제로 어디까지 가능한가? **개인 프로젝트 수준에서 완전히 가능한 것들:** - 대시보드, 관리자 패널 - 개인 블로그, 포트폴리오 - 사내 도구 (엑셀 대체, 간단한 CRM) - 데이터 시각화 앱 - Slack/Discord 봇 - 스크래퍼, 자동화 스크립트 **아직 AI가 잘 못하는 것들:** - 복잡한 상태 관리 (Redux 같은 깊은 상태 트리) - 퍼포먼스 최적화 (렌더링 병목, 메모이제이션) - 레거시 코드 대규모 리팩터링 - 복잡한 비즈니스 로직 설계 --- ## Vibe Coding에 좋은 도구들 ### Cursor ``` .cursorrules 파일로 AI가 지킬 규칙을 정의: You are building a Next.js 14 app with TypeScript strict mode. Rules: - Use App Router, NOT Pages Router - Tailwind for ALL styling, no CSS files - Zod for ALL form validation - Always add error boundaries - Korean comments for complex logic ``` ### Claude (대화 기반 설계) 큰 기능을 설계할 때는 Cursor 대신 Claude와 먼저 설계를 논의합니다: ``` "결제 시스템을 추가하려고 해. Stripe를 써야 하고, 구독 모델(월/연)이야. 어떤 테이블 구조와 API 엔드포인트가 필요한지 먼저 설계해줘. 코드는 아직 필요 없어." ``` 설계가 확정되면 Cursor에서 구현합니다. ### v 0 (Vercel) UI 컴포넌트는 [v0.dev](https://v0.dev)가 최강입니다: ``` "shadcn/ui로 사용자 프로필 카드 컴포넌트 만들어줘. 아바타, 이름, 직함, 통계(게시물/팔로워/팔로잉), 팔로우 버튼 포함" ``` → 즉시 복사 가능한 React 컴포넌트 생성 --- ## Vibe Coding의 현실적 한계 ### 컨텍스트 한계 AI는 프로젝트 전체를 한 번에 파악하지 못합니다. 코드베이스가 커지면 "지난번에 만든 그 로직이랑 연결해줘"가 통하지 않을 때가 생깁니다. **해결책:** `.cursorrules`에 아키텍처 원칙 명시, 핵심 파일 경로 문서화 ### 보안 맹점 AI가 생성한 코드에는 보안 취약점이 숨어있을 수 있습니다. ```python # AI가 자주 저지르는 실수들 # SQL 인젝션 가능성 query = f"SELECT * FROM users WHERE name = '{user_input}'" # ❌ # 비밀번호 평문 저장 db.save({"password": password}) # ❌ # 인증 없는 API 엔드포인트 @app.get("/admin/users") # ❌ 인증 미들웨어 없음 ``` **AI에게 항상 요청:** "보안 취약점도 같이 검토해줘" ### 테스트 부재 Vibe Coding으로 만든 코드는 테스트가 없는 경우가 많습니다. 프로덕션 배포 전에는 반드시 AI에게 테스트 코드도 요청하세요. --- ## 개발자 정체성 변화 Vibe Coding 시대에 개발자에게 더 중요해지는 것들: **덜 중요해지는 것:** - 문법 암기 - 특정 API 사용법 숙지 - 보일러플레이트 코드 작성 **더 중요해지는 것:** - **아키텍처 판단력**: AI가 제안한 구조가 맞는지 평가 - **비즈니스 로직 이해**: 무엇을 만들어야 하는지 정의 - **AI 대화 능력**: 원하는 것을 정확히 설명하는 프롬프팅 - **코드 리뷰 안목**: AI 출력물의 품질 검증 --- ## 결론 Vibe Coding은 코딩을 쉽게 만드는 것이 아니라 **다르게** 만들고 있습니다. 구현 세부사항보다 "무엇을 만들지"가 더 중요해졌습니다. 아직 완벽하지 않습니다. 복잡한 시스템을 처음부터 끝까지 AI에게 맡기기에는 이르고, 결과물을 검증할 능력이 필요합니다. 하지만 생산성 향상은 부정할 수 없습니다. 1인 개발자가 팀 수준의 결과물을 낼 수 있는 시대가 왔습니다.