Remotion Skills

최근 Claude Code와 Antigravity를 활용해 1분짜리 교육 영상을 제작했습니다.

​

영상 편집 프로그램을 전혀 사용하지 않고, AI와의 대화만으로 완성했다는 점이 가장 놀라웠습니다.

​

이 글에서는 제가 직접 경험한 제작 과정과 마주했던 문제들, 그리고 그것을 어떻게 해결했는지 공유하려고 합니다.

제작 목표

​

CLAUDE_CODE_PLAYBOOK.md라는 문서를 기반으로 교육 영상을 만드는 것이 목표였습니다.

​

참고로 이 문서는 제가 Claude Code로 개발하면서 비효율적이었던 작업들을 되돌아보고, 앞으로 더 효율적으로 개발하기 위해 정리해둔 일종의 개인 참고서입니다.

​

문서에는 4가지 황금 규칙, 상황별 도구 선택 가이드, 검증된 효율성 수치 등이 담겨 있었고, 이 내용을 개발 지식이 없는 사람도 이해할 수 있는 영상으로 만들고 싶었습니다.

사용한 도구들

​

Antigravity는 AI 코딩 어시스턴트 환경을 제공하고, Remotion Skills는 프로그래밍으로 영상을 제작할 수 있게 해줍니다. Claude Code는 AI 대화 기반으로 개발을 진행할 수 있는 도구입니다.

​

Remotion은 React로 영상을 만드는 프레임워크입니다. 일반적인 영상 편집 툴과 다르게 코드로 애니메이션과 씬을 제어할 수 있다는 특징이 있습니다.

​

Remotion Skills는 Claude Code에서 Remotion을 쉽게 사용할 수 있도록 돕는 확장 기능입니다.

설치는 간단합니다.

​

설치 명령어(터미널에서 실행) :

npx skills add remotion-dev/skills

실제 제작 과정

​

먼저 프로젝트 설정부터 시작했습니다.

Remotion 프로젝트를 설정하기 위해 프로젝트 폴더에서 필요한 패키지들을 설치했습니다.

​

npm init -y npm install remotion @remotion/cli @remotion/player react react-dom typescript

​

다음으로 AI에게 영상 구조를 요청했습니다.

​

"CLAUDE_CODE_PLAYBOOK.md 문서를 바탕으로 1분 정도의 사용자 교육용 영상을 제작해줘. 특별한 개발지식이 없는 사람들도 이해할 수 있도록 쉬운 설명과 자막을 함께 추가해줘"라고 말했습니다.

​

그러자 AI가 자동으로 3개의 파일을 생성했습니다. src/Root.tsx는 컴포지션 설정을 담당하는 파일이었고, src/ClaudeCodePlaybook.tsx에는 7개의 씬으로 구성된 컴포넌트가 들어있었습니다.

​

AI는 문서 내용을 분석해서 인트로부터 아웃트로까지 60초 분량의 구조를 자동으로 설계했습니다.

​

0초부터 5초까지는 로고와 타이틀 애니메이션, 5초부터 12초까지는 4가지 황금 규칙을 카드 형태로 보여주는 씬이었습니다.

​

이어서 비효율과 효율을 비교하는 장면, 상황별 도구 표, 4단계 개발 흐름, 수치 애니메이션, 그리고 마지막으로 핵심 원칙을 정리하는 아웃트로까지 자연스럽게 이어졌습니다.

​

각 씬에는 Spring 애니메이션과 한국어 자막이 자동으로 포함되어 있었습니다.

​

Remotion Studio로 미리보기를 확인하기 위해 npm start 명령어를 실행했습니다. 브라우저에서 localhost:3000으로 접속하면 Remotion Studio가 열리는데, 여기서 타임라인을 따라 각 씬을 확인하고 실시간으로 수정할 수 있었습니다.

최종 렌더링은 다음 명령어로 진행했습니다.

​

npx remotion render ClaudeCodePlaybook out/claude_code_playbook.mp4 --log=verbose

​

약 3분에서 4분 후, 4.3MB 크기의 1080p 영상이 완성되었습니다.

마주한 문제들과 해결 과정

​

처음에는 "Agent terminated due to error" 오류가 발생했습니다. 문서 파일이 워크스페이스 외부에 있어서 생긴 문제였는데, 파일을 워크스페이스 내부로 이동하니 정상적으로 작동했습니다.

​

또 다른 문제는 브라우저 자동화와 관련된 것이었습니다. Antigravity 크롬 확장 프로그램이 설치된 상태에서 AI가 브라우저를 띄우면 온보딩 페이지에서 멈추는 현상이 있었습니다.

​

이 문제는 브라우저 대신 터미널 CLI 명령어로 렌더링을 진행하는 방식으로 해결했습니다.

​

npx remotion render ClaudeCodePlaybook out/video.mp4

이 과정에서 배운 것들

​

AI와 코드를 결합하면 영상 편집의 완전히 새로운 방식이 가능하다는 것을 깨달았습니긴 문서를 AI가 알아서 핵심만 추출해서 시각적으로 구성해준다는 점도 인상적이었습니다.

​

코드 기반 영상 제작의 장점도 명확했습니다. 텍스트를 수정하면 영상이 바로 변경되고, Git으로 버전 관리도 가능하며, 컴포넌트를 재사용할 수 있다는 점이 특히 유용했습니다.

최종 결과물

​

완성된 영상은 4.3MB 크기에 1920x1080 해상도, 60초 길이, 30fps로 제작되었습니다.

Remotion Skill 활용 샘플 영상
[출처] AI와 대화만으로 1분 교육 영상 만들기 - Remotion Skill과 Claude Code 실전 활용기|작성자 맥퀸쌤