title: AI 꽃다발 이미지 생성 서비스 MVP date: 2026-02-26T18:45:00+09:00 type: plan status: draft task_id: "" tags: [flower-image, mvp, ai-generation, dall-e, revenue] author: pl project: flower-image reviewed_by: "" approved_by: ""

AI 꽃다발 이미지 생성 서비스 MVP 구현 플랜

1. 프로젝트 개요

서비스 비전

꽃 비전문가가 AI로 원하는 꽃다발 이미지를 생성하고, 그 이미지를 화원에 보여주며 "이런 느낌으로 만들어주세요"라고 전달할 수 있는 서비스.

핵심 가치

• 사용자: 머릿속 꽃다발 이미지를 AI로 구체화 → 화원 소통 시간 단축
• 비즈니스: 화원 제휴 링크(쿠팡파트너스) 클릭으로 수익 창출

MVP 범위

1. 꽃다발 스타일 선택 폼 (색상, 꽃 종류, 용도, 분위기)
2. DALL-E 3 API로 이미지 생성 + 결과 표시
3. IP 기반 일일 3장 제한 (비용 관리)
4. 생성 이미지 다운로드
5. 화원 제휴 링크 (쿠팡파트너스 꽃다발 검색)
6. 최근 생성 갤러리 (로컬 state)

2. 기술 결정 사항

기존 프로젝트 활용 vs 신규 생성

결정: 기존 projects/ai-flower-bouquet/ 프로젝트에 AI 생성 기능 추가

근거:

• 이미 Next.js 16 + Tailwind CSS v4 + shadcn/ui 구조 완비
• 갤러리, 필터, 상세페이지, 한글 SEO 등 기반 코드 있음
• 신규 프로젝트 생성하면 동일 스택 중복 설치 + 시간 낭비
• 기존 프로젝트에 /generate 라우트 추가하는 것이 MVP 원칙에 부합

이미지 생성 API

• DALL-E 3 (OpenAI Images API) — dall-e-3 모델
• 1024x1024 기본, quality: "standard" (비용 절감)
• OPENAI_API_KEY: .env에 확인됨

이미지 저장 방식

• Phase 1 (MVP): 생성 후 base64/URL로 클라이언트에 반환 → 다운로드만 지원
• 서버 저장 없음 (Cloudflare R2 연동은 Phase 2)
• 갤러리는 localStorage에 최근 10개 URL 캐싱

일일 제한 방식

• IP 기반 + cookie 이중 체크
• API Route에서 x-forwarded-for 헤더로 IP 추출
• 서버 측: in-memory Map (재시작 시 리셋 — MVP 충분)
• 클라이언트 측: cookie에 오늘 날짜 + 사용 횟수 저장 (이중 안전장치)
• 자정(KST) 기준 리셋

쿠팡파트너스 링크

• 검색 결과 링크 형식: https://link.coupang.com/a/꽃다발 (CEO 제공 필요)
• MVP에서는 쿠팡 꽃다발 검색 URL로 대체: https://www.coupang.com/np/search?q=꽃다발
• CEO가 파트너스 링크 제공하면 교체

비용 추정

3. 프로젝트 구조 (추가/수정 파일)

projects/ai-flower-bouquet/
├── src/
│   ├── app/
│   │   ├── generate/
│   │   │   └── page.tsx          # [신규] AI 이미지 생성 페이지
│   │   ├── api/
│   │   │   └── generate/
│   │   │       └── route.ts      # [신규] DALL-E 3 API Route
│   │   ├── page.tsx              # [수정] 메인에 "AI로 만들기" CTA 추가
│   │   └── layout.tsx            # [수정] 네비게이션에 생성 링크 추가
│   ├── components/
│   │   ├── generate/
│   │   │   ├── generation-form.tsx    # [신규] 스타일 선택 폼
│   │   │   ├── generation-result.tsx  # [신규] 결과 표시 + 다운로드
│   │   │   └── generation-gallery.tsx # [신규] 최근 생성 갤러리
│   │   └── detail/
│   │       └── florist-cta.tsx   # [수정] 쿠팡 제휴 링크 연동
│   ├── lib/
│   │   ├── openai.ts             # [신규] OpenAI 클라이언트 설정
│   │   └── rate-limit.ts         # [신규] IP 기반 제한 로직
│   └── types/
│       └── bouquet.ts            # [수정] GenerationRequest 타입 추가

4. 태스크 분해 (6개 태스크)

Task 1: 프로젝트 환경 설정 + OpenAI 연동

예상 시간: 3~5분

스텝:

1. projects/ai-flower-bouquet/에 openai 패키지 설치: npm install openai
2. src/lib/openai.ts 생성 — OpenAI 클라이언트 초기화 (환경변수: OPENAI_API_KEY)
3. .env.local 파일에 OPENAI_API_KEY 추가 (루트 .env에서 복사)
4. src/types/bouquet.ts에 AI 생성 관련 타입 추가:
   • GenerationRequest: style, flowers, color, purpose, mood
   • GenerationResult: imageUrl, prompt, createdAt
5. 빌드 확인: npm run build

완료 기준: openai 패키지 설치됨, 타입 정의 완료, 빌드 에러 없음

Task 2: API Route — DALL-E 3 이미지 생성 엔드포인트

예상 시간: 5~8분

스텝:

1. src/app/api/generate/route.ts 생성
2. POST 핸들러 구현:
   • Request body 파싱 (style, flowers, color, purpose, mood)
   • IP 추출 (x-forwarded-for 또는 x-real-ip)
   • Rate limit 체크 (일일 3장)
   • 한국어 입력 → 영어 DALL-E 프롬프트 변환 함수
   • DALL-E 3 API 호출 (openai.images.generate())
   • 응답: { imageUrl, prompt, remaining } 또는 에러
3. src/lib/rate-limit.ts 구현:
   • in-memory Map: { [ip]: { count, date } }
   • checkLimit(ip): boolean, increment(ip): void
   • 날짜 변경 시 자동 리셋 (KST 기준)
4. 프롬프트 엔지니어링:

   "A beautiful {style} flower bouquet with {flowers}, {color} color scheme,
    for {purpose} occasion, {mood} atmosphere, professional florist photo,
    white background, high quality, studio lighting"
   

완료 기준: POST /api/generate 호출 시 DALL-E 3 이미지 URL 반환, rate limit 작동

Task 3: 이미지 생성 폼 UI

예상 시간: 5~8분

스텝:

1. src/components/generate/generation-form.tsx 생성
2. 폼 필드 구현 (모두 select/radio 기반, 텍스트 입력 최소화):
   • 스타일: 클래식 / 모던 / 내추럴 / 럭셔리 (기존 타입 활용)
   • 주요 꽃: 장미 / 튤립 / 리시안셔스 / 백합 / 카네이션 / 수국 / 혼합
   • 색상: 레드 / 핑크 / 화이트 / 옐로우 / 퍼플 / 믹스 (기존 타입 활용)
   • 용도: 생일 / 결혼 / 기념일 / 축하 / 추모 (기존 타입 활용)
   • 분위기: 로맨틱 / 우아한 / 밝고 화사한 / 심플한 / 고급스러운
   • 추가 요청 (선택): 짧은 텍스트 입력 (최대 50자)
3. "꽃다발 생성하기" 버튼 + 로딩 상태 (스피너 + "AI가 꽃다발을 만들고 있어요...")
4. 남은 횟수 표시: "오늘 남은 생성 횟수: 2/3"
5. 모바일 반응형 (2열 그리드 → 1열)

완료 기준: 폼 렌더링 정상, 유효성 검사, 반응형 작동

Task 4: 결과 표시 + 다운로드 + 제휴 링크

예상 시간: 5~8분

스텝:

1. src/components/generate/generation-result.tsx 생성
2. 결과 이미지 표시:
   • 생성된 이미지 (1024x1024) 반응형 표시
   • 사용된 프롬프트 표시 (접을 수 있는 영역)
3. 다운로드 버튼:
   • 이미지 URL → fetch → blob → URL.createObjectURL → <a download>
   • 파일명: 꽃다발_2026-02-26_1.png
4. 공유 버튼:
   • Web Share API (모바일) 또는 클립보드 복사 (데스크탑)
5. 화원 제휴 CTA 영역:
   • "이 꽃다발을 실제로 주문하고 싶으세요?"
   • 쿠팡파트너스 링크 버튼: "쿠팡에서 비슷한 꽃다발 찾기"
   • 링크: https://www.coupang.com/np/search?q=꽃다발+{스타일} (CEO 파트너스 링크 대체 전)
   • "이 포스팅은 쿠팡 파트너스 활동의 일환으로..." 문구 (법적 필수)
6. "다시 만들기" 버튼 → 폼으로 스크롤

완료 기준: 이미지 표시, 다운로드 작동, 제휴 링크 클릭 가능

Task 5: 생성 페이지 + 네비게이션 통합

예상 시간: 3~5분

스텝:

1. src/app/generate/page.tsx 생성:
   • generation-form + generation-result + generation-gallery 조합
   • 상태 관리: useState로 폼 데이터, 결과, 로딩, 에러 관리
   • API 호출 로직: form submit → /api/generate POST → 결과 표시
   • 에러 핸들링: rate limit 초과, API 에러, 네트워크 에러
2. src/components/generate/generation-gallery.tsx 생성:
   • localStorage에서 최근 생성 이미지 최대 10개 표시
   • 그리드 레이아웃 (2~3열)
   • 각 이미지 클릭 → 다운로드 or 확대
3. 메인 페이지(src/app/page.tsx) 수정:
   • 상단 히어로 영역에 "AI로 나만의 꽃다발 만들기" CTA 버튼 추가
   • /generate로 링크
4. 헤더(src/components/layout/header.tsx) 수정:
   • 네비게이션에 "AI 생성" 메뉴 추가
5. SEO 메타데이터 추가 (generate/page.tsx):
   • title: "AI 꽃다발 이미지 생성 | 무료로 나만의 꽃다발 디자인"
   • description: "AI가 만드는 꽃다발 이미지. 스타일, 색상, 용도를 선택하면 세상에 하나뿐인 꽃다발을 생성합니다."

완료 기준: /generate 페이지 정상 로드, 네비게이션 작동, SEO 설정 완료

Task 6: 빌드 검증 + Vercel Preview 배포 준비

예상 시간: 3~5분

스텝:

1. .env.local 확인 (OPENAI_API_KEY)
2. npm run build — 전체 빌드 성공 확인
3. 로컬 테스트: npm run dev → /generate 접속 → 실제 이미지 생성 테스트
4. 테스트 체크리스트:
   • 폼 입력 → 이미지 생성 성공
   • 이미지 다운로드 작동
   • 일일 3장 제한 작동 (4번째부터 차단)
   • 제휴 링크 클릭 → 쿠팡 이동
   • 모바일 반응형 정상
   • 갤러리에 생성 이미지 저장
5. vercel.json 확인 (기존 설정 유지)
6. git commit + push (preview 배포용)
7. 빌드 에러 발견 시 수정

완료 기준: 빌드 성공, 로컬 테스트 전항목 통과, git push 완료

5. CEO 블로킹 항목

CEO 블로킹 없이 전체 MVP 구현 가능 — 쿠팡 링크만 일반 URL로 대체.

6. KPI (3계층 구조)

Layer 1: 비즈니스 성과 (Outcome)

Layer 2: 시스템 건강도 (Health)

Layer 3: 생산량 (Output)

7. 리스크 및 완화

8. 실행 순서 요약

Task 1 (환경설정)     ← 선행, 블로킹 없음
  ↓
Task 2 (API Route)    ← Task 1 완료 후
  ↓
Task 3 (폼 UI)        ← Task 1 완료 후 (Task 2와 병렬 가능)
  ↓
Task 4 (결과+다운로드) ← Task 2, 3 완료 후
  ↓
Task 5 (페이지 통합)   ← Task 3, 4 완료 후
  ↓
Task 6 (빌드+배포)     ← 전체 완료 후

총 예상 구현 시간: 25~40분

리뷰 로그

(VP/자비스 검수 후 기록)