Remotion Skills - 코드로 영상 만들기¶

한 줄 요약¶

"Claude Code에게 말로 시키면 홍보 영상(MP4)을 자동으로 만들어주는 도구"

Remotion이 뭔가?¶

비유로 이해하기¶

기존 방식	Remotion 방식
프리미어/캡컷에서 드래그로 영상 편집	코드로 영상을 "프로그래밍"
PPT에서 슬라이드 드래그	youtube-ppt 스킬이 코드로 PPT 자동 생성
캡컷에서 수동으로 모션그래픽 제작	Remotion이 코드로 영상 자동 생성

쉽게 말하면: - youtube-ppt 스킬 = 코드로 PPT 만들기 (PptxGenJS) - Remotion = 코드로 영상 만들기 (React)

PPT가 "움직이면" 그게 영상이 되는 거다. 같은 원리.

왜 코드로 영상을 만들까?¶

반복 생산: 한 번 만든 템플릿에 텍스트만 바꾸면 새 영상이 나옴
AI와 협업: Claude Code가 코드를 짤 수 있으니, 말로 시키면 영상이 나옴
일관된 브랜딩: 색상, 폰트, 애니메이션을 코드로 고정해놓으면 매번 같은 퀄리티

Remotion Skills이 뭔가?¶

핵심 개념¶

Remotion 자체는 원래 개발자용 도구다. React라는 프로그래밍 언어를 알아야 쓸 수 있었다.

Remotion Skills는 2026년 1월에 나온 것으로, Claude Code 같은 AI 에이전트에게 "Remotion 사용법 교본"을 주입하는 규칙 파일 모음이다.

비유하면: - Remotion = 요리 도구 (프라이팬, 칼 등) - Remotion Skills = 레시피북 (Claude Code가 읽고 따라 요리함) - 사용자 = 메뉴를 주문하는 사람 ("15초 홍보 영상 만들어줘")

Skills 안에 들어있는 것 (28개+ 규칙 파일)¶

규칙 파일	내용
animations.md	페이드인, 슬라이드, 스케일 등 애니메이션
text-animations.md	타이핑 효과, 단어 하이라이트
transitions.md	장면 전환 효과
sequencing.md	장면 순서 배치 (시리즈/시퀀스)
timing.md	스프링, 이징 등 타이밍 곡선
fonts.md	구글 폰트 / 로컬 폰트 사용법
audio.md	오디오 삽입, 볼륨, 속도 조절
charts.md	차트/데이터 시각화
images.md	이미지 삽입
videos.md	영상 클립 삽입, 트리밍
subtitles.md	자막
voiceover.md	AI 나레이션 (ElevenLabs TTS)
3d.md	3D 콘텐츠 (Three.js)
tailwind.md	TailwindCSS 스타일링
...	기타

설치 방법 (처음 한 번만)¶

사전 준비물¶

필요한 것	확인 방법	없으면
Node.js (v18+)	터미널에서 `node -v`	https://nodejs.org 에서 설치
npm	터미널에서 `npm -v`	Node.js 설치하면 자동으로 딸려옴
Claude Code	터미널에서 `claude`	이미 사용 중이면 OK

Step 1: Remotion 프로젝트 생성¶

# 원하는 폴더로 이동
cd D:\Project\remotion

# Remotion 프로젝트 생성 (인터랙티브 메뉴가 나옴)
npx create-video@latest

메뉴가 나오면 "Blank" 선택 (빈 캔버스로 시작).

만약 인터랙티브 메뉴가 안 먹히면 (Claude Code 내부에서 실행 시):
npx --yes degit remotion-dev/template-empty --force .
npm install

Step 2: Remotion Skills 설치¶

# 프로젝트 폴더에서 실행
npx skills add remotion-dev/skills

설치 중 "어떤 에이전트에 설치할까?" 물으면: - Claude Code 포함해서 선택 - --yes 플래그로 자동 설치도 가능: npx skills add remotion-dev/skills --yes

Step 3: npm 패키지 설치¶

npm install

설치 완료 후 폴더 구조¶

D:\Project\remotion\
├── .agents/skills/remotion-best-practices/  ← Remotion Skills (규칙 파일들)
│   ├── SKILL.md                             ← 스킬 메인 가이드
│   └── rules/                               ← 28개+ 규칙 파일
├── src/
│   ├── index.ts                             ← 진입점
│   ├── Root.tsx                             ← 영상 구성(Composition) 등록
│   └── Composition.tsx                      ← 실제 영상 코드
├── package.json
├── remotion.config.ts
└── tsconfig.json

사용 방법¶

미리보기 (스튜디오)¶

npm run dev

- 브라우저에서 http://localhost:3000 열림 - 타임라인을 드래그하면 애니메이션 확인 가능 - PPT의 슬라이드쇼 미리보기 같은 것

Claude Code에게 영상 요청하기¶

프로젝트 폴더에서 Claude Code를 열고, 자연어로 요청:

"15초 홍보 영상 만들어줘. 다크 배경에 노란색 제목 '위너책쓰기 3기 모집'.
부제목은 '당신의 전자책, 6주만에 완성'. 하단에 CTA 버튼."

Claude Code가: 1. 규칙 파일을 참고해서 React 코드 작성 2. src/Composition.tsx에 저장 3. 미리보기로 확인 요청 4. 수정 요청하면 코드 수정 5. 최종 확정 후 MP4 렌더링

MP4로 출력 (렌더링)¶

npx remotion render MyComp output.mp4

- MyComp = Root.tsx에 등록된 영상 이름 (Composition id) - output.mp4 = 저장할 파일명

잘 만들 수 있는 영상 vs 안 맞는 영상¶

잘 맞는 유형 (추천)¶

유형	예시
텍스트 모션그래픽	강의 홍보 숏폼, 서비스 소개
데이터 시각화	매출 차트 애니메이션, 수강생 수 카운트업
브랜딩 영상	채널 인트로/아웃트로, 로고 애니메이션
소셜미디어 숏폼	인스타 릴스, 유튜브 쇼츠 (15~60초)
반복 생산	매주 강의 홍보, 전자책 출간 알림

안 맞는 유형 (비추천)¶

유형	이유
실사 촬영 편집	컷 편집, 색보정은 프리미어가 나음
브이로그	촬영 영상 중심이라 코드로 만들 이유가 없음
복잡한 VFX	After Effects 영역
긴 영상 (10분+)	숏폼/모션그래픽에 최적화된 도구

행글라이터 채널 활용 시나리오¶

1. 강의 홍보 숏폼 (가장 실용적)¶

"위너책쓰기 3기 모집" 15초 릴스
한 번 템플릿 만들면 기수/날짜만 바꿔서 재생산
lecture-content 스킬과 연계 가능

2. 유튜브 인트로/아웃트로¶

"행글라이터" 로고 + 채널명 애니메이션
한 번 만들면 모든 영상에 재사용

3. 전자책/서비스 홍보¶

"이 전자책을 읽으면 얻는 5가지" 카운트다운 영상
데이터 시각화 + 텍스트 애니메이션

4. AI 도구 소개 영상¶

AI 도구 이름 → 기능 나열 → 사용법 요약
유튜브 쇼츠로 AI 도구 추천 시리즈

유튜브 콘텐츠용 정리: "Claude Code로 영상 만들기"¶

영상 콘셉트¶

"코딩 몰라도 Claude Code로 홍보 영상 만드는 법"

다룰 포인트¶

Remotion이 뭔가 - "코드로 만드는 영상 도구, 근데 AI가 코드를 대신 짜줌"
설치 과정 - 터미널 3줄이면 끝
실제 영상 만들기 - 자연어로 요청 → 미리보기 → 수정 → MP4 출력
좋은 프롬프트 예시 - 구체적으로 요청할수록 좋은 결과
활용 사례 - 강의 홍보, 인트로, 숏폼 등

프롬프트 좋은 사례 vs 나쁜 사례¶

나쁜 예:

"홍보 영상 만들어줘"

→ 너무 추상적. 무슨 홍보? 몇 초? 어떤 스타일?

좋은 예:

"위너책쓰기 3기 모집 홍보 영상 만들어줘.
- 길이: 15초 (30fps)
- 크기: 1080x1920 (세로형, 인스타 릴스용)
- 배경: 다크 네이비 (#0f0c29)
- 제목: '위너책쓰기 3기 모집' (노란색, 크게)
- 부제: '6주 만에 전자책 완성' (시안 컬러)
- 애니메이션: 제목이 바운스로 등장 → 1초 후 부제 페이드인
- 하단: '지금 신청하기' CTA 버튼
- 마지막 2초: 로고 페이드아웃"

→ 구체적일수록 Claude Code가 정확하게 만듬

팁: 단계적 요청이 효과적¶

1단계: "기본 구조 잡아줘" → 미리보기 확인
2단계: "제목 크기 더 키우고, 부제 색상 바꿔줘" → 수정
3단계: "마지막에 로고 페이드아웃 추가해줘" → 추가
4단계: "MP4로 렌더링해줘" → 완성

대화하듯이 조금씩 다듬어가는 게 한 번에 완벽하게 시키는 것보다 좋은 결과를 낸다.

기술 참고 (필요할 때만)¶

애니메이션 3대장 (이것만 알면 대부분 가능)¶

개념	비유	뭘 하는 건지	예시
interpolate	"서서히 변하기"	A에서 B로 부드럽게 변환	투명→불투명, 작게→크게, 왼쪽→오른쪽
spring	"통통 튀기"	탄성 있는 자연스러운 움직임	바운스 등장, 탄력적 확대
Sequence	"순서표"	장면을 시간 순서대로 배치	3초에 제목, 7초에 숫자, 11초에 CTA

interpolate 예시 (비유):

"0초일 때 투명도 0 → 2초일 때 투명도 1"
= 2초 동안 서서히 나타남 (페이드인)

spring 예시 (비유):

"제목이 위에서 떨어지면서 통통 튀며 제자리에 안착"
= 바운스 효과

핵심 구조 개념¶

개념	비유	설명
Composition	PPT 파일	영상 하나의 단위. 크기, 길이, fps 설정
Sequence	PPT 슬라이드	장면 하나. 시작 시점과 길이 지정
Props (스키마)	PPT 텍스트 상자	스튜디오 사이드바에서 값 조절 가능 (문구, 크기, 시간 등)
useCurrentFrame	타이머	현재 몇 번째 프레임인지 알려줌. 모든 애니메이션의 기준

파일 구조 패턴 (영상 만들 때마다 반복)¶

videos/영상이름/
├── 영상이름.tsx           ← 감독 (장면 순서, 시간 배분, Props 정의)
└── scenes/               ← 배우들 (각 장면의 실제 애니메이션)
    ├── Scene1.tsx
    ├── Scene2.tsx
    └── ...

감독 파일이 "3초에 Scene1 시작, 7초에 Scene2"를 정하고, 각 scene 파일은 자기 장면의 움직임만 담당.

Props 시스템 (코드 몰라도 수정하기)¶

영상 코드에 스키마를 정의하면, Remotion 스튜디오 오른쪽 사이드바에서 실시간 조절 가능: - 문구 텍스트 수정 - 글씨 크기 슬라이더 - 숫자 값 변경 - 장면별 시간(초) 조절

→ 코드를 직접 건드리지 않아도 스튜디오 UI에서 미세 조정 가능!

오디오 추가 방법¶

음원 파일을 public/ 폴더에 넣고 코드에서 호출:

public/common/bgm.mp3           ← 공용 배경음악
public/common/whoosh.mp3         ← 공용 효과음
public/영상이름/narration.mp3    ← 영상 전용 나레이션

가능한 것들: - 배경 음악 (볼륨 조절 가능) - 효과음 (특정 시점에 재생) - 나레이션 (음성 파일 싱크) - 볼륨 페이드인/아웃

설정값 가이드¶

용도	크기 (width x height)	fps	길이
유튜브 가로형	1920 x 1080	30	자유
인스타 릴스/쇼츠 (세로)	1080 x 1920	30	15~60초
인스타 피드 (정사각)	1080 x 1080	30	15~30초
유튜브 인트로	1920 x 1080	30	3~5초

프로젝트 위치¶

D:\remotion\

스튜디오 사용법¶

스튜디오 열기¶

cd D:\remotion
npm run dev

→ 브라우저에서 http://localhost:3000 자동으로 열림

스튜디오에서 할 수 있는 것¶

왼쪽 사이드바: 영상 목록에서 선택
가운데: 영상 프리뷰 + 재생 버튼
아래 타임라인: 장면별 시간 확인, 드래그로 탐색
오른쪽 Props 패널: 문구/크기/시간 실시간 수정
오른쪽 하단 Render 버튼: MP4 렌더링

스튜디오 닫은 후 다시 열기¶

터미널(CMD/PowerShell/Claude Code) 열기
cd D:\remotion 입력
npm run dev 입력
브라우저에서 http://localhost:3000 열기

MP4 렌더링 (영상 파일 출력)¶

npx remotion render WinnerWriting31 output/winner-writing-31.mp4

주의사항 / 트러블슈팅¶

Google Fonts 로딩 위치 (2026-02-19 발견)¶

문제: theme.ts에서 loadFont()를 호출하면 스튜디오가 빈 화면이 됨 원인: 모듈 최상단에서 Google Fonts 로딩 시 스튜디오 초기화와 충돌 해결: loadFont()는 theme.ts가 아닌 Background.tsx 같은 컴포넌트 파일에서 호출

❌ theme.ts에서 loadFont() → 스튜디오 빈 화면
⭕ Background.tsx에서 loadFont() → 정상 작동

theme.ts에는 색상/폰트이름/사이즈 같은 순수 상수만 넣기. 기능 제한 없음 — 폰트 로딩 위치만 다를 뿐, 한글 폰트(Noto Sans KR) 정상 사용 가능.

효과 레시피 (실전 검증 완료 — 2026-02-19)¶

퀄리티 높이는 핵심 5가지¶

순위	효과	체감 임팩트	구현 난이도
1	시네마틱 드리프트 (미세 줌)	영상이 "살아있는" 느낌	1줄 추가
2	도달 플래시 (화면 번쩍)	클라이맥스 강조	5줄
3	CTA 글로우 펄스 (빛 호흡)	클릭 유도력 상승	boxShadow + sin
4	반짝이 파티클	고급스러운 배경	별도 컴포넌트
5	장면 전환 fade	매끄러운 흐름	TransitionSeries

코드 패턴 (복붙용)¶

시네마틱 드리프트 — 모든 씬에 적용:

const { fps, durationInFrames } = useVideoConfig();
const drift = interpolate(frame, [0, durationInFrames], [1, 1.04], { extrapolateRight: "clamp" });
// AbsoluteFill style에 transform: `scale(${drift})` 추가

임팩트 펀치 — 숫자 도달 등 클라이맥스에:

const punchScale = spring({ frame: frame - hitFrame, fps, config: { damping: 6, stiffness: 300 } });
const punch = 1 + (1 - punchScale) * 0.25;  // 25% 확대 후 탄성 복귀

화면 플래시 — 펀치와 함께 사용:

const flash = interpolate(frame, [hit, hit+3, hit+8, hit+30], [0, 0.7, 0.3, 0], { clamp });
// radial-gradient 오버레이로 적용

CTA 글로우 펄스 — 버튼에 숨쉬는 빛:

const pulseFrame = Math.max(0, frame - 40);
boxShadow: `0 0 ${20 + Math.sin(pulseFrame * 0.12) * 18}px ${color}`

씬 구성 공식 (15초 홍보 영상)¶

씬1 (3초)  : 훅/질문 — 시선 잡기 (타이프라이터, 물음표 등)
씬2 (4초)  : 숫자/데이터 — 신뢰감 (카운트업, 그래프)
씬3 (4초)  : 핵심 메시지 — 임팩트 (비주얼 + 큰 텍스트)
씬4 (4.5초): 브랜드 + CTA — 행동 유도 (로고, 버튼, 안내문구)

타이밍 기준값¶

항목	값	이유
장면 전환	4프레임 (0.13초)	짧은 씬에서 겹침 최소화
파티클 크기	6~18px	먼지(X) → 별(O)
파티클 수	20개	과하지 않게
플래시 유지	번쩍→은은하게 1초	순간이면 아쉬움
CTA 펄스 속도	0.12	자연스러운 호흡

3D 효과 (실전 검증 완료)¶

CSS 3D transform — 추가 설치 없이 바로 사용:

효과	코드 핵심	주의사항
숫자 Y축 회전	`perspective(800px) rotateY(${angle}deg)`	도달 순간 360도 회전
카드 3D 드롭	`perspective(600px) translateZ(-300→0) rotateX(40→0)`	멀리서 날아오는 느낌
로고 플립 등장	`perspective(800px) rotateY(-90→0deg)`	등장과 분리해서 딜레이 필수

핵심 교훈: scale 0→1과 동시에 3D 회전하면 안 보임. 등장 후 딜레이(15프레임 등)를 두고 별도 spring으로 회전시켜야 체감됨.

@remotion/three — 아직 미사용, 필요 시 설치:

npm i @remotion/three three @types/three

진짜 3D 오브젝트, 360도 자유 회전, 3D 파티클 시스템 가능.