피터 레벨스 —
113개를 만들어 속도로 이기는 법

You are building a complete, production-ready web service. Follow this spec exactly. If a major decision is not covered here, ask me before deciding on your own. # PROJECT: ReRoom AI — an AI interior redesign service (a mini version of InteriorAI.com) ## What it does The user uploads a photo of their room, picks a room type and an interior style, and gets a photorealistic AI-redesigned version of the same room in about 10 seconds. Demo mode allows 2 free generations. BYOK mode (the user brings their own Gemini API key) is unlimited. ## Tech stack — keep it simple - Next.js 14+ (App Router) + TypeScript + Tailwind CSS. One repo, deployable to Vercel as-is. - No database, no login. All state lives in the browser (localStorage). - Exactly one API route: /api/generate. It calls the Google Gemini API server-side only. ## Image generation — exact requirements - Model: gemini-3.1-flash-image-preview (Nano Banana 2), via the official @google/genai SDK. - Each request sends the uploaded photo as inline base64 plus this instruction template: "Redesign this {roomType} interior in {style} style. Keep the room architecture — walls, windows, doors, ceiling and camera perspective — exactly the same. Replace furniture, lighting, color palette and decor to match the target style. Photorealistic interior photography, natural lighting, high detail." - Client-side: resize the image to max 1024px on the longest edge (canvas) before upload. Accept JPG/PNG/WebP up to 10MB. - The server returns the generated image as base64. The client shows generation time in seconds. ## Gemini API call — copy this exact pattern. The SDK is new, so do NOT improvise from older Gemini examples. - Install: npm i @google/genai - The route must run on the Node runtime, not Edge. At the top of /api/generate add: export const runtime = 'nodejs' export const maxDuration = 60 - Server-side call: import { GoogleGenAI } from '@google/genai'; const ai = new GoogleGenAI({ apiKey }); // demo key from env, or the user's BYOK key const res = await ai.models.generateContent({ model: 'gemini-3.1-flash-image-preview', contents: [{ role: 'user', parts: [ { inlineData: { mimeType, data: base64Image } }, { text: instruction } ]}], }); const part = res.candidates?.[0]?.content?.parts?.find(p => p.inlineData); const imageBase64 = part?.inlineData?.data; - If there is no inlineData part in the response, treat it as a blocked or failed generation and return a Korean error message — never return an empty image. - Reject request bodies over ~8MB with a Korean message (the client-side 1024px resize should keep payloads well under this). ## API key modes — BOTH are required 1. DEMO (default): the server uses process.env.GEMINI_API_KEY. Hard limits: 2 generations per browser (localStorage counter) AND 10 per IP per day (in-memory Map on the server). When a limit is hit, show a friendly Korean message that points the user to BYOK mode. 2. BYOK: a toggle labeled "내 API 키로 무제한 사용". The user pastes their own Gemini API key. Store it ONLY in localStorage, send it with each request, use it server-side for that single request — never log it, never store it. Add a link to https://aistudio.google.com/apikey labeled "무료 API 키 발급 (1분)". ## UI — all copy in Korean. Design: clean white and black, Pretendard font, generous whitespace 1. Hero: headline "사진 한 장으로, 우리 집을 다시 디자인하세요" + subtext + CTA button that scrolls to the tool. Include one before/after example. 2. Tool section: - Drag-and-drop upload with preview - Room type chips: 거실 / 침실 / 주방 / 욕실 / 서재 / 원룸 - 8 style cards with emoji: 모던, 미니멀, 북유럽, 인더스트리얼, 재팬디, 미드센추리, 한옥, 호텔 라운지 - Generate button with a loading skeleton and rotating Korean status messages 3. Result: a before/after slider with a draggable handle, a PNG download button, and a "다른 스타일로 다시" button. 4. Footer: "이미지 1장 원가 약 70원 · Nano Banana 2 기준" plus a remaining-free-count badge. ## Quality bar - Mobile responsive. Every error gets a Korean message (rate limit, invalid key, blocked image, network failure). - Show remaining free generations, e.g. "무료 2회 중 1회 남음". - Clean components, Korean code comments, a README with setup + Vercel deploy steps, and a .env.example file. ## Working style Build in this order, and after each step show me how to run and verify it: 1) Scaffold + hero 2) Upload + selectors 3) /api/generate with the demo key 4) BYOK mode + limits 5) Before/after slider + polish Never hardcode API keys — use .env.local. Start with step 1 now.

이미지 생성·편집 AI 웹서비스를 만들어줘. [기술 스택] - Next.js(App Router) + TypeScript + Tailwind CSS. Vercel에 그대로 배포 가능한 단일 레포. - 이미지 AI: Google Gemini API의 Nano Banana Pro (모델 ID: gemini-3-pro-image), 공식 @google/genai SDK 사용. - API 키는 .env.local의 GEMINI_API_KEY로만 읽는다. 반드시 서버 라우트(/api/generate, /api/edit)에서만 호출하고, 브라우저(클라이언트) 코드에 키를 절대 노출하지 마. [기능 3가지] 1. 텍스트 → 이미지 생성: 프롬프트 입력창 + 생성 버튼 + 로딩 스피너 + 결과 이미지 표시와 PNG 다운로드 버튼 2. 이미지 편집: 이미지 업로드(드래그앤드롭, 최대 10MB, 업로드 전 최대 1024px로 리사이즈) + 수정 지시 입력(예: "배경을 제주 바다로 바꿔줘") → 편집된 이미지 반환 3. 세션 갤러리: 이번 접속에서 만든 이미지들을 그리드로 보여주고, 클릭하면 크게 보기 + 다운로드 [원가 감각 기능 — 중요] - 화면 구석에 이번 세션 생성 수 × 이미지당 원가 $0.134(약 209원)를 누적 계산해 실시간 표시: "지금까지 원가 약 ₩___" [구현 디테일 — Gemini 호출은 아래 패턴을 그대로 쓸 것. 옛날 Gemini 예제로 즉흥 구현 금지] - npm i @google/genai · API 라우트 상단에 export const runtime = 'nodejs' 와 export const maxDuration = 60 추가 (Edge 런타임 금지) - 호출 패턴: import { GoogleGenAI } from '@google/genai'; const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY }); const res = await ai.models.generateContent({ model: 'gemini-3-pro-image', contents: [{ role: 'user', parts: [ // 편집일 때만: { inlineData: { mimeType, data: base64이미지 } }, { text: 프롬프트 } ]}], }); const part = res.candidates?.[0]?.content?.parts?.find(p => p.inlineData); const imageBase64 = part?.inlineData?.data; - 응답에 inlineData가 없으면 생성 실패/차단으로 간주하고 한국어 에러 반환 (빈 이미지 반환 금지) - 에러 처리 3종을 전부 한국어 안내로: ① API 키 없음/잘못됨 ② 무료 쿼터 초과 ③ 안전 필터로 생성 거부 - README.md에 실행 방법과 GEMINI_API_KEY 발급 방법(aistudio.google.com/apikey, 무료) 정리 [디자인] - 다크 테마 + 골드 포인트, 모바일 대응, 한국어 UI - 상단 서비스 이름은 SITE_NAME 상수 하나로 관리 (내 브랜드명으로 바꿀 수 있게) 다 만들면 로컬에서 실행해서 생성 1장, 편집 1장까지 직접 테스트하고 결과를 보여줘.