bayvibe/promo-video-skill

프로모션 비디오 스킬 (Remotion)

웹사이트 URL 또는 사용자가 제공한 브랜드 정보로 프로모션 비디오를 생성합니다.

두 가지 경로

경로 A: 사용자가 웹사이트 URL을 제공한 경우

사용자가 URL을 제공하면:

1. python generate_promo.py --source <url>를 실행하여 src/data/brand.json과 src/data/script.json을 생성합니다.
2. 생성된 스크립트를 즉시 사용자에게 보여줍니다 — 깔끔한 요약을 제시합니다.

   브랜드명: xxx
   태그라인: xxx
   메인 색상: #xxx
   장면 구성:
     1. 인트로 (3초) — 브랜드 로고 + 이름 + 태그라인
     2. 기능 (5초) — 기능1 / 기능2 / 기능3
     3. 대시보드 (4초) — 제품 인터페이스 표시
     4. CTA (3초) — "xxx" + 버튼
   

3. 물어보세요: "이 스크립트를 확인하시겠습니까? 아니면 수정이 필요하신가요?"
4. 확인 후 npm run dev를 실행하고 사용자에게 http://localhost:3000에서 미리보기하라고 알립니다.

경로 B: 사용자가 아무것도 제공하지 않은 경우

사용자가 그냥 "비디오 생성" / "프로모션 영상 만들어줘"라고 말하면서 구체적인 내용 없이 요청하면, 코딩을 시작하지 마세요. 대신 다음 질문을 한 번에 모두 물어보세요:

1. 브랜드명이 무엇인가요? (또는 홍보하려는 제품/프로젝트 이름)
2. 제품을 한 문장으로 설명해주세요 (태그라인으로 사용)
3. 브랜드 색상이 있나요? (없으면 제가 골라드립니다)
4. 어떤 판매 포인트를 강조하고 싶으신가요? (최대 3개)
5. 웹사이트 URL이 있나요? (있으면 자동으로 정보를 가져올 수 있습니다)

사용자가 답변하면, 그 답변을 바탕으로 src/data/brand.json과 src/data/script.json을 직접 작성합니다. 그런 다음 스크립트 요약을 보여주고 확인을 받습니다 (경로 A의 2-3단계와 동일).

확인 후

1. npm run dev를 실행하여 Remotion Studio를 시작합니다.
2. 사용자에게 http://localhost:3000에서 미리보기하라고 알립니다.
3. 내보내기: npx remotion render PromoVideo out/promo.mp4

디자인 가이드라인

시각적 원칙

• 화면을 채우고 여백을 줄이세요 — 중간 장면(기능/대시보드)은 flex: 1 또는 전체 너비 레이아웃을 사용하여 1920×1080 캔버스를 꽉 채우고, 큰 빈 공간을 피하세요.
• 템플릿화된 반복 레이아웃을 피하세요 — 같은 비디오 내에서 "왼쪽 큰 제목 + 오른쪽 카드/mockup + 하단 자막" 구조를 반복해서 사용하지 마세요. 각 비디오는 최소 3가지 이상의 뚜렷이 다른 구성을 사용하세요: 예를 들어 전체화면 제목, 대각선 티커, 중앙 축 구성, 콜라주 스타일 카드, 잡지 스타일 분할, 전체화면 제품 인터페이스, 코드 오버레이, 타임라인/경로 구성 등.
• 같은 비디오 내 카드의 둥근 모서리는 일관되게 유지하세요 — 각 비디오에 CARD_RADIUS 토큰을 정의하고, 모든 카드, 패널, mockup 컨테이너, 기능 블록이 같은 값을 사용하도록 하세요. 같은 비디오 내에서 어떤 것은 직각, 어떤 것은 12px, 또 다른 것은 34px로 설정하지 마세요. 자막, 로고, 작은 버튼, 진행 바는 기능적 목적에 따라 고유한 둥근 모서리를 가질 수 있지만, 콘텐츠 카드는 통일되어야 합니다.
• 카드가 기본 답이 아닙니다 — 기능 장면은 오프셋 콜라주, 세로 겹침, 티커, 노드 다이어그램, 에디터 패널, 제품 스크린샷 크롭 등 다양한 방식으로 표현할 수 있습니다. 기본적으로 동일한 너비의 카드 3개를 가로로 배열하지 마세요.
• 끝 페이지는 반드시 다른 방식으로 마무리하세요 — CTA/엔딩은 앞 장면에서 사용한 왼쪽 제목-오른쪽 카드 또는 왼쪽 제목-왼쪽 버튼 구조를 기본으로 사용하지 마세요. 중앙 고정 레이아웃, 포스터 스타일 배열, 둘러싸는 정보 블록, 전체화면 타이포그래피 클로즈업, 또는 브랜드/URL을 시각적 중심으로 배치하여 명확한 마지막 장면을 만드세요. 중앙 구성 시 CTA 버튼과 URL은 상하로 배열하여 중심 축이 안정적으로 유지되도록 하세요.
• 메인 색상은 웹사이트 CTA 버튼에서 가져옵니다 — 브랜드 색상은 button/a 요소의 인라인 스타일에서 그라데이션 색상을 추출해야 하며, 무작위 CSS 색상이 아니어야 합니다.
• 전역 자막 — 각 장면 하단 중앙에 자동차 모양의 반투명 배경 자막 표시줄을 배치합니다. 글꼴 크기 32px, 패딩 18px 48px, 스프링 애니메이션으로 등장합니다. 자막은 script.json의 각 장면 subtitle 필드로 제어되며, 설정하지 않으면 표시되지 않습니다.
• URL 입력만 지원합니다 — SVG 모드는 제거되었으며, 데이터 소스로 웹사이트 URL만 허용합니다.

크롤링 규칙

• 브랜드명은 우선적으로 og:site_name을 사용하고, 그 다음 title 태그 (- 또는 |로 구분된 첫 번째 부분)를 사용합니다.
• 태그라인은 우선적으로 og:description을 사용하고, 80자 이내로 자릅니다.
• 브랜드 색상은 우선적으로 button/CTA 요소의 인라인 스타일에서 그라데이션 색상을 추출합니다.
• 기능 제목은 길이가 45자 미만인 것으로 필터링하고, 너무 긴 문장은 건너뜁니다.
• 웹사이트의 밝은/어두운 테마를 감지하여 배경색과 텍스트 색상을 자동으로 매칭합니다.

데이터 검증 체크리스트

데이터를 생성한 후, 사용자에게 확인을 요청하기 전에 다음 사항을 확인하세요:

• 브랜드명이 간결하고 깔끔한가요? (전체 HTML title이 아닌가요?)
• 태그라인이 80자 미만인가요?
• 메인 색상이 CTA 버튼에서 가져온 것인가요? (무작위 색상이 아닌가요?)
• 기능은 정확히 3개이며, 제목이 간결하고 강력한가요?
• 각 장면의 텍스트가 1920×1080 캔버스에서 읽을 수 있나요?

시각적 자체 점검 체크리스트 (필수)

비디오를 구현하거나 수정한 후에는 반드시 시각적 검토를 직접 수행해야 하며, lint만 실행해서는 안 됩니다:

1. npm run lint를 실행합니다.
2. npx remotion compositions src/index.ts를 사용하여 composition이 존재하고, 지속 시간이 올바른지 확인합니다.
3. 각 주요 장면에서 최소 1장의 스틸 이미지를 내보내 레이아웃을 자체 점검합니다. 예:

   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene1.png --frame=30
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene2.png --frame=120
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene3.png --frame=210
   

4. 키프레임 이미지를 열어 다음 문제를 확인합니다. 하나라도 발견되면 반드시 먼저 수정한 후에 전달하세요:
   • 중요한 텍스트, 버튼, 자막이 잘리거나 캔버스를 벗어나지 않았습니다.
   • 의도적인 블리드 장식/모션 레이아웃(티커, 배경 그래픽, 큰 제목 크롭 등)은 디자인 선택으로 보여야 하며, 오류처럼 보이지 않아야 합니다. 캔버스를 벗어날 수 있습니다.
   • 카드 내부 컨트롤(진행 바 트랙, 차트 막대, 입력 필드, 버튼, 상태 표시줄 등)이 카드 경계를 넘지 않았습니다. 이러한 의도하지 않은 오버플로우는 반드시 수정해야 합니다.
   • 읽을 수 없을 정도로 서로 겹치는 요소가 없습니다.
   • 자막이 중앙에 있으며 주요 CTA 또는 핵심 장면을 가리지 않습니다.
   • 같은 비디오 내 모든 콘텐츠 카드/패널/mockup 컨테이너가 동일한 CARD_RADIUS를 사용합니다.
   • 최소 3가지 이상의 다른 레이아웃이 사용되었으며, 비디오 전체가 동일한 좌우 분할 구조를 반복하지 않습니다.
   • 화면 가장자리에 안전 영역이 있습니다: 중요한 텍스트는 가장자리에서 최소 64px 떨어져 있습니다.
   • 긴 단어, 긴 헤드라인, 버튼 텍스트가 컨테이너를 넘치지 않습니다.
5. 사용자가 Studio에서만 미리보기 원하는 경우 mp4를 반복해서 내보내지 마세요. http://localhost:3000에 접속할 수 있는지만 확인하면 됩니다.

파일 구조

src/
├── Root.tsx              # Remotion composition 등록
├── PromoVideo.tsx        # 메인 비디오 오케스트레이터
├── scenes/
│   ├── Scene01_Intro.tsx     # 로고 + 브랜드명 + 태그라인
│   ├── Scene02_Feature.tsx   # 세 개의 동일 너비 카드 가로 배열 슬라이드 인
│   ├── Scene03_Dashboard.tsx # 전체 너비 제품 인터페이스 시뮬레이션
│   └── Scene04_CTA.tsx       # 행동 촉구 + 버튼
└── data/
    ├── script.json       # 비디오 스크립트 (카피, 타이밍)
    └── brand.json        # 브랜드 데이터 (색상, 폰트, 로고)

데이터 형식

brand.json

{
  "name": "브랜드명",
  "tagline": "한 줄 설명",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "기능 1", "description": "짧은 설명" },
    { "title": "기능 2", "description": "짧은 설명" },
    { "title": "기능 3", "description": "짧은 설명" }
  ],
  "cta": {
    "headline": "지금 시작할 준비가 되셨나요?",
    "buttonText": "무료로 시작하기",
    "url": "https://example.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

커스터마이징

• src/data/brand.json을 편집하여 색상, 폰트, 로고, 브랜드명을 변경합니다.
• src/data/script.json을 편집하여 장면 카피와 타이밍을 변경합니다.
• src/scenes/의 장면 컴포넌트를 편집하여 레이아웃/애니메이션을 변경합니다.