무료 모션그래픽 AI 오픈모션을 뜯어봤더니 Remotion이 나왔습니다

글로 설명하면 모션그래픽이 나온다는 앱이 있길래 받아봤습니다. 오픈모션(openmotion.design)입니다. 무료고, 클로드 코드나 코덱스 구독에 연결해서 씁니다.

그런데 설치하기 전에 습관처럼 서명부터 확인했다가 손이 멈췄고, 결국 실행하지 않고 패키지를 통째로 뜯어봤습니다. 안에서 나온 게 예상 밖이었습니다. 이 글은 그 기록이고, 그 과정에서 만든 장면 렌더러를 전문 공개합니다.

먼저, 설치 파일 이야기

받은 파일은 OpenMotion-1.1.0-setup.exe, 265MB입니다. 공식 사이트에서 HTTPS로 받은 게 맞고요. 서명을 보면 이렇습니다.

인증서가 자체 서명이고, 이름에 "Testing Only"가 그대로 박혀 있습니다. 회사명 example.com은 electron-vite 템플릿 기본값이 안 바뀐 것이고요.

속을 열었더니 Remotion과 GSAP

NSIS 설치 파일이라 실행하지 않고 목록만 볼 수 있습니다. 여기서 예상 밖의 것이 나왔습니다.

저희가 숏폼 만들 때 쓰는 렌더러가 Remotion입니다. 오픈모션도 같은 걸 씁니다. index.js에서 renderMedia와 renderFrames를 호출하고, 미리 빌드해둔 remotion-bundle을 대상으로 뽑습니다.

그리고 resources/motion-skill/에 마크다운 42개짜리 모션디자인 스킬이 들어 있습니다. AI 호출은 @anthropic-ai/claude-agent-sdk의 query() — 클로드 코드를 헤드리스로 돌리는 구조입니다.

장면 형식이 공개된 계약이다

제일 쓸모 있던 발견은 이겁니다. 오픈모션의 한 장면은 자기완결 HTML 한 장이고, 그 안에 일시정지된 GSAP 타임라인 하나가 들어 있습니다. 렌더러는 그 타임라인을 프레임마다 seek해서 찍을 뿐입니다.

<div class="frame">…</div>        <!-- 컴포지션 크기, overflow:hidden -->

<script>
  const tl = gsap.timeline({ paused: true })   // 타임라인은 반드시 하나, paused
  tl.fromTo(el, {…시작}, {…끝, duration, ease}, 시각)

  window.__SCENE_TIMELINE__ = tl
  window.__SCENE_DURATION__ = 2.7              // 초 단위로 명시
</script>

여기서 딱 하나만 기억하면 됩니다. from()을 쓰면 안 되고 항상 fromTo()를 씁니다. 렌더러가 임의 프레임으로 건너뛰기 때문에, from()은 시작값을 그때그때 읽어서 차가운 seek에서는 요소가 끝 상태로 눌러앉습니다. 장면 전체가 정지화면으로 나오는 제일 흔한 원인입니다. 같은 이유로 setTimeout·requestAnimationFrame·CSS @keyframes도 쓰면 안 됩니다. 타임라인 밖 움직임은 export에 아예 안 나옵니다.

창 없이 돌려봤습니다

패키지 안에 stdio MCP 서버(openmotionMcp.js)가 있길래, Electron 바이너리를 Node 모드로 돌려봤습니다. 그냥 떴습니다.

ELECTRON_RUN_AS_NODE=1 \
OPENMOTION_STATE_FILE=state.json \
"$LOCALAPPDATA/Programs/openmotion/openmotion.exe" \
"$LOCALAPPDATA/Programs/openmotion/resources/app.asar/out/main/openmotionMcp.js"

도구는 add_scene read_scene update_scene patch_scene get_scenes read_skill view_sketch 일곱 개입니다.

그런데 여기서 막혔습니다. 렌더·export 도구가 없어서 영상 뽑기는 앱이 해야 하고, 무엇보다 add_scene이 쓸 프로젝트가 있어야 하는데 프로젝트 만들기는 창에서만 됩니다. 자동화는 거기서 끊깁니다.

그래서 장면 규격만 지켜서 직접 렌더했습니다

장면 형식이 공개된 계약이니, 같은 형식으로 쓰고 우리가 seek해서 찍으면 됩니다. puppeteer로 프레임마다 타임라인을 옮기며 스크린샷을 찍고 ffmpeg로 붙입니다. 앱이 하는 일과 같습니다.

이렇게 하면 두 가지가 좋습니다. 앱 없이 코드로 끝나고, 같은 HTML을 나중에 오픈모션 앱에 그대로 붙여 캔버스에서 다듬을 수도 있습니다. 계약을 지켰으니까요.

만들면서 두 번 다시 뽑은 것

첫 판은 글씨를 44px로 잡았습니다. 웹에서는 큰 크기인데 세로 영상에 넣으니 안 읽혔습니다. 오픈모션 쪽 문서에도 "영상 프레임은 웹페이지가 아니다"라고 적혀 있더군요. 지금 기준은 주제어 90px 이상, 캡션 50px 이상입니다.

둘째 판은 구도 문제였습니다. 설명을 그림으로 옮기면 사실이어도 심심합니다. 화면 자체가 증거가 되게 다시 잡았습니다 — 지시가 타이핑되고, 방금 쓴 그대로가 화면에 나타나는 구조입니다.

도구를 뜯어보고 쓸모를 확인한 뒤 부족한 데를 직접 고치는 방식은 공짜 SEO 도구가 한국어를 못 읽던 문제를 찾아 한글패치를 만든 기록에서도 똑같이 했습니다. 관심 있으시면 같이 보셔도 좋습니다.

정리

모션그래픽 AI를 찾고 계셨다면 오픈모션은 써볼 만합니다. 다만 "없는 걸 상상해서 그려주는 도구"가 아니라 준 소재를 정확히 배치하고 움직이게 만드는 도구라는 걸 알고 시작하시는 게 좋습니다. 결과물 품질의 상한선은 넣은 소재가 정합니다.