모션 이펙트 214종을 코드로 가져오는 법, Remotion과 HyperFrames

브라우저에서 고르고 코드로 가져가는 모션 이펙트 카탈로그

최근 몇 년 사이 영상 제작 방식 자체가 바뀌고 있다. 애프터이펙트 타임라인 대신 React나 HTML 코드로 영상을 짜는 '코드형 영상(video-as-code)' 도구가 개발자 커뮤니티를 중심으로 자리를 잡았고 여기에 AI 코딩 에이전트가 결합되면서 "말로 시켜서 영상을 만든다"는 워크플로가 현실이 됐다. 클로드코드 사용자 커뮤니티 '클코단'에서는 최근 214가지 모션 이펙트를 브라우저에서 바로 비교하고 코드로 가져올 수 있는 카탈로그 사이트 'DEXA VFX LAB'이 공유되며 이런 흐름을 다시 한번 확인시켰다. 이 도구가 무엇을 하는지, 그리고 그 밑바탕에 있는 Remotion과 HyperFrames라는 두 코드형 영상 생태계는 어떻게 다른지 짚어본다.

DEXA VFX LAB(dexa.art/vfx)은 214가지 모션 이펙트를 웹 브라우저에서 실시간으로 미리 보고 프리셋 파라미터를 직접 조정할 수 있게 만든 카탈로그형 사이트다. 마음에 드는 효과를 고르면 Remotion에서 바로 쓸 수 있는 TSX 컴포넌트와 프리셋 JSON, 또는 HyperFrames용 HTML 코드로 내보낼 수 있다는 점이 특징으로 소개됐다. 디자이너가 애프터이펙트에서 프리셋을 고르듯, 개발자나 바이브코더가 웹에서 이펙트를 눈으로 고른 뒤 그대로 프로젝트 코드에 붙여 넣는 방식이다.

다만 이 사이트는 아직 독립적인 리뷰나 미디어 커버리지가 폭넓게 쌓인 상태는 아니다. 검색으로 확인되는 정보는 제한적이었고, 세부 스펙이나 운영 주체에 대한 공식 정보는 사이트 바깥에서 찾기 어려웠다. 그래도 결과물을 Remotion과 HyperFrames라는, 실제로 널리 쓰이는 두 코드형 영상 도구의 포맷에 맞춰 내보낸다는 점은 이 도구가 겨냥하는 사용자층을 분명히 보여준다.

Remotion, React 코드로 영상을 만드는 오픈소스 프레임워크

Remotion은 2021년 등장한 프레임워크로, React 컴포넌트로 영상의 각 프레임을 정의하고 CLI 명령으로 MP4를 렌더링한다. GUI 편집기 없이 TypeScript 코드만으로 CSS·Canvas·SVG·WebGL 같은 웹 기술을 그대로 영상 제작에 끌어다 쓸 수 있어, 데이터 기반 그래프 영상이나 API 응답을 시각화한 영상처럼 자동화가 필요한 작업에 강점을 보여왔다.

라이선스 구조는 독특하다. 개인이나 비영리단체, 3인 이하 소규모 영리 팀은 상업적 용도로도 무료로 쓸 수 있지만, 4인 이상 영리 조직은 유료 회사 라이선스가 필요하다. 회사용 라이선스는 코드를 직접 작성하는 인원 기준 좌석당 월 25달러의 'Remotion for Creators'와, 렌더링 1건당 0.01달러(월 최소 100달러)를 매기는 'Remotion for Automators' 두 형태로 나뉜다. 회사는 2025년 자체 발표에서 흑자 전환과 함께 연매출 66만 달러를 기록했다고 밝혔으며 추가 투자 유치 없이 자체 성장 기조를 이어가고 있다고 설명했다.

HyperFrames, HeyGen이 내놓은 AI 에이전트용 HTML 렌더러

HyperFrames는 영상 합성 스타트업 HeyGen이 2026년 4월 17일 공개한 오픈소스 도구로, 순수 HTML·CSS·자바스크립트로 작성한 페이지를 헤드리스 브라우저로 캡처하고 FFmpeg로 인코딩해 결정론적인 MP4로 렌더링한다. 같은 HTML 파일이면 언제 렌더링하든 동일한 결과물이 나온다는 점이 핵심 설계 목표로 꼽힌다. 아파치 2.0 라이선스로 공개된 이 프로젝트는 공개 직후 며칠 만에 깃허브 스타 6600개를 넘겼고, 현재는 3만 3000개를 넘어섰다.

HyperFrames는 처음부터 클로드코드, 코덱스, 커서 같은 AI 코딩 에이전트가 직접 다루는 것을 염두에 두고 설계됐다. 제품 발표 영상을 만드는 '/product-launch-video', 자막 없는 설명 영상을 만드는 '/faceless-explainer', PR 변경 사항을 영상으로 요약하는 '/pr-to-video' 등 워크플로 스킬이 함께 제공되며, 사용자가 원하는 영상을 말로 설명하면 에이전트가 이를 HTML 코드로 작성하고 로컬에서 렌더링까지 처리하는 구조다.

무엇을 언제 쓸까: Remotion과 HyperFrames의 갈림길

두 도구는 웹 기술로 영상을 만든다는 목표는 같지만 저작 방식이 다르다. Remotion은 React·TypeScript 컴포넌트 기반이라 팀이 이미 React 생태계에 익숙하고 기존 컴포넌트를 재사용하려는 경우, 성숙한 클라우드 렌더링 인프라와 커뮤니티 템플릿이 필요한 경우에 적합하다는 평가가 많다. 반면 HyperFrames는 순수 HTML·CSS·GSAP 같은 브라우저 애니메이션을 그대로 쓰거나, 이미 존재하는 웹페이지·프로토타입을 소재로 삼거나, AI 에이전트가 코드 대부분을 작성하는 워크플로에서 더 잘 맞는다는 분석이 나온다. 물론 HyperFrames는 등장한 지 반년이 채 안 된 만큼 생태계와 사례가 상대적으로 얕다는 지적도 함께 따라붙는다.

클코단이 주목한 지점

방 안에서는 214가지 효과를 하나하나 코드로 옮겨 적을 필요 없이, 브라우저에서 눈으로 비교하고 바로 붙여넣기만 하면 된다는 점이 실용적이라는 의견이 많았다. 특히 Remotion용 TSX와 HyperFrames용 HTML을 동시에 지원한다는 점을 두고, 두 생태계 중 어느 쪽을 메인으로 쓰든 같은 카탈로그를 재사용할 수 있다는 점을 긍정적으로 보는 반응이 이어졌다. 다만 카탈로그 사이트 자체의 지속 운영 여부나 향후 이펙트 추가 계획 등은 아직 불확실하다는 신중한 시각도 있었다.

정리

코드형 영상 제작은 더 이상 얼리어답터만의 실험이 아니다. Remotion은 흑자 스타트업으로 자리 잡았고, HeyGen의 HyperFrames는 공개 반년 만에 깃허브 스타 3만 개를 넘기며 AI 에이전트 시대의 영상 제작 표준 후보로 떠올랐다. DEXA VFX LAB 같은 카탈로그형 도구는 이 두 생태계 사이에서 '눈으로 고르고 코드로 가져간다'는 마지막 마찰을 줄이는 시도로 볼 수 있다. 다만 이 카탈로그 자체는 아직 검증할 외부 정보가 많지 않은 신생 프로젝트라는 점은 감안할 필요가 있다.