영상을 생성하지 말고 코드로 만들자 — Remotion으로 하는 영상 바이브코딩

10월 11, 2026

AI 영상 생성 서비스로 홍보 영상을 만들어 보면 두 가지에 부딪힙니다. 마음에 드는 한 편이 나올 때까지 돈(크레딧)이 계속 들고, 거의 다 좋은데 가운데 글자 하나만 고치고 싶어도 처음부터 다시 뽑아야 한다는 것.

이번에는 영상을 "생성"하는 대신 코드로 "만드는" 방법, 이른바 영상 바이브코딩을 알려드리겠습니다. 오픈소스 Remotion(리모션)과 클로드 코드 같은 AI 코딩 도구를 쓰면, 말로 지시해서 영상을 만들고 원하는 부분만 콕 집어 고칠 수 있습니다. 가게 홍보, 제품 소개, 수업 자료처럼 글자와 숫자가 정확해야 하는 영상에 특히 잘 맞습니다.

실습 정보

쓰는 도구	Remotion(코드로 영상을 만드는 오픈소스) + AI 코딩 도구(클로드 코드, 코덱스, 제미나이 등)
준비물	Node.js, AI 코딩 도구 1개, 넣을 이미지·로고
비용	Remotion은 개인·소규모는 무료(규모가 큰 회사는 유료 라이선스, 공식 페이지 확인). AI 사용량만 듭니다.
잘 맞는 영상	제품 소개, 가게·행사 홍보, 정보 전달, 자막·그래프·3D 오브젝트

🎞️Remotion (공식 사이트)React로 영상을 만드는 오픈소스. 설치 방법, 예제, 라이선스 안내가 있습니다.https://www.remotion.dev바로가기 ↗

먼저 원리 — 영상은 "멈춘 그림"의 연속

어릴 때 공책 귀퉁이에 졸라맨을 한 장씩 그려 휘리릭 넘기던 놀이를 떠올려 보세요. 영상도 똑같습니다. 1초에 30장(30fps)의 멈춘 그림을 빠르게 넘기면 움직이는 것처럼 보입니다.

그래서 코드로 만든 영상은 원하는 장면의 원하는 글자만 바꿀 수 있습니다.

1. 생성 AI vs 코드 영상, 언제 무엇을 쓸까

둘 중 하나만 고를 필요는 없습니다. 실사 장면은 생성 AI로, 글자·자막·마무리는 코드로 섞어 쓰면 됩니다.

2. 코드 영상은 이렇게 생겼다

코드로 만든 영상은 "몇 번째 그림부터 몇 번째 그림까지 무엇을 보여 줄지"를 적어 둔 시간표입니다. 그래서 "오늘"을 "내일까지"로 바꾸고 싶으면 그 칸의 글자만 바꾸면 끝입니다.

AI에게도 "어느 장면의 무엇을"이라고 콕 집어 말하면 해당 코드만 고칩니다.

Remotion은 웹 기술로 화면을 그리기 때문에 구글 폰트, 이모지, 3D(Three.js), 차트, 틱톡식 자막 상자처럼 웹에서 쓰던 것들을 영상에도 그대로 가져다 쓸 수 있습니다. "영상 바이브코딩 = 웹사이트를 만드는 것과 같은데, 결과가 영상일 뿐"이라고 생각하면 이해가 쉽습니다.

3. 모델보다 "참고 코드"가 결과를 좌우한다

같은 요청을 클로드, GPT, 제미나이에 각각 넣어 보면 "어느 모델이 최고냐"에 눈이 갑니다. 그런데 잘 만든 예제 코드를 함께 주고 정확하게 지시하면 모델끼리 결과 차이가 크게 줄어듭니다. 막연히 "멋지게 만들어 줘"라고 하면 모델 성능에 운을 맡기게 되고, "이 코드 구조를 따라, 이 장면을, 이 순서로"라고 하면 내가 결과를 조종하게 됩니다.

📁소재 폴더 만들기

제품 사진·로고·아이콘을 한 폴더에 모아 두고 그 경로를 AI에게 알려 줍니다. 다음 영상에서도 계속 꺼내 씁니다.

준비

📋참고 코드 붙이기

마음에 드는 예제의 코드를 그대로 붙여 "이 스타일로"라고 지시합니다.

기준

🎯바꿀 것만 말하기

색·문구·길이·순서처럼 바꿀 항목만 짧게 나열합니다.

지시

🔁부분 수정 반복

렌더링 결과를 보고 "몇 초 장면의 무엇을" 고쳐 달라고 합니다.

다듬기

🧩영상 바이브코딩 예제 갤러리 44개 (결과 영상 + 코드)제품 광고, 3D, 자막, 캐릭터 등 Remotion 예제를 결과 영상과 코드로 모아 둔 무료 갤러리. 참고 코드로 쓰기 좋습니다.https://www.aicitybuilders.com/remotion바로가기 ↗

4. 바로 쓰는 프롬프트

간단하게 — 첫 영상 만들기

프롬프트

Remotion으로 10초짜리 가로 영상(1920×1080, 30fps)을 만들어 줘.
[0~3초] 가운데 "[콩콩이 마켓]" 로고 글자가 아래에서 위로 올라오며 등장
[3~7초] "[오늘만 특가 30%]" 문구가 좌우에서 미끄러져 들어옴
[7~10초] 아래에 "[010-0000-0000]" 연락처
색은 [초록·흰색], 글꼴은 굵은 고딕. 다 만들면 렌더링해서 mp4로 저장해 줘.

조금 더 구체적으로 — 내 제품 사진으로 20초 홍보 영상

프롬프트

[소재] 폴더의 제품 사진 2장으로 20초짜리 세로(1080×1920) 홍보 영상을 Remotion으로 만들어 줘.

- 사진에서 제품만 배경을 지워 쓰고, 화면 가운데에서 천천히 커지며 등장
- 제품 옆에 특징 3가지를 말풍선처럼 하나씩 띄우기: [바삭함] [국산 재료] [1+1 행사]
- 화면 아래 자막 상자에 같은 내용을 짧게
- 마지막 3초: 가게 이름 [콩콩이 마켓]과 주소
- 아래 참고 코드의 구조와 움직임 스타일을 따라 줘

[참고 코드]
(여기에 예제 코드 붙여 넣기)

제대로 맡기기 — 부분 수정 규칙까지 정해 두기

프롬프트

이 Remotion 프로젝트를 앞으로 계속 고쳐 쓸 거야. 다음 규칙을 지켜 줘.

1. 장면마다 파일을 나누고, 장면 이름·시작 프레임·길이를 맨 위 표(SCENES.md)로 정리
2. 바꿀 만한 값(문구, 색, 가격, 연락처, 길이)은 한 파일(config)에 모아서, 내가 그 파일만 고쳐도 되게
3. 내가 "몇 초 장면의 무엇을 바꿔 줘"라고 하면 그 장면 코드만 수정하고, 다른 장면은 건드리지 마
4. 수정할 때마다 바뀐 장면의 첫 프레임 이미지를 저장해서 보여 줘
5. 렌더링 전에 글자 잘림, 화면 밖으로 나간 요소가 없는지 직접 확인해

이런 점은 알아 두세요
코드 영상은 실제 사람이 연기하는 장면이나 사진 같은 풍경은 약합니다. 그런 장면은 생성 AI로 만들고, 그 위에 자막·로고·가격표를 코드로 얹는 식으로 섞어 쓰세요. 사진은 직접 찍었거나 사용 허락을 받은 것만, 다른 회사 로고는 넣지 마세요.

AI 오토마타