sam-manage/docs/tutorial-video-storyboard-config.json

{
  "projectName": "SAM 사용법 영상 자동 생성 시스템",
  "company": "SAM (주일/경동)",
  "author": "IT 혁신팀",
  "date": "2026.02.15",
  "version": "D1.0",
  "purpose": "고객에게 SAM 사이트의 사용법을 설명하는 영상을 AI 기반으로 자동 생성하는 시스템 기획서",
  "features": [
    "Gemini API 기반 스크린샷 AI 분석",
    "Google Cloud TTS 한국어 나레이션 자동 생성",
    "FFmpeg 기반 영상 합성 (전환효과 + BGM)",
    "PPTX 설명서 자동 생성 (편집 가능)",
    "SAM 메뉴 트리 연동 자동 캡처",
    "다중 화면 워크플로우 영상 지원"
  ],
  "effects": [
    { "icon": "📞", "title": "고객 문의 감소", "desc": "반복 사용법 문의를 영상으로 대체" },
    { "icon": "🚀", "title": "빠른 온보딩", "desc": "신규 고객 주요 기능 영상 학습" },
    { "icon": "💰", "title": "저비용 생성", "desc": "영상당 $0.07 (Veo 대비 1/100)" },
    { "icon": "🔄", "title": "유지보수 용이", "desc": "화면 변경 시 영상 자동 재생성" }
  ],
  "tocItems": [
    { "num": "01", "title": "프로젝트 개요", "desc": "시스템 목적 및 핵심 아이디어" },
    { "num": "02", "title": "기술 가능성 분석", "desc": "보유 API 및 기술 스택 검토" },
    { "num": "03", "title": "생성 파이프라인", "desc": "AI 분석 → 슬라이드 → 나레이션 → 영상" },
    { "num": "04", "title": "화면 설계", "desc": "MNG 관리자 UI 스토리보드" },
    { "num": "05", "title": "시스템 아키텍처", "desc": "서비스 구조 및 Google Cloud 연동" },
    { "num": "06", "title": "비용 분석 & 로드맵", "desc": "영상당 비용 및 4단계 구현 계획" }
  ],
  "mainMenus": [
    { "title": "영상 생성", "children": ["화면 선택", "AI 분석", "영상 생성"] },
    { "title": "생성 이력", "children": ["영상 목록", "재생/다운로드"] },
    { "title": "설정", "children": ["음성 설정", "템플릿 관리"] }
  ],
  "screens": [
    {
      "taskName": "생성 파이프라인",
      "route": "/tutorial-video/pipeline",
      "screenName": "AI 영상 생성 파이프라인",
      "screenId": "TUT_001",
      "descriptions": [
        {
          "title": "Phase 1: 입력 & AI 분석",
          "content": "스크린샷 업로드 또는 메뉴 선택 후 Gemini API가 UI 요소를 자동 인식하고 사용법 대본을 생성합니다.",
          "markerX": 1.2,
          "markerY": 2.1
        },
        {
          "title": "Phase 2: 주석 슬라이드",
          "content": "각 Step별 스크린샷에 빨간 테두리, 번호 배지, 화살표 등 시각적 주석을 오버레이합니다.",
          "markerX": 2.8,
          "markerY": 2.1
        },
        {
          "title": "Phase 3: 나레이션 생성",
          "content": "Google Cloud TTS(ko-KR-Neural2-A, 여성)로 Step별 나레이션 음성 파일을 생성합니다.",
          "markerX": 4.3,
          "markerY": 2.1
        },
        {
          "title": "Phase 4: 영상 합성",
          "content": "FFmpeg로 슬라이드 이미지 + 나레이션 + 전환효과 + BGM을 합성하여 최종 MP4를 생성합니다.",
          "markerX": 5.8,
          "markerY": 2.1
        }
      ],
      "wireframeElements": [
        {"type": "rect", "x": 0.5, "y": 1.35, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "SAM 사용법 영상 생성 파이프라인", "fontSize": 10, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 2.0, "w": 1.35, "h": 0.9, "fill": "0d9488", "text": "Phase 1\nAI 분석", "fontSize": 9, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 1.9, "y": 2.2, "w": 0.3, "h": 0.4, "text": "→", "fontSize": 16, "color": "64748b"},
        {"type": "rect", "x": 2.25, "y": 2.0, "w": 1.35, "h": 0.9, "fill": "0d9488", "text": "Phase 2\n슬라이드", "fontSize": 9, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 3.65, "y": 2.2, "w": 0.3, "h": 0.4, "text": "→", "fontSize": 16, "color": "64748b"},
        {"type": "rect", "x": 4.0, "y": 2.0, "w": 1.35, "h": 0.9, "fill": "0d9488", "text": "Phase 3\n나레이션", "fontSize": 9, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 5.4, "y": 2.2, "w": 0.3, "h": 0.4, "text": "→", "fontSize": 16, "color": "64748b"},
        {"type": "rect", "x": 5.75, "y": 2.0, "w": 1.05, "h": 0.9, "fill": "dc2626", "text": "Phase 4\n영상 합성", "fontSize": 9, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 3.15, "w": 1.35, "h": 0.6, "fill": "f1f5f9", "text": "Gemini\n스크린샷 분석", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 2.25, "y": 3.15, "w": 1.35, "h": 0.6, "fill": "f1f5f9", "text": "PHP GD\n주석 오버레이", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 4.0, "y": 3.15, "w": 1.35, "h": 0.6, "fill": "f1f5f9", "text": "Cloud TTS\n한국어 음성", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 5.75, "y": 3.15, "w": 1.05, "h": 0.6, "fill": "f1f5f9", "text": "FFmpeg\nMP4 생성", "fontSize": 7, "color": "1e293b"},

        {"type": "rect", "x": 0.5, "y": 4.1, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "출력: 최종 MP4 영상 (30초~3분) + PPTX 설명서", "fontSize": 9, "color": "FFFFFF"},
        {"type": "rect", "x": 0.5, "y": 4.7, "w": 3.05, "h": 0.35, "fill": "f59e0b", "text": "비용: ~$0.07/영상 | 생성시간: 1~2분", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 3.7, "y": 4.7, "w": 3.1, "h": 0.35, "fill": "0d9488", "text": "Veo3 대비 100배 저렴, 10배 빠름", "fontSize": 8, "color": "FFFFFF", "bold": true}
      ]
    },
    {
      "taskName": "영상 생성",
      "route": "/tutorial-video/create",
      "screenName": "Step 1: 화면 선택",
      "screenId": "TUT_002",
      "descriptions": [
        {
          "title": "메뉴 트리 선택",
          "content": "SAM의 메뉴 구조에서 설명 영상을 생성할 화면을 선택합니다. 자동으로 해당 화면의 스크린샷을 캡처합니다.",
          "markerX": 1.8,
          "markerY": 1.9
        },
        {
          "title": "스크린샷 업로드",
          "content": "메뉴 선택 대신 직접 스크린샷 이미지를 업로드하거나, URL을 입력하여 자동 캡처할 수 있습니다.",
          "markerX": 4.5,
          "markerY": 1.9
        },
        {
          "title": "미리보기 영역",
          "content": "선택/업로드된 스크린샷이 미리보기로 표시됩니다. Gemini AI가 이 이미지를 분석합니다.",
          "markerX": 3.2,
          "markerY": 3.6
        },
        {
          "title": "다음 단계 버튼",
          "content": "'AI 분석 시작' 버튼을 클릭하면 Gemini가 UI 요소를 자동 인식하고 사용법 대본을 생성합니다.",
          "markerX": 5.5,
          "markerY": 4.8
        }
      ],
      "wireframeElements": [
        {"type": "rect", "x": 0.5, "y": 1.35, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "Step 1: 설명할 화면을 선택하세요", "fontSize": 10, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 1.95, "w": 2.9, "h": 2.75, "fill": "f8fafc"},
        {"type": "rect", "x": 0.6, "y": 2.0, "w": 2.7, "h": 0.3, "fill": "0d9488", "text": "메뉴에서 선택", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 0.7, "y": 2.4, "w": 2.4, "h": 0.25, "text": "📁 견적 관리", "fontSize": 8, "color": "1e293b", "bold": true},
        {"type": "rect", "x": 0.95, "y": 2.7, "w": 2.1, "h": 0.22, "text": "├── 견적서 목록", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 0.95, "y": 2.95, "w": 2.1, "h": 0.22, "fill": "e0f2fe", "text": "├── 견적서 작성 ✓", "fontSize": 7, "color": "0d9488", "bold": true},
        {"type": "rect", "x": 0.95, "y": 3.2, "w": 2.1, "h": 0.22, "text": "└── 견적서 상세", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 0.7, "y": 3.55, "w": 2.4, "h": 0.25, "text": "📁 주문 관리", "fontSize": 8, "color": "1e293b", "bold": true},
        {"type": "rect", "x": 0.95, "y": 3.85, "w": 2.1, "h": 0.22, "text": "├── 주문 목록", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 0.95, "y": 4.1, "w": 2.1, "h": 0.22, "text": "└── 주문 상세", "fontSize": 7, "color": "64748b"},

        {"type": "rect", "x": 3.6, "y": 1.95, "w": 3.2, "h": 2.75, "fill": "f8fafc"},
        {"type": "rect", "x": 3.7, "y": 2.0, "w": 3.0, "h": 0.3, "fill": "0d9488", "text": "직접 업로드", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 3.8, "y": 2.45, "w": 2.8, "h": 1.1, "fill": "e2e8f0", "text": "📷 이미지를 드래그하거나\n클릭하여 업로드", "fontSize": 8, "color": "64748b"},
        {"type": "rect", "x": 3.8, "y": 3.7, "w": 2.8, "h": 0.3, "fill": "FFFFFF", "text": "🔗 URL: https://sam.juil.co.kr/...", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 3.8, "y": 4.1, "w": 2.8, "h": 0.3, "fill": "1e293b", "text": "URL로 캡처", "fontSize": 8, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 4.9, "y": 4.9, "w": 1.9, "h": 0.35, "fill": "0d9488", "text": "🤖 AI 분석 시작", "fontSize": 9, "color": "FFFFFF", "bold": true}
      ]
    },
    {
      "taskName": "영상 생성",
      "route": "/tutorial-video/analyze",
      "screenName": "Step 2: AI 분석 결과 확인",
      "screenId": "TUT_003",
      "descriptions": [
        {
          "title": "AI 분석 UI 요소",
          "content": "Gemini가 인식한 UI 요소 목록. 이름, 위치, 설명, 사용법을 확인/수정합니다.",
          "markerX": 1.5,
          "markerY": 2.0
        },
        {
          "title": "Step별 순서 편집",
          "content": "AI가 제안한 사용 순서를 드래그앤드롭으로 변경, 추가/삭제 가능합니다.",
          "markerX": 1.5,
          "markerY": 3.3
        },
        {
          "title": "나레이션 대본",
          "content": "AI가 생성한 대본을 편집. 음성(여성/남성) 및 속도(1.0~1.5x) 선택 가능합니다.",
          "markerX": 4.5,
          "markerY": 2.0
        },
        {
          "title": "미리보기 슬라이드",
          "content": "주석 적용 슬라이드 미리보기. 빨간 테두리, 번호 배지, 화살표를 확인합니다.",
          "markerX": 4.5,
          "markerY": 3.8
        }
      ],
      "wireframeElements": [
        {"type": "rect", "x": 0.5, "y": 1.35, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "Step 2: AI 분석 결과 확인 & 편집", "fontSize": 10, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 1.95, "w": 3.1, "h": 0.3, "fill": "0d9488", "text": "🤖 AI가 분석한 UI 요소", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 0.5, "y": 2.3, "w": 3.1, "h": 0.45, "fill": "f8fafc", "text": "① 검색 필터 (form)\n  날짜, 거래처 등으로 검색합니다", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 0.5, "y": 2.8, "w": 3.1, "h": 0.45, "fill": "FFFFFF", "text": "② 신규 작성 버튼 (button)\n  새 견적서를 작성합니다", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 0.5, "y": 3.3, "w": 3.1, "h": 0.45, "fill": "f8fafc", "text": "③ 견적서 목록 (table)\n  조회된 견적서 목록입니다", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 0.5, "y": 3.8, "w": 3.1, "h": 0.45, "fill": "FFFFFF", "text": "④ 상세 보기 (link)\n  목록 행 클릭 시 상세 이동", "fontSize": 7, "color": "1e293b"},

        {"type": "rect", "x": 3.8, "y": 1.95, "w": 3.0, "h": 0.3, "fill": "0d9488", "text": "📝 나레이션 대본", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 3.8, "y": 2.3, "w": 3.0, "h": 1.3, "fill": "f8fafc", "text": "이 화면은 견적서 관리\n화면입니다.\n\n상단의 검색 필터에서\n원하는 조건을 선택한 후\n검색 버튼을 클릭하세요...", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 3.8, "y": 3.65, "w": 1.4, "h": 0.25, "text": "음성: 여성 ▼", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.3, "y": 3.65, "w": 1.4, "h": 0.25, "text": "속도: 1.2x ▼", "fontSize": 7, "color": "64748b"},

        {"type": "rect", "x": 3.8, "y": 4.05, "w": 3.0, "h": 1.0, "fill": "e2e8f0", "text": "📸 슬라이드 미리보기\n◀  [1/4]  ▶\n(빨간 테두리 + ① 번호)", "fontSize": 8, "color": "64748b"},

        {"type": "rect", "x": 0.5, "y": 4.85, "w": 1.8, "h": 0.35, "fill": "64748b", "text": "◀ 이전 단계", "fontSize": 9, "color": "FFFFFF"},
        {"type": "rect", "x": 5.0, "y": 4.85, "w": 1.8, "h": 0.35, "fill": "0d9488", "text": "다음 단계 ▶", "fontSize": 9, "color": "FFFFFF", "bold": true}
      ]
    },
    {
      "taskName": "영상 생성",
      "route": "/tutorial-video/generate",
      "screenName": "Step 3: 미리보기 & 생성",
      "screenId": "TUT_004",
      "descriptions": [
        {
          "title": "슬라이드 캐러셀",
          "content": "주석 슬라이드를 좌우 화살표로 순서대로 확인합니다. 번호, 하이라이트, 화살표가 표시됩니다.",
          "markerX": 3.2,
          "markerY": 2.5
        },
        {
          "title": "영상 생성 버튼",
          "content": "슬라이드 + 나레이션 + BGM을 합성하여 MP4 영상을 생성합니다. Queue Job으로 비동기 처리됩니다.",
          "markerX": 1.5,
          "markerY": 4.75
        },
        {
          "title": "PPTX 다운로드",
          "content": "영상과 함께 PPTX도 생성됩니다. 고객이 직접 편집 가능한 PowerPoint를 다운로드합니다.",
          "markerX": 4.0,
          "markerY": 4.75
        }
      ],
      "wireframeElements": [
        {"type": "rect", "x": 0.5, "y": 1.35, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "Step 3: 미리보기 & 영상 생성", "fontSize": 10, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 1.95, "w": 6.3, "h": 2.5, "fill": "f8fafc"},
        {"type": "rect", "x": 0.6, "y": 2.0, "w": 0.4, "h": 2.4, "fill": "e2e8f0", "text": "◀", "fontSize": 14, "color": "64748b"},
        {"type": "rect", "x": 1.1, "y": 2.05, "w": 4.8, "h": 2.3, "fill": "FFFFFF"},
        {"type": "rect", "x": 1.2, "y": 2.15, "w": 4.6, "h": 0.3, "fill": "1e293b", "text": "견적서 관리 - Step 1: 검색 필터", "fontSize": 8, "color": "FFFFFF"},
        {"type": "rect", "x": 1.3, "y": 2.55, "w": 4.4, "h": 1.3, "fill": "e2e8f0", "text": "[스크린샷 이미지]\n\n🔴 ① 검색 필터 영역\n(빨간 테두리 하이라이트)", "fontSize": 8, "color": "64748b"},
        {"type": "rect", "x": 1.3, "y": 3.95, "w": 4.4, "h": 0.3, "fill": "1e293b", "text": "\"상단의 검색 필터에서 원하는 조건을 선택합니다\"", "fontSize": 7, "color": "FFFFFF"},
        {"type": "rect", "x": 6.0, "y": 2.0, "w": 0.4, "h": 2.4, "fill": "e2e8f0", "text": "▶", "fontSize": 14, "color": "64748b"},

        {"type": "rect", "x": 3.0, "y": 4.5, "w": 0.8, "h": 0.2, "text": "1 / 4", "fontSize": 8, "color": "64748b", "bold": true},

        {"type": "rect", "x": 0.5, "y": 4.85, "w": 2.2, "h": 0.4, "fill": "0d9488", "text": "🎬 영상 생성 (MP4)", "fontSize": 9, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 2.9, "y": 4.85, "w": 2.2, "h": 0.4, "fill": "1e293b", "text": "📄 PPTX 다운로드", "fontSize": 9, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 5.3, "y": 4.85, "w": 1.5, "h": 0.4, "fill": "64748b", "text": "◀ 이전 단계", "fontSize": 8, "color": "FFFFFF"}
      ]
    },
    {
      "taskName": "생성 이력",
      "route": "/tutorial-video/history",
      "screenName": "영상 생성 이력 관리",
      "screenId": "TUT_005",
      "descriptions": [
        {
          "title": "영상 목록 테이블",
          "content": "생성된 튜토리얼 영상 목록입니다. 제목, 상태, 생성일, 비용을 확인합니다.",
          "markerX": 3.0,
          "markerY": 2.0
        },
        {
          "title": "상태 표시",
          "content": "영상 생성 진행 상태를 실시간으로 표시합니다. (대기중/분석중/생성중/완료/실패)",
          "markerX": 4.5,
          "markerY": 2.8
        },
        {
          "title": "재생/다운로드",
          "content": "완료된 영상을 바로 재생하거나 MP4/PPTX 파일을 다운로드합니다.",
          "markerX": 6.0,
          "markerY": 2.8
        },
        {
          "title": "재생성/삭제",
          "content": "화면 변경 시 재생성하거나, 불필요한 영상을 삭제합니다.",
          "markerX": 3.0,
          "markerY": 4.5
        }
      ],
      "wireframeElements": [
        {"type": "rect", "x": 0.5, "y": 1.35, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "튜토리얼 영상 생성 이력", "fontSize": 10, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 2.0, "w": 6.3, "h": 0.35, "fill": "0d9488"},
        {"type": "rect", "x": 0.55, "y": 2.02, "w": 0.35, "h": 0.3, "text": "☐", "fontSize": 8, "color": "FFFFFF"},
        {"type": "rect", "x": 0.95, "y": 2.02, "w": 2.0, "h": 0.3, "text": "제목", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 3.05, "y": 2.02, "w": 0.9, "h": 0.3, "text": "상태", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 4.05, "y": 2.02, "w": 0.9, "h": 0.3, "text": "생성일", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 5.05, "y": 2.02, "w": 0.7, "h": 0.3, "text": "비용", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 5.85, "y": 2.02, "w": 0.9, "h": 0.3, "text": "액션", "fontSize": 8, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 2.4, "w": 6.3, "h": 0.4, "fill": "f8fafc"},
        {"type": "rect", "x": 0.95, "y": 2.45, "w": 2.0, "h": 0.3, "text": "견적서 관리 사용법", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 3.05, "y": 2.45, "w": 0.9, "h": 0.3, "fill": "10b981", "text": "완료", "fontSize": 7, "color": "FFFFFF"},
        {"type": "rect", "x": 4.05, "y": 2.45, "w": 0.9, "h": 0.3, "text": "02.15", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.05, "y": 2.45, "w": 0.7, "h": 0.3, "text": "$0.07", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.85, "y": 2.45, "w": 0.9, "h": 0.3, "text": "▶ 📥", "fontSize": 7, "color": "0d9488"},

        {"type": "rect", "x": 0.5, "y": 2.85, "w": 6.3, "h": 0.4, "fill": "FFFFFF"},
        {"type": "rect", "x": 0.95, "y": 2.9, "w": 2.0, "h": 0.3, "text": "주문 관리 사용법", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 3.05, "y": 2.9, "w": 0.9, "h": 0.3, "fill": "f59e0b", "text": "생성중", "fontSize": 7, "color": "FFFFFF"},
        {"type": "rect", "x": 4.05, "y": 2.9, "w": 0.9, "h": 0.3, "text": "02.15", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.05, "y": 2.9, "w": 0.7, "h": 0.3, "text": "-", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.85, "y": 2.9, "w": 0.9, "h": 0.3, "text": "⏳ 75%", "fontSize": 7, "color": "f59e0b"},

        {"type": "rect", "x": 0.5, "y": 3.3, "w": 6.3, "h": 0.4, "fill": "f8fafc"},
        {"type": "rect", "x": 0.95, "y": 3.35, "w": 2.0, "h": 0.3, "text": "거래처 관리 사용법", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 3.05, "y": 3.35, "w": 0.9, "h": 0.3, "fill": "10b981", "text": "완료", "fontSize": 7, "color": "FFFFFF"},
        {"type": "rect", "x": 4.05, "y": 3.35, "w": 0.9, "h": 0.3, "text": "02.14", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.05, "y": 3.35, "w": 0.7, "h": 0.3, "text": "$0.07", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.85, "y": 3.35, "w": 0.9, "h": 0.3, "text": "▶ 📥", "fontSize": 7, "color": "0d9488"},

        {"type": "rect", "x": 0.5, "y": 3.75, "w": 6.3, "h": 0.4, "fill": "FFFFFF"},
        {"type": "rect", "x": 0.95, "y": 3.8, "w": 2.0, "h": 0.3, "text": "생산 관리 사용법", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 3.05, "y": 3.8, "w": 0.9, "h": 0.3, "fill": "dc2626", "text": "실패", "fontSize": 7, "color": "FFFFFF"},
        {"type": "rect", "x": 4.05, "y": 3.8, "w": 0.9, "h": 0.3, "text": "02.14", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.05, "y": 3.8, "w": 0.7, "h": 0.3, "text": "$0.01", "fontSize": 7, "color": "64748b"},
        {"type": "rect", "x": 5.85, "y": 3.8, "w": 0.9, "h": 0.3, "text": "🔄 재시도", "fontSize": 7, "color": "dc2626"},

        {"type": "rect", "x": 0.5, "y": 4.4, "w": 3.0, "h": 0.35, "text": "선택된 항목: 0개  |  전체: 4건", "fontSize": 8, "color": "64748b"},
        {"type": "rect", "x": 4.5, "y": 4.4, "w": 1.1, "h": 0.35, "fill": "dc2626", "text": "🗑 삭제", "fontSize": 8, "color": "FFFFFF"},
        {"type": "rect", "x": 5.7, "y": 4.4, "w": 1.1, "h": 0.35, "fill": "0d9488", "text": "🔄 재생성", "fontSize": 8, "color": "FFFFFF"}
      ]
    },
    {
      "taskName": "설정",
      "route": "/tutorial-video/architecture",
      "screenName": "시스템 아키텍처",
      "screenId": "TUT_006",
      "descriptions": [
        {
          "title": "MNG (Laravel) 서비스",
          "content": "Controller → ScreenAnalysis → SlideImage → TutorialAssembly 순서로 처리됩니다.",
          "markerX": 3.0,
          "markerY": 2.2
        },
        {
          "title": "Queue Job 비동기 처리",
          "content": "TutorialVideoJob으로 Queue에 등록, 비동기 처리됩니다. 진행률 실시간 조회 가능.",
          "markerX": 1.5,
          "markerY": 3.0
        },
        {
          "title": "Google Cloud APIs",
          "content": "Gemini Flash(분석), Cloud TTS(나레이션), Lyria(BGM), GCS(저장)를 활용합니다.",
          "markerX": 5.2,
          "markerY": 3.6
        },
        {
          "title": "기존 코드 재사용",
          "content": "TtsService, BgmService, GCS 등 Veo3에서 구현된 서비스를 재사용합니다.",
          "markerX": 2.5,
          "markerY": 4.0
        }
      ],
      "wireframeElements": [
        {"type": "rect", "x": 0.5, "y": 1.35, "w": 6.3, "h": 0.4, "fill": "1e293b", "text": "시스템 아키텍처", "fontSize": 10, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.5, "y": 1.95, "w": 4.8, "h": 0.3, "fill": "0d9488", "text": "MNG (Laravel) - 서비스 레이어", "fontSize": 8, "color": "FFFFFF", "bold": true},

        {"type": "rect", "x": 0.6, "y": 2.4, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "Tutorial\nVideoController", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 2.2, "y": 2.5, "w": 0.3, "h": 0.35, "text": "→", "fontSize": 12, "color": "64748b"},
        {"type": "rect", "x": 2.6, "y": 2.4, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "Screen\nAnalysisService", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 4.2, "y": 2.5, "w": 0.3, "h": 0.35, "text": "→", "fontSize": 12, "color": "64748b"},
        {"type": "rect", "x": 4.6, "y": 2.4, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "SlideImage\nService (GD)", "fontSize": 7, "color": "1e293b"},

        {"type": "rect", "x": 0.6, "y": 3.15, "w": 1.5, "h": 0.55, "fill": "f59e0b", "text": "Tutorial\nVideoJob", "fontSize": 7, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 2.2, "y": 3.25, "w": 0.3, "h": 0.35, "text": "→", "fontSize": 12, "color": "64748b"},
        {"type": "rect", "x": 2.6, "y": 3.15, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "TTS Service\n(기존 재사용)", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 4.2, "y": 3.25, "w": 0.3, "h": 0.35, "text": "→", "fontSize": 12, "color": "64748b"},
        {"type": "rect", "x": 4.6, "y": 3.15, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "Tutorial\nAssembly (FFmpeg)", "fontSize": 7, "color": "1e293b"},

        {"type": "rect", "x": 0.6, "y": 3.9, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "Pptx\nGenerator", "fontSize": 7, "color": "1e293b"},
        {"type": "rect", "x": 2.6, "y": 3.9, "w": 1.5, "h": 0.55, "fill": "f1f5f9", "text": "BGM Service\n(기존 재사용)", "fontSize": 7, "color": "1e293b"},

        {"type": "rect", "x": 4.6, "y": 3.9, "w": 2.1, "h": 0.3, "fill": "0d9488", "text": "Google Cloud APIs", "fontSize": 8, "color": "FFFFFF", "bold": true},
        {"type": "rect", "x": 4.6, "y": 4.25, "w": 1.0, "h": 0.4, "fill": "f1f5f9", "text": "Gemini\n3.0 Flash", "fontSize": 6, "color": "1e293b"},
        {"type": "rect", "x": 5.65, "y": 4.25, "w": 1.0, "h": 0.4, "fill": "f1f5f9", "text": "Cloud\nTTS", "fontSize": 6, "color": "1e293b"},
        {"type": "rect", "x": 4.6, "y": 4.7, "w": 1.0, "h": 0.4, "fill": "f1f5f9", "text": "Lyria\nBGM", "fontSize": 6, "color": "1e293b"},
        {"type": "rect", "x": 5.65, "y": 4.7, "w": 1.0, "h": 0.4, "fill": "f1f5f9", "text": "GCS\n저장소", "fontSize": 6, "color": "1e293b"}
      ]
    }
  ]
}