motion-film：코드로 영상 만들기은(는) 무엇을 하나요?

화면, 애니메이션, 자막, 음향이 모두 코드로 생성되며, 프레임별로 렌더링되어 MP4로 출력됩니다. 비디오 생성 모델을 사용하지 않습니다. 이 스킬은 방법론 + 경량 도구 세트이며,素材 라이브러리를 포함하지 않습니다.素材는 영상에 맞춰 즉시 찾고 합성하며, 사용 권한을 등록합니다.

먼저 어떤 경로인지 판단하세요

경로	일반적인 요청	주요 참고 문서
A. 제품 프로모션 영상	웹사이트/앱/프론트엔드 프로젝트를 프로모션 영상, 기능 데모 영상으로 제작	`references/product-promo.md`
B. 스타일 단편 영화	"XX 스타일로 30초짜리 영상을 만들어서...", MG 애니메이션, 자막, 인트로	`references/style-atlas.md` + `references/style-spec.md`
C. 단일 샷/단일 효과	"타이틀 플라이인 효과 만들기", "락킹 프레임 효과 만들기"	아래 원칙에 따라 직접 진행, `references/aesthetic-rules.md` 관련 항목 참고

두 주요 경로 공통 참고: references/directing.md (연출), references/timing.md (리듬), references/sound.md (사운드), references/tech.md (렌더링), references/review.md (리뷰). 사용자가 BGM을 제공했으며 비트 싱크 필요: references/beat-sync.md, 음악 분석 후 스토리보드 제작.

작업 시작 전에 한 번만 질문

확정할 수 없는 사항을 하나의 메시지로 합쳐서 질문하고, 이후에는 추가 질문하지 않습니다. 나머지는 기본값을 사용하고 treatment에 명시합니다:

사용자만 아는 주제 (제품 핵심, 타겟 오디언스, 배포 플랫폼, 반드시 포함되어야 할 콘텐츠);
사용자 자체素材 유무: 로고, 브랜드 컬러/폰트, 나레이션, 음악, 참고 영상;
스토리보드/스타일 프레임을 먼저 보고 최종본을 만들지 여부 (보려면 한 번 멈춤; 보지 않으면 끝까지 진행).

기본값: 30–60 초 (단일 샷 3–8 초); 1920×1080; 제품 영상 30 fps, 스타일 영상은 스타일에 따라 결정 (24/30); 자막과 나레이션은 사용자 언어 따름; 라우드니스 −14 LUFS, 트루 피크 ≤ −1 dBTP. 사용자가 명확히 "네가 정해", "바로 해"라고 말하면, 질문 없이 기본값으로 진행합니다.

열 가지 핵심 원칙 (네 가지 출처에서 반복 검증된 경험)

화면은 시간의 순수 함수다. render(t)는 동일한 t에 대해 항상 동일한 프레임을 그립니다. Date.now() 금지, 시드 없는 Math.random() 금지, 프레임 간 상태 누적 금지. 랜덤은 항상 mulberry32/hash 고정 시드를 사용합니다. 모든 프레임은 개별적으로, 순서에 관계없이, 병렬로 렌더링 가능해야 합니다.
하나의 타임라인이 모든 것을 구동한다. 컷 경계, 키 액션, 자막, 사운드 이펙트, 음악 히트 포인트는 모두 동일한 큐 시트에서 파생됩니다. 길이 변경은 한 곳만 수정하면 되고, 사운드는 자동으로 따라옵니다. 비트 싱크 영상은 박자 기호로 작성하고 (beatF(n)), 원시 프레임 번호를 사용하지 않습니다.
코드가 아니라 시청자를 위해 시간을 측정한다. 각 컷은 시청자가 이해해야 할 정보 포인트(reads)를 나열하고, 한 번에 하나만 제공합니다. 동작은 빨라도 되지만, 의미는 머물러야 합니다. 첫 번째 버전은 거의 항상 너무 빠릅니다. 기본적으로 한 단계 느리게 설정합니다. 공식은 timing.md 참고.
하나의 컷은 한 가지만 말한다. 하나의 기법은 전체 영상에서 한 번만 주인공이 된다. 오프닝은 하나의 주인공 + 하나의 완전한 동작 호(시작-전개-종결)만 제공합니다. 반복되는 컷, 반복되는 슬로건은 모두 삭제합니다.
움직임은 생명체처럼, 기계처럼 보이지 않아야 한다. 선형 보간 사용 금지; 준비 → 동작 → 후속; 부품 간의 시간차를 두어 "쌍둥이"(좌우 대칭, 그룹 동기화)를 피합니다. 바운스가 필요한 이징은 오버슈트가 있어야 합니다.
시각 언어는 주제/제품 자체에서 성장한다. 제품 영상의 폰트, 컬러 팔레트, 라운드 코너, 재질은 제품 디자인 시스템에서 추출합니다. 스타일 영상은 해당 스타일의 "본질과 그것이 아닌 것"을 준수합니다. 별도의 무관한 "프로모션 영상 스킨"을 덧씌우지 않습니다.
효과는 절제한다. 라이트 효과는 무더기로 사용하지 않고, 주인공에게만 한 번, 그리고 라운드 코너 안에 넣습니다. 제품 영상은 기본적으로 핸드헬드 떨림을 추가하지 않습니다. 전체 화면 수준의 충격 (화면 진동/플래시 프레임/전체 스케일 펌프)은 영상 전체에 ≤ 3곳.
사운드는 영상의 절반이다. 앰비언트 + 폴리 + 음악의 세 레이어; 보이는 동작에는 모두 소리가 있습니다. 클라이맥스 전에는 진정한 침묵을 남깁니다. 사운드는 화면이 잠긴 후에 작업합니다.
가장 저렴한 산출물로 먼저 방향을 정한다. treatment (텍스트) → 스타일 프레임 (실제 렌더링 코드로 생성된 정지 프레임) → 저해상도 프리뷰 → 최종 렌더링. 방향에 대한 논쟁은 비용이 많이 드는 단계에 들어가지 않습니다.
먼저 스스로 보고, 그 다음 독립적인 리뷰를 받는다. 매 수정 라운드마다 스스로 컨택트 프린트/액션 바/크롭 확대를 확인합니다. 전달 전에 제작에 참여하지 않은 리뷰어 (클린 컨텍스트의 서브 에이전트, 또는 별도 세션)에게 review.md에 따라 점수를 매기고 오류를 찾도록 하여, 한 라운드만 수정합니다.

워크플로우

Brief: 위의 질문들; 제품 영상의 경우 추가로 읽기 전용 제품 검사 (포지셔닝, 기능, 페이지 상태, 디자인 토큰, 데이터 리스크)를 수행합니다.
Treatment (TREATMENT.md 작성, 모든 화면 코드를 작성하기 전): 세 가지 후보 구조 중 하나 선택; logline과 아크; 참고 작품 "배울 점 / 가져오지 않을 점"; 컷 테이블 (샷 크기, 카메라 위치, 카메라 움직임, 길이, 이유); 초 단위 비트; 큐 맵; 사운드 디자인 테이블; 자막 및 폰트 디자인. 템플릿은 directing.md 참고.
스타일 샘플 결정: 2–3장의 스타일 프레임 (캐릭터가 있으면 모델 시트 포함), 실제 렌더링 코드로 렌더링하고, 자신이 스타일 설명과 대조하여 확인합니다.
컷별 구현: 먼저 키 포즈를 정지 프레임으로 배치하여 읽을 수 있는지 확인한 후, 중간 동작을 보완합니다. 각 컷마다 2개의 승인 시점을 하드코딩하고, 완료 시 정지 프레임 자체 점검을 수행합니다.
사운드: 화면 타임라인이 잠긴 후, 큐 시트에서 음악, 폴리, 자막을 생성; 믹싱, 마스터링.
자체 점검: 컨택트 프린트 (0.5–1 초마다 프레임), 키 액션 0.1–0.2 초 액션 바, 텍스트/에지 전체 해상도 크롭; 전체 속도로 사운드와 함께 한 번 시청. aesthetic-rules.md의 각 항목을 확인합니다.
독립 리뷰 + 한 라운드 수정: review.md. 작은 문제는 같은 라운드에서 수정 완료; 큰 문제는 전달 시 한 문장으로 설명.
전달: 아래 참고.

도구 (`scripts/`, 필요에 따라 프로젝트로 복사)

파일	역할
`scripts/render.mjs`	렌더러: HTML 페이지가 `renderAt(t)`를 노출 → 정지 프레임 / 컨택트 프린트 / 액션 바 / 크롭 / MP4, 멀티 워커, 모션 블러 (서브 프레임 누적), 세로 모드 지원
`scripts/motion.js`	페이지 내에서 사용하는 순수 함수 도구: 시드 랜덤, 이징 패밀리, 키프레임, 스프링, 오버슈트, 시간차, 박자 기호, 속도 곡선
`scripts/sfx.py`	프로그래매틱 폴리 및 믹싱: whoosh / impact / riser / pop / click / sparkle / tick, 이벤트 테이블에서 `mix.wav` 합성
`scripts/master.sh`	믹싱 + 2패스 loudnorm (−14 LUFS / −1 dBTP) + 블랙 프레임 감지 + 길이/사양 보고서
`scripts/beat_grid.py`	BGM 비트 그리드 피팅 (2x / 0.5x / 3:2 오판 교정 포함) + kick/snare/hihat 분류 + 에너지 구조, `beat_data.json` 출력
`scripts/capture.mjs`	제품 영상素材 세 가지: 전체 페이지 2x 스크린샷, 요소 컷 (투명 가능, 4x 가능), 빈 배경판, `layout.json` 좌표 테이블
`templates/starter/`	바로 실행 가능한 9.6초 데모 프로젝트 (타임라인, `renderAt`, 사운드 이벤트, 자막, `build.sh` 한 줄 명령어로 영상 출력), 새 영상은 여기서 복사하여 시작

render.mjs는 /lib/를 이 스킬의 scripts/ 디렉토리로 매핑합니다. 페이지에서 <script src="/lib/motion.js">를 사용하여 도구 함수를 참조할 수 있습니다. 새 프로젝트: templates/starter/ 복사 → 프로젝트에서 npm i puppeteer-core 실행 → 타임라인 및 컷 수정 → MF=<이 스킬 경로> sh build.sh 실행.

제품 영상이 Remotion을 사용하는 경우: 방법은 동일하게 적용됩니다 (tech.md에 비교 설명 있음). 단, Remotion은 회사 사용자에게 유료 라이선스가 필요할 수 있으므로, 작업 시작 전에 사용자에게 알립니다.

의존성: Node 18+, ffmpeg, Chrome/Chromium (render.mjs가 자동 찾기, 또는 CHROME_PATH 설정); npm i puppeteer-core를 프로젝트에 설치. Python 3 + numpy/scipy (오디오); librosa는 비트 분석 시에만 설치하며, 프로젝트 자체 venv에 설치합니다. 시스템 소프트웨어를 대신 설치하지 않으며, 누락된 경우 그 라운드의 질문에서 언급합니다.

전달

프로젝트 폴더 내:

<name>.mp4 (및 poster.jpg); BGM이 있는 제품 영상은 BGM이 없는 버전 (사운드 이펙트 유지)을 추가로 제공하여 나중에 음악을 교체할 수 있도록 함;
<name>.srt (자막/나레이션이 있는 경우);
TREATMENT.md;
CREDITS.md: 모든 타사素材 (폰트, 이미지, 음악, 샘플, TTS 엔진)의 출처 및 사용 권한;
소스 코드 및 한 줄 명령어의 build.sh.

사용자에게 알립니다: 완성된 영상 위치, CREDITS.md에 사용 권한이 명시되어 있음, 사용자가 직접 제공한素材의 사용 권한은 사용자 본인에게 책임이 있음. 사용자가 묻지 않는 한, 어떤 홍보, 저작자 표시 요청 또는 "어디에 게시할지"에 대한 조언도 포함하지 않습니다.

금지 사항

참고 작품은 문법 (구도, 리듬, 카메라 움직임, 색상 구성 논리)만 배우고, 캐릭터, 디자인, 멜로디, 특정 컷, 로고, 폰트를 복사하지 않습니다.
영상에 실제 브랜드/작품/캐릭터를 등장시키지 않습니다. 사용자가 소유하거나 사용 권한을 확인하지 않은 경우는 예외입니다. 브랜드명, 제품명은 가상의 것으로 사용합니다. -素材는 CC0 / 퍼블릭 도메인 / OFL / CC BY (저작자 표시 필요) / 명확한 무료 상업용만 사용합니다. "no known restrictions"는 허용되지 않습니다. 다른 개방형 라이선스는 먼저 사용자에게 조건을 설명합니다.
제품 영상 속의 고객, 개인, 내부 정보, 비밀 키, 실시간 데이터는 모두 먼저 가상화 또는 비식별화한 후 스크린샷을 찍습니다.
자동으로 인터넷에서 코드를 가져와 실행하지 않고, 이 스킬을 자동으로 업데이트하지 않습니다.素材 다운로드가 필요한 경우 사용자에게 무엇을, 어디서, 어떤 라이선스로 다운로드할지 먼저 알립니다.

motion-film：코드로 영상 만들기