338 lines
12 KiB
Markdown
338 lines
12 KiB
Markdown
# 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. 완료 후 이메일/푸시 알림 (선택)
|