프로젝트 작성자 blixvip은 Claude Opus 5.5로 완성한 모션그래픽 광고를 선보이며, 제작에 사용한 NullMotion 프로젝트를 GitHub에 공개했습니다. 이 데모는 완성본과 장면별 흑백 초안을 함께 보여 주고, 전체 미리보기를 MP4로 내보냅니다.
완성 광고와 초안을 한 화면에서 비교
NullMotion 화면은 위쪽에 완성된 광고를, 아래쪽에는 제작 단계의 초안을 배치합니다. 영상이 진행되면 Hook, Reveal, App, End card처럼 나뉜 섹션 가운데 현재 장면에 해당하는 초안이 영상 시점에 맞춰 강조됩니다.
아래 이미지는 프로젝트의 전체 인터페이스와 장면 구성을 보여 줍니다. 출처: GitHub blixvip/NullMotion.
HTML 초안에서 프레임 단위 MP4까지
초안 장면은 640×360 HTML로 만들고 GSAP 타임라인으로 움직임을 구성합니다. 재생 중에는 영상의 시계를 기준으로 현재 장면을 동기화해, 광고와 초안이 같은 순간을 가리키도록 합니다.
내보내기는 브라우저의 WebCodecs로 영상을 인코딩하고 mp4-muxer로 MP4 파일을 구성합니다. 프레임을 순서대로 처리하면서 원본 영상의 오디오도 합칩니다. 그래서 재생 화면을 실시간 녹화하는 방식 대신 프레임 시점에 맞춘 파일을 만들 수 있습니다.
내 컴퓨터에서 실행하기
Node.js 22 이상이 필요합니다. MP4 내보내기는 WebCodecs를 지원하는 Chrome 또는 Edge에서 실행하세요. 저장소를 내려받아 개발 서버를 시작합니다.
git clone https://github.com/blixvip/NullMotion.git
cd NullMotion
npm start브라우저에서 http://127.0.0.1:4343을 열고 레퍼런스를 확인합니다. MP4는 Download → Whole preview를 선택해 내려받습니다.
내 영상으로 모션 초안 만들기
저장소에는 개인 영상 폴더를 가져와 장면 구간과 contact sheet를 준비하는 스크립트가 포함돼 있습니다. 이 흐름에는 Python, FFmpeg, ffprobe가 필요합니다.
python scripts/import-motionclone.py --source /path/to/MotionClone
node scripts/plan-sections.mjs # sections + scene cuts + contact sheets섹션별 초안 설명은 public/references/drafts.json에 작성합니다. 가져온 영상과 미디어는 로컬 폴더에서 관리하고, 준비한 내용을 반영해 쇼케이스를 만들 때는 npm run showcase를 사용합니다.
초안 프레임워크 HyperFrames
HyperFrames는 HeyGen이 공개한 HTML 기반 영상 프레임워크입니다. HTML·CSS·JavaScript로 장면을 구성하고 프레임 단위로 시간을 제어해 영상으로 렌더링할 수 있으며, NullMotion은 이 방식으로 섹션별 초안을 만듭니다.
저장소와 모델 정보
NullMotion GitHub 저장소는 공개 상태이며, 확인 시점인 2026년 9월 24일 기준 423 stars를 기록했습니다. 저장소 README에는 프로젝트 전체 라이선스가 아직 정해지지 않았다고 안내돼 있습니다.
Anthropic은 Claude Opus 5.5를 2026년 9월 22일 공개했고 API 가격은 입력 토큰 100만 개당 4달러, 출력 토큰 100만 개당 20달러로 안내했습니다. Anthropic 공식 발표에서 모델 정보를 볼 수 있습니다.
