클로드에게 글 한 문단만 주면 숫자가 올라가고 장면이 미끄러지는 영상(모션그래픽)을 만들어 줘요. 이번에는 클로드 코드와 Remotion으로 12초짜리 세로 쇼츠를 만들었어요. 아래에 준비 과정, 요청문, 완성 파일을 확인하는 순서를 적었어요.
저는 우리 블로그의 어제 숫자 3개로 해봤어요. 요청부터 mp4 파일이 나오기까지 3분 1초, 말로 한 번 고치는 데 55초 걸렸어요.
위가 실제로 나온 영상이에요. 움짤로 줄였어요.
요즘 클로드 모션그래픽이 뜨는 이유
예전에는 모션그래픽을 만들려면 애프터이펙트 같은 프로그램을 따로 배워야 했어요. 요즘은 영상을 ‘코드’로 만드는 도구가 생겼어요. 코드는 결국 글이라서, 클로드가 읽고 쓰고 고칠 수 있어요.
그래서 “숫자가 0부터 올라가게 해줘”, “조금 더 튕기게 해줘” 같은 말로 영상을 만들고 고쳐요. 요즘 많이 쓰는 길은 세 가지예요.
① 일반 채팅: 클로드 앱에서 “HTML로 만들어줘”. 설치가 없지만 mp4 파일로 바로 받을 수는 없어요.
② 리모션(Remotion): 영상을 리액트 코드로 만들어요. 개인과 3명 이하 회사는 무료, 4명 이상 회사는 유료 라이선스가 필요해요.
③ 하이퍼프레임(HyperFrames): 헤이젠이 만든 오픈소스예요. 웹페이지(HTML)를 그대로 영상으로 뽑고, 누구나 무료예요.
대본·음악·자막까지 한 번에 돌리는 오픈몬테이지 같은 도구도 함께 소개되고 있어요. 이번에는 가장 많이 쓰는 리모션 하나만 직접 해봤어요.
준비물 3가지
① 클로드 코드: 내 컴퓨터 폴더 안에서 일하는 클로드예요. 무료 요금제에는 없고 Pro(한국 기준 월 $22, 부가세 포함)부터 쓸 수 있어요.
② Node.js: nodejs.org에서 내려받아 설치해요.
③ 빈 폴더 하나: 다른 작업 파일과 섞이지 않도록 새 폴더를 준비해요. 아래 설치 명령은 클로드 대화 입력칸이 아니라 컴퓨터의 터미널에서 실행해요.
클로드 코드를 처음 쓰면 공식 시작 안내에서 설치와 로그인을 먼저 마쳐요. 터미널에서 cd "작업 폴더의 실제 경로"로 준비한 폴더에 들어간 뒤 node --version과 npm --version을 각각 실행해 버전 번호가 나오는지 확인하세요. 여기서 경로는 자신의 폴더 경로로 바꿔야 해요. 명령을 찾을 수 없다고 나오면 Node.js 설치를 확인하고 터미널을 다시 열어 보세요.
빈 폴더에서 아래 한 줄을 실행하면 리모션이 깔려요. 제 컴퓨터에서는 21초 걸렸어요.
npm install remotion @remotion/cli react react-dom
따라 하기 ① 요청문 한 문단 붙여넣기
설치가 끝난 같은 폴더의 터미널에서 claude를 실행해요. 로그인·폴더 접근 안내를 확인하고 클로드 대화가 열리면 아래 요청문을 넣어요. 설치 명령과 영상 제작 요청문을 입력하는 자리가 다르다는 점을 기억하세요. 숫자와 문구는 내 것으로 바꾸면 돼요.
클로드는 21번에 걸쳐 일하면서 파일 3개를 만들고, 렌더링까지 스스로 해서 out 폴더에 video.mp4를 남겼어요. 3분 1초 걸렸어요.
나온 영상은 1080×1920 세로, 딱 12초, 2.2MB예요. 44명, 2분 43초, 16%가 0부터 올라가고, 장면이 옆으로 밀리며 바뀌어요. 한글도 깨지지 않았어요.
눈에 띈 점이 하나 있어요. 클로드가 글꼴 파일을 폴더에 넣으려다 막히자, 컴퓨터에 깔린 맑은 고딕을 대신 썼어요. 그리고 “맥에서 렌더하면 글꼴이 바뀔 수 있다”고 먼저 알려줬어요.
따라 하기 ② 말로 고치기
고칠 때도 말로만 했어요.
“마지막 장면 아래에 coripath 넣고, 숫자가 다 올라간 순간 살짝 커졌다 돌아오는 튕김 효과 넣어줘. out/video2.mp4로 다시 렌더링해줘.”
55초 만에 새 영상이 나왔어요. 숫자가 다 올라간 순간 14% 커졌다가 돌아오고, 마지막 장면에 coripath가 들어갔어요. 파일 하나만 고쳤다고 해요.
클로드는 “완성된 영상을 처음부터 재생해 보지는 않았다”고 솔직하게 말했어요. 그래서 저는 0.5초마다 장면을 뽑아 직접 봤어요. 숫자가 거꾸로 가거나 글자가 겹친 장면은 없었어요.
코딩 없이 하고 싶다면
클로드 코드가 없으면 일반 클로드 채팅에서 “이 숫자로 모션그래픽을 HTML로 만들어줘”라고 해도 움직이는 화면은 나와요. 지난번에 해봤을 때 94초 걸렸어요.
다만 mp4 파일로 바로 받을 수는 없어서, 화면 녹화를 따로 해야 해요.
같이 보면 좋은 글: 클로드 모션이 안 보인다면, 일반 채팅으로 쇼츠 만들기
https://coripath.com/claude-motion-alternative-shorts/
복사해서 쓰는 요청문
① 처음 만들 때: “이 폴더에 Remotion이 설치되어 있어. 세로 쇼츠(1080×1920, 30fps)용 12초짜리 모션그래픽을 만들어줘. 숫자는 0부터 올라가게, 전환은 부드럽게. 다 만들면 out/video.mp4로 렌더링까지 해줘.”
② 고칠 때: “숫자가 다 올라간 순간 살짝 커졌다 돌아오게 해줘. 다시 렌더링해줘.”
③ 다시 뽑을 때: 아래는 이 실험 프로젝트의 명령이에요. src/index.ts는 진입 파일, StatsShort는 영상 구성 ID, out/video.mp4는 저장할 경로예요. AI가 다른 이름으로 만들었다면 그대로 복사하지 말고, “이 프로젝트의 진입 파일과 구성 ID를 확인해서 재렌더링 명령을 알려줘”라고 요청하세요.
npx remotion render src/index.ts StatsShort out/video.mp4완료 확인과 막혔을 때
완료 메시지만 보지 말고 out/video.mp4를 직접 열어 처음부터 끝까지 재생해 보세요. 세로 화면인지, 12초가 맞는지, 마지막 숫자가 요청한 값인지, 한글이 잘리거나 빈 장면이 생기지 않았는지 확인하면 돼요. 3분 1초는 이 실험에서 요청 후 파일이 나오기까지의 기록이며, 처음 설치·로그인하는 시간까지 보장하는 수치는 아니에요.
파일이 없거나 렌더링 오류가 나면 오류 문구와 저장 경로를 클로드에 보여주고 “현재 폴더에서 필요한 파일과 구성 ID를 확인하고, 오류를 고친 뒤 out/video.mp4 생성까지 확인해줘”라고 요청하세요. 경로를 찾지 못하는 오류에는 작업 폴더·진입 파일을, 구성 ID 오류에는 실제 등록된 이름을 먼저 대조하세요. 글꼴 문제는 그 컴퓨터에 설치된 한글 글꼴로 바꾼 뒤 다시 재생해 확인해요. 명령의 각 인자는 Remotion 공식 렌더링 안내에서도 확인할 수 있어요.
다음 글 예고
다음에는 같은 영상을 하이퍼프레임으로 만들어서 리모션과 걸린 시간과 결과를 비교해 볼게요.
만들어 보고 싶은 영상이 있으면 댓글로 남겨 주세요. 다음 실험 주제로 써볼게요.
같이 보면 좋은 글: 클로드 사용법, 처음 켜면 할 4가지
https://blog.naver.com/coripath/224448525619
참고 링크
리모션 라이선스 안내: https://www.remotion.dev/docs/license/faq
하이퍼프레임 깃허브: https://github.com/heygen-com/hyperframes
클로드 요금제(한국어): https://claude.com/ko/pricing