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