AI로 제품 소개 영상이나 움직이는 웹 화면을 만들고 싶은데, 도구 이름부터 너무 많아 막막하셨나요? 결론부터 말하면 AI 영상 제작 도구 20선을 모두 설치할 필요는 없어요. 영상 자체를 렌더링할지, 홈페이지에서 움직이는 화면을 구현할지에 따라 시작점이 완전히 달라지거든요. 이 글에서는 용도별 특징과 함께 실제로 쓸 만한 조합, AI 에이전트에 제작 규칙을 알려 주는 방법까지 골라 드릴게요.
먼저 구분할 점이 있어요. 여기 소개하는 프로젝트는 대부분 글 한 줄로 영상을 자동 생성하는 서비스가 아니라, 개발자가 React·JavaScript·TypeScript 코드로 장면을 만들도록 도와주는 제작 도구예요. Claude Code나 Codex를 붙이면 코딩 작업의 부담을 줄일 수 있지만, 결과물 점검과 렌더링은 여전히 필요합니다.
코드로 영상 만드는 도구, Remotion부터 살펴보세요
반복되는 자막 영상이나 같은 디자인의 제품 소개 영상을 여러 편 만든다면 Remotion부터 눈여겨보세요. React 컴포넌트로 컷을 나누고 시간에 따라 화면을 바꾸며 최종 영상 파일을 만들 수 있어요. 한 번 만든 틀에서 상품명과 색상만 바꿔 여러 버전을 제작하는 식이죠.
이 분야에는 영상 제작 엔진뿐 아니라 에이전트가 참고할 규칙 모음도 포함됩니다. 이름이 비슷해도 설치 목적은 달라요.
- Remotion — React로 자막, 장면 구성, 애니메이션, 렌더링을 구현하는 영상 제작 기반이에요.
- Remotion Skills — Claude Code와 Codex 같은 에이전트에 Remotion 구성, 자막, 렌더링 관례를 알려 주는 공식 스킬 모음이에요.
- Motion Canvas — TypeScript로 움직이는 도식과 설명 장면을 만들어요. 알고리즘이나 기술 강의처럼 구조를 단계별로 보여 줄 때 잘 맞죠.
- Motion AI Kit — 영상 렌더러가 아니라 Motion 애니메이션을 에이전트가 정확하게 작성하도록 돕는 자료와 연결 도구예요. Cursor 외에 Claude Code에서도 설정할 수 있습니다.
예를 들어 매주 숫자와 제목만 바뀌는 뉴스 브리핑 영상이라면 Remotion으로 템플릿을 만들고 자막과 렌더링 관련 스킬을 함께 사용하는 편이 효율적일 수 있어요. 반면 다이어그램 속 화살표가 차례대로 이동하는 교육 영상이라면 Motion Canvas의 장면 구성 방식이 편할 수 있습니다.
웹 애니메이션은 Motion, GSAP, Rive 중 무엇을 쓸까요?
웹페이지에서 스크롤할 때 카드가 나타나거나 버튼이 반응하는 효과를 만들고 싶다면 영상 렌더러보다 웹 애니메이션 라이브러리가 맞아요. Motion은 React에서 컴포넌트 전환과 제스처에 쓰기 좋고, GSAP은 여러 움직임을 정확한 순서로 묶는 타임라인에 강점이 있어요.
이 범주에는 화면을 움직이게 만드는 엔진, 애니메이션을 재생하는 도구, 에이전트 제작 지침이 함께 있어요. 기능의 범위가 다른 만큼 ‘웹 애니메이션’이라고 전부 바꿔 끼울 수 있는 것은 아닙니다.
- Motion — React·JavaScript의 화면 전환, 드래그와 레이아웃 애니메이션에 알맞아요.
- GSAP — 스크롤 연동, 텍스트 등장, SVG와 복잡한 타임라인을 정교하게 제어해요.
- Anime.js — 요소와 SVG에 가볍게 움직임을 넣고 싶은 작업에 유용해요.
- GSAP Skills — 에이전트가 GSAP의 Timeline·ScrollTrigger·프레임워크별 사용법을 익히도록 돕는 공식 지침이에요.
- Rive Web — 앱 상태나 사용자 입력에 반응하는 Rive 벡터 애니메이션을 웹에서 실행해요.
- dotLottie Web — Lottie·dotLottie 파일의 재생, 일시정지, 속도와 상태를 제어하는 플레이어예요.
버튼 하나에 작은 피드백이 필요하면 Motion이나 Anime.js로 시작해 보세요. 긴 랜딩페이지의 장면 전환이라면 GSAP, 디자인 도구에서 만든 반응형 캐릭터라면 Rive가 더 어울려요. 준비된 Lottie 파일을 웹에 삽입하는 일은 dotLottie Web이 담당할 수 있죠.
3D 제품 소개와 물리 효과에는 Three.js 조합이 편해요
휴대전화가 화면 속에서 회전하고, 조명을 따라 반사가 달라지는 제품 소개 장면을 상상해 보세요. 이때 중심 도구는 Three.js예요. 카메라, 조명, 재질과 입체 오브젝트를 브라우저에서 제어할 수 있습니다.
React 프로젝트라면 Three.js를 직접 다루는 방법과 React 방식으로 감싸서 사용하는 방법 중 하나를 고르면 돼요. 확장 도구는 장면에 실제로 필요한 기능만 추가하는 편이 초기 설정을 간단하게 만듭니다.
- Three.js — 웹에서 3D 공간과 카메라, 조명, 재질을 구현하는 기본 라이브러리예요.
- React Three Fiber — Three.js 장면을 React 컴포넌트처럼 구성할 수 있게 도와줘요.
- Drei — 카메라, 환경, 컨트롤 등 반복해서 쓰는 3D 기능을 편하게 붙여요.
- React Three Rapier — 물체가 떨어지거나 서로 부딪히는 물리 동작을 추가해요.
- React Postprocessing — 빛 번짐과 화면 후처리로 3D 장면의 분위기를 조절해요.
실시간으로 제품을 돌려 볼 수 있는 3D 웹뷰어를 만든다면 React Three Fiber와 Drei부터 출발해 보세요. 물체의 충돌이 꼭 필요할 때만 Rapier를 붙이고, 후처리 효과는 마지막에 더하는 식입니다. 3D 장면을 완성된 동영상으로 저장하려면 별도의 캡처 또는 렌더링 연결 작업이 필요하다는 점도 기억하세요.
SVG 그래픽부터 오디오와 영상 출력까지 맡는 도구
이제 남은 건 글자 카드, 아이콘, 소리, 최종 파일이에요. Satori로 HTML·CSS 스타일의 이미지를 SVG로 만들고, SVGO로 불필요한 SVG 데이터를 줄이면 반복해서 쓰는 그래픽 자산을 관리하기 쉬워요. 다만 Satori는 웹페이지를 통째로 캡처하는 일반 브라우저와 같은 도구는 아니에요.
사운드와 출력 단계의 도구도 용도를 구별해야 해요. 웹 미리보기에서 효과음을 제어하는 것과 완성된 영상 파일에 소리를 넣는 일은 다를 수 있거든요.
- SVGO — SVG 코드의 불필요한 부분을 줄여 그래픽 파일을 최적화해요.
- Satori — HTML·CSS와 비슷한 표현으로 제목 카드와 SVG 그래픽을 생성해요.
- Howler.js — 웹에서 효과음·배경음 재생, 볼륨과 페이드를 제어해요.
- Mediabunny — 브라우저에서 영상·오디오 파일을 읽고 쓰고 변환하는 TypeScript 미디어 도구예요.
- FFmpeg — 인코딩, 해상도 조정, 오디오 합치기와 형식 변환 등 최종 파일 처리에 써요.
음악이 있는 영상을 만들어야 한다면 Howler.js를 무조건 설치할 필요는 없어요. 웹 오디오 재생 기능이 필요할 때 적합한 도구이기 때문이죠. 최종 영상의 소리는 실제 렌더러의 오디오 기능이나 FFmpeg 작업 흐름에 맞춰 처리하는 쪽이 정확합니다.
무엇을 만들지 먼저 정하면 도구 선택이 쉬워져요
20개를 한꺼번에 설치하면 라이브러리 충돌과 환경 설정 때문에 오히려 시작이 늦어질 수 있어요. 목표 결과물이 MP4 영상인지, 웹에서 동작하는 인터랙션인지 먼저 확인해 보세요. 아래 비교표는 처음 시도할 만한 최소 구성을 골라 놓은 것입니다.
| 제작 목표 | 우선 추천 도구 | 필요할 때만 추가 | 결과물 |
|---|---|---|---|
| 자막이 많은 짧은 소개 영상 | Remotion + Remotion Skills | FFmpeg | 영상 파일 |
| 스크롤형 제품 랜딩페이지 | GSAP + GSAP Skills | Rive Web | 인터랙티브 웹 |
| 회전하는 3D 제품 뷰어 | Three.js + React Three Fiber | Drei, React Postprocessing | 3D 웹 화면 |
| 움직이는 교육용 도식 | Motion Canvas | SVGO, FFmpeg | 설명 영상 |
| 기존 Lottie 자산 재생 | dotLottie Web | Motion | 웹 애니메이션 |
제품 소개 영상이라고 해서 GSAP과 Three.js를 Remotion 안에 넣기만 하면 자동으로 하나의 영상이 되지는 않아요. 웹 화면에서 시간에 따라 움직이는 효과와 프레임 단위로 영상을 렌더링하는 방식은 구현 조건이 다르기 때문이에요. Remotion을 선택했다면 장면의 시간과 렌더링 재현성을 먼저 설계하고, 외부 효과는 호환성과 캡처 방법을 검토하세요.
Claude Code와 Codex로 만드는 실제 영상 제작 순서
코드 작성 에이전트를 쓰면 ‘멋지게 해 줘’라고 말하는 것보다 영상 비율, 길이, 장면 수와 장면별 목적을 명시하는 편이 유용해요. 예를 들어 30초짜리 제품 소개 영상이라면 첫 장면은 문제 제시, 가운데는 기능, 마지막은 행동 유도로 나눠 보세요. 영상 제작 도구 20선의 역할이 어느 부분에서 필요한지도 선명해집니다.
- 화면 비율, 재생 길이, 해상도, 메시지를 먼저 적어요.
- Remotion으로 장면과 자막의 시간표를 구성해요.
- Remotion Skills를 추가해 에이전트에 장면·렌더링 지침을 제공해요.
- 3D 장면이 꼭 필요할 때에만 Three.js 계열을 검토하고 결과를 영상에 연결해요.
- 음악·효과음의 사용 권한과 싱크를 점검한 뒤 렌더링해요.
- FFmpeg 등으로 출력 형식을 맞추고 실제 기기에서 영상과 소리를 확인해요.
공식 Remotion 에이전트 스킬 안내에는 npx skills add remotion-dev/skills 명령이 실려 있어요. GSAP을 쓰는 프로젝트라면 GSAP Skills 저장소에서 npx skills add https://github.com/greensock/gsap-skills를 안내합니다. Motion AI Kit은 저장소에서 npx motion-ai로 다른 코딩 에이전트 환경을 설정하는 방법을 설명해요.
2026년 10월 기준으로 상업적 사용 조건도 확인해 두세요. Remotion은 개인이나 최대 3명 규모 조직 등에 무료 라이선스를 허용하지만, 조건에 맞지 않는 조직에는 회사 라이선스가 필요해요. 공식 라이선스 안내에서 조직 규모와 사용 방식을 확인하세요. GSAP 역시 무료 이용 범위가 넓어졌지만 표준 라이선스 조건을 읽어 두는 게 안전합니다.
자주 묻는 질문
Q. 코딩을 몰라도 이 도구만 설치하면 영상이 나오나요?
아니에요. 대부분 개발 도구라 Node.js 환경 설정, 실행, 미리보기, 오류 수정이 필요합니다. AI 에이전트를 쓰면 코딩을 도울 수 있지만 버튼 하나로 완성되는 패키지는 아닙니다.
Q. Remotion과 GSAP 중 하나만 골라야 하나요?
완성된 동영상 파일이 목표라면 Remotion, 반응하는 웹 화면이 목표라면 GSAP부터 시작해 보세요. 함께 쓸 수 있는 경우도 있지만 렌더링 방식과 호환성 검토가 필요합니다.
Q. Three.js, React Three Fiber, Drei는 모두 설치해야 하나요?
아니에요. React 기반 3D 작업이라면 필요한 구성부터 시작하고, Drei는 편의 기능이 필요할 때 추가하세요. 작은 3D 장면은 Three.js만으로 구현할 수도 있어요.
Q. 에이전트 스킬을 넣으면 더 좋은 결과가 무조건 나오나요?
스킬은 올바른 API와 작업 습관을 알려 주는 지침이에요. 완성도를 보장하지는 않으며 실제 실행, 시각 검토와 렌더링 확인은 별도로 해야 합니다.
출처와 참고한 곳
- Remotion GitHub — React 기반 영상 제작 기능과 프로젝트 구조
- Remotion 공식 문서 — AI 에이전트 스킬 설치 방법
- Remotion 라이선스 안내 — 무료 사용 자격과 회사 라이선스
- Motion AI Kit GitHub — 에이전트 지원 범위와 설정 방법
- GSAP Skills GitHub — 에이전트별 설치 및 지원 범위
- Three.js GitHub — 3D 렌더링 기능과 사용 예시
- GSAP 라이선스 — 상업적 이용 조건
