소개

Motion Canvas는 Remotion과 같이 비디오 생성을 프로그래밍하는 저작 도구 입니다.

Remotion은 React 컴포넌트를 사용하여 선언적으로 영상을 조직화 합니다. 그리고 동적인 에니메이션은 useFrame을 사용하여 key frame 정보를 받아 개발자가 interpolation 후 필요한 props에 값을 업데이트 하는 방식 입니다.

반면 Motion Canvas는 보다 imperative한 프로그래밍을 할 수 있습니다. Motion Canvas 개발자는 Manim이라는 Python 그래픽 생성툴에 영감을 받았다고 합니다. 따라서 Manim에서 차용한 프로그래밍 멘탈 모델을 따랐다고 볼 수 있겠습니다.

다음 링크에서 확인할 수 있는 예제를 살펴 봅니다.

https://motioncanvas.io/docs/quickstart#programming-an-animation

import {Circle, makeScene2D } from '@motion-canvas/2d';
import {all, createRef } from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const myCircle = createRef<Circle>();

  view.add(
    <Circle
      //highlight-start
      ref={myCircle}
      x={-300}
      width={140}
      height={140}
      fill="#e13238"
    />,
  );

  yield* all(
    myCircle().position.x(300, 1).to(-300, 1),
    myCircle().fill('#e6a700', 1).to('#e13238', 1),
  );
});

언뜻 보면 React 컴포넌트 같지만 실제로는 독자적인 rendering tree를 만들기 위해 jsx를 활용하는 것 뿐 입니다. 실제로 결과는 dom tree나 svg로 출력하는 것이 아닌 canvas에 출력을 합니다.

그리고 마지막 줄에 있는 yield 구문에서 에니메이션 방식을 지정합니다.

원의 시작 점이 -300이고 이로 부터 300까지 1초간 이동하며, 다시 -300으로 1초간 이동합니다. 따라서 원은 다시 제자리로 돌아옵니다.

색상 역시 유사하게 동작하며 각 값들은 기본 easing function에 의해 자동으로 frame별 interpolation을 해 줍니다.

최종 렌더링한 결과는 다음과 같습니다.

makeScene2D 함수에서 전달한 generator는 yield 구문을 순차적으로 제공함으로서 에니메이션의 순서를 전달합니다.

따라서 Remotion의 정적인 방식 보다 Motion canvas는 조금 더 직관적으로 시간순서에 따른 에니메이션 시나리오를 구성할 수 있습니다.

개인적인 생각에는 Motion canvas는 에니메이션 클립을 만드는데 유용하고, Remotion은 전체적인 비디오 컨텐트를 조직화 하는데 유용하다고 생각합니다. 또한 Remotion은 React와 웹생태계의 라이브러리를 거의 제약없이 비디오 제작에 활용할 수 있다는 장점도 있습니다.

이번 포스팅은 간단히 소개로 마무리하고 앞으로 예제를 하나씩 소개해 보도록 하겠습니다.

motion-canvas: programmable 동영상 제작 툴

소개