HOIBLOG먼저 읽는 요약
작업 경험 — Codex와 Gemini로 Remotion 작업을 해봤지만 둘 다 만족스럽지 않아 지금은 쉬고 있습니다. Opus 5.5로 직접 제작한 후기는 아닙니다.
출력 구분 — 움직이는 웹 화면과 MP4는 다른 결과물입니다. 받은 소스가 Remotion인지 HTML+GSAP인지에 따라 렌더링 절차도 달라집니다.
받을 자료 — 지정한 규격의 MP4, 수정 가능한 프로젝트와 자산, 다시 실행할 README를 함께 요청합니다.
마지막 확인 — 실제 MP4를 재생해 한글·폰트·줄바꿈, 장면 전환과 오디오를 확인합니다.
한때 Remotion(리모션)으로 모션그래픽을 계속 다듬었습니다. Codex와 Gemini를 모두 써봤지만 둘 다 별로 마음에 들지 않았습니다. 위 화면은 당시 Gemini 3.8로 작업한 영상의 한 장면입니다. 만족스러운 결과를 얻고 마친 것은 아니고, 한계를 느껴 지금은 당분간 쉬고 있습니다.
이번 Opus 5.5는 정말 좋다는 이야기를 들었습니다. 다만 아직 그 모델로 직접 만들어 보지는 않았고, 제 작업도 여전히 쉬고 있습니다. ‘클로드로 모션그래픽을 만든다’는 이야기를 실제 작업으로 옮기려면 모델 이름 다음에 받을 결과물을 확인해야 합니다. 웹에서 움직이는 화면인지, 게시할 MP4인지, 나중에 다시 고칠 원본까지 남는지는 각각 다른 문제입니다.
움직이는 웹 화면과 MP4는 다릅니다
코드로 모션그래픽을 만들 때는 AI가 글자와 도형의 배치, 움직임, 장면 전환을 코드로 작성합니다. React로 영상을 구성하는 Remotion을 쓸 수도 있고, HTML과 GSAP으로 웹 애니메이션을 만들 수도 있습니다. 어느 쪽이든 브라우저에서 코드가 움직인다고 영상 파일까지 생기는 것은 아닙니다. MP4로 받으려면 장면을 프레임으로 렌더링하고 영상으로 인코딩해야 합니다. ‘클로드가 만들었다’는 말은 이런 제작 과정을 맡겼다는 뜻이지, 클로드 자체가 MP4를 바로 내놓는 영상 생성 모델이라는 뜻은 아닙니다.
Reddit에 올라온 Hovercast Events 홍보 영상도 이 구분을 보여줍니다. 영상 일을 20년 했다고 소개한 작성자에 따르면, Remotion 대신 HTML+GSAP 애니메이션을 헤드리스 브라우저에서 프레임별로 렌더링한 1080p·60fps 영상입니다. 화면을 띄우지 않는 브라우저에서 애니메이션 시점을 프레임마다 맞춰 캡처하고 영상으로 만드는 방식이며, 음악은 Python으로 합성했다고 합니다. 이런 HTML 기반 소스를 받았다면 프레임 캡처·영상 인코딩·오디오 결합 절차까지 있어야 합니다. HTML 파일을 영상 공유 서비스에 올리는 것으로 MP4를 대신할 수는 없습니다.
Remotion으로 작업한다면 공식 Agent Skills 안내를 연결해 둘 수 있습니다. Claude Code와 Codex 같은 에이전트가 영상 구성·타이밍·폰트·렌더링 규칙을 참고하도록 프로젝트 폴더에서 npx skills add remotion-dev/skills를 실행해 설치합니다. 예전 글에서 보이는 Remotion MCP는 현재 deprecated 상태여서 새로 설치하는 경로로 권장되지 않습니다. Skills 설치는 작업 규칙을 더하는 단계이며, 만들어진 영상을 파일로 출력하는 단계는 따로 진행해야 합니다.
Remotion 프로젝트를 MP4로 내보내는 방법
정상적으로 실행되는 Remotion 프로젝트가 있다면 공식 렌더 안내에 따라 MP4를 출력할 수 있습니다. Remotion Studio에서 출력할 영상인 컴포지션을 고른 뒤 Render 버튼을 누르고, 원하는 출력 설정을 선택해 Render video를 실행합니다. MP4가 목적이라면 H.264 코덱과 저장 위치도 확인합니다. 프로젝트를 처음 만드는 과정이 아니라, 만들어 둔 영상을 파일로 내보내는 절차입니다.
터미널에서도 출력할 수 있습니다. 필요한 패키지가 설치되어 있고 프로젝트가 정상 작동한다면, 프로젝트 폴더에서 다음 명령을 사용합니다. 대괄호 부분은 자신의 컴포지션 ID로 바꿉니다.
npx remotion render [내컴포지션ID] out/video.mp4
[내컴포지션ID] 전체를 실제 ID로 바꾸면 됩니다. out/video.mp4는 저장 경로와 파일명이며, 공식 문서의 HelloWorld는 예제의 컴포지션 ID이지 모든 프로젝트에 공통으로 쓰는 이름이 아닙니다. ID를 모르면 npx remotion render까지만 실행해 선택 화면에서 고를 수 있습니다. 이것은 Remotion 프로젝트를 렌더링하는 절차입니다. 앞서 본 HTML+GSAP 파일까지 이 명령으로 자동 변환되는 것은 아니므로, 받은 소스에 맞는 출력 방법을 골라야 합니다.
MP4와 수정할 원본을 함께 받습니다
계속 수정할 작업이라면 MP4와 소스 프로젝트가 모두 필요합니다. MP4는 재생·게시할 결과물이고, 문구·로고·장면별 타이밍을 원래 코드에서 바꾸려면 소스가 있어야 합니다. 반대로 소스만 있고 MP4가 없다면 영상 파일 출력까지 끝난 상태는 아닙니다. 이미지나 음악을 외부 경로에서 불러온 프로젝트라면 코드 몇 줄만 복사하지 말고 다시 실행하는 데 필요한 자산도 함께 챙겨야 합니다.
| 받을 것 | 함께 남길 내용 |
|---|---|
| 완성 MP4 | 실제 재생할 수 있는 파일과 저장 위치 |
| 수정 가능한 프로젝트 | 소스·설정·의존성 정보, 사용한 이미지·음악·폰트 또는 적법하게 다시 확보하는 방법 |
| README | Node.js·Remotion 등 실행 버전, 설치·미리보기·렌더 명령, 수정할 파일과 자산 경로 |
처음부터 가로형·세로형 여부와 정확한 가로·세로 해상도, 영상 길이, fps, 오디오 유무를 정하면 결과를 판단하기 쉽습니다. ‘모션그래픽 만들어 줘’보다 지정한 규격의 MP4와 수정 가능한 프로젝트, 다시 실행할 README까지 달라고 요청하는 편이 명확합니다. 다만 렌더링까지 맡기려면 코드 실행과 파일 생성이 가능한 환경이어야 합니다. 코드만 작성할 수 있는 환경에서 소스를 받았다면, 실행 가능한 환경으로 옮겨 출력을 이어가야 합니다.
소재의 이용 조건도 함께 확인해야 합니다. Remotion에는 개인과 3인 이하 회사 등을 위한 무료 라이선스가 있지만, 4인 이상 회사나 공동 작업은 조직 규모와 협업 조건에 따라 상용 라이선스가 필요합니다. 도구의 무료 사용과 음악·이미지·폰트의 사용 권리는 별개입니다. 폰트 파일을 프로젝트에 넣어 전달해도 되는지, 배경음악을 공개 영상에 써도 되는지 각각 살펴야 합니다. 무료 도구로 제작했다고 모든 소재의 상업 이용과 재배포까지 무료인 것은 아닙니다.
완성된 MP4를 직접 재생해 확인합니다
출력 후에는 MP4를 직접 열어봅니다. 한글이 들어간다면 해당 글자를 지원하는 폰트인지, 지정한 굵기가 적용됐는지, 줄바꿈이나 글자 잘림은 없는지 확인합니다. Remotion은 Google Fonts와 로컬 폰트를 연결하고 폰트가 준비될 때까지 렌더링을 기다리는 방식을 지원합니다. 그래도 ‘한글 폰트 써 줘’라는 지시만으로 글자 지원·로딩·화면 배치가 검증되지는 않습니다. 장면 전환의 끊김, 음악과 화면의 타이밍, 끝부분에서 소리가 갑자기 잘리는 문제도 실제 출력 파일에서 살펴야 합니다.
앞의 Reddit 작성자도 실제 행사 영상·스크린샷·로고를 제공했고, 다섯 버전에 걸쳐 수정하며 사람이 직접 재생해 끊김과 소리 문제를 잡았다고 설명했습니다. README도 요청했습니다. AI가 코드를 작성하는 것뿐 아니라 자료를 제공하고 결과를 보며 고치는 과정까지 거쳐야, 웹 애니메이션 소스가 재생 가능한 MP4와 수정 가능한 프로젝트로 완성됩니다.
총평: 쓸 수 있는 영상과 다시 고칠 원본까지
렌더링 방법을 안다고 결과물이 마음에 드는 것은 아닙니다. Codex와 Gemini로 계속 다듬어도 만족하지 못했던 제 작업은 아직 중단한 상태입니다. 다만 클로드로 모션그래픽을 만들어 보려 한다면 처음부터 받을 결과물을 분명히 정할 수 있습니다. 움직이는 화면에 그치지 않고 쓸 수 있는 MP4와 다시 고칠 수 있는 소스까지 요청하는 것입니다.
