Claude로 모션그래픽 만들기

Claude로 모션그래픽을 만든다는 뜻

Claude Code에 장면과 움직임을 설명하고, Remotion 코드로 구성한 영상을 미리보기·수정·MP4 렌더링하는 방식입니다. 글자·도형·카드·화면 캡처를 시간에 맞춰 움직입니다. 생성형 영상 모델이 매 프레임을 그려주는 방식과는 작업 과정이 다릅니다.

기본 흐름은 메시지→장면표→코드→미리보기→수정→영상 파일입니다. 이 강의는 로컬 PC에서 실습하는 제작 방법을 안내하며, 홈페이지에서 즉석으로 영상을 생성하는 기능은 제공하지 않습니다.

웹 대화에서 먼저 연습해보기

코드 도구를 설치하기 전에, Claude의 HTML 아티팩트를 사용할 수 있는 환경에서는 글자와 도형이 움직이는 작은 화면부터 요청할 수 있습니다. 아티팩트 지원 여부와 메뉴는 계정 환경에서 확인합니다.

‘배운 AI를 나의 도구로’라는 제목과 학습 카드 3개가
차례로 등장하는 15초 HTML 모션그래픽을 만들어줘.
단일 HTML 파일에 CSS와 JavaScript를 포함하고 외부 의존성 없이 실행되게 해줘.
재생·일시정지·다시 시작 버튼과 모션 줄이기 설정을 넣어줘.
파란색과 흰색, 읽기 쉬운 고딕체, 부드러운 이동을 사용해줘.

만들어진 HTML은 브라우저에서 재생하는 결과물입니다. MP4 영상 파일이 필요하면 아래 Remotion 제작·렌더링 경로를 사용합니다. HTML 미리보기를 만들었다는 것과 MP4 내보내기가 완료되었다는 것을 구분하세요.

1. 준비와 시작: 두 경로 중 하나 선택

Node.js와 Claude Code를 준비합니다. 사용할 이미지·글꼴·음원은 이용 권한을 확인하고, Remotion의 라이선스 조건도 사용 목적과 팀 규모에 맞게 확인합니다.

경로 A: Claude Code 플러그인

터미널에서 공식 Remotion 플러그인을 설치하는 방법입니다.

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

Claude Code를 다시 시작하고 새 영상 작업 폴더에서 다음처럼 요청합니다.

/remotion:remotion-create AI 강의노트 소개 영상을 만들어줘.
15초, 1920×1080, 30fps. 파란색과 흰색, Pretendard를 사용해줘.
제목→3개 학습 카드→마무리 순서로 구성하고
각 장면의 핵심 문장만 읽을 수 있게 보여줘.

경로 B: 프로젝트와 Agent Skills

직접 빈 프로젝트를 만드는 경로입니다. 플러그인 경로를 이미 사용했다면 같은 설정을 중복 설치할 필요는 없습니다.

npx create-video@latest --yes --blank my-motion
cd my-motion
npx remotion skills add
npm run dev

별도 터미널에서 같은 폴더로 이동해 claude를 실행하고 원하는 영상을 요청합니다. 개발 서버 터미널을 유지해야 Remotion Studio 미리보기를 계속 볼 수 있습니다. 경로 B에서 제공되는 스킬 이름은 설치된 / 목록에서 확인합니다.

2. 프롬프트 전에 장면표 만들기

15초·30fps 영상은 총 450프레임입니다. 제목을 읽는 시간과 마지막 행동 안내 시간을 확보하고 장면별 시작·종료를 정합니다.

시간	장면	메시지	움직임
0–3초	제목	배운 AI를 나의 도구로	투명도와 짧은 위치 이동
3–10초	학습 카드 3개	자동화·콘텐츠·실전 앱	카드가 순서대로 나타남
10–15초	마무리	첫 강의부터 시작하세요	카드 정리 후 문구 강조

먼저 장면표와 필요한 에셋 목록을 보여줘.
승인된 구성으로 15초 Composition을 만들고 이름을 LectureIntro로 해줘.
색상은 #2D4ED8과 흰색, 강조색은 화면당 한 곳만 사용해줘.
움직임은 바운스 없이 부드럽게, 작은 자막은 피하고
외부 유료 API 없이 로컬 에셋과 도형을 중심으로 구성해줘.

3. 움직임을 프레임에 연결하기

Remotion에서는 프레임을 기준으로 위치·투명도 등을 계산합니다. 같은 시점에는 같은 화면이 나와야 편집과 렌더 결과를 비교하기 쉽습니다. 아래는 제목을 약 0.6초에 걸쳐 나타내는 단순 예시입니다.

import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const LectureIntro = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 18], [0, 1], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
  });
  const y = interpolate(frame, [0, 18], [20, 0], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
  });
  return (
    <AbsoluteFill style={{backgroundColor: '#2D4ED8', color: 'white',
      justifyContent: 'center', alignItems: 'center'}}>
      <h1 style={{fontSize: 96, opacity, transform: `translateY(${y}px)`}}>
        배운 AI를 나의 도구로
      </h1>
    </AbsoluteFill>
  );
};

이 컴포넌트를 실제 프로젝트의 루트에서 Composition으로 등록해야 렌더할 수 있습니다. 요청한 ID LectureIntro, durationInFrames={450}, fps={30}, 너비 1920·높이 1080을 확인하세요. 글꼴은 로컬 에셋으로 준비하고 로딩이 완료된 뒤 렌더되도록 설정합니다.

4. 미리보기에서 수정하기

‘더 멋지게’보다 어느 장면의 무엇을 어떻게 바꿀지 말하면 수정 결과를 비교하기 쉽습니다.

3–10초 장면의 카드가 겹쳐. 카드 사이를 48px로 벌리고
제목은 64px 이상으로 유지해줘. 카드 등장 간격을 0.25초로 맞춰줘.
마지막 문구는 2초 이상 정지해 읽을 시간을 확보해줘.

정지 프레임에서는 글자·로고·겹침을, 실시간 재생에서는 속도·장면 전환·음성 싱크를 확인합니다. 수정 후 마지막 프레임까지 다시 확인합니다.

5. MP4로 렌더링하기

먼저 프로젝트의 실제 진입 파일과 Composition ID를 확인합니다. 아래 src/index.ts와 LectureIntro는 이 실습의 예시 값입니다.

npx remotion compositions src/index.ts
npx remotion render src/index.ts LectureIntro out/lecture-intro.mp4 --codec=h264 --crf=18

출력한 MP4를 직접 열어 15초·해상도·자막 잘림·오디오 유무를 확인합니다. Studio에서 잘 보여도 누락된 에셋이나 폰트 때문에 최종 파일이 달라질 수 있습니다.

실전 사례: 38.3초 미니앱 홍보 영상

제공된 ‘놓친지원금찾기’ 문서는 1080×1920·30fps·38.3초 영상 제작을 기록합니다. 표지→문제·해결→질문 5개→결과→신뢰→클로징으로 구성하고, 인디고·Pretendard·바운스 없는 모션을 사용했습니다. 약 106.4BPM 음원에 전환을 맞추고 질문 전환·카드 강조 등에 효과음을 배치한 사례입니다. 음원의 상업적 이용 조건은 남은 확인 사항입니다.

지원금 데이터와 UI가 바뀌면 캡처·광고 안내·홍보 문구도 다시 만들며, 시드 데이터의 금액을 실제 수급 보장처럼 보여주지 않습니다.

자주 막히는 지점

Composition이 없음: 등록한 ID와 진입 파일을 먼저 확인합니다.
이미지·글꼴이 누락됨: 에셋 경로와 로딩 완료 처리를 점검합니다.
텍스트가 잘림: 세로형·가로형 각각에서 안전 여백과 줄바꿈을 확인합니다.
음성과 장면이 어긋남: 음원 길이와 장면 시작 프레임을 대조합니다.
도형이 덜컥 움직임: 프레임 기반 계산을 일관되게 사용하고 전환 구간을 늘려 비교합니다.

출처와 확인일

손으로 그린 듯한 선·채움 표현을 더 실험하려면 손그림 스타일 영상 만들기에서 Canvas·WebGL·p5.brush와 브라우저 프레임 출력 방식을 이어서 살펴보세요.

설치 경로·명령은 2026-10-19 공식 문서를 확인했습니다. 앱 UI와 명령은 업데이트에 따라 달라질 수 있습니다.

Remotion Claude Code 플러그인
코딩 에이전트로 영상 만들기
Remotion 라이선스
실전 영상 수치: 제공된 「놓친지원금찾기 프로젝트 현황」, 2026-10-19.