가이드 · 2026년 10월 10일 업데이트

Claude 아티팩트를 영상으로 만들기

Claude에게 애니메이션을 요청했고 멋진 아티팩트가 나왔는데, 이제 동영상 파일이 필요합니다. 아티팩트에는 MP4 내보내기 버튼이 없으니, 실제로 쓸 수 있는 방법을 소개합니다.

방법 1: 화면 녹화

가장 빠르고, 한 번만 쓸 때는 충분합니다. 단점은 프레임 드롭이 생기고, 조심하지 않으면 커서가 보이며, 해상도가 사용 중인 화면 해상도에 따라 정해진다는 점입니다.

방법 2: 제대로 렌더링하기

렌더러는 애니메이션을 프레임 단위로 하나씩 진행하며 각 프레임을 인코딩하므로 결과가 정확하고 반복해도 똑같습니다. 이렇게 하려면 애니메이션이 탐색 가능(seekable)해야 합니다. 즉 타이머나 "브라우저가 다음에 하는 동작"이 아니라, 어느 시점으로든 이동할 수 있는 타임라인으로 구동되어야 합니다.

대부분의 아티팩트는 그렇게 작성되어 있지 않습니다. 현실적인 방법은 아티팩트의 코드를 코딩 에이전트에 넘겨 애니메이션을 HyperFrames 컴포지션으로 다시 만들게 한 뒤 렌더링하는 것입니다.

방법 3: 처음부터 알맞은 형식으로 시작하기

동영상이 필요하다는 것을 이미 안다면 아티팩트를 건너뛰고, 처음부터 코딩 에이전트에게 렌더링 가능한 컴포지션을 만들게 하세요. MotionKit은 에이전트에 완성된 스타일과, 컴포지션이 처음부터 올바르게 렌더링되도록 하는 규칙을 제공합니다.

1분 만에 보는 광합성

수업

Chalk Lesson으로 제작. 7개 장면, 전용 이미지 2개.

3분기 이사회 업데이트

보고서

Ledger로 제작. 7개 장면, 전용 이미지 2개.

앱 출시 티저

출시

Kinetic Poster로 제작했습니다. 7개 장면, 직접 그린 이미지 2장.

신입 사원을 위한 보안 기본 수칙

교육

Aubergine으로 제작했습니다. 6개 장면, 직접 그린 이미지 2장.

1분 시드 투자 피칭

피칭

Quiet Keynote로 제작했습니다. 6개 장면, 직접 그린 이미지 2장.

API 릴리스 노트

변경 내역

Terminal로 제작했습니다. 6개 장면, 직접 그린 이미지 2장.

수면이 중요한 이유

설명 영상

Paper Editorial로 제작했습니다. 7개 장면, 직접 그린 이미지 2장.

캐시 레이어의 작동 방식

시스템 설계

Blueprint로 제작했습니다. 6개 장면, 직접 그린 이미지 2장.

콘퍼런스 요약

요약

Sunrise로 제작. 6개 장면, 직접 그린 그림 2점.

가격 변경 설명

고객 안내

Harbor로 제작. 6개 장면, 직접 그린 그림 2점.

내년 채용 계획

계획

Midnight로 제작. 6개 장면, 직접 그린 그림 2점.

팀 회고

회고

Pastel Shapes로 제작. 6개 장면, 직접 그린 그림 2점.

주민 대상 연간 보고

공공 보고서

Newsprint 스타일로 제작. 장면 7개, 전용 그림 2개.

가정 내 재활용

하우투

Botanical 스타일로 제작. 장면 6개, 전용 그림 2개.

게임 업데이트 소개

패치 노트

Neon Night 스타일로 제작. 6개 장면, 직접 그린 그림 2장.

제품 투어: 공유 받은편지함

제품 투어

Clay 스타일로 제작. 6개 장면, 직접 그린 그림 2장.

디자인 리뷰: 새 패키지

디자인 리뷰

Riso Print 스타일로 제작. 6개 장면, 직접 그린 그림 2장.

시장 진출: 진행 또는 보류

전략

Boardroom 스타일로 제작. 7개 장면, 직접 그린 그림 2장.

브랜드 스토리: 찻집

브랜드 스토리

Ink Brush 스타일로 제작. 6개 장면, 직접 그린 그림 2장.