AI가 그린 장면을
그대로 MP4로.

Claude, Gemini, ChatGPT로 만든 HTML 모션그래픽을 이 페이지에서 바로 영상 파일로 저장하세요. 변환은 내 브라우저 안에서 프레임 단위로 처리되고, API 키나 AI 토큰은 쓰지 않습니다.

예제로 바로 변환해 보기 AI 제작 규격 받기
  • H.264 MP4워터마크 없음
  • 최대 60초 · 1920px원본 캔버스 해상도
  • 서버 업로드 없음파일은 내 PC에만
  • 무료 · 설치 없음최신 Chrome, Edge
example.html · 1280×720 · 30fps00:00:00:00
고객의 고민0–4s
해결 방법4–10s
다음 행동10–15s
아래 스튜디오의 예제 HTML이 실제로 재생되는 화면입니다. 이 장면이 그대로 15초 MP4가 됩니다.

프롬프트 한 번,
파일 하나, 버튼 하나.

영상 편집 프로그램을 따로 배우지 않아도 됩니다. AI에게 모션그래픽 HTML을 만들게 하고, 그 파일을 여기서 영상으로 굳히면 끝입니다.

  1. 1단계

    AI로 모션그래픽 만들기

    Claude, Gemini, ChatGPT 중 편한 곳에서 HTML 모션그래픽을 만듭니다. 아래 제작 규격을 붙여넣으면 변환이 더 빠르고 정확해지지만, 꼭 쓰지 않아도 됩니다.

  2. 2단계

    완성 HTML을 파일로 저장

    AI가 준 HTML 전체를 .html 파일로 저장합니다. 공유 링크가 아니라 파일이나 전체 코드가 필요합니다.

  3. 3단계

    불러와서 MP4로 변환

    스튜디오에서 파일을 열고 장면을 확인한 뒤 변환을 누르면, 프레임을 한 장씩 그려 MP4로 저장합니다.

스튜디오

AI가 만든 HTML 파일을 불러오고 MP4로 변환을 누르면 끝입니다. 어떤 방식으로 만든 파일인지는 스튜디오가 알아서 판단합니다. 파일 없이 로그인이 필요한 공유 링크만 있을 때는 ‘화면 녹화’ 탭을 쓰세요.

새 프로젝트 · 로컬에서만 처리

소스 .html

Claude, Gemini, ChatGPT 등 어디서 만든 HTML이든 그대로 불러오세요. CSS 애니메이션, GSAP 같은 라이브러리, 웹폰트, 캔버스 애니메이션 모두 영상이 됩니다. 본인이 만들었거나 믿을 수 있는 파일만 여세요.

파일 대신 코드를 붙여넣기

내보내기 MP4

파일을 불러오면 해상도가 표시됩니다.

무음 H.264 MP4 · 워터마크 없음. 음악과 음성은 이 버전에 포함되지 않습니다.

미리보기 원본 해상도

0.00초
예제 또는 파일을 불러오세요.

화면 공유나 녹화 권한 없이 처리됩니다. 쏭모션 규격 파일은 바로 고속 변환하고, 그 밖의 HTML은 페이지 속 시간을 한 프레임씩 넘기며 장면을 찍는 범용 변환으로 자동 처리합니다. 재생 버튼을 눌러야 시작하는 파일은 버튼을 자동으로 눌러 봅니다.

AI API 호출 없음영상 서버 업로드 없음렌더링은 격리된 sandbox iframemp4-muxer 5.2.2 · MIT

세 AI 모두에
똑같이 붙여넣는 규격

규격 없이 만든 HTML도 변환됩니다. 이 규격은 더 빠르고 정확하게 변환하고 싶을 때 쓰는 선택 사항입니다. 바꿀 곳은 맨 첫 줄의 대괄호뿐입니다.

  • 캔버스 하나글자, 도형, 배경을 모두 canvas#stage 하나에 그립니다.
  • 시간으로 그리기renderFrame(t)가 몇 초째 장면이든 똑같이 그려냅니다.
  • 외부 자료 없음CDN, 웹폰트, 외부 이미지 없이 파일 하나로 완결합니다.
  • 15초 3막문제 제기, 해결 방법, 행동 안내 순서로 짭니다.
motion-spec.txt

두 가지 방식,
언제 무엇을 쓸까

HTML 파일이 있다면 무엇이든 ‘HTML 바로 변환’을 쓰세요. 화면 녹화는 파일 없이 로그인이 필요한 공유 링크만 있을 때 쓰는 보조 방법입니다.

HTML 바로 변환추천화면 녹화
대상AI가 만든 HTML 파일 전부 (규격 파일, CSS 애니메이션, GSAP 등 라이브러리, 웹폰트, 캔버스)파일로 받을 수 없는 공유 링크, 로그인이 필요한 화면
처리 방식페이지 속 시간을 한 프레임씩 넘기며 장면을 찍어 H.264로 인코딩선택한 탭을 실시간으로 녹화
품질1080p급 해상도, 프레임 누락 없음, 시작·끝 자동재생 환경에 따라 다름. 주변 UI가 찍힐 수 있음
소리무음탭 소리 선택 가능
권한화면 공유 권한 필요 없음탭 공유 허용 필요

자주 묻는 질문

수업 중에 가장 많이 나오는 질문을 모았습니다.

AI 유료 구독이나 API 키가 필요한가요?

이 도구 자체는 AI API를 부르지 않아서 토큰이나 키가 필요 없습니다. HTML을 만드는 단계에서는 각 AI 서비스의 무료·유료 이용 조건을 따릅니다.

제 영상이나 파일이 어딘가로 올라가나요?

아니요. 불러온 HTML과 만들어진 MP4는 모두 브라우저 안에서만 처리되고 서버로 전송되지 않습니다. 렌더링은 이 페이지와 분리된 sandbox iframe에서 실행되고, HTML이 원래 쓰던 폰트·라이브러리·이미지만 해당 주소에서 불러옵니다.

어떤 HTML이 변환되나요?

AI가 만든 HTML 파일이면 대부분 그대로 됩니다. 글자·도형 CSS 애니메이션, GSAP·anime.js 같은 라이브러리, 구글 폰트·Pretendard 같은 웹폰트, 캔버스와 SVG 애니메이션, 재생 버튼을 눌러야 시작하는 파일까지 처리합니다. 최대 60초, 1080p급까지 지원합니다.

영상에 담을 화면 영역과 길이는 자동으로 찾고, 틀리면 영상 크기와 길이를 직접 고를 수 있습니다. 원본 서버가 외부 사용을 막아 둔 이미지, 로그인이 필요한 공유 주소는 담기지 않을 수 있습니다.

어떤 브라우저에서 되나요?

최신 데스크톱 Chrome 또는 Edge를 권장합니다. 직접 변환은 WebCodecs H.264, 화면 녹화는 getDisplayMedia와 MP4 MediaRecorder가 필요합니다. 지원하지 않는 환경에서 WebM을 MP4라고 속여 저장하지 않고, 대신 안내 문구를 띄웁니다.

배경음악이나 내레이션도 넣을 수 있나요?

직접 변환은 현재 무음 영상만 만듭니다. 소리가 필요하면 받은 MP4를 Canva 같은 편집 도구에서 음악과 합치거나, 화면 녹화에서 ‘탭 소리 포함’을 켜세요.

주의할 점이 있나요?

외부 코드를 실행하는 일에는 늘 위험이 있으니 본인이 만들었거나 믿을 수 있는 HTML만 불러오세요. 영상에 담긴 글, 이미지, 인물의 저작권·초상권·개인정보는 사용자가 확인해야 합니다. 이 도구는 수업용 베타 버전입니다.

만든 사람 · 송민경(쏭리즈)

수업에서 바로 쓰려고
직접 만든 도구입니다.

위드AI솔루션 대표, 국제디지털콘텐츠협회 캔바지국장. 캔바 강사 자격증(CANVA 디지털콘텐츠 강사 2급·1급), AI 올인원 자격증, AI 영상콘텐츠 강사 자격증 과정을 운영합니다.

서울 서초구는 물론 학교, 기관, 교사 연수와 기업 연수까지 AI 콘텐츠 강의를 진행합니다.

강의·도입 문의하기 캔바AI연구소 블로그