캡컷, 브루(Vrew), 블로(VLLO), 프리미어 프로는 모두 타임라인 위에서 마우스로 컷을 자르고 자막을 얹는 프로그램이다. 2026년 들어 유튜브와 X에서는 이 타임라인을 아예 열지 않고 영상을 뽑는 방법이 빠르게 퍼졌다. 클로드 코드·코덱스·커서 같은 AI 코딩 에이전트에게 「이 폴더 소재로 15초 인트로 만들어 줘」라고 말하면 에이전트가 장면을 HTML이나 React, Python 코드로 쓰고 그 코드를 MP4로 렌더한다.
이 방식에서 영상의 본체는 타임라인이 아니라 텍스트 소스 파일이다. 에이전트는 원래 텍스트를 읽고 고치는 데 강하다. 문구 하나를 바꾸거나 숫자만 갈아 끼운 영상 100개를 뽑는 일이 웹페이지 수정과 비슷한 작업이 된다. 같은 소스를 다시 렌더하면 같은 영상이 나온다는 점도 손 편집과 다르다.
필자는 코드로 영상을 만드는 방법을 6가지로 나눠 공식 GitHub와 문서를 하나씩 다시 확인했다. 하이퍼프레임(HyperFrames)·리모션(Remotion)·HTML 키네틱은 AI 에이전트와 함께 쓰기 좋은 핵심 3종이다. 모션 캔버스(Motion Canvas)와 매님(Manim)은 설명형 애니메이션 분야에서 오래 검증된 도구다. 여섯 번째로 템플릿 대량 생산용 Revideo·Shotstack·Plainly와 컷 조립용 MoviePy·editly를 예시와 함께 묶었다. 도구마다 유튜브에서 많이 본 소개·튜토리얼 영상을 골라 조회수를 확인한 뒤 해당 섹션에 넣었다.
GitHub 별 수, 버전, 유튜브 조회수는 2026년 10월 9일에 확인한 값이다. 오픈소스 도구는 업데이트가 잦으니 설치 전에 공식 저장소의 최신 안내를 함께 보는 편이 안전하다.
핵심 포인트: 코드 영상은 「에이전트가 소스를 쓰고 → 렌더 명령으로 MP4를 뽑는」 방식이다. HTML 모션과 에이전트 작업은 하이퍼프레임, React UI·실사 합성은 리모션, 이미 있는 웹페이지를 영상으로 바꿀 때는 HTML 키네틱, 다이어그램 설명은 모션 캔버스, 수식·그래프 강의는 매님이 맞다. 데이터만 바꾼 대량 영상은 Revideo·Shotstack·Plainly, 있는 컷 조립은 MoviePy·editly가 가볍다. 프롬프트에는 소재 경로와 비율·길이를 꼭 넣는다.
1. GUI 타임라인과 코드 영상은 만지는 대상이 다르다
같은 「영상 만들기」라도 GUI 편집기와 코드 영상은 손대는 대상부터 다르다. GUI는 화면 위 클립을 마우스로 옮기고 코드는 몇 번째 프레임에 무엇이 보일지를 글로 적는다.
| 비교 항목 | GUI 편집 (캡컷·브루·블로·프리미어 프로) | 코드 영상 (하이퍼프레임·리모션 등) |
|---|---|---|
| 작업 대상 | 타임라인 위 클립·자막 트랙 | HTML·JSX·Python 소스 파일 |
| 편집 방법 | 마우스로 플레이헤드를 옮기며 컷·효과 지정 | 「frame 0~20 페이드인, 21~60 제목」처럼 코드로 지정 |
| 수정 | 해당 구간을 찾아 다시 손으로 조정 | 파일의 문장·숫자만 고치고 다시 렌더 |
| 반복 생산 | 영상마다 같은 작업 반복 | 템플릿 1개 + 데이터 N개로 대량 생성 |
| 버전 관리 | 프로젝트 파일 복사 | Git으로 변경 이력·되돌리기 |
| AI 에이전트 활용 | 화면 조작이 필요해 어려움 | 텍스트라서 에이전트가 직접 읽고 고침 |
- GUI 편집기의 강점은 촬영본을 보면서 감으로 컷 리듬을 맞추는 작업이다. 브이로그·인터뷰처럼 실사 컷이 대부분이면 여전히 GUI가 빠르다.
- 코드 영상은 자막 애니메이션, 숫자 카운트업, 차트, 로고 스팅, 제품 소개처럼 그래픽이 주인공인 영상에서 시간을 크게 줄인다.
- 프롬프트에 소재 경로를 넣는 이유도 여기에 있다. 에이전트가 파일을 열어야 소스를 쓸 수 있기 때문이다.
그림 1. GUI 타임라인 편집과 코드 영상의 작업 대상·수정 방법·반복 생산 차이와 에이전트 작업 순서.
아래 영상은 클로드 코드에 하이퍼프레임을 설치해 편집 과정을 자동화한 사례다. 타임라인 없이 대화와 렌더 명령만으로 완성본이 나오는 과정을 볼 수 있다.
영상: Jason Cooperson · How I Fully Automated My Video Editing (Claude Code) · 조회수 212,422회 · 2026년 6월 29일 업로드
2. AI 에이전트와 코드 영상이 잘 맞는 이유
에이전트가 잘하는 일은 파일을 읽고, 고치고, 명령을 실행하는 것이다. 영상이 소스 파일로 남아 있으면 웹앱을 고치듯 영상을 고치라고 시킬 수 있다.
| 단계 | 에이전트가 하는 일 | 사람이 확인할 것 |
|---|---|---|
| 소스 읽기 | HTML·JSX·JSON 장면 파일을 연다 | 소재 경로가 맞는지 |
| 수정 | 문장·타이밍·색·숫자를 고친다 | 문구와 브랜드 규칙 |
| 미리보기 | preview 명령으로 브라우저 확인 | 3초 훅, 자막 가독성 |
| 렌더 | render 명령으로 MP4 생성 | 길이·비율·용량 |
- 결정적 렌더: 같은 소스를 다시 렌더하면 같은 결과가 나온다. 실시간 화면 녹화처럼 프레임이 밀리지 않는다.
- Git 관리: 영상 수정도 코드 변경이라 이전 버전으로 되돌리거나 변경점을 비교하기 쉽다.
- 재사용: 한 번 만든 자막 스타일·인트로·엔딩 카드를 다음 영상에서 그대로 불러 쓴다.
- 「AI가 알아서 예쁜 영상을 찍어 준다」는 생성형 영상이나 템플릿 앱 이야기다. 이 글의 6가지 방법은 에이전트가 소스를 짜고 사람이 검수하는 도구다.
3. AI 영상은 세 갈래로 나뉜다
「AI 영상」이라는 말 안에는 성격이 전혀 다른 세 가지가 섞여 있다. 어떤 갈래인지 먼저 구분하면 도구 선택이 쉬워진다.
| 갈래 | 하는 일 | 입력 | 대표 도구 | 이 글 |
|---|---|---|---|---|
| 코드→MP4 | 소스로 화면을 정의한 뒤 렌더 | HTML·React·Python·JSON | 하이퍼프레임, 리모션, 매님, Shotstack, MoviePy | 다룸 |
| 생성형 | 없는 장면을 새로 만들어 냄 | 프롬프트·이미지 | Runway, Kling, Veo | 제외 |
| GUI 편집 보조 | 있는 영상을 자르고 자막을 붙임 | 영상 + 대본 | 브루, 캡컷, Descript | 제외 |
- 판별 질문은 세 개면 된다. 마우스로 타임라인을 만지는가, 소스 파일을 고치는가, 프롬프트로 장면을 생성하는가.
- 세 갈래는 서로 대체재가 아니다. 생성형으로 만든 B롤을 리모션 템플릿에 얹거나, 코드로 만든 인트로를 캡컷 본편 앞에 붙이는 조합도 흔하다.
4. 코드 영상 6가지 한눈에 비교
6가지 방법은 쓰는 언어와 잘 만드는 영상이 뚜렷하게 갈린다. 아래 표와 그림으로 먼저 큰 차이를 잡고 도구별 섹션에서 자세히 본다.
그림 2. 하이퍼프레임·리모션·HTML 키네틱·모션 캔버스·매님과 그 밖의 도구(Revideo·Shotstack·Plainly·MoviePy·editly)의 언어, 잘 만드는 영상, 라이선스 비교.
| 도구 | 쓰는 언어 | 잘 만드는 영상 | 라이선스 | 시작 명령 |
|---|---|---|---|---|
| 하이퍼프레임 | HTML·CSS·JS | 키네틱 타이포, 로고 스팅, 제품 소개 | Apache-2.0 | npx hyperframes init my-video |
| 리모션 | React(TSX) | UI·차트 오버레이, 실사 합성, 대량 템플릿 | Remotion License | npx create-video@latest |
| HTML 키네틱 | HTML·CSS·GSAP | 기존 웹페이지를 광고 컷으로 | 캡처 도구별 상이 | hrec render anim.html |
| 모션 캔버스 | TypeScript | 다이어그램·코드 설명, 보이스오버 싱크 | MIT | npm init @motion-canvas@latest |
| 매님 | Python | 수식·그래프·기하 강의 | MIT | pip install manim |
| 그 밖의 도구 | TypeScript·JSON·Python | 대량 템플릿, 컷 조립, 슬라이드쇼 | MIT 또는 유료 API | 아래 여섯 번째 섹션 참고 |
| 도구 | GitHub 별 (2026-10-09) | 최신 버전 | 필요 환경 |
|---|---|---|---|
| 하이퍼프레임 | 59,003 | v0.8.141 (2026-10-08) | Node.js 22+, FFmpeg |
| 리모션 | 62,504 | v4.0.534 (2026-10-07) | Node.js |
| 퍼피티어(HTML 키네틱 캡처) | 95,670 | 수시 배포 | Node.js, 크롬 |
| 모션 캔버스 | 19,255 | v3.17.2 (2024-12-14) | Node.js 16+ |
| 매님 커뮤니티판 | 41,355 | v0.22.0 (2026-10-08) | Python, 수식은 LaTeX 선택 |
| Revideo | 4,091 | 0.11.0 (2026-07-10, npm) | Node.js 16+ |
| MoviePy | 14,960 | v2.2.1 (2025-05-21) | Python 3.9+, FFmpeg |
| editly | 5,520 | 0.14.2 (2022-12-23, npm) | Node.js, FFmpeg |
- 하이퍼프레임은 2026년 3월에 만들어진 저장소인데 7개월 만에 별 5만 9천 개를 넘겼다.
- 리모션은 2020년부터 쌓인 문서와 예제가 가장 많다. 공식 문서가 1,000페이지가 넘는다고 소개한다.
- 모션 캔버스는 마지막 정식 릴리스가 2024년 12월이다. 저장소 커밋은 2026년 7월까지 이어졌지만 신규 기능 속도는 다른 도구보다 느리다.
5. 하이퍼프레임 HyperFrames
하이퍼프레임은 HeyGen이 공개한 오픈소스로, 「HTML을 쓰면 영상이 렌더된다, 에이전트를 위해 만들었다」를 내세운다. 빌드 과정 없이 HTML 파일 자체가 영상 소스가 된다.
| 항목 | 내용 |
|---|---|
| 만든 곳 | HeyGen (2026년 3월 공개) |
| 방식 | HTML·CSS·미디어와 seek 가능한 애니메이션을 결정적 MP4로 렌더 |
| 타이밍 지정 | data-duration 같은 data 속성 + GSAP·Lottie·CSS 애니메이션 seek |
| 에이전트 연동 | 클로드 코드 플러그인, npx skills add heygen-com/hyperframes, 스킬 21종 |
| 시작 명령 | npx hyperframes init my-video → npx hyperframes preview → npx hyperframes render |
| 필요 환경 | Node.js 22 이상, FFmpeg |
| 라이선스 | Apache-2.0 (상업 이용 제한 없음) |
| 렌더 위치 | 로컬 CLI, HeyGen 클라우드 렌더, AWS Lambda |
5.1. 하이퍼프레임이 잘하는 영상
- 키네틱 타이포·로고 스팅: 웹 폰트와 GSAP 애니메이션을 그대로 쓰니 글자 모션 표현 폭이 넓다.
- 제품·웹사이트 소개 영상: 공식
product-launch-video스킬이 사이트 주소나 브리프를 받아 30~90초 홍보 영상을 짠다. - 자막·그래픽 오버레이:
embedded-captions,talking-head-recut스킬로 기존 인터뷰 영상 위에 자막과 하단 자막 바를 얹는다. - 짧은 모션 그래픽: 10초 안팎의 숫자 강조, 차트, 트윗 카드 같은 단발 그래픽에 강하다.
- 장점은 HTML을 아는 사람이면 바로 고칠 수 있고 결과를 브라우저에서 즉시 확인한다는 점이다. 빌드 도구가 없어 에이전트가 실수할 여지도 적다.
- 아쉬운 점은 역사가 짧다는 것이다. 패치 버전이 매우 자주 올라가 지난주에 쓴 스킬 문법이 바뀌는 일이 생긴다. 장기 프로젝트라면 버전을 고정해 두는 편이 좋다.
- 처음이라면 공식 플레이그라운드에서 템플릿을 열어 본 뒤
npx hyperframes init으로 로컬 프로젝트를 만드는 순서가 무난하다.
영상: HeyGen 공식 · HeyGen Hyperframes Tutorial for Beginners · 조회수 35,185회 · 2026년 6월 17일 업로드
한국어 입문 영상으로는 클로드 코드와 하이퍼프레임으로 모션 그래픽을 처음부터 만드는 강의가 많이 보였다.
영상: 라이프3.0픽처스 · 클로드 코드와 하이퍼프레임으로 모션 그래픽 영상 제작 · 조회수 9,490회 · 2026년 5월 29일 업로드
6. 리모션 Remotion
리모션은 React 컴포넌트로 영상을 만드는 프레임워크다. 2020년에 시작해 코드 영상 도구 가운데 가장 오래 쓰였다. 지금은 「에이전트 시대의 영상 도구」를 표방한다.
| 항목 | 내용 |
|---|---|
| 방식 | useCurrentFrame()으로 현재 프레임 번호를 받아 React 화면을 그린 뒤 MP4로 렌더 |
| 실사 합성 | OffthreadVideo로 촬영본을 깔고 그 위에 React UI를 얹음 |
| 미리보기 | Remotion Studio에서 타임라인처럼 확인 |
| 대량 렌더 | Node.js API, AWS Lambda, Vercel, 브라우저 렌더 |
| 에이전트 연동 | 공식 Agent Skills 문서와 프롬프트 모음 제공 |
| 시작 명령 | npx create-video@latest |
| 최신 버전 | v4.0.534 (2026년 10월 7일) |
6.1. 리모션 라이선스는 꼭 확인
리모션은 MIT 같은 일반 오픈소스 라이선스가 아니라 자체 Remotion License를 쓴다. 공식 LICENSE 문서 기준 조건은 아래와 같다.
| 구분 | 무료 사용 | 비고 |
|---|---|---|
| 개인 | 가능 (상업용 포함) | 영상·이미지 제작 목적 |
| 영리 기업 직원 3명 이하 | 가능 | |
| 비영리 단체 | 가능 | |
| 도입 검토 단계 | 가능 | 아직 상업적으로 쓰지 않을 때 |
| 위 조건 밖의 영리 기업 | 회사 라이선스 필요 | 가격은 remotion.pro 안내 |
- 1인 크리에이터는 수익 영상에 써도 무료다. 직원이 4명 이상인 회사에서 업무로 쓰면 회사 라이선스를 사야 한다.
- 리모션 코드를 고쳐 자체 영상 편집기 제품으로 파는 행위는 무료 라이선스에서 금지된다.
- 공식 문서에는 Remotion 5.0에서 라이선스가 일부 바뀐다는 공지가 있으니 도입 시점에 다시 확인한다.
6.2. 리모션이 잘하는 영상
- 데이터 영상: 매출·조회수 카운트업, 차트 카드처럼 숫자가 움직이는 화면을 React 차트 라이브러리로 그대로 만든다.
- 실사 + UI 오버레이: SaaS 데모 녹화본 위에 강조 박스와 커서 줌을 프레임 단위로 맞춘다.
- 템플릿 대량 생산: 상품 100개, 지역 50곳처럼 데이터만 바뀌는 영상을 서버에서 한꺼번에 렌더한다.
- React를 모르면 처음 진입 장벽이 있다. 다만 에이전트가 코드를 쓰기 때문에 사람은 결과 확인과 문구 수정에 집중해도 된다.
- 2022년 영상이지만 리모션이 어떤 원리로 코드에서 영상을 뽑는지 가장 많이 본 설명은 아래 Fireship 영상이다.
영상: Fireship · This video was made with code. But how? · 조회수 891,905회 · 2022년 3월 4일 업로드
영상: Chronixel · 클로드 + 리모션 전체 작업 과정 튜토리얼 · 조회수 245,587회 · 2026년 5월 27일 업로드
7. HTML 키네틱
HTML 키네틱은 특정 프로그램 이름이 아니라 방법을 가리킨다. AI에게 HTML 애니메이션을 짜게 한 뒤, 그 페이지를 프레임 단위로 캡처해 MP4로 묶는다. 하이퍼프레임이 이 과정을 제품으로 만든 것이라면, HTML 키네틱은 직접 조립하는 버전이다.
| 항목 | 내용 |
|---|---|
| 소재 | 웹 타이포, CSS 애니메이션, GSAP, 기존 랜딩 페이지 |
| 핵심 원리 | 시간을 벽시계가 아니라 프레임 번호로 넘기며 한 장씩 캡처 |
| 대표 캡처 도구 | 퍼피티어(Puppeteer), htmlrec, puppeteer-capture |
| 장점 | 이미 있는 웹페이지·디자인을 거의 그대로 영상으로 재사용 |
| 단점 | 캡처·인코딩 스크립트를 직접 관리해야 함 |
7.1. 화면 녹화와 프레임 캡처의 차이
그냥 브라우저 화면을 녹화하면 컴퓨터가 바쁠 때 프레임이 빠지고 애니메이션이 흔들린다. 프레임 캡처 방식은 가상 시계를 한 프레임씩 앞으로 넘기며 찍기 때문에 느린 PC에서도 결과가 같다. 같은 프레임이면 같은 화면이 나오는 것이 핵심이다.
| 캡처 도구 | 성격 | 특징 |
|---|---|---|
| 퍼피티어 | 구글 크롬 팀이 시작한 브라우저 자동화 라이브러리 | GitHub 별 95,670, Apache-2.0. 스크린샷을 연속으로 찍어 FFmpeg로 묶는 기반 |
| htmlrec | Rust로 만든 명령줄 도구 | hrec render anim.html 한 줄로 영상 생성, 투명 배경 WebM·ProRes 출력, FFmpeg 필요 |
| puppeteer-capture | 퍼피티어 플러그인 | 크롬 HeadlessExperimental 기능으로 프레임을 결정적으로 캡처, MIT |
7.2. HTML 키네틱 프롬프트 예시
에이전트에게는 길게 설명할 필요가 없다. 아래처럼 비율·길이·모션·출력 형식만 정해 주면 된다.
「16:9 15초 키네틱 타이포 HTML을 만들어 줘. 큰 문구가 3초마다 바뀌고 숫자 카운트업과 강조 박스가 나오게. 완성되면 퍼피티어로 프레임 단위 캡처해서 30fps MP4로 렌더해 줘.」
- 기존 랜딩 페이지가 있다면 「이 HTML 랜딩을 HTML 키네틱으로 15초 MP4로 뽑아 줘. 파일: ./landing/index.html」처럼 파일 경로를 같이 준다.
- 클로드 디자인처럼 HTML 애니메이션을 바로 만들어 주는 도구가 늘면서 「HTML로 모션그래픽을 만들고 영상으로 내보내기」 영상의 조회수도 크게 늘었다.
영상: Kevin Stratvert · 클로드로 프롬프트만으로 모션그래픽 만들기 · 조회수 119,558회 · 2026년 8월 10일 업로드
영상: Kumo Explains · 클로드 디자인 HTML 결과물을 클로드 코드로 영상 파일로 내보내기 (1분 44초) · 조회수 3,131회 · 2026년 4월 23일 업로드
8. 모션 캔버스 Motion Canvas
모션 캔버스는 TypeScript로 애니메이션을 짜고 전용 에디터에서 실시간으로 미리 보는 도구다. 공식 소개 그대로 「정보 전달용 벡터 애니메이션을 만들고 보이스오버와 맞추는」 데 특화돼 있다.
| 항목 | 내용 |
|---|---|
| 방식 | TypeScript 제너레이터 함수와 yield*로 장면 순서를 기술 |
| 에디터 | 브라우저 기반 실시간 미리보기, 일부 값은 에디터에서 직접 조정 |
| 강점 | 도형·화살표·코드 블록 하이라이트·다이어그램 애니메이션 |
| 시작 명령 | npm init @motion-canvas@latest (Node.js 16 이상) |
| 라이선스 | MIT |
| 최신 릴리스 | v3.17.2 (2024년 12월 14일) |
- 개발 유튜버 aarthificial이 자기 데브로그 애니메이션을 만들려고 시작한 도구다. 그래서 프로그래밍 설명, 알고리즘 시각화 영상에 특히 많이 쓰인다.
- 내레이션 오디오를 불러와 파형을 보며 타이밍을 맞추는 기능이 있어 설명 영상 제작에 편하다.
- 정식 릴리스가 2024년 12월 이후 멈춰 있다는 점은 감안해야 한다. 서버에서 대량 렌더가 필요하면 같은 문법을 쓰는 Revideo(MIT)도 함께 검토할 만하다. Revideo는 아래 그 밖의 코드 영상 도구 섹션에서 따로 다룬다.
영상: aarthificial (모션 캔버스 제작자) · Motion Canvas is now Open Source! · 조회수 813,452회 · 2023년 2월 4일 업로드
영상: Bufferhead · 영상 전체를 모션 캔버스 코드로 만든 사례 · 조회수 73,891회 · 2025년 8월 6일 업로드
9. 매님 Manim
매님은 수학 유튜브 채널 3Blue1Brown의 그랜트 샌더슨(Grant Sanderson)이 자기 영상을 만들려고 만든 Python 애니메이션 엔진이다. 수식이 변형되고 그래프가 그려지는 그 특유의 화면이 매님에서 나온다.
| 항목 | 원본 3b1b/manim | 커뮤니티판 ManimCE |
|---|---|---|
| 관리 | 그랜트 샌더슨 개인 | 커뮤니티 |
| GitHub 별 (2026-10-09) | 94,759 | 41,355 |
| 최신 버전 | v1.7.2 (2024-12-13) | v0.22.0 (2026-10-08) |
| 추천 대상 | 3Blue1Brown 제작 방식을 그대로 공부할 때 | 처음 시작하는 대부분의 사용자 |
| 라이선스 | MIT | MIT |
- 처음이라면 문서와 커뮤니티가 활발한 커뮤니티판(ManimCE)을 쓰는 편이 좋다. 두 버전의 설치 방법이 서로 달라 섞어 쓰면 오류가 난다.
- 설치는
pip install manim이 기본이다. 공식 문서는 파이썬 환경 관리 도구 uv로 설치하는 방법을 권한다. 수식을 렌더하려면 LaTeX를 추가로 설치한다. - 예제 장면은
manim -p -ql example.py SquareToCircle처럼 실행한다.-p는 렌더 후 바로 재생,-ql은 저화질 빠른 렌더 옵션이다. - 수식·도형 강의, 물리 시뮬레이션 설명처럼 정확한 기하가 필요한 영상에 강하다. 반대로 실사 합성이나 화려한 타이포 광고에는 맞지 않는다.
영상: 3Blue1Brown · 그랜트 샌더슨이 직접 보여 주는 매님 작업 과정 · 조회수 3,231,088회 · 2024년 10월 12일 업로드
영상: Mitko Nikov · 매님 기초를 100초로 요약 · 조회수 113,532회 · 2023년 4월 18일 업로드
10. 그 밖의 코드 영상 도구 Revideo·Shotstack·Plainly·MoviePy·editly
앞의 다섯 가지가 화면을 직접 디자인하는 도구라면, 여섯 번째 방법은 목적이 좁은 도구를 골라 쓰는 것이다. 같은 템플릿에 데이터만 바꿔 영상 수백 개를 뽑거나 이미 찍어 둔 컷을 스크립트로 이어 붙이는 일은 아래 도구가 더 가볍다.
| 도구 | 성격 | 이런 영상에 | 시작 방법 | 라이선스·가격 |
|---|---|---|---|---|
| Revideo | 모션 캔버스에서 갈라져 나온 TypeScript 렌더 엔진 | 이름·숫자만 바뀌는 개인화 영상, 웹 영상 편집기 | npm init @revideo@latest | MIT |
| Shotstack | JSON 타임라인을 보내면 클라우드에서 렌더하는 API | 상품·매물 소개 영상 대량 생산 | JSON을 render 엔드포인트로 POST | 가입 시 10크레딧, 종량제 분당 20센트 |
| Plainly | 애프터이펙트 템플릿을 데이터로 채워 렌더하는 API | 디자이너가 만든 AE 템플릿의 대량 변형 | POST /api/v2/renders | 14일 체험, 연간 결제 시 월 48달러부터 |
| MoviePy | Python 영상 편집 라이브러리 | 컷 자르기·이어 붙이기·제목 얹기 자동화 | pip install moviepy | MIT |
| editly | Node.js와 FFmpeg 기반 선언형 편집 도구 | 사진 슬라이드쇼, 하이라이트·예고편 | npm i -g editly | MIT |
| 퍼피티어·htmlrec·puppeteer-capture | HTML 키네틱용 캡처 도구 | 웹페이지를 영상으로 | 앞의 HTML 키네틱 섹션 참고 | Apache-2.0 / 표기 없음 / MIT |
10.1. Revideo: 모션 캔버스 문법으로 대량 렌더
Revideo는 모션 캔버스를 바탕으로 오디오 지원, 더 빠른 렌더, 변수를 넣어 렌더하는 API를 덧붙인 오픈소스다. 장면은 모션 캔버스와 같은 제너레이터 함수와 yield*로 쓴다.
- 예시: 신규 구독자 이름이나 오늘의 숫자처럼 값만 바뀌는 쇼츠를 매일 자동으로 뽑는다. 장면에서
useScene().variables.get('username')으로 값을 받고renderVideo()에 variables를 넘기면 된다. - 시작:
npm init @revideo@latest로 프로젝트를 만들고npm run render로 MP4를 뽑는다. Node.js 16 이상이 필요하다. - 렌더를 여러 워커로 나누는 병렬 렌더와 Google Cloud Run 같은 서버리스 실행 예제가 있다. 브라우저에 넣는 React 플레이어도 있어 사용자가 내보내기 전에 미리 보는 웹 편집기를 만들 때 쓰인다.
- GitHub 별 4,091개, MIT 라이선스다. 저장소는 Midrender 소속으로 옮겨졌고 npm 최신판은 0.11.0(2026년 7월)이다.
- 에이전트 프롬프트 예: 「Revideo로 9:16 10초 템플릿을 만들어 줘. 이름과 숫자는 변수로 빼고 ./data/list.csv 30줄을 읽어 영상 30개를 렌더해 줘.」
10.2. Shotstack: JSON으로 주문하는 클라우드 렌더
Shotstack은 영상을 트랙·클립·전환으로 이루어진 JSON으로 적어 API에 보내면 클라우드에서 MP4를 만들어 주는 서비스다. 렌더 서버나 FFmpeg를 직접 관리할 필요가 없다.
- 예시: 쇼핑몰 상품 100개의 사진·상품명·가격을 JSON 템플릿에 넣어 15초 홍보 영상 100개를 한 번에 요청한다.
- 시작: 가입 후 받은 샌드박스 키로 hello.json을 `https://api.shotstack.io/edit/stage/render`에 POST한다. 돌려받은 렌더 ID로 상태를 조회해 done이 되면 영상 주소가 나온다. Node.js용
npm install shotstack-sdk도 있다. - 가격: 가입하면 30일 동안 쓰는 10크레딧을 준다. 종량제는 10달러에 50분(분당 20센트), 구독제는 월 39달러 Starter부터다. 분은 초 단위로 계산한다.
- Make·Zapier·n8n 연동을 공식 지원해 코드 없이 자동화 작업에 붙이기도 쉽다. 화이트라벨 편집기 SDK는 PolyForm Shield 라이선스의 소스 공개 방식이다.
- 에이전트 프롬프트 예: 「Shotstack JSON 템플릿을 만들어 줘. ./data/products.csv의 이미지·상품명·가격을 넣고 9:16 15초로, 샌드박스 키로 먼저 3개만 렌더해 줘.」
10.3. Plainly: 애프터이펙트 템플릿을 데이터로 복제
Plainly는 애프터이펙트로 만든 프로젝트를 올려 텍스트·이미지·영상 레이어를 변수로 지정한 뒤 API나 CSV로 값을 넣어 변형 영상을 뽑는 서비스다. 모션 디자이너가 이미 애프터이펙트를 쓰는 팀에 맞다.
- 예시: 스포츠 선수 100명의 이름·기록·사진을 같은 하이라이트 템플릿에 넣어 선수별 영상을 만든다. 공식 API 예시도 선수 이름과 기록을 파라미터로 넣는 형태다.
- 시작: 애프터이펙트 프로젝트를 업로드해 템플릿을 만든 뒤 projectId·templateId·parameters를 담아
POST /api/v2/renders로 요청한다. 렌더가 끝나면 웹훅으로 알림을 받는다. - 가격: 14일 무료 체험 후 연간 결제 기준 월 48달러(월 50분)부터다. 내보낸 영상 길이를 초 단위로 세고 팀원을 늘려도 추가 요금이 없다.
- 템플릿은 애프터이펙트로 만들어야 한다. 애프터이펙트를 다루는 사람이 없다면 Plainly 크리에이티브 팀에 템플릿 제작을 맡기는 방법도 있다.
10.4. MoviePy: Python으로 컷 자르고 붙이기
MoviePy는 영상 자르기·이어 붙이기·제목 넣기·합성을 Python 코드로 처리하는 라이브러리다. 모션 그래픽보다는 이미 있는 클립을 조립하는 편집 자동화에 쓴다.
- 예시: 강의 녹화 폴더의 클립 20개 앞뒤를 2초씩 잘라 이어 붙이고 하단에 회차 제목을 얹어 MP4 하나로 만든다.
- 시작:
pip install moviepy후VideoFileClip('a.mp4').subclipped(10, 20)로 구간을 자르고concatenatevideoclips()로 이은 뒤writevideofile('out.mp4')로 저장한다. - v2.0에서 문법이 크게 바뀌었다. 인터넷의 옛 예제는
subclip,set_duration같은 v1 문법이 많아 에이전트에게 「MoviePy 2.x 문법으로」라고 짚어 주는 편이 좋다. - 최신 버전은 2.2.1(2025년 5월), GitHub 별 14,960개, MIT 라이선스다. 프레임을 numpy 배열로 다루는 구조라 FFmpeg를 직접 쓰는 것보다 렌더가 느리다. 저장소에는 관리자를 찾는다는 공지가 올라와 있다.
- 에이전트 프롬프트 예: 「MoviePy 2.x로 ./clips 폴더 영상을 파일명 순서대로 이어 붙여 줘. 각 클립 앞 1초는 자르고 하단에 파일명을 3초 동안 자막으로 넣어 줘.」
10.5. editly: 명령 한 줄 슬라이드쇼·예고편
editly는 Node.js와 FFmpeg로 클립·이미지·음악·제목을 선언형으로 엮는 편집 도구다. JSON5 설정 파일 하나로 전환 효과, 배경 음악 크로스페이드, 오디오 더킹까지 처리한다.
- 예시: 여행 사진 30장과 배경 음악으로 9:16 슬라이드쇼를 만들거나 경기 하이라이트 클립을 빠른 템포의 예고편으로 묶는다.
- 시작:
npm i -g editly로 설치하고editly my-spec.json5 --fast --out output.mp4처럼 실행한다.--fast는 저해상도 미리보기 모드이고 FFmpeg가 필요하다. - 출력 비율을 1:1·9:16·16:9로 정하면 비율이 다른 소재는 자동으로 레터박스 처리된다. 사진 슬라이드쇼, 화면 속 화면, 투명 영상 오버레이도 지원한다.
- npm 정식판은 0.14.2(2022년 12월)이고 저장소 마지막 갱신은 2025년 5월이라 업데이트가 느린 편이다. GitHub 별 5,520개, MIT 라이선스다.
아래는 editly 제작자가 명령 한 줄과 설정 파일만으로 만든 데모 영상이다.
영상: Mikael Finstad (editly 제작자) · editly 설정 파일 하나로 만든 데모 · 조회수 9,099회 · 2020년 4월 22일 업로드
10.6. 이 목록에 넣지 않은 것
- GSAP·Lottie는 하이퍼프레임이나 HTML 키네틱 안에서 움직임을 맡는 애니메이션 라이브러리라 따로 고르는 도구가 아니다.
- 리모션 Lambda, HeyGen 클라우드 렌더처럼 각 도구의 클라우드 렌더 옵션은 해당 도구 섹션에서 다뤘다.
- Runway·Kling·Veo 같은 생성형과 브루·캡컷·Descript 같은 GUI 편집 보조는 갈래가 달라 뺐다. 필요하면 코드로 만든 결과물과 섞어 쓴다.
11. 리모션과 하이퍼프레임은 무엇이 다른가
코드 영상을 시작하는 사람이 가장 많이 고민하는 조합이 리모션과 하이퍼프레임이다. 둘 다 브라우저 화면을 프레임 단위로 렌더한다는 원리는 같고 작성 언어와 라이선스가 다르다.
| 항목 | 리모션 | 하이퍼프레임 |
|---|---|---|
| 작성 | React + TSX | HTML + CSS + JS |
| 빌드 | 번들러 필요 | 없음 |
| 에이전트 | 예제·스킬 풍부 (JSX) | HTML 핸드오프, 전용 스킬 21종 |
| 영상 합성 | OffthreadVideo로 프레임 정확 합성, 사례 많음 | 배경 영상·인터뷰 오버레이 스킬 제공, 역사는 짧음 |
| 라이선스 | Remotion License (규모 따라 유료) | Apache-2.0 |
| 고를 때 | React·UI·실사 합성·대량 템플릿 | 에이전트 작업·빠른 HTML 모션 |
- HTML 키네틱은 하이퍼프레임과 같은 캡처 철학을 쓰는 직접 조립판이다.
- 하이퍼프레임에는 기존 리모션 작업을 HTML로 옮기는
remotion-to-hyperframes스킬도 있다. 리모션으로 만든 템플릿이 있다면 무리해서 갈아탈 필요는 없다.
영상: Andy Lo · 리모션과 하이퍼프레임 비교 · 조회수 28,236회 · 2026년 6월 23일 업로드
12. 같은 15초 영상, 무엇으로 만들까
예를 들어 「카페 매출 3줄 요약」 쇼츠를 타임라인 없이 만든다고 해 보자. 화면의 주인공이 무엇이냐에 따라 맞는 도구가 달라진다.
| 요구 | 추천 | 이유 |
|---|---|---|
| 숫자·카드 UI | 리모션 | React·차트 컴포넌트 재사용 |
| 타이포·로고 스팅 | 하이퍼프레임 | HTML·GSAP, 에이전트 작업에 강함 |
| 이미 있는 CSS 랜딩 → 영상 | HTML 키네틱 | 페이지를 그대로 캡처 |
| 상품 100개 동일 템플릿 | Shotstack·Plainly·Revideo 또는 리모션 | 데이터만 교체 |
| 수식·도형 설명 | 매님 · 모션 캔버스 | 절차형 애니메이션 |
| 있는 컷만 이어 붙이기 | MoviePy · editly | 합성 스크립트 |
- 도구를 고르기 어렵다면 에이전트에게 「분석한 뒤 적합한 것으로」라고 맡겨도 된다. 아래 프롬프트 B가 그 역할을 한다.
- 실사 촬영본이 대부분인 영상은 본편은 GUI 편집기로 자르고 그래픽만 코드로 뽑아 얹는 조합이 가장 효율이 좋다.
13. 코드 영상 도구 계열 맵
앞의 6가지 방법을 계열로 다시 묶으면 아래와 같다. 필요한 작업에 맞춰 옆 계열로 넘어가면 된다.
| 계열 | 대표 도구 | 한 줄 설명 |
|---|---|---|
| HTML→MP4 | 하이퍼프레임 | 키네틱·로고, 에이전트용으로 가장 많이 쓰임 |
| React→MP4 | 리모션 | UI·리포트, 실사 오버레이 |
| 키네틱 직접 조립 | htmlrec · 퍼피티어 | 랜딩 페이지 → 광고 컷, 캡처 엔진 |
| 캔버스 절차형 | 모션 캔버스 · Revideo | yield* 기반 다이어그램 애니메이션 |
| Python 절차형 | 매님 | 수식·도형 강의 |
| JSON·애프터이펙트 API | Shotstack · Plainly | 템플릿 1개 + 데이터 N개 |
| 클립 스크립트 | MoviePy · editly | 있는 컷 조립 (모션 디자인용 아님) |
- 대량 템플릿 계열(Shotstack·Plainly·Revideo)과 클립 스크립트 계열(MoviePy·editly)의 시작 방법과 예시는 앞의 그 밖의 코드 영상 도구 섹션에 정리했다.
- 계열을 섞어 쓰는 경우도 많다. 매님으로 만든 수식 장면을 MoviePy로 강의 녹화본 사이에 끼워 넣는 식이다.
14. 에이전트에게 이렇게 시킨다: 프롬프트 5개
코드 영상의 실력은 프롬프트에서 갈린다. 핵심은 소재 경로(또는 첨부) + 도구 + 비율·길이를 같이 넣는 것이다. 아래 경로는 예시이니 자기 프로젝트 폴더로 바꿔 쓴다.
| 유형 | 언제 쓰나 | 프롬프트 예시 |
|---|---|---|
| A1 도구 지정 (하이퍼프레임) | 로고·타이틀 모션 | 「이 폴더 영상 편집해 줘. 경로: ./assets/intro · 하이퍼프레임으로 로고 스팅 + 키네틱 타이틀 8초.」 |
| A2 도구 지정 (리모션) | 녹화본 위 데이터 그래픽 | 「이 파일 리모션으로 편집해 줘. 경로: ./src/clips/demo.mp4 · 숫자 카운트업 오버레이 + 차트 카드 12초.」 |
| A3 도구 지정 (HTML 키네틱) | 기존 웹페이지 재활용 | 「이 HTML 랜딩을 HTML 키네틱으로 15초 MP4 뽑아 줘. 파일: ./landing/index.html」 |
| B 분석 후 선택 | 도구를 고르기 어려울 때 | 「첨부 영상을 프레임·초 단위로 분석한 뒤 리모션 / 하이퍼프레임 / HTML 키네틱 중 적합한 걸로 편집해 줘. 목표: 유튜브 쇼츠 9:16, 훅 3초, 본문 12초.」 |
| C 스타일만 지정 | 도구 이름을 몰라도 될 때 | 「원하는 스타일: 밝은 UI, 큰 타이포, 스크롤 스냅 느낌의 제품 데모. 적합한 코드 영상 스택으로 편집해 줘(도구는 네가 골라). 소재 경로: ./assets/product-demo/ · 출력: 16:9, 약 20초, MP4」 |
- A는 도구를 직접 고를 때, B는 에이전트에게 분석을 맡길 때, C는 원하는 느낌만 말할 때 쓴다. 세 유형 모두 경로나 첨부를 같이 넣는다.
- 목표 비율(16:9, 9:16)과 전체 길이, 훅·본문 초를 숫자로 적으면 수정 횟수가 크게 준다.
- 모션 캔버스와 매님도 같은 방식이다. 「매님으로 피타고라스 정리 증명을 16:9 40초 애니메이션으로 만들어 줘」처럼 도구 이름과 길이를 넣는다.
- 첫 결과가 마음에 들지 않으면 「더 빠르게」보다 「제목 등장 0.5초 → 0.3초, 배경 남색으로」처럼 숫자로 고쳐 달라고 하는 편이 정확하다.
클로드 코드에 리모션 스킬을 설치하고 말로만 영상을 만드는 과정을 비개발자 눈높이로 보여 주는 한국어 영상도 있다.
영상: 행글라이터 · 클로드 코드 + 리모션 스킬 설치와 실전 제작 · 조회수 12,635회 · 2026년 2월 23일 업로드
15. 상황별로 고르는 법
크리에이터 상황별로 첫 도구를 정리하면 아래와 같다. 하나를 익힌 뒤 필요할 때 옆 도구를 더하는 편이 부담이 적다.
| 상황 | 첫 도구 | 함께 쓰면 좋은 것 |
|---|---|---|
| 쇼츠 인트로·자막 모션을 빨리 뽑고 싶다 | 하이퍼프레임 | 클로드 코드·커서 스킬 |
| 화면 녹화 강의에 줌·강조·진행바를 얹고 싶다 | 리모션 | 받아쓰기 자막(JSON) |
| 회사 홈페이지·랜딩을 광고 컷으로 바꾸고 싶다 | HTML 키네틱 | 퍼피티어 또는 htmlrec |
| 개발·알고리즘 설명 채널을 운영한다 | 모션 캔버스 | 내레이션 녹음 |
| 수학·과학 강의를 만든다 | 매님 | LaTeX |
| 상품·매물 영상 수백 개를 같은 형식으로 뽑는다 | Shotstack 또는 Revideo | CSV·JSON 데이터 |
| 디자이너가 만든 애프터이펙트 템플릿을 대량으로 바꾼다 | Plainly | 애프터이펙트 |
| 녹화 클립을 잘라 이어 붙이기만 한다 | MoviePy 또는 editly | FFmpeg |
| 직원 4명 이상 회사에서 업무로 쓴다 | 하이퍼프레임 또는 회사 라이선스를 산 리모션 | 라이선스 검토 |
- 실사 컷 편집이 중심인 브이로그·인터뷰는 GUI 편집기를 버릴 필요가 없다. 코드 영상은 그래픽 구간을 맡기는 보조 엔진으로 쓰면 된다.
- 어떤 도구든 렌더 결과는 MP4라서 마지막 업로드·썸네일 작업은 기존 방식 그대로다.
16. 출처
- 하이퍼프레임 GitHub: https://github.com/heygen-com/hyperframes
- 하이퍼프레임 공식 문서: https://hyperframes.heygen.com/introduction
- 리모션 GitHub: https://github.com/remotion-dev/remotion
- 리모션 라이선스: https://www.remotion.dev/docs/license
- 리모션 Agent Skills 문서: https://www.remotion.dev/docs/ai/skills
- 퍼피티어 GitHub: https://github.com/puppeteer/puppeteer
- htmlrec GitHub: https://github.com/dsplce-co/htmlrec
- puppeteer-capture GitHub: https://github.com/alexey-pelykh/puppeteer-capture
- 모션 캔버스 GitHub: https://github.com/motion-canvas/motion-canvas
- 모션 캔버스 퀵스타트: https://motioncanvas.io/docs/quickstart
- 매님 커뮤니티판 GitHub: https://github.com/ManimCommunity/manim
- 매님 원본(3Blue1Brown) GitHub: https://github.com/3b1b/manim
- 매님 설치 문서: https://docs.manim.community/en/stable/installation/uv.html
- Revideo GitHub: https://github.com/midrender/revideo
- Revideo 공식 페이지: https://midrender.com/revideo
- Shotstack 요금: https://shotstack.io/pricing/
- Shotstack Hello World 문서: https://shotstack.io/docs/guide/getting-started/hello-world-using-curl/
- Plainly 요금: https://www.plainlyvideos.com/pricing
- Plainly Renders API 문서: https://help.plainlyvideos.com/docs/developer-guide/renders-api
- MoviePy GitHub: https://github.com/Zulko/moviepy
- MoviePy 공식 문서: https://zulko.github.io/moviepy/
- editly GitHub: https://github.com/mifi/editly
GitHub 별 수와 버전은 2026년 10월 9일 GitHub API로, 유튜브 조회수는 같은 날 각 영상 페이지 기준으로 확인했다. Shotstack·Plainly 가격도 같은 날 공식 요금 페이지 기준이다. 조회수와 별 수는 계속 늘어나는 값이다.
17. 마무리
앞에서 다룬 AI 영상편집 6가지 방법의 핵심만 짧게 정리한다.
- 코드 영상은 타임라인 대신 소스 파일을 고치고 렌더 명령으로 MP4를 뽑는 방식이라 AI 에이전트와 궁합이 좋다.
- 하이퍼프레임은 HTML만으로 영상을 만드는 Apache-2.0 도구로, 에이전트 스킬 21종과 함께 키네틱 타이포·제품 소개에 강하다.
- 리모션은 React 기반으로 실사 합성·데이터 영상·대량 템플릿에 강하지만 직원 4명 이상 영리 기업은 회사 라이선스가 필요하다.
- HTML 키네틱은 웹 애니메이션을 프레임 단위로 캡처하는 방법으로, 이미 있는 랜딩 페이지를 영상으로 바꿀 때 가장 빠르다.
- 모션 캔버스는 다이어그램·코드 설명, 매님은 수식·그래프 강의에 맞는 MIT 라이선스 도구다.
- 여섯 번째 방법으로 템플릿 1개 + 데이터 N개 대량 생산은 Revideo·Shotstack·Plainly, 있는 컷을 스크립트로 조립하는 일은 MoviePy·editly가 맡는다.
- 프롬프트에는 소재 경로, 도구, 비율, 길이, 훅 초를 숫자로 넣어야 수정이 줄어든다.
- 별 수·버전·라이선스 조건은 2026년 10월 9일 기준이다. 도입 전 공식 저장소와 라이선스 문서를 다시 확인한다.
「영상도 이제 소스 파일이다. 고칠 곳을 말로 정확히 짚으면 에이전트가 다시 렌더한다」 처음에는 15초짜리 인트로 하나를 하이퍼프레임이나 리모션으로 뽑아 보는 것부터 시작하면 된다. 실사 컷 편집은 기존 편집기에 두고 그래픽 구간만 코드로 옮겨도 작업 시간이 눈에 띄게 줄어든다.
자주 묻는 질문
- 코딩을 전혀 몰라도 코드로 영상을 만들 수 있나?
만들 수 있다. 코드는 클로드 코드·코덱스·커서 같은 AI 에이전트가 쓰고, 사람은 소재 경로와 원하는 비율·길이·문구를 말한 뒤 미리보기에서 결과를 확인한다. 다만 Node.js나 Python 설치, 터미널에서 명령 한두 줄 실행하는 정도는 익혀 두는 편이 좋다.
- 하이퍼프레임과 리모션 중 처음엔 무엇이 나은가?
자막 모션·로고 스팅·제품 소개처럼 그래픽 위주라면 빌드 없이 HTML로 바로 고치는 하이퍼프레임이 시작하기 쉽다. 화면 녹화 위에 차트·강조 박스를 프레임 단위로 맞추거나 같은 템플릿을 대량으로 렌더한다면 문서와 예제가 많은 리모션이 낫다.
- 리모션은 유튜브 수익 영상에 무료로 써도 되나?
개인, 직원 3명 이하 영리 기업, 비영리 단체는 상업용 영상도 무료로 만들 수 있다. 직원이 4명 이상인 영리 기업이 업무로 쓰면 회사 라이선스가 필요하고, Remotion 5.0에서 조건이 일부 바뀐다는 공지가 있어 도입 시점에 공식 라이선스 문서를 다시 확인해야 한다.
- HTML 키네틱은 그냥 화면 녹화와 무엇이 다른가?
화면 녹화는 실시간으로 찍기 때문에 컴퓨터가 바쁘면 프레임이 빠지고 애니메이션이 흔들린다. HTML 키네틱은 가상 시계를 한 프레임씩 넘기며 캡처하므로 느린 PC에서도 같은 결과가 나오고, htmlrec처럼 투명 배경 영상까지 뽑는 도구도 있다.
- 모션 캔버스와 매님은 어떤 채널에 맞나?
모션 캔버스는 TypeScript로 도형·화살표·코드 하이라이트를 움직이는 도구라 개발·알고리즘 설명 채널에 맞는다. 매님은 3Blue1Brown이 쓰는 Python 엔진으로 수식 변형과 그래프가 많은 수학·과학 강의에 강하다. 둘 다 MIT 라이선스라 상업 이용 제한이 없다.
- 캡컷·브루·프리미어 프로를 완전히 끊어도 되나?
그래픽과 자막이 주인공인 쇼츠·강의·제품 소개라면 코드 영상만으로 끝까지 만들 수 있다. 브이로그나 인터뷰처럼 촬영본 컷 편집이 대부분인 영상은 본편을 GUI 편집기로 자르고 인트로·자막 모션 같은 그래픽 구간만 코드로 뽑아 얹는 조합이 효율적이다.
- 하이퍼프레임을 설치하려면 무엇이 필요한가?
공식 README 기준 Node.js 22 이상과 FFmpeg가 필요하다. npx hyperframes init my-video로 프로젝트를 만들고 npx hyperframes preview로 브라우저 미리보기, npx hyperframes render로 MP4를 뽑는다. 에이전트용 스킬은 npx skills add heygen-com/hyperframes로 설치한다.
- 에이전트에게 영상을 시킬 때 프롬프트에 꼭 넣을 정보는?
소재 경로나 첨부 파일, 사용할 도구, 화면 비율(16:9·9:16), 전체 길이, 훅과 본문의 초 단위 구성이 기본이다. 도구를 고르기 어렵다면 영상을 프레임·초 단위로 분석한 뒤 적합한 도구로 편집해 달라고 맡기고, 수정 요청도 숫자로 구체적으로 적는 편이 정확하다.
- HTML 키네틱 캡처 도구는 무엇을 쓰면 되나?
가장 널리 쓰는 기반은 구글 크롬 팀이 시작한 퍼피티어다. 명령 한 줄로 끝내고 싶다면 hrec render anim.html 형태로 쓰는 htmlrec, 퍼피티어 안에서 프레임을 결정적으로 찍고 싶다면 MIT 라이선스의 puppeteer-capture 플러그인이 있다. 셋 다 결과를 FFmpeg로 영상으로 묶는다.
- 매님 원본과 커뮤니티판 중 무엇을 설치해야 하나?
처음 시작한다면 문서와 커뮤니티가 활발한 커뮤니티판(ManimCE)을 권한다. 2026년 10월 8일 v0.22.0이 나왔고 pip install manim으로 설치한다. 3Blue1Brown 제작 방식을 그대로 공부하려면 원본 3b1b/manim을 쓰되, 두 버전의 설치 방법이 달라 섞으면 오류가 난다.
- 코드 영상은 Runway·Kling·Veo 같은 생성형 영상과 무엇이 다른가?
생성형 영상은 프롬프트로 없는 장면을 새로 그려 내고, 코드 영상은 사람이 정한 문구·숫자·레이아웃을 소스 파일로 정의해 그대로 렌더한다. 같은 소스는 다시 렌더해도 같은 결과가 나와 브랜드 영상이나 강의처럼 정확성이 중요한 작업에 맞고, 생성형 B롤을 코드 템플릿에 얹어 함께 쓰기도 한다.
- 상품 100개 대량 영상이나 컷 이어 붙이기는 어떤 도구가 맞나?
템플릿 1개에 데이터만 바꿔 넣는 대량 영상은 렌더 서버 없이 JSON을 보내는 Shotstack, 애프터이펙트 템플릿을 쓰는 Plainly, 직접 서버를 돌리는 오픈소스 Revideo나 리모션이 맞다. 이미 찍은 클립을 자르고 이어 붙이는 일은 Python의 MoviePy나 Node.js의 editly가 가볍다. Shotstack·Plainly는 유료, 나머지는 MIT 라이선스다.
크리에이터 팁