# INFINITH — Infinite Marketing Platform
## Product Requirements Document (PRD)
**Version:** 2.0
**Date:** 2026-03-23
**Author:** Product Owner, Vertical AI SaaS
**Status:** Phase 1 MVP Implemented (UI/UX Reference)

---

## 1. Executive Summary

INFINITH는 프리미엄 의료 비즈니스(피부과, 성형외과, 치과 등)와 병원 마케팅 대행사를 위한 **AI-Powered Marketing Automation SaaS**이다. 핵심 가치는 **AGDP Cycle** — Analysis → Generation → Distribution → Performance — 의 자율 순환 엔진을 통해 콘텐츠 품질(CTR)을 지속적으로 최적화하는 **Self-Improving Marketing Engine**을 제공하는 것이다.

### 1.1 현재 구현 상태 (v2.0 기준)

| 구분 | 상태 | 설명 |
|------|------|------|
| 랜딩 페이지 | **완료** | 7개 섹션, 반응형, 애니메이션 |
| 마케팅 분석 리포트 | **UI 완료** | 11개 섹션, 하드코딩 데이터 (뷰성형외과) |
| 콘텐츠 기획 페이지 | **UI 완료** | 8개 섹션, 하드코딩 데이터 |
| PDF 내보내기 | **완료** | html2canvas + jsPDF, 섹션 단위 분할 |
| 페이지 네비게이터 | **완료** | 3페이지 간 이동 (랜딩 ↔ 분석 ↔ 기획) |
| 에셋 업로드 | **UI 완료** | 드래그&드롭, 이미지/영상/텍스트 |
| 디자인 시스템 | **확립** | 컬러, 타이포, 아이콘, 컴포넌트 패턴 |
| 백엔드/인증/결제 | **미구현** | Phase 2에서 개발 예정 |

---

## 2. Problem Statement

### 2.1 고객 Pain Points
| # | Pain Point | Impact |
|---|-----------|--------|
| 1 | 콘텐츠 생산의 한계 | 블로그, SEO, 유튜브, 숏폼 — 인력/비용/시간 부족 |
| 2 | 영상 제작 비용 | 촬영·편집·기획 고비용, 숏폼 지속 제작 불가 |
| 3 | 데이터 기반 마케팅 부재 | 키워드·채널·콘텐츠 성과를 통합 파악 불가 |

### 2.2 Market Gap
- 기존 마케팅 자동화 툴(HubSpot, Hootsuite 등)은 **한국 의료 마케팅** 특화 기능 부재
- 네이버 블로그/플레이스/카페 등 **한국 로컬 플랫폼** 지원 미비
- 의료광고 심의·규정 준수 자동화 없음
- 텍스트→영상 자동 변환(숏폼) 파이프라인 부재

---

## 3. Target Users & Personas

### Persona 1: 프리미엄 의료 비즈니스 원장 / 마케팅 담당자
- **Who:** 피부과, 성형외과, 치과, 안과, 헬스케어 클리닉
- **Need:** 검색 상위 노출, 환자 전환율 증가, 고품질 영상 대량 확대
- **Behavior:** 월 100~500만원 마케팅 예산, 1-2명 내부 마케팅 인력
- **Goal:** 비용 대비 ROI 극대화, 자연 검색 유입 확대

### Persona 2: 병원 마케팅 대행사
- **Who:** 콘텐츠 마케팅 Agency, 영상 마케팅 Agency, 광고 운영 대행사
- **Need:** 다수 클라이언트 통합 운영, 콘텐츠 생산성 극대화
- **Behavior:** 10~50개 병원 클라이언트 관리, 3-10명 팀
- **Goal:** 인건비 절감, 영상 제작 자동화, 성과 리포팅 효율화

---

## 4. Product Vision & AGDP Cycle

```
┌─────────────────────────────────────────────────┐
│              AGDP Self-Improving Cycle           │
│                                                   │
│    ┌───────────┐       ┌───────────┐             │
│    │ Analysis  │──────▶│ Generation│             │
│    │ (분석)    │       │ (생성)    │             │
│    └─────▲─────┘       └─────┬─────┘             │
│          │                   │                    │
│          │                   ▼                    │
│    ┌─────┴─────┐       ┌───────────┐             │
│    │Performance│◀──────│Distribution│            │
│    │ (성과)    │       │ (배포)    │             │
│    └───────────┘       └───────────┘             │
│                                                   │
│   매 사이클마다 Performance 데이터가 Analysis에   │
│   피드백되어 콘텐츠 품질 자율 최적화              │
└─────────────────────────────────────────────────┘
```

---

## 5. 구현된 페이지 구조 & 사용자 흐름

### 5.1 Page Flow

```
Landing (/)
  └─ URL 입력 → "Analyze Marketing Performance" 클릭
      └─ Analysis Loading (/report/loading)
          └─ 5단계 체크리스트 애니메이션 (5.5초)
              └─ Marketing Intelligence Report (/report/:id)
                  └─ "마케팅 기획" 버튼 클릭
                      └─ Marketing Execution Plan (/plan/:id)
```

**PageNavigator:** 하단 고정 pill-shaped 바로 3페이지 간 자유 이동

### 5.2 Landing Page — 7 Sections

| # | Component | 배경 | 핵심 기능 |
|---|-----------|------|----------|
| 1 | Hero | 라이트 (radial gradient) | URL 입력 → 분석 시작 CTA |
| 2 | TargetAudience | 화이트 | 2개 glass-card (병원 / 대행사) |
| 3 | Problems | 슬레이트 | 3가지 핵심 과제 카드 |
| 4 | Solution | **다크** (`#0A1128`) | AGDP 순환 다이어그램 (SVG 애니메이션) |
| 5 | Modules | 화이트 + 블롭 | 5개 모듈 카드 (Pentagon 레이아웃) |
| 6 | UseCases | 화이트 | 병원/대행사 유즈케이스 비교 |
| 7 | CTA | **다크** (`#0A1128`) | URL 입력 CTA (따뜻한 그라디언트 인풋) |

### 5.3 Marketing Intelligence Report — 11 Sections

| # | Component | 배경 | 데이터 소스 (Phase 2) |
|---|-----------|------|---------------------|
| 1 | ReportHeader | 파스텔 radial gradient | 종합 스코어, 의원 정보 |
| 2 | ClinicSnapshot | 라이트 | 의원 프로필, 의료진, 인증, 브랜드 컬러 |
| 3 | ChannelOverview | 라이트 | 6채널 스코어링 (ScoreRing + SeverityBadge) |
| 4 | YouTubeAudit | 라이트 | 구독자, 조회수, 인기 영상, 진단 |
| 5 | InstagramAudit | 라이트 | KR/EN 계정 분리 분석, Reels 진단 |
| 6 | FacebookAudit | 라이트 | 페이지 분석, 브랜드 일관성 맵, 통합 제안 |
| 7 | OtherChannels | 라이트 | 강남언니, 네이버, 웹사이트, 트래킹 픽셀 |
| 8 | ProblemDiagnosis | **다크** | 핵심 문제 진단 (severity별 분류) |
| 9 | TransformationProposal | 라이트 | As-Is → To-Be 5탭 (브랜드/콘텐츠/플랫폼/웹/신채널) |
| 10 | RoadmapTimeline | 라이트 | 90일 로드맵 (월별 태스크 체크리스트) |
| 11 | KPIDashboard | 라이트 | KPI 테이블 + CTA (PDF 다운로드 + 마케팅 기획) |

### 5.4 Marketing Execution Plan — 8 Sections

| # | Component | 배경 | 기능 |
|---|-----------|------|------|
| 1 | PlanHeader | 파스텔 radial gradient | 90 Days 배지, 의원 정보 |
| 2 | BrandingGuide | 라이트 | 4탭: 비주얼/톤앤매너/채널/일관성 |
| 3 | ChannelStrategy | **다크** | 7채널 전략 카드 (화이트 카드 on 다크 bg) |
| 4 | ContentStrategy | 라이트 | 4탭: 필러/유형/워크플로우/리퍼포징 |
| 5 | ContentCalendar | **다크** | 주간 캘린더 (화이트 카드 on 다크 bg) |
| 6 | AssetCollection | 라이트 | 에셋 카드 + 유튜브 리퍼포징 |
| 7 | MyAssetUpload | 라이트 | 드래그&드롭 업로드 (이미지/영상/텍스트) |
| 8 | PlanCTA | 독립 섹션 | 따뜻한 그라디언트 CTA + PDF 다운로드 |

---

## 6. Core Modules — 기능 요구사항

### Module 1: Marketing Intelligence (Analysis) — Phase 1 MVP

| Feature | Description | Priority | 구현 상태 |
|---------|-------------|----------|----------|
| URL 기반 초기 진단 | URL 입력 → 종합 분석 리포트 자동 생성 | P0 | **UI 완료** (하드코딩) |
| 채널별 스코어링 | YouTube/Instagram/Facebook/강남언니/웹사이트 점수화 | P0 | **UI 완료** |
| 브랜드 일관성 분석 | 채널 간 로고/컬러/네이밍 불일치 진단 | P0 | **UI 완료** |
| 문제 진단 | severity 기반 핵심 과제 도출 | P0 | **UI 완료** |
| As-Is → To-Be 변환 전략 | 5개 영역별 전환 제안 | P0 | **UI 완료** |
| 90일 로드맵 | 월별 실행 계획 | P0 | **UI 완료** |
| KPI 대시보드 | 3개월/12개월 목표 지표 | P0 | **UI 완료** |
| 스크린샷 근거 자료 | 분석 과정 캡쳐 → 리포트 첨부 | P1 | **컨텍스트 구축 완료** |
| PDF 내보내기 | 리포트/기획서 PDF 다운로드 | P0 | **구현 완료** |

### Module 2: Content Planning (Generation 준비)

| Feature | Description | Priority | 구현 상태 |
|---------|-------------|----------|----------|
| 브랜딩 가이드 빌드 | 컬러/타이포/톤앤매너/채널별 규칙 | P0 | **UI 완료** |
| 채널 전략 수립 | 7채널별 As-Is→To-Be, 콘텐츠 유형, 게시 빈도 | P0 | **UI 완료** |
| 콘텐츠 전략 | 필러/유형 매트릭스/워크플로우/리퍼포징 | P0 | **UI 완료** |
| 콘텐츠 캘린더 | 4주 주간 캘린더 + 월간 서머리 | P0 | **UI 완료** |
| 에셋 수집 | 홈페이지/SNS/유튜브 리퍼포징 가능 에셋 목록 | P0 | **UI 완료** |
| My Asset 업로드 | 사용자 에셋 업로드 (이미지/영상/텍스트) | P1 | **UI 완료** |

### Module 3~5: 미구현 (Phase 2+)

- Content Creation (AI 콘텐츠 생성 + Human-in-the-Loop)
- Video Automation (블로그→영상 변환)
- Distribution Engine (자동 배포)
- Performance Intelligence (성과 추적)

---

## 7. 디자인 시스템

> 전체 디자인 시스템 스펙: **`docs/DESIGN_SYSTEM.md`** 참조

### 7.1 핵심 원칙
- **No primary colors** — 빨강, 주황, 초록, 파랑 등 원색 사용 금지
- **Pastel semantic palette** — 상태 표현은 반드시 INFINITH 파스텔 팔레트 사용
- **Filled icons only** — 라인 아이콘 금지, SVG shape fill 스타일만 사용
- **No emoji** — 아이콘은 벡터 shape 전용
- **Dark/Light rhythm** — 섹션 교대로 다크(`#0A1128`)/라이트(`white`) 배경
- **White cards on dark** — 다크 섹션 내 카드는 `bg-white rounded-2xl shadow` 사용 (glass 아님)

### 7.2 INFINITH 브랜드 컬러
| Token | Hex | 용도 |
|-------|-----|------|
| Primary Navy | `#0A1128` | 다크 섹션 bg, 본문 텍스트 |
| Gradient Start | `#4F1DA1` | 버튼/배지 그라디언트 시작 |
| Gradient End | `#021341` | 버튼/배지 그라디언트 끝 |
| Accent Purple | `#6C5CE7` | 강조, 활성 탭 보더, 아이콘 |
| Warm Peach | `#fff3eb` | CTA 그라디언트 시작 |
| Soft Lilac | `#e4cfff` | CTA 그라디언트 중간 |
| Cool White-Blue | `#f5f9ff` | CTA 그라디언트 끝 |

### 7.3 타이포그래피
| 용도 | 폰트 | Weight | 크기 |
|------|-------|--------|------|
| 영문 헤딩 | Playfair Display | Bold 700 | 3xl~6xl |
| 한글 헤딩 | Pretendard | Bold 700 | 2xl~4xl |
| 본문 | Pretendard / Inter | Regular 400 | sm~base |
| INFINITH 로고 | Playfair Display | Black 900 | 3xl, `tracking-[0.05em]` |

---

## 8. External API/Connector 요구사항

| Category | Connector | Purpose | Priority |
|----------|-----------|---------|----------|
| 소셜미디어 스크래핑 | **Apify** | Instagram/Facebook/YouTube/TikTok 스크래핑, 스크린샷, 에셋 다운로드 | **P0** |
| 웹 스크래핑 | **Firecrawl** | 웹사이트 분석, 콘텐츠 추출 | P0 (크레딧 충전 필요) |
| YouTube | YouTube Data API | 채널 통계, 영상 목록 | P0 |
| SEO | **Ahrefs API** | 키워드 분석, 도메인 레이팅 | P1 (연결됨) |
| 한국 로컬 | Naver Search/Place API | 블로그/플레이스 분석 | P0 |
| AI | Claude API (Anthropic) | 콘텐츠 분석, 리포트 생성 | P0 |
| 영상 생성 | Creatomate API | 프로그래머블 영상 생성 | P1 |
| 결제 | Stripe + Toss Payments | 글로벌 + 국내 결제 | P1 |

---

## 9. Technical Architecture

### 9.1 현재 스택 (Phase 1 — 프론트엔드 레퍼런스)

| Layer | Technology |
|-------|-----------|
| Frontend | React 19 + Vite 6 + TypeScript |
| Styling | Tailwind CSS 4 + 커스텀 디자인 시스템 |
| Routing | React Router 7 |
| Animation | Motion (Framer Motion) |
| Icons | Lucide React + 커스텀 FilledIcons (SVG) |
| PDF Export | html2canvas-pro + jsPDF |
| Data | 하드코딩 mock data (`src/data/`) |

### 9.2 목표 스택 (Phase 2 — 풀스택 SaaS)

| Layer | Technology | Rationale |
|-------|-----------|-----------|
| Frontend | Next.js 15 (App Router) | SSR/SSG, SEO 최적화 |
| Styling | Tailwind CSS + 현재 디자인 시스템 유지 | 마이그레이션 최소화 |
| Backend | Next.js API Routes + tRPC | 풀스택 타입 안전성 |
| Database | Supabase (PostgreSQL) | Auth + DB + Storage 통합 |
| Auth | Supabase Auth + NextAuth.js | Kakao/Google OAuth |
| AI Orchestration | LangGraph / Claude Agent SDK | 멀티 에이전트 |
| Queue | Inngest or Trigger.dev | 비동기 AI 작업 처리 |
| Hosting | Vercel | Next.js 최적화 |

### 9.3 Data Model

현재 TypeScript 타입 정의가 **API 계약서** 역할:
- `src/types/report.ts` — MarketingReport 및 모든 하위 타입
- `src/types/plan.ts` — MarketingPlan 및 모든 하위 타입

```
Organization (워크스페이스)
├── Members (User + Role)
├── Subscription (Plan + Usage)
├── Projects (마케팅 프로젝트)
│   ├── MarketingReport (분석 리포트)
│   │   ├── ClinicSnapshot
│   │   ├── ChannelScores
│   │   ├── YouTubeAudit / InstagramAudit / FacebookAudit
│   │   ├── ProblemDiagnosis
│   │   ├── TransformationProposal
│   │   └── KPIDashboard
│   ├── MarketingPlan (콘텐츠 기획)
│   │   ├── BrandGuide
│   │   ├── ChannelStrategy
│   │   ├── ContentStrategy
│   │   ├── ContentCalendar
│   │   └── AssetCollection
│   └── UserAssets (업로드된 에셋)
├── Channels (연동 채널)
└── AuditLogs
```

---

## 10. Development Phases

### Phase 0: Foundation (완료 항목 + 잔여)
- [x] 랜딩 페이지 7개 섹션
- [x] 디자인 시스템 확립 (컬러, 타이포, 아이콘, 컴포넌트)
- [x] 마케팅 분석 리포트 UI (11개 섹션)
- [x] 콘텐츠 기획 페이지 UI (8개 섹션)
- [x] PDF 내보내기
- [x] 페이지 네비게이터
- [x] 에셋 업로드 UI
- [x] 스크린샷 근거 자료 컨텍스트 (ScreenshotProvider)
- [ ] Next.js 마이그레이션
- [ ] CI/CD 파이프라인

### Phase 1: Backend + 동적 데이터 (4주)
- [ ] Supabase 연동 (Auth + DB + Storage)
- [ ] Apify 연동 → 소셜미디어 스크래핑 파이프라인
- [ ] YouTube Data API 연동
- [ ] Naver Search/Place API 연동
- [ ] 하드코딩 데이터 → 실제 API 교체
- [ ] 스크린샷 캡쳐 → 리포트 자동 첨부

### Phase 2: AI Agent + Content Creation (4주)
- [ ] Claude API 연동 → AI 분석 리포트 생성
- [ ] 콘텐츠 기획 AI 자동 생성
- [ ] Human-in-the-Loop 에디터
- [ ] 의료광고 규정 검수 Agent

### Phase 3: Billing + Multi-tenancy (4주)
- [ ] 인증 시스템 (Email, Google, Kakao OAuth)
- [ ] Stripe + Toss Payments 결제
- [ ] 에이전시 멀티 클라이언트 모드
- [ ] RBAC (Owner/Admin/Editor/Viewer)

### Phase 4~6: Distribution, Performance, Growth
- (기존 PRD v1.0 Phase 4~6 유지)

---

## 11. Pricing Strategy

| Plan | Target | Price (Monthly) | Limits |
|------|--------|----------------|--------|
| **Free** | Trial | ₩0 | URL 분석 1회, 블로그 3개/월, 영상 0 |
| **Starter** | 개인 병원 | ₩99,000 | 블로그 20개/월, 영상 5개/월, 채널 3개 |
| **Professional** | 중형 병원 | ₩299,000 | 블로그 50개/월, 영상 20개/월, 채널 무제한, 팀 5명 |
| **Agency** | 대행사 | ₩699,000 | 클라이언트 10개, 블로그 200개/월, 영상 50개/월, 팀 무제한 |
| **Enterprise** | 대형 대행사 | Custom | 무제한, SSO, 전용 지원, SLA |

---

## 12. Success Metrics (KPIs)

| Metric | Target (6개월) | Target (12개월) |
|--------|---------------|-----------------|
| MAU | 200 | 1,000 |
| Paid Conversion Rate | 5% | 8% |
| MRR | ₩20M | ₩100M |
| Churn Rate | < 8% | < 5% |
| AI 초안 승인율 | > 60% | > 75% |
| 평균 리포트 생성 시간 | < 5분 | < 2분 |

---

## 13. 관련 문서

| 문서 | 경로 | 용도 |
|------|------|------|
| **Design System Spec** | `docs/DESIGN_SYSTEM.md` | 컬러, 타이포, 아이콘, 컴포넌트 규칙 |
| **TypeScript 타입 정의** | `src/types/report.ts`, `src/types/plan.ts` | API 계약서 |
| **Mock 데이터** | `src/data/mockReport.ts`, `src/data/mockPlan.ts` | 레퍼런스 데이터 구조 |
| **커스텀 아이콘** | `src/components/icons/FilledIcons.tsx` | Filled SVG 아이콘 세트 |

---

*This PRD is a living document. Updated as product decisions are made and user feedback is incorporated.*