토요일 모각모임에서 눈오지님이 진행해주신 Remtion 설치 사용기
한줄 요약
After Effects를 몰라도 Claude Code와 Remotion으로 브랜드 애니메이션 영상을 한 세션에 세팅할 수 있었다. 단, 한글 렌더링은 아직 미해결 과제.
이런 분들께 도움돼요
모션 그래픽 툴(After Effects, Premiere) 없이 영상을 만들고 싶은 분
Remotion을 처음 써보려는 개발자/비개발자
AI와 함께 처음 보는 기술 스택을 빠르게 프로토타입해보고 싶은 분
한국어 텍스트가 들어간 영상을 코드로 만들려는 분
소개: 시도하고자 했던 것과 그 이유
브랜드 런칭 영상이 필요했는데 After Effects나 Premiere 같은 모션 그래픽 툴을 다룰 줄 몰랐다.
그러다 Remotion이라는 도구를 알게 됐다. React 코드로 영상을 만들 수 있는 프레임워크인데, 코드로 짜면 텍스트나 색상만 바꿔서 재사용도 가능하다는 점이 매력적이었다.
직접 코드를 짜기엔 진입장벽이 높아서, Claude Code와 함께 처음부터 끝까지 한 세션에 세팅해보기로 했다.
목표는 이것:
1080x1080, 8초 분량의 브랜드 애니메이션
"황금호랑이 / 지피터스 바이브코딩" 텍스트를 픽셀 블록으로 구성
4명이 실시간 코드 협업하는 것처럼 보이는 커서 효과
진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
사용 도구
Claude Code (CLI) — 코드 작성, 오류 디버깅, 명령어 실행 전부 담당
Remotion v4 — React 기반 영상 제작 프레임워크
Node.js v24 / npm — 패키지 관리
진행 흐름
1단계 — 프로젝트 생성
npx create-video@latest
Claude가 명령어 안내부터 템플릿 선택(Blank)까지 가이드. 터미널에서 대화형으로 진행.
2단계 — 애니메이션 설계
Claude에게 원하는 영상을 상세히 설명하 자 타임라인을 직접 설계했다:
구간
효과
0~0.4초
첫 커서 진입
0.4~0.9초
4개 커서 흩어짐
0.9~1.6초
왼쪽 정렬
1.6~5.0초
픽셀 텍스트 빌드
5.0~5.8초
"출시 예정" 자막 타이핑
5.5~8.0초
커서 위로 부유
3단계 — 코드 작성
BrandAnimation.tsx 전체를 Claude가 작성. 주요 구현 내용:
Canvas API로 텍스트를 픽셀 좌표로 추출
20px 정사각형 블록에 3D 음각/양각 효과 (box-shadow)
Spring 애니메이션으로 커서 이동
협업 커서 UI (이름 라벨 + 화살표)
4단계 — 시행착오 3라운드
문제
원인
해결
빈 화면
delayRender가 폰트 로딩 실패로 영구 블로킹
delayRender 제거, useEffect로 단순화
폰트 오류
NotoSansKR 미존재 → NanumGothic weight 오류
시스템 폰트(Malgun Gothic)로 교체
Webpack 크래시
NanumGothic 전체 서브셋 120+ 파일 처리 실패
폰트 패키지 제거, 캐시 삭제 후 재시도
5단계 — 렌더링 완료
npx remotion render BrandAnimation out/brand-animation.mp4
240프레임 렌더링 성공, 920.8 KB MP4 생성.
인상적이었던 순간
"설치부터 렌더링까지 명령어 하나도 직접 안 쳤는데 영상이 나왔다"
npx create-video@latest 실행부터 타임라인 설계, 컴포넌트 코드 작성, MP4 렌더링까지 Claude가 전부 처리했다. Webpack 오류 로그를 보고 원인을 스스로 추적해서 해결 방향을 바꾸는 과정도 인상적이었다.
결과와 배운 점
결과
✅ Remotion 프로젝트 세팅 완료
✅ 타임라인 기반 커서 애니메이션 동작
✅ MP4 렌더링 성공 (920.8 KB, 8초, 1080x1080)
❌ 한글 텍스트 픽셀화 실패 — Canvas 폰트 로딩 타이밍 이슈로 블록이 생성되지 않음
배운 점
Remotion 세팅 자체는 성공했지만, 한글 지원은 추가 작업이 필요하다.
영상 구조(커서 애니메이션, 블록 스타일, 타임라인)는 완전히 동작한다. 문제는 Canvas API로 한글을 픽셀 좌표로 변환할 때, 폰트가 아직 로드되지 않아 빈 배열이 반환되는 것.
AI도 바로 못 푸는 문제가 있다는 것, 그리고 어디서 막히는지를 파악한 것 자체가 이번 세션의 수확이다.
재사용 가능한 프롬프트
Remotion으로 1080x1080, 8초 브랜드 애니메이션을 만들어줘.
핵심 효과:
- 픽셀 블록으로 텍스트 생성 애니메이션
- 4가지 색상 커서(보라/파랑/분홍/남색)가 화면 밖에서 날아와 흩어짐
- 커서가 왼쪽에 정렬된 후 픽셀 텍스트를 "구성"함
- 블록이 하나씩 빛남 (실시간 공동편집 느낌)
텍스트: 1행 "[브랜드명]", 2행 "[슬로건]"
블록 스타일: 20px 정사각형, 3D 음각 효과, 진한 보라색 바탕
타임라인:
- 0~0.4s: 첫 커서 진입
- 0.4~0.9s: 4개 커서 흩어짐
- 0.9~1.6s: 왼쪽 정렬
- 1.6~5.0s: 픽셀 텍스트 빌드
- 5.0~5.8s: "[자막]" 타이핑
- 5.5~8.0s: 커서 위로 부유
주의: 한글 폰트는 @remotion/google-fonts 대신 시스템 폰트 사용 권장
(NanumGothic 전체 서브셋 로딩 시 Webpack 크래시 발생)
한글이 꺠져 나온 결과물입니다.
AIUP 문장을 홍보하는 사례로 만들어보려했는데
모각의 짧은 시간안에 하느라 단순 프롬프트를 사용해서인지
원하 는 퀄리티는 안나왔습니다.
홈페이지 사이트를 알려주고 홍보용으로 제작해봤는데
역시 단순 프롬프트여서 인지 원하는 퀄리티가 안나왔습니다.
다음엔 스킬을 좀더 고도화 해봐야할거 같습니다.
다음 계획
한글 픽셀 렌더링 문제를 해결하고, 이번 구조(커서 애니메이션 + 픽셀 빌드)를 베이스로 다른 브랜드 영상에도 적용해볼 예정.
해결 방향으로 검토 중인 것:
한글을 SVG path로 변환 후 픽셀 좌표 추출
calculateMetadata로 서버사이드에서 픽셀 데이터 사전 계산@remotion/fonts로 로컬 폰트 파일 직접 로딩
작성일: 2026-03-29 | 도구: Claude Code + Remotion v4
