Remotion 에이전트 스킬 출시: 말만 하면 Claude Code가 모션 그래픽 영상을 렌더링까지 완성

신제품 출시나 기능 업데이트를 소개하는 깔끔한 모션 그래픽 영상을 만들려면 그동안 After Effects를 켜고 키프레임을 일일이 잡거나 전문 디자이너를 찾아야 했습니다.

하지만 이제 터미널 창 하나로 이 과정이 해결되기 시작했습니다. 1월 19일, Remotion의 공식 Agent Skills와 Claude Code를 결합해 자연어 지시만으로 React 코드를 짜고 3D 모션 그래픽 영상을 렌더링까지 마치는 사례가 공개됐습니다.

영상 편집 소프트웨어를 전혀 열지 않고도 Claude Code가 컴포넌트 설계부터 3D 카메라 연출, 렌더링 파이프라인까지 단독으로 처리했습니다.

프롬프트로 완성한 8초짜리 터미널 모션 그래픽

이번 시연의 출발점은 특정 CLI 명령어 설치 과정을 보여주는 8초짜리 애니메이션을 만들어 달라는 단순한 지시였습니다.

기본 화면은 1280x1000 해상도의 라이트 모드 macOS 터미널 창으로 설정됐습니다. Claude Code는 프로젝트 구조를 파악한 뒤 터미널 컴포넌트를 직접 작성하고 피드백에 맞춰 폰트와 배경을 다듬었습니다.

이어 메인 시퀀스를 생성해 터미널 창이 화면 아래에서 미끄러져 들어오며 Y축으로 회전하고 확대되는 복합 3D 모션 효과를 입혔습니다.

실제 명령어 실행 결과인 아스키 아트 출력과 로고 전환, 그리고 마지막에 터미널 창이 카메라 방향으로 90도 회전하며 퇴장하는 효과까지 코드로 구현한 뒤 곧바로 완성본 영상을 렌더링해 냈습니다.

AI 코딩 도구를 위한 공식 지침, Agent Skills

Remotion은 React 코드로 영상을 프로그래밍하는 프레임워크입니다. 이번에 마련된 Agent Skills는 Claude Code, Cursor, Codex, Kimi Code 등 AI 코딩 에이전트가 Remotion 문법을 정확히 다루도록 돕는 공식 가이드라인 모음입니다.

터미널에서 명령어 한 줄만 실행하면 에이전트에 지침을 바로 설치할 수 있습니다.

기본적인 레이아웃, 타이포그래피, 타이밍 제어는 물론 3D 지도 애니메이션, 자막 처리, 로컬 스튜디오 미리보기 실행, SaaS 연동 아키텍처 가이드까지 폭넓게 포함되어 있어 AI가 잘못된 코드를 생성할 확률을 대폭 줄여줍니다.

왜 중요한가

이번 시연은 AI 비디오 제작이 확산 모델 기반의 픽셀 생성뿐만 아니라, 결정론적인 코드 생성 방식으로도 강력하게 발전할 수 있음을 보여줍니다.

일반적인 AI 비디오 도구는 UI 인터페이스나 텍스트를 정확하게 묘사하지 못하고 왜곡을 일으키기 쉽습니다. 반면 Remotion 방식은 에이전트가 완벽한 프론트엔드 코드를 작성하고 브라우저 기반 엔진이 이를 렌더링하므로 픽셀 단위의 정밀한 통제가 가능합니다.

개발자나 1인 창업가에게는 제품 데모 영상이나 기능 릴리스 영상을 제작하는 진입 장벽이 획기적으로 낮아지는 셈입니다. 문구나 색상을 바꾸고 싶을 때도 에이전트에게 말 한마디만 건네면 즉시 수정본이 나옵니다.

실사 영화 같은 장면을 만들 수는 없지만, UI 모션 그래픽이나 데이터 시각화 분야에서는 지금 당장 실무에 투입해도 좋을 만큼 완성도 높은 워크플로가 열렸습니다.