본문으로 건너뛰기

Claude 아티팩트 애니메이션

Claude 아티팩트를 내보낼 수 있는 모션으로

아티팩트는 훌륭한 인터랙티브 페이지지만 타임라인도 MP4도 없습니다. Claude Motion은 Claude Code를 쓸 수 있는 모든 요금제에서 둘 다 더해 줍니다.

아티팩트에 움직임 더하기예시 보기

월 $19.9부터 · Claude Code & Codex 지원 · Anthropic과 무관한 독립 서비스

Claude Motion을 사용하려면 유료 Creator 또는 Studio 구독이 필요합니다. 무료 요금제는 없습니다.

HYPERFRAMES 타임라인 · 0:24 / 2:10

텍스트

제목콜아웃

차트

오가닉 막대채널 필터

인터랙션

퀴즈드래그 매칭

오디오

배경 음악 · 내레이션

내 CLAUDE CODE 또는 CODEX에서 실행 · HYPERFRAMES 기반 · MP4 + 인터랙티브 웹

아티팩트 vs Motion vs Claude Motion

  • 인터랙티브는 그대로

    차트, 퀴즈, 필터.

  • 타임라인 추가

    HyperFrames에서 타이밍 조정과 자르기.

  • MP4 내보내기

    로컬에서 렌더링.

아티팩트에 움직임 더하기
HTML 아티팩트MOTION (TEAM/ENT.)CLAUDE MOTION
인터랙티브예아니요예
타임라인아니요편집기HyperFrames 타임라인
MP4 내보내기아니요예예
요금제모든 요금제Team / EnterpriseClaude Code를 쓸 수 있는 모든 요금제

이미 Claude에게 요청한 내용에서 시작

  • 무엇이든 넣으세요

    문서, 스크립트, 강의 노트, PPT 또는 대략적인 아이디어.

  • 모션 스타일 선택

    모든 스타일을 먼저 내 콘텐츠로 미리 볼 수 있습니다.

  • 내 에이전트가 직접 제작

    Claude Code 또는 Codex가 작성하므로 비주얼에는 크레딧이 들지 않습니다.

아티팩트에 움직임 더하기

아티팩트로는 못 하는 내보내기

  • MP4 렌더링

    내 컴퓨터에서 결정론적으로 HyperFrames 렌더링.

  • 링크 공유

    조회수와 퀴즈 통계가 포함된 공개 또는 비밀번호 링크.

  • 음악과 내레이션

    지금 또는 나중에 추가 — 자연스러운 영어·중국어 음성.

아티팩트에 움직임 더하기

모션 스타일에서 시작하세요

모든 스타일에 차트, 필터, 퀴즈, 드래그 앤 드롭이 포함됩니다. 에이전트에게 자유롭게 디자인을 맡길 수도 있습니다.

좋아하는 스타일을 여러 개 선택하면 AI가 내용에 맞는 스타일을 선택합니다.

탐색 중 패키지는 다운로드되지 않습니다.

스타일 매칭 후 만들기
모든 모션 스타일 보기

필요한 모든 기능

  • 모션 스타일

    스타일을 고르거나 에이전트에게 자유롭게 디자인을 맡기세요.

  • 애니메이션 차트

    ECharts 내장, 스타일에 맞춰 디자인.

  • 퀴즈와 드래그 앤 드롭

    기본으로 인터랙티브.

  • HyperFrames 타임라인

    클립, 타이밍, 블록 편집.

  • 내레이션

    영어와 중국어, 브랜드명도 정확하게 발음.

  • 음악

    지금 생성하거나 나중에 추가.

  • 공유 링크

    공개 또는 비밀번호, 통계 포함.

  • MP4 렌더링

    로컬에서 결정론적으로.

Claude 아티팩트에 애니메이션 넣는 방법

  1. 1아티팩트의 콘텐츠(또는 그 바탕이 된 문서)를 폴더에 저장합니다.
  2. 2Claude Motion이 설치된 Claude Code에 모션으로 바꿔 달라고 요청합니다.
  3. 3타임라인에서 다듬고 MP4로 렌더링합니다.
Claude Motion 설치: npx -y claudemotion@latest setup를 실행하고 출력 안내를 따르세요.

처음 실행하면 브라우저가 열려 로그인합니다. 클릭 한 번이면 되고, 터미널은 필요 없습니다.

자주 묻는 질문

아티팩트를 영상으로 내보낼 수 있나요?

직접은 안 됩니다. 화면을 녹화하거나, Team/Enterprise에서 Motion을 쓰거나, MP4가 필요하면 Claude Motion을 사용하세요.

더 알아보기

아티팩트에 타임라인을 더하세요

아티팩트에 움직임 더하기