12 KiB

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 스키마 변경

-- users 테이블에 컬럼 추가
ALTER TABLE users ADD COLUMN experience_level TEXT DEFAULT 'beginner';
-- 값: 'beginner' | 'intermediate' | 'pro'

3.2 UserLevelContext 생성

// 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 영상 생성 완료 후 자동 업로드

// 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)

// 자동 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. 파일 변경 목록

신규 파일

src/contexts/UserLevelContext.tsx - 레벨 Context
src/components/settings/LevelSelector.tsx - 레벨 선택 UI
src/views/BeginnerProjectView.tsx - 초보자용 간소화 뷰
server/services/autoUploadService.js - 자동 업로드 서비스

수정 파일

server/db.js - experience_level 컬럼 추가
server/index.js - 레벨 관련 API 추가
src/contexts/AuthContext.tsx - 레벨 정보 포함
src/pages/CastADApp.tsx - UserLevelProvider 추가
src/components/layout/Sidebar.tsx - 메뉴 필터링
src/views/NewProjectView.tsx - 옵션 조건부 렌더링
src/views/SettingsView.tsx - 레벨 변경 UI
src/pages/GeneratorPage.tsx - 자동 업로드 로직
types.ts - UserLevel 타입 추가

5. 구현 순서

DB 스키마 수정 - experience_level 컬럼 추가
UserLevelContext 생성 - 레벨 관리 Context
API 엔드포인트 - 레벨 조회/수정 API
LevelSelector UI - 레벨 선택 컴포넌트
Sidebar 수정 - 메뉴 필터링
NewProjectView 수정 - 옵션 조건부 렌더링
BeginnerProjectView - 초보자 전용 플로우
자동 업로드 로직 - 생성 완료 후 자동 업로드
SettingsView 수정 - 레벨 변경 + 설정 필터링
테스트 및 버그 수정

6. 예상 소요 시간

Phase 1 (기반 인프라): 30분
Phase 2 (레벨 선택 UI): 30분
Phase 3 (조건부 렌더링): 1시간
Phase 4 (자동 업로드): 45분
Phase 5 (Beginner 플로우): 45분
테스트/수정: 30분

총 예상: 약 4시간

7. 확정된 사항

레벨 변경: 언제든 설정에서 변경 가능
온보딩: 기본 Beginner로 시작, 설정에서 변경
주간 자동 생성: 함께 구현 (cron job)

8. 추가 구현: 주간 자동 생성 시스템

8.1 DB 스키마 추가

-- 자동 생성 설정 테이블
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 서비스

// 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 자동 생성 플로우

사용자 설정에서 자동 생성 ON + 요일/시간 선택
스케줄러가 매 시간 체크
해당 시간이 되면 generation_queue에 작업 추가
워커가 순차적으로 처리:
- 펜션 정보 로드
- AI 콘텐츠 생성
- 음악 생성
- 영상 렌더링
- 자동 업로드 (YouTube/Instagram/TikTok)
완료 후 이메일/푸시 알림 (선택)

12 KiB Raw Permalink Blame History

CaStAD UX 레벨 시스템 구현 계획

개요

1. 사용자 레벨 정의

2. 레벨별 기능 매트릭스

2.1 회원가입/온보딩

2.2 새 프로젝트 생성

2.3 결과 및 업로드

2.4 사이드바 메뉴

2.5 자동화 기능

3. 구현 계획

Phase 1: 기반 인프라 (DB + Context)

3.1 DB 스키마 변경

3.2 UserLevelContext 생성

Phase 2: 레벨 선택 UI

3.3 레벨 선택 컴포넌트

Phase 3: UI 조건부 렌더링

3.4 NewProjectView 수정

3.5 Sidebar 수정

3.6 SettingsView 수정

Phase 4: 자동 업로드 로직

3.7 영상 생성 완료 후 자동 업로드

3.8 SEO 자동 생성 (Beginner/Intermediate)

Phase 5: Beginner 전용 간소화 플로우

3.9 BeginnerProjectFlow 컴포넌트

4. 파일 변경 목록

신규 파일

수정 파일

5. 구현 순서

6. 예상 소요 시간

7. 확정된 사항

8. 추가 구현: 주간 자동 생성 시스템

8.1 DB 스키마 추가

8.2 Cron Job 서비스

8.3 자동 생성 플로우

12 KiB

Raw Permalink Blame History