363 lines
17 KiB
Markdown
363 lines
17 KiB
Markdown
# 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.*
|