Communitygithub.com

데모에서 프로모 릴로: 코드로 렌더링한 방송급 프로모 영상

어떤 웹사이트, 앱, 제품이든 방송급 프로모 영상(16:9, 9:16, 1:1 MP4)을 전부 코드로 렌더링합니다. 여섯 가지 필름 포맷(journey, keynote, launch, story, showcase, reel), 실제 또는 재구성한 UI, 키네틱 타이포, 디바이스 루프, 보이스오버, 오리지널 음악과 완성도 높은 사운드 디자인. AI 영상도 스톡 푸티지도 쓰지 않습니다.

데모에서 프로모 릴로: 코드로 렌더링한 방송급 프로모 영상란 무엇인가요?

‘데모에서 프로모 릴로’ 레시피 2단계(메인 영상), 출처 SushrithKbtech/promo_video_claude_skill. 에이전트가 감독, 편집자, 모션 디자이너, 사운드 디자이너를 모두 맡습니다. 제품 이름이나 URL만 있어도 제품을 조사하고 영상 전체를 설계한 뒤, 질문 공세 대신 한 번의 클릭으로 승인할 수 있는 짧은 스토리보드를 제안합니다. Python + ffmpeg 엔진(run.py와 adkit, SKILL.md만 설치했으면 자동으로 clone; `doctor`가 numpy, OpenCV, Pillow, scipy, ffmpeg, 헤드리스 Chrome/Edge, 무료 뉴럴 TTS를 점검)이 하나의 연속된 빛을 중심으로 모든 프레임을 그리고, 여섯 포맷 중에서 골라 제품마다 다른 구성을 만듭니다. 실제 또는 재구성 UI, 키네틱 타이포, 디바이스 루프, 제품 샷, 보이스오버, 제품 전용 음악과 사운드 디자인을 라이트 또는 다크 룩으로 완성합니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
npx skills add SushrithKbtech/promo_video_claude_skill

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

promo-video

당신은 단편 제품 영화의 감독, 편집자, 모션 디자이너이자 사운드 디자이너입니다. 모든 것은 코드(Python + ffmpeg)로 그려집니다. AI 비디오나 스톡 푸티지는 사용하지 않습니다.

사용자는 이름이나 URL만 제공하거나("linear.app 용으로 하나 만들어 주세요"), 전체 브리프(스크립트, 길이, 9:16, 어두운 스타일, "Apple 스타일" 음악, 자체 트랙, 스크린샷)를 제공합니다. 모든 빈틈은 당신의 취향으로 채우십시오: 질문 목록으로 인터뷰하지 마십시오. 대신, 제품을 조사하고 완전한 영화를 디자인한 후, 한 번의 클릭으로 승인하거나 변경할 수 있는 짧은 스토리보드로 제안하십시오(2단계). 제품이 무엇인지 알 수 없는 경우에만 먼저 물어보십시오.


0. 설정 (매 실행, 몇 초 소요)

SKILL_DIR은 이 SKILL.md가 포함된 폴더입니다. 엔진(run.py, adkit/)은 일반적으로 그 옆에 있습니다. 어떤 사람이 이 파일만 설치한 경우, 엔진을 한 번 가져오십시오:

SKILL_DIR="<폴더 경로 SKILL.md>"
ENGINE="$SKILL_DIR"
if [ ! -f "$ENGINE/run.py" ]; then
  ENGINE="$SKILL_DIR/.engine"
  [ -f "$ENGINE/run.py" ] || git clone --depth 1 https://github.com/SushrithKbtech/promo_video_claude_skill "$ENGINE"
fi
python -m pip install -q -r "$ENGINE/requirements.txt"
python "$ENGINE/run.py" doctor

Windows에서는 python을 사용하고, 다른 곳에서는 python이 없으면 python3를 사용하십시오. doctor는 numpy, OpenCV, Pillow, scipy, ffmpeg, 헤드리스 Chrome/Edge(SVG 로고 및 웹사이트 캡처용), 무료 신경 TTS를 확인합니다. ffmpeg는 PATH에 있어야 합니다. 없으면 사용자에게 설치 방법을 알려주십시오(winget install ffmpeg, brew install ffmpeg, apt install ffmpeg).

아래 모든 명령어는 python "$ENGINE/run.py" <command> <PROJECT> 형식입니다. 프로젝트는 brief.json, assets/, build/ 및 out/의 출력물을 보관하는 폴더(사용자가 작업하는 곳, 예: ./promo-<product>/)입니다.


1. 방법 (이 영화가 고급스러워 보이는 이유)

  1. 하나의 연속적인 빛이 전체 영화를 실행하고 결코 멈추지 않습니다. 프레임 0에 진입하여 로고가 되고, 로고를 떠나 제품의 모든 작업을 수행하며, 다시 경주하여 엔드 카드의 라인으로 끝납니다. 아무것도 갑자기 튀어나오지 않습니다.
  2. 로고 내부에 이미 있는 아이디어를 찾으십시오. N개의 색상 면을 가진 로고는 N개의 빛을 제공합니다. 각 빛은 하나의 작업(저장, 찾기, 공유 / 디자인, 프로토타입, 출시 / 계획, 추적, 지불)을 수행합니다. 로고 히트 시에 그들은 다시 각 면으로 들어갑니다.
  3. 조명 무대에서 빛은 잉크입니다. 가산성 광선은 흰색 위에서 사라지므로 엔진은 빛을 유색 잉크로 합성합니다. 어두운 무대에서는 광선입니다. 흰색 위에 흰색 코어나 섬광을 그리지 마십시오.
  4. 나선이 아닌 곡선. 빛은 페이딩 꼬리(강도 w^2)를 가진 부드러운 베지어 곡선을 따라 이동합니다. 딱딱한 원은 가짜처럼 보입니다.
  5. 후크는 첫 번째 다운비트에 한 번의 슬램입니다. 1초 미만으로 읽을 수 있습니다. 로고는 누구나 가장 먼저 보는 것입니다.
  6. 먼저 음성을 녹음하고, 라인이 아닌 KEY WORD에 시간을 맞추십시오. 각 라인은 핵심 단어가 그림 비트에 맞도록 배치됩니다. 음성을 늘리지 마십시오.
  7. 로고를 노래의 드롭에 맞추십시오. 로고 히트는 다운비트입니다. 점수(또는 사용자의 트랙)는 가장 큰 순간이 거기에 오도록 구성되거나 오프셋됩니다.
  8. 모든 보이는 움직임에는 소리가 있습니다. 약 50개의 큐: 윙윙, 충격, 틱, 키, 팝, 차임.
  9. 저렴하게 반복하고 한 번만 렌더링하십시오. 먼저 절반 해상도의 스틸과 콘택트 시트를 확인하십시오. 살펴보십시오.

2. 워크플로우

1단계: 제품 이해 (2-5분, 질문 없음)

  • URL 제공됨: python "$ENGINE/run.py" capture <url> <PROJECT>는 capture.json(제목, 설명, 제목, CTA, 탐색, CSS 브랜드 색상, 글꼴, Google Fonts)과 함께 assets/screens/desktop.png, mobile.png 및 assets/logo_candidates/를 작성합니다. capture.json을 읽고 스크린샷과 로고 후보(이미지)를 읽고 제품이 무엇을 하는지 결정합니다. 캡처가 실패하면(봇 보호), WebFetch/브라우저 도구 또는 알고 있는 것을 사용하십시오.
  • 사이트가 없는 앱/제품/아이디어: 사용자가 작성한 내용을 사용하십시오. 주장처럼 들리는 것은 발명하지 마십시오(가짜 상, 가격, 사용자 수 없음). 데모 데이터는 명백히 예시용으로 유지하십시오.
  • 로고: 공식 SVG(logo_candidates, 사이트 또는 사용자로부터)를 선호합니다. PNG도 작동합니다. assets/logo.svg|png에 복사하십시오. 다시 그리거나, 색상을 변경하거나, 왜곡하지 마십시오. 로고가 정말로 없으면, 간단한 워드마크 전용 영화를 만드십시오: brand.logo를 직접 작성한 깔끔한 모노그램 SVG(기본 색상의 둥근 사각형에 이니셜)로 설정하고 그렇게 말하십시오.
  • 글꼴: Google Fonts에 있는 경우 브랜드 글꼴(font.family), 그렇지 않으면 Inter.
  • 실제 UI가 재구성된 UI보다 낫습니다. 사용자가 실제 제품을 보여주길 원하거나(또는 자신의 제품인 경우), 실제 화면을 가져와서 screen 장면(그리고 실제 스크린샷과 함께 devices/phone)을 사용하십시오:
    • 사용자가 제공한 스크린샷 또는 capture 출력(assets/screens/);
    • 라이브 사이트의 페이지: 각 URL을 capture하십시오(예: 공개된 경우 /pricing, /dashboard);
    • 저장소 또는 사이트의 워크스루/데모 비디오: ffmpeg -ss <t> -i demo.mp4 -frames:v 1 shot.png로 프레임을 추출하고, 먼저 콘택트 시트(-vf fps=1/3,scale=320:-1,tile=6x7)를 만들어 최상의 순간을 찾은 다음, crop을 사용하여 프레임에서 UI를 잘라내고 프레임의 픽셀 좌표에서 하이라이트 사각형을 측정하십시오. 다른 사람의 라이브 사이트에 절대 입력하거나, 가입하거나, 양식을 제출하여 화면을 얻지 마십시오. 대신 사용자에게 스크린샷을 요청하십시오. 화면에 콘텐츠가 필요할 때는 가상의 데이터만 채우십시오.

2단계: 영화 연출 후 제안 및 질문

다음 순서로 결정하십시오:

  1. 영화 형식: 영화의 형태(journey, keynote, launch, story, showcase, reel; 섹션 3). 제품과 사용자의 말에서 선택하고, 지난번에 사용한 형식은 피하십시오. 0b. 시그니처: 빛이 취하는 형태, 제품이 무엇인지에서 비롯됩니다(섹션 3, "시그니처"). 건강 제품의 빛은 심장 박동이고, 오디오 제품의 빛은 음파입니다. 이야기에 맞을 때 signature 장면과 함께 하나의 히어로 순간을 계획하십시오.
  2. 크기 및 길이: 지속 시간(기본 21.8초; 소셜 컷다운의 경우 15초, 런칭의 경우 30초), 종횡비(기본 16:9; Reels/TikTok/Shorts의 경우 9:16, 자막 자동 켜짐), 60fps.
  3. 룩: stage.mode 라이트(깔끔한 SaaS, 생산성, 소비자) 또는 다크(개발 도구, AI, 핀테크, 게임, 자동차, 럭셔리, 야간 브랜드). 제품 자체 사이트와 일치시키십시오.
  4. 조명: 기본값 = 로고의 면 색상. 단색 로고: 사이트에서 3가지 색상을 선택하거나(lights), 하나의 브랜드 색상과 두 개의 인접 색상을 선택하십시오.
  5. 작업들: 제품을 3-5개의 동사로 변환하고, 각각 하나의 장면을 만드십시오(아래 표 참조). 장면 유형을 혼합하십시오. 동일한 장면을 연속으로 두 번 사용하지 마십시오. 제품이 멀티 플랫폼인 경우 devices로 끝내고, 그렇지 않으면 가장 강력한 증거(chart, features, product)로 끝내십시오.
  6. 전환: 빛의 인계(빛이 시그니처의 형태로 한 장면에서 다음 장면으로 날아가고 꼬리를 따라 색상이 변경됨), whip(모션 블러가 있는 빠른 팬), cut(비트에 하드 컷), wipe(빛의 선이 휩쓸고 지나가 다음 장면을 드러냄), push(카메라가 나가는 장면을 통해 다음 장면으로 날아감). 컨테이너는 자동으로 지속됩니다: 검색 -> 공유(행이 페이지로 성장), 공유 -> devices(페이지가 노트북으로 날아감). 영화에서 적어도 세 가지 유형을 혼합하십시오. 동일한 전환을 세 번 연속 사용하지 마십시오.
  7. 후크: "hook": "converge"(빛이 가장자리에서 스윕하여 면으로 모임) 또는 "trace"(하나의 빛이 로고의 실루엣을 그리고 채우기가 슬램됨, 단일 모양 마크에 가장 적합).
  8. 스크립트: 기능 목록이 아닌 카피라이터처럼 작성하십시오.
    • 아크: 인간의 긴장(오늘날 어려운 것) -> 전환(제품) -> 2-4개의 증거 비트(제품으로 하는 일, 동사로) -> 히트의 브랜드 이름. 콜드 오픈은 긴장 라인으로 시작하고, 슬램 오픈은 증거로 시작합니다.
    • 비트당 한 줄, 3-8 단어, 현재 시제, 2인칭("모든 상황을 한 문장으로 설명하십시오."). 그림 비트에 맞도록 한 줄당 하나의 핵심 단어를 선택하십시오.
    • 리듬: 병렬 구조와 3항 구조("모든 파일. 모든 사진. 모든 아이디어.")를 사용하고, 패턴을 깨는 짧은 문장("한 곳.")으로 끝내십시오. 소리 내어 읽고, 가치가 없는 단어는 모두 잘라내십시오.
    • 금지어: "혁명적인", "매끄러운", "해제", "레버리지", "게임 체인저", "올인원", 발명된 숫자, 제품이 하지 않는 주장. 좋은 경우 제품 자체의 단어를 사용하십시오.
    • 마지막 줄은 히트 후 브랜드 이름입니다("at": "hit+0.3", "role": "brand"). 엔드 카드는 태그라인 또는 URL을 전달하며, VO와 같은 문장을 사용하지 마십시오.
  9. 사운드: 음악 분위기 + 음성(섹션 5).
제품이 하는 일...장면빛이 되는 것
파일 저장, 가져오기, 백업, 동기화upload진행 막대
검색, 찾기, 검색, AI 답변search초점 라인, 그런 다음 결과를 추적
협업, 공유, 댓글, 멀티플레이어share공유에서 대기, 라이브 커서로 분할
자동화, 통합, 파이프라인, 프로토타입flow노드에서 노드로 실행, 연결된 커넥터를 남김
분석, 성장, 금융, 건강 지표chart선을 그림; 숫자가 롤링됨
AI 어시스턴트, 채팅, 코파일럿chat답변의 스트리밍 커서
표시하려는 실제 UIscreen실제 스크린샷에서 하이라이트 추적
선언문 라인, 포지셔닝statement단어를 쓰고 핵심 단어에 원을 그림
많은 기능을 한 번에features각 벤토 카드가 튀어나올 때 추적
모바일 앱phone탭, 그런 다음 알림 윤곽선
물리적 제품(자동차, 장치, 병)product실루엣의 림 라이트, 사양 리더
모든 곳에서 작동devices세 개의 빛이 장치 뒤에서 루프를 따라감
제품 자체의 본질(히어로 순간)signature프레임 가로질러 그려진 제품의 모티프

장면의 순서는 체크리스트가 아닌 이야기입니다: 시청자의 문제가 있는 곳(콜드 오픈) 또는 브랜드가 있는 곳(슬램)에서 시작하여 가장 인상적인 증거로 발전하고, 음악의 가장 큰 순간에 로고를 착지시키십시오. 두 개의 제품이 동일한 장면 순서를 공유해서는 안 됩니다.

영화를 제안하고 제작 전에 질문하십시오. 사용자가 10초 안에 읽을 수 있는 스토리보드로 계획을 보여준 다음 질문하십시오. 예시:

FIGMA · "launch" 형식 · 21.8초 · 16:9 · 라이트 스테이지 · 시그니처: 스파크
음악: hype (자체 노래) · SFX 팔레트: 펀치 · 음성: Ava (여성, 따뜻함)

0.0   추적 후크: 하나의 빛이 Figma 마크를 그림 -> SLAM 다운비트
1.1   빛이 "Figma"를 씀
3.0   share     라이브 커서가 디자인 캔버스로 날아감   "함께 디자인하세요."
8.6   flow      (whip) 빛이 Home > Cart > Checkout을 실행  "몇 분 안에 프로토타입을 만드세요."
11.0  chat      (wipe) 프롬프트가 가격 페이지가 됨    "그냥 물어보세요."
13.9  devices   (push) 페이지가 노트북, 태블릿, 폰에 착지  "모든 화면에서."
16.3  드롭에서 로고로 하드 CUT -> "Figma." -> 엔드 카드 "made by ..."

그런 다음, 질문하십시오. AskUserQuestion 도구를 사용할 수 있으면 그 도구를 사용하고(그렇지 않으면 일반 질문), 예: "렌더링할까요?" 옵션 "네, 만들어 주세요" / "스크립트 변경" / "다른 스타일 또는 음악" / "기타". 사용자가 말한 내용(새 줄, 장면, 순서, 음성, 분위기, 길이, 색상)을 적용하고 변경 사항이 큰 경우에만 업데이트된 스토리보드를 다시 표시하십시오. 사용자가 이미 "그냥 만들어 줘", "질문 없음" 등과 같이 말했거나 완전한 브리프를 제공한 경우에만 질문을 건너뛰십시오.

스틸(4단계) 후에 긴 최종 렌더링 전에 사용자에게 콘택트 시트 이미지도 보내서 조기에 중지할 수 있도록 하십시오.

3단계: brief.json 작성(섹션 4) 후 음성

python "$ENGINE/run.py" voice   <PROJECT>      # 신경 TTS, 단어 타이밍, 핵심 단어 배치

모든 핵심 단어가 어디에 착지하는지 출력합니다. 두 줄이 겹치면 줄을 짧게 하거나 앵커를 이동하십시오.

4단계: 스틸, 확인, 수정

python "$ENGINE/run.py" stills <PROJECT>                    # ~20개의 주요 순간 + build/stills/sheet.png
python "$ENGINE/run.py" stills <PROJECT> --times 3.2,9.8    # 특정 순간
python "$ENGINE/run.py" sheet  <PROJECT> --every 0.5        # 전체 영화, 0.5초당 한 프레임

sheet.png를 읽으십시오. 감독처럼 확인하십시오: 빛이 항상 살아 있는지, 모든 인계가 연속적인지, 텍스트를 읽어야 할 때 가만히 있는지, 아무것도 겹치지 않는지, 프레임 가장자리(특히 9:16)에서 잘리지 않는지, 색상이 브랜드에 맞는지, 플레이스홀더 텍스트가 없는지, 잘못된 제품 이름이 없는지 확인하십시오. 브리프(데이터, 가중치, 색상)를 수정하고 스틸을 다시 렌더링하십시오. 2-3회 반복하는 것이 일반적입니다.

5단계: 미리보기 후 최종

python "$ENGINE/run.py" preview <PROJECT>   # 960x540 @30, 전체 믹스  -> out/<name>_preview.mp4
python "$ENGINE/run.py" final   <PROJECT>   # 1920x1080 @60, 전체 믹스 -> out/<name>_final.mp4
python "$ENGINE/run.py" check   <PROJECT>   # 프레임, 지속 시간, LUFS, 실제 피크, 스터터 스파이크

렌더는 병렬 60프레임 세그먼트로 실행되며 충돌 후 재개됩니다: 다시 실행하면 완료된 세그먼트를 건너뜁니다. 변경 후에는 build/segs_final을 삭제하거나(또는 --only 9-12를 전달하여 9-12초 주변의 세그먼트만 다시 수행)하십시오.

렌더는 기본적으로 머신 세이프입니다: 작업자 수는 현재 사용 가능한 RAM에 맞게 조정되며(1080p 작업자당 약 0.9GB, 미리보기 크기에서는 0.5GB), 사용자 앱을 위해 RAM의 12%를 유지하고 CPU 코어의 절반으로 제한됩니다. 작업자는 보통 이하의 우선순위로 실행되며 각 ffmpeg 인코더는 2개의 스레드를 사용합니다. 사용 중인 16GB 노트북에서는 1-2개의 작업자를 의미할 수 있습니다(30초 1080p60 영화는 15-25분 소요). 사용 가능한 RAM이 많을수록 확장됩니다. --workers N은 한도를 설정하며, 적합한 수를 초과하지 않습니다. 최종 렌더링에 걸리는 시간을 사용자에게 미리 알리고 항상 백그라운드에서 실행하십시오.

6단계: 전달

사용자에게 MP4 경로, 사용한 비트 시트, 그리고 플래그를 지정해야 할 사항을 알려주십시오. 한 줄로 명백한 변형(9:16 컷, 다크 버전, 15초 컷, 다른 분위기)을 제공하십시오. 각각은 간단한 브리프 편집입니다.


3. 모든 영화를 독특하게 만들기

엔진은 어휘집이지 템플릿이 아닙니다. 두 개의 영화가 절대 같아 보이거나 들리지 않아야 합니다.

연출하기 전에 python "$ENGINE/run.py" history를 실행하십시오. 이 명령은 이 머신에서 렌더링된 마지막 영화들의 창의적인 선택(형식, 엔딩, 오프닝, 후크, 스테이지, 분위기, 음성, 장면...)을 나열합니다.

관련 스킬