Remotion과 GSAP가 만드는 연금술과 창조경제(?)
엔지니어 관점에서 보자면 비디오는 시간($t$)에 따른 픽셀 데이터의 집합이다.
기존의 영상 제작 방식은 High Risk, Low Volume이다. 수정 사항 하나에 렌더링을 다시 걸어야 하고, 고객의 이름만 바꿔서 1,000명에게 보내려면 편집자 10명이 필요했다. VEO나 미드저니를 쓰면 된다고? 실제로 많은 비지니스 클라이언트를 상대하는 스튜디오 에이전시들이 왜 결국 AI를 쓰다가 포기하고 다시 사람을 쓰는 지 아는가?
다양한 비지니스의 까다로운 요구사항을 일일이 단계별로 수정하고 모듈화로 만들어 다시 재배포하는 작업을 하기가 어렵기 때문이다. 써보면 알잖아. 데이터 사이언스를 현재 대학원에서 공부하고 있는 내가(심지어 ML과 음향/그래픽 작업과의 결합에 집중된 과제를 주로 하는데) 굳이 생성형 LLM 프롬프트를 연성에는 쓰지 않고 (툴을 익힐 때 메뉴얼 숙지나 기술작업 브리프 문서 작성 및 플러그인 디버깅 등에는 유용하게 쓰긴 하지만)블렌더와 Affinity, 다빈치 리졸브를 배우고 있는 이유가 뭐라 생각하나? 무지한 등신이라서 그러겠냐고요.
나는 현재 Remotion과 GSAP를 결합하여 비디오를 프로그래머틱(Programmatic)하게 제어하는 작업을 시도 중이며 내 스스로 여러 Best Practice들을 쌓고 있다. 즉, $Video = f(Data)$ 라는 명제를 숙지하며. 사실 어떤 작업은 애프터이펙트나 다빈치 리졸브로 그냥 처음부터 끝까지 다 편집하는 게 훨씬 빠르고 나을 때도 있다. 그럼에도 왜 코드로 영상을 제작하는 작업을 시작하게 되었나. 그 이유에 대해 내 관점을 설명하고자 한다.
Tech Stack
내가 선택한 스택은 다음과 같다.
| 기술 스택 | 역할 | 선정 이유 |
|---|---|---|
| Remotion | 프레임워크 | React 컴포넌트를 MP4로 렌더링한다. 웹 개발자가 영상 전문가가 되게 도와준다. 이외에 다른 Canvas 기반의 라이브러리가 있는데 타임라인과 시퀀스 기반으로 작업하는 Remotion이 좀 더 다채로운 작업을 하기엔 아직까진 가장 낫다. |
| GSAP | 애니메이션 엔진 | CSS 키프레임의 투박함을 걷어내고, 초단위의 정밀한 모션 제어를 가능케 한다. |
| AWS Lambda | 렌더링 서버 | 여러 원격으로 영상 렌더링 작업을 진행할 시 서버리스로 병렬 렌더링을 돌려 1만 개의 영상을 동시 생성할 수도 있다. |
| Zod | 스키마 검증 | 데이터 컨텍스트 컨르롤을 위한 가이드를 명시하기 위해 쓰임 |
논리를 영상으로 치환하는 패턴
이 프로젝트가 어떻게 돌아가는지, 핵심 로직을 뜯어보자.
1. 템플릿의 변수화 (Parameterisation)
모든 요소는 외부에서 주입 가능하게 할 수 있도록 최대한 고려했다. 아래 코드는 정적인 컴포넌트를 ‘동적인 템플릿’으로 바꾸는 과정이다.
import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';
import { z } from 'zod';
export const myCompSchema = z.object({
userName: z.string(),
accentColor: z.string(),
discountRate: z.number().min(0).max(100),
});
export const PromoVideo = ({ userName, accentColor, discountRate }) => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp',
});
return (
<AbsoluteFill style=>
<h1 style=>
{userName}님! 장바구니에 담긴 상품,<br/>
지금 {discountRate}% 할인 중입니다.
</h1>
</AbsoluteFill>
);
};
이 코드가 의미하는 바가 보이는가? userName에 “철수”를 넣으면 철수 영상이, “영희”를 넣으면 영희 영상이 된다. 디자이너 한 명이 템플릿 하나를 만들면, 개발자는 이 템플릿을 base frame으로 구현한 뒤 100만 명의 고객에게 각기 다른 영상을 보낼 수 있다는 뜻이다.
2. 대량 생산 파이프라인 (The Rendering Logic)
이제 이 템플릿을 서버에서 구워내는 과정이다. 클라이언트가 요청(Trigger)을 보내면, 서버는 묵묵히 영상을 뱉어낸다.
<% raw %>
import { renderMedia, selectComposition } from '@remotion/renderer';
export const generateVideoOnServer = async (userData) => {
const composition = await selectComposition({
serveUrl: bundleLocation,
id: 'CartRecoveryTemplate',
inputProps: userData,
});
await renderMedia({
composition,
serveUrl: bundleLocation,
codec: 'h264',
outputLocation: `out/${userData.userId}_promo.mp4`,
});
console.log(`Money printed for user: ${userData.userId}`);
};
<% endraw %>
이 부분이야말로 확장성(Scalability)의 결정체다. API 호출로 영상 제작을 End To End로 끝낼 수 있다.
Business Logic - 실제로 이 방식이 가져올 이점
기술은 수단일 뿐이다. 중요한 건 이 기술을 어디에 써먹느냐이다. 앞서 분석한 내용을 바탕으로 비지니스적인 로직을 반영해 이점을 설명하겠다.
- 예시: Spotify Wrapped for SaaS - 연말마다 “올해 당신은 우리 서비스에서 300시간을 보냈군요!“라는 리포트 영상을 만들어주던 예시를 생각해보자. 사용자는 신나서 인스타에 공유하고, 플랫폼은 이를 바이럴 마케팅으로 끌어온다. 이런 순환 구조는 정적인 비디오 에디팅으론 구현하기 어렵다. JSON과 API를 동적으로 다룰 수 있는 코드 베이스에서 이룰 수 있다.
- Programmatic SEO Video: “강남 맛집”, “홍대 맛집”… 텍스트와 사진만 바꿔서 유튜브 쇼츠 1,000개를 찍어낼 수 있다. 혹은 광고 에이전시에서 어떤 프랜차이즈의 지역별 특색 메뉴를 새 캠페인에 맞춰 홍보한다면 각 지역 로케이션 좌표값과 해당 커스텀 메뉴를 매칭한 데이터를 코드에 전송하면 이를 애니메이션에 다이나믹하게 반영해 송출할 수 있다.
- Dynamic Real Estate Tours: 직방/다방 같은 플랫폼에서 매물 사진 5장만 올리면, 자동으로 BGM과 트랜지션이 들어간 고퀄리티 매물 소개 영상 제작
- Automated A/B Testing Machine 영상에 담긴 컨텐츠마다 각각 조합 가능한 모든 경우의 수를 다 비디오 에디터로 일일이 만들기엔 손품이 너무 많이 간다. 이럴 때 이 조합들을 명시한 스키마를 Inject해서 다조합의 비디오를 생성할 수 있다.
- Interactive Video Greetings 리드(Lead) 리스트의 URL을 스크래핑 →→ Puppeteer로 스크린샷 캡처 →→ 영상 내 모니터 화면에 합성 →→ GIF 썸네일로 이메일 첨부함으로서 아웃바운드 영업 응답률 폭등 하기 위한 B2B 세일즈 솔루션으로 판매할 수 있다.
- Game Result Highlights 롤(LoL)이나 배그(PUBG) 전적 검색 사이트. 게임이 끝나자마자 내 K/D/A와 하이라이트 스탯이 담긴 15초짜리 “매드무비 인트로” 스타일 영상한다. 라이엇 API 등 게임 데이터 연동→→캐릭터 일러스트와 점수를 화려한 이펙트로 버무려 프리미엄 유저구독 모델을 만들고 영상 내 광고 삽입을 진행할 수 있을 것이다.
- Localisation Studio for EdTech 에서 한국 일타강사의 강의 자료 화면. 텍스트만 영어/일어/중국어로 바뀌어서 렌더링한다. 강의 슬라이드(PPT)를 데이터화 →→ 언어별 번역 JSON 준비→→ 폰트 및 레이아웃 자동 조정(긴 단어 줄바꿈 처리 등)하여 영상 출력해 교육 컨텐츠의 글로벌 수출 비용을 절감할 수 있다.
- Event/Conference Ticket Generator 컨퍼런스 등록 시, 내 이름과 소속이 박힌 화려한 3D 티켓 애니메이션 영상을 준다. “나 여기 가요”라고 인스타에 올리기 딱 좋게. 등록 DB 연동 →→ QR코드와 텍스트가 박힌 티켓이 회전하고 빛나는 모션(GSAP WebGL) 생성해 행사 바이럴을 촉진할 수 있다.
- News/Weather Briefing Video 매일 아침, 내가 관심 있는 주식 종목과 날씨만 모아서 1분짜리 브리핑 영상을 만들 수도 있다. 주식 API, 날씨 API, 뉴스 RSS →→ 데이터 시각화(그래프 애니메이션) + TTS(음성 합성) + 배경음악→→ 나만의 모닝 뉴스를 만들 수도 있다.
캐릭터 일러스트와 점수를 화려한 이펙트
graph TD
A[User Action / Data] -->|Trigger| B(API Server)
B -->|Fetch Data| C{Remotion Engine}
C -->|Combine| D[Template Code + Assets]
C -->|Render| E[Personalized Video.mp4]
E -->|Distribute| F[Email / YouTube / Ads]
F -->|$$$| G[Revenue]
코드를 쓰면 괜히 더 골치만 아플테고 걍 생성형 LLM AI를 쓰면 되지?
혹자는 “AI가 나오면 이것도 끝물 아니냐”고 묻는다. 실무자로서 일해보면 이게 얼마나 얼토당토 안한 믿음인지 답답할 노릇이다. 생성형 AI(Sora 등)는 ‘랜덤성’을 통제하기 어렵다. 하지만 Remotion과 GSAP 기반의 코드는 담당자가 컨트롤 할 수 있는 정확한 데이터 시각화가 가능하다. 비즈니스 영역, 특히 데이터 기반의 CRM 마케팅에서는 환각(Hallucination) 있는 예술보다 정확한 논리가 돈이 된다.
이 프로젝트는 단순히 코드를 짜는 게 아니다. 여러 변동성이 발생할 수 있는 비지니스 캠페인 진행에 제작자로서 변수 통제권을 좀 더 부여하고 프로세스가 정체되는 Bottleneck 구간을 줄이는 것이다.
예전엔 브라우저에서 렌더링을 한다는 건 미친 짓이었다. 하지만 지금은 크롬이 웬만한 OS보다 무겁고 강력하다. WebGL과 Wasm의 발전이 이 시장을 열었다. AWS Lambda 같은 서버리스 아키텍처 덕분에, 24시간 렌더팜을 돌릴 필요 없이 ‘쓸 때만’ 돈을 내는 작업 프로세스의 커스텀화가 가능한 스케일업의 확장도 또 다른 이점이다. 무엇보다 Three.js와 함께 결합하면 Shader를 편집해서 응용할 수도 있다. 물론 사용자가 GLSL을 편집할 수 있어야하지만 말이다.
그렇다고 이 Remotion이라는 코드기반의 모션 디자인 작업이 After Effect나 Davinci Resolve를 대체할 수 있나? 그것은 아니다. 대부분은 코드로 쓸 바에 그냥 비디오 에디터를 바로 쓰는게 훨씬 빠르다. 특수효과나 라이브 VJ도 터치디자이너를 쓰는 게 훨 낫다. 하지만 광범위에 동시다발적으로 구현되는 집약적 개인화 컨텐츠를 담아 다양하게 진행되는 캠페인이나 실시간 데이터를 반영해 시각화를 이루는 비디오나 애니메이션, 유저들의 interaction을 바로 적용해 바꾸는 비쥬얼 영상 작업 등의 기존 상업전문 에디터로서는 구현화에 한계가 있는 프로젝트들엔 코드 기반의 모션디자인 제작 작업이 엄청난 메리트를 가져온다.
Action Plan
📋 Phase 1: 기반 구축 (Build the Engine)
Parameterise Components: 기존의 하드코딩된 값들(텍스트, 색상, 이미지 경로)을 전부 props로 받을 수 있게 리팩토링하라.
Create Schema: 어떤 데이터가 필요한지 정의하는 zod 스키마를 작성하라. (예: { userName: string, items: array, theme: ‘dark’ | ‘light’ })
Server-side Rendering Setup: Remotion Lambda나 Docker 컨테이너를 AWS에 띄워서, 로컬이 아닌 클라우드에서 영상을 굽는 환경을 구축하라.
🎯 Phase 2: 검증 및 영업 (Reach & CRO)
Dogfooding Outreach: 위에서 만든 기술로 당신의 잠재 고객(마케터, CEO)의 이름이 들어간 영상을 만들어 콜드 메일을 보내라.
- Subject: “김대표님을 위한 데모 영상이 도착했습니다.”
- Body: 링크 클릭 시 ?name=김대표 파라미터를 받아 즉석에서 렌더링 된 영상 재생.
Landing Page Optimisation: 랜딩 페이지에 정적인 영상 말고, 방문자의 유입 경로(Referrer)에 따라 텍스트가 바뀌는 영상을 헤더에 박아라. (기술력 과시 + 전환율 상승)
📈 Phase 3: 제품화 (Productise)
API Gateway 구축: 외부에서 POST /render 요청을 보내면 jobId를 리턴하고, 완료 시 webhook으로 MP4 URL을 쏘는 API 서버를 만들어라.
Template Gallery: Day34(글리치), Day40(타이포), Day62(키네틱) 등을 ‘템플릿 상품’으로 패키징하여 판매하라.