o2sound
/
CASTAD-v0.1
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
CASTAD-v0.1/plan.md

338 lines
12 KiB
Markdown
Raw Permalink Blame History

# CaStAD UX 레벨 시스템 구현 계획
## 개요
사용자 경험 레벨에 따라 UI 복잡도를 조절하는 3단계 시스템 구현
---
## 1. 사용자 레벨 정의
| 레벨 | 이름 | 대상 | 핵심 철학 |
|------|------|------|----------|
| **Beginner** | 쌩초보 | IT 초보, 빠른 결과 원함 | "알아서 다 해줘" |
| **Intermediate** | 중급 | 약간의 커스터마이징 원함 | "몇 가지만 선택할게" |
| **Pro** | 프로 | 모든 옵션 제어 원함 | "내가 다 컨트롤" |
---
## 2. 레벨별 기능 매트릭스
### 2.1 회원가입/온보딩
| 기능 | Beginner | Intermediate | Pro |
|------|----------|--------------|-----|
| 펜션 정보 입력 | 1개 필수 | 1개 필수 | 선택 |
| 지도 URL 자동 수집 | O | O | O |
| 사진 업로드 | 최소 3장 | 최소 3장 | 선택 |
### 2.2 새 프로젝트 생성
| 옵션 | Beginner | Intermediate | Pro |
|------|----------|--------------|-----|
| 펜션 선택 | 자동 (기본 펜션) | 선택 가능 | 선택 가능 |
| 사진 선택 | 펜션 사진 자동 로드 | 펜션 사진 자동 로드 | 직접 업로드 |
| 사진 편집 | 삭제/추가만 | 삭제/추가/AI생성 | 전체 |
| **언어** | 한국어 고정 | 선택 가능 | 선택 가능 |
| **음악 장르** | AI 자동 선택 | 선택 가능 | 선택 가능 |
| **음악 길이** | Auto | 선택 가능 | 선택 가능 |
| **오디오 모드** | Song 고정 | 선택 가능 | 선택 가능 |
| **영상 스타일** | Video 고정 | 선택 가능 | 선택 가능 |
| **텍스트 이펙트** | Auto 랜덤 | 선택 가능 | 선택 가능 |
| **전환 효과** | Mix 고정 | 선택 가능 | 선택 가능 |
| **영상 비율** | 9:16 고정 | 선택 가능 | 선택 가능 |
| **축제 연동** | X | X | O |
| **AI 이미지 생성** | X | O | O |
| **커스텀 CSS** | X | X | O |
### 2.3 결과 및 업로드
| 기능 | Beginner | Intermediate | Pro |
|------|----------|--------------|-----|
| 미리보기 | O | O | O |
| YouTube 업로드 | **자동** | **자동** | 수동/자동 선택 |
| SEO 최적화 화면 | X (자동) | X (자동) | O (편집 가능) |
| 썸네일 선택 | X (자동) | O | O |
| Instagram 업로드 | 자동 | 자동 | 수동/자동 |
| TikTok 업로드 | 자동 | 자동 | 수동/자동 |
### 2.4 사이드바 메뉴
| 메뉴 | Beginner | Intermediate | Pro |
|------|----------|--------------|-----|
| 대시보드 | O | O | O |
| 새 영상 만들기 | O (간소화) | O | O (전체) |
| 보관함 | O | O | O |
| 에셋 라이브러리 | X | O | O |
| 펜션 관리 | X (1개 고정) | O | O |
| 축제 정보 | X | X | O |
| 계정 관리 | O (간소화) | O | O |
| 비즈니스 설정 | X | O (일부) | O (전체) |
### 2.5 자동화 기능
| 기능 | Beginner | Intermediate | Pro |
|------|----------|--------------|-----|
| 주간 자동 생성 | O (요금제별) | O (요금제별) | O (요금제별) |
| 자동 업로드 | 강제 ON | 강제 ON | 선택 가능 |
| 스케줄 설정 | X | X | O |
---
## 3. 구현 계획
### Phase 1: 기반 인프라 (DB + Context)
#### 3.1 DB 스키마 변경
```sql
-- users 테이블에 컬럼 추가
ALTER TABLE users ADD COLUMN experience_level TEXT DEFAULT 'beginner';
-- 값: 'beginner' | 'intermediate' | 'pro'
```
#### 3.2 UserLevelContext 생성
```typescript
// src/contexts/UserLevelContext.tsx
interface UserLevelContextType {
level: 'beginner' | 'intermediate' | 'pro';
setLevel: (level: string) => void;
features: FeatureFlags;
}
interface FeatureFlags {
showLanguageSelector: boolean;
showMusicGenreSelector: boolean;
showTextEffectSelector: boolean;
showTransitionSelector: boolean;
showAspectRatioSelector: boolean;
showFestivalIntegration: boolean;
showAssetLibrary: boolean;
showPensionManagement: boolean;
showAdvancedSettings: boolean;
showSeoEditor: boolean;
autoUpload: boolean;
// ... 기타
}
```
### Phase 2: 레벨 선택 UI
#### 3.3 레벨 선택 컴포넌트
- 위치: 계정 설정 또는 온보딩
- 3개 카드 형태로 선택
- 각 레벨별 아이콘 + 설명
- 언제든 변경 가능
```
┌─────────────────────────────────────────────────────────────┐
│ 나에게 맞는 모드를 선택하세요 │
├─────────────────┬─────────────────┬─────────────────────────┤
│ 🌱 쌩초보 │ 🌿 중급 │ 🌳 프로 │
│ │ │ │
│ "다 알아서 해줘" │ "조금만 선택" │ "내가 다 컨트롤" │
│ │ │ │
│ • 원클릭 생성 │ • 장르 선택 │ • 모든 옵션 제어 │
│ • 자동 업로드 │ • 언어 선택 │ • 축제 연동 │
│ • 간단한 메뉴 │ • 기본 메뉴 │ • 고급 설정 │
└─────────────────┴─────────────────┴─────────────────────────┘
```
### Phase 3: UI 조건부 렌더링
#### 3.4 NewProjectView 수정
- useUserLevel() 훅으로 현재 레벨 확인
- 레벨에 따라 옵션 섹션 표시/숨김
- Beginner: 사진만 보여주고 "생성하기" 버튼
- Intermediate: 장르, 언어 섹션 추가
- Pro: 전체 옵션
#### 3.5 Sidebar 수정
- 레벨에 따라 메뉴 아이템 필터링
- Beginner: 대시보드, 새 영상, 보관함, 계정
- Intermediate: + 에셋, 펜션 관리, 설정(일부)
- Pro: 전체 메뉴
#### 3.6 SettingsView 수정
- 레벨에 따라 설정 항목 표시/숨김
- 레벨 변경 UI 추가
### Phase 4: 자동 업로드 로직
#### 3.7 영상 생성 완료 후 자동 업로드
```javascript
// GeneratorPage.tsx의 handleRenderComplete 수정
const handleRenderComplete = async (videoPath) => {
// 기존 로직...
// 자동 업로드 (Beginner/Intermediate 또는 Pro with auto_upload=true)
if (shouldAutoUpload(userLevel, youtubeSettings)) {
await autoUploadToYouTube(videoPath, seoData);
await autoUploadToInstagram(videoPath);
await autoUploadToTikTok(videoPath);
}
};
```
#### 3.8 SEO 자동 생성 (Beginner/Intermediate)
```javascript
// 자동 SEO 생성 함수
const generateAutoSeo = async (businessInfo, language) => {
// Gemini로 자동 생성
return {
title: `${businessInfo.name} - 힐링 펜션`,
description: await generateDescription(businessInfo),
tags: await generateTags(businessInfo),
hashtags: await generateHashtags(businessInfo)
};
};
```
### Phase 5: Beginner 전용 간소화 플로우
#### 3.9 BeginnerProjectFlow 컴포넌트
```
단계 1: 펜션 사진 확인
┌─────────────────────────────────────────┐
│ 📸 이 사진들로 영상을 만들까요? │
│ │
│ [사진1] [사진2] [사진3] [사진4] │
│ │
│ [+ 사진 추가] [🗑️ 선택 삭제] │
│ │
│ [ 🎬 영상 만들기 ] │
└─────────────────────────────────────────┘
단계 2: 생성 중 (프로그레스 바)
┌─────────────────────────────────────────┐
│ 🎵 음악 만드는 중... (30%) │
│ ████████░░░░░░░░░░░░ │
└─────────────────────────────────────────┘
단계 3: 완료 + 자동 업로드
┌─────────────────────────────────────────┐
│ ✅ 영상이 완성되었습니다! │
│ │
│ [미리보기 영상 플레이어] │
│ │
│ ✅ YouTube 업로드 완료 │
│ ✅ Instagram 업로드 완료 │
│ │
│ [ 🏠 대시보드로 ] │
└─────────────────────────────────────────┘
```
---
## 4. 파일 변경 목록
### 신규 파일
1. `src/contexts/UserLevelContext.tsx` - 레벨 Context
2. `src/components/settings/LevelSelector.tsx` - 레벨 선택 UI
3. `src/views/BeginnerProjectView.tsx` - 초보자용 간소화 뷰
4. `server/services/autoUploadService.js` - 자동 업로드 서비스
### 수정 파일
1. `server/db.js` - experience_level 컬럼 추가
2. `server/index.js` - 레벨 관련 API 추가
3. `src/contexts/AuthContext.tsx` - 레벨 정보 포함
4. `src/pages/CastADApp.tsx` - UserLevelProvider 추가
5. `src/components/layout/Sidebar.tsx` - 메뉴 필터링
6. `src/views/NewProjectView.tsx` - 옵션 조건부 렌더링
7. `src/views/SettingsView.tsx` - 레벨 변경 UI
8. `src/pages/GeneratorPage.tsx` - 자동 업로드 로직
9. `types.ts` - UserLevel 타입 추가
---
## 5. 구현 순서
1. **DB 스키마 수정** - experience_level 컬럼 추가
2. **UserLevelContext 생성** - 레벨 관리 Context
3. **API 엔드포인트** - 레벨 조회/수정 API
4. **LevelSelector UI** - 레벨 선택 컴포넌트
5. **Sidebar 수정** - 메뉴 필터링
6. **NewProjectView 수정** - 옵션 조건부 렌더링
7. **BeginnerProjectView** - 초보자 전용 플로우
8. **자동 업로드 로직** - 생성 완료 후 자동 업로드
9. **SettingsView 수정** - 레벨 변경 + 설정 필터링
10. **테스트 및 버그 수정**
---
## 6. 예상 소요 시간
- Phase 1 (기반 인프라): 30분
- Phase 2 (레벨 선택 UI): 30분
- Phase 3 (조건부 렌더링): 1시간
- Phase 4 (자동 업로드): 45분
- Phase 5 (Beginner 플로우): 45분
- 테스트/수정: 30분
**총 예상: 약 4시간**
---
## 7. 확정된 사항
1. **레벨 변경**: 언제든 설정에서 변경 가능
2. **온보딩**: 기본 Beginner로 시작, 설정에서 변경
3. **주간 자동 생성**: 함께 구현 (cron job)
---
## 8. 추가 구현: 주간 자동 생성 시스템
### 8.1 DB 스키마 추가
```sql
-- 자동 생성 설정 테이블
CREATE TABLE auto_generation_settings (
id INTEGER PRIMARY KEY,
user_id INTEGER UNIQUE,
enabled INTEGER DEFAULT 0,
day_of_week INTEGER DEFAULT 1, -- 0=일, 1=월, ..., 6=토
time_of_day TEXT DEFAULT '09:00',
last_generated_at DATETIME,
next_scheduled_at DATETIME,
FOREIGN KEY (user_id) REFERENCES users(id)
);
-- 자동 생성 작업 큐
CREATE TABLE generation_queue (
id INTEGER PRIMARY KEY,
user_id INTEGER,
pension_id INTEGER,
status TEXT DEFAULT 'pending', -- pending, processing, completed, failed
scheduled_at DATETIME,
started_at DATETIME,
completed_at DATETIME,
error_message TEXT,
result_video_path TEXT,
FOREIGN KEY (user_id) REFERENCES users(id)
);
```
### 8.2 Cron Job 서비스
```javascript
// server/services/schedulerService.js
const cron = require('node-cron');
// 매 시간마다 실행 - 예약된 자동 생성 확인
cron.schedule('0 * * * *', async () => {
const pendingJobs = await getPendingGenerationJobs();
for (const job of pendingJobs) {
await processAutoGeneration(job);
}
});
```
### 8.3 자동 생성 플로우
1. 사용자 설정에서 자동 생성 ON + 요일/시간 선택
2. 스케줄러가 매 시간 체크
3. 해당 시간이 되면 generation_queue에 작업 추가
4. 워커가 순차적으로 처리:
- 펜션 정보 로드
- AI 콘텐츠 생성
- 음악 생성
- 영상 렌더링
- 자동 업로드 (YouTube/Instagram/TikTok)
5. 완료 후 이메일/푸시 알림 (선택)
Reference in New Issue View Git Blame Copy Permalink