HTML 영상 변환소

STEP 1코드 넣기

AI가 준 답변을 통째로 붙여넣어도 돼요. 설명 글은 빼고 코드만 골라내고, 형식에 맞게 자동으로 바꿔요. 지금은 예시가 들어 있어요.

HTMLHTML+CSS+JS 따로리액트 JSX·TSXSVG 애니메이션로티 .jsonZIP 묶음

파일을 여기로 끌어놓아도 돼요

파일 열기

STEP 2영상 설정

세로 쇼츠1080×1920 정사각1080×1080 가로 유튜브1920×1080 세로 가볍게720×1280

길이 (초) 프레임 수 화질

배경음악 (선택)

음악 파일 고르기 없음 · 영상 길이에 맞춰 자르고 끝 1초는 줄여요

STEP 3MP4로 변환

준비됨 · 6초 × 30fps = 180프레임

AI별로 코드 가져오는 법

클로드아티팩트의 코드를 복사하거나, 내려받은 .html 파일을 그대로 여세요.

제미나이캔버스에서 만든 코드를 전체 복사해 붙여넣으세요. 리액트 코드로 나와도 자동으로 바꿔요.

챗GPT답변 전체를 복사해도 돼요. HTML·CSS·JS가 따로 나뉘어 있으면 하나로 합쳐요. 파일로 받았다면 여러 개를 한꺼번에 고르거나 ZIP 그대로 여세요.

그록코드 블록을 복사하거나 답변 전체를 붙여넣으세요.

캔바캔바 코드(Canva Code)로 만든 결과물의 코드를 복사해 넣으세요. 일반 캔바 디자인은 캔바에서 MP4로 바로 내려받는 편이 더 좋아요.

로티·SVGLottieFiles 등에서 받은 .json, 움직이는 .svg 파일을 그대로 여세요. 로티는 길이와 비율을 자동으로 맞춰요.

메뉴 이름은 각 서비스 업데이트에 따라 달라질 수 있어요.

어느 AI에든 이렇게 요청하면 가장 잘 돼요.

[주제]를 보여주는 [6]초짜리 모션그래픽을 HTML 파일 하나로 만들어줘.
- 화면 크기는 세로 1080x1920으로 고정
- 한글 폰트는 Pretendard
- 외부 이미지·동영상은 쓰지 말고 도형과 글자로만
- 라이브러리가 필요하면 cdnjs 주소로 불러오기
- 페이지를 열면 바로 재생되고, [6]초 안에 끝나게

CSS 애니메이션, 자바스크립트, GSAP, anime.js, p5.js, three.js(3D), 로티, SVG 애니메이션, 리액트·프레이머 모션을 지원해요.
Pretendard는 이 변환소에 들어 있어 영상에서도 그대로 나와요. 다른 구글 폰트는 기본 글꼴로 바뀔 수 있어요.
동영상 파일, 유튜브 같은 다른 사이트 끼워넣기는 영상에 담기지 않아요.
변환은 내 컴퓨터에서 이뤄져요. 20초 세로 영상은 보통 1~3분 걸려요.