어제 처음 써봤어요.
Claude Code에 Remotion 스킬 임포트해서 “영상 만들어줘” 하니까 진짜 만들어주더라고요.
솔직히 말하면, 생각보다 빨리 첫 영상이 나왔어요. 근데 완벽하진 않았고요.
하루 써본 게 전부라 “완벽 가이드”라고 하긴 좀 그렇고, 그냥 제가 겪은 것들 솔직하게 공유할게요.
Claude Code 스킬이 뭔데?
먼저 스킬 개념부터.
Claude Code 스킬은 **”Claude한테 주는 작업 매뉴얼”**이에요.
.claude/skills/ 폴더에 SKILL.md 파일 넣어두면, Claude가 그 매뉴얼 읽고 그대로 따라해요.
사용자: "@remotion-skill 블로그 소개 영상 만들어줘" ↓ Claude: SKILL.md 읽음 ↓ Claude: 스킬에 적힌 대로 실행 (프로젝트 생성, 코드 작성, 렌더링)
Remotion 문법 몰라도 되고, React 몰라도 돼요. 스킬이 다 알려주니까.
Remotion 스킬 설정하기
1. 스킬 폴더 만들기
# 프로젝트 루트에서 mkdir -p .claude/skills/remotion-video
2. SKILL.md 파일 만들기
.claude/skills/remotion-video/SKILL.md 파일 생성:
---
name: remotion-video
description: Remotion으로 영상 자동 생성. 프로젝트 세팅부터 렌더링까지.
tools: Read, Write, Shell
version: 1.0
---
# Remotion Video Skill
React 기반 Remotion으로 영상을 생성합니다.
## 사용법
"@remotion-video [영상 설명]" 형태로 요청하세요.
## 실행 순서
1. **프로젝트 확인**: remotion 폴더 있는지 확인
2. **없으면 생성**: npx create-video@latest 실행
3. **컴포넌트 작성**: 요청에 맞는 React 컴포넌트 생성
4. **프리뷰 실행**: npm start
5. **렌더링**: npx remotion render로 MP4 생성
## 기본 템플릿
### 타이틀 영상
import { useCurrentFrame, interpolate } from 'remotion';
export const TitleVideo = ({ title, subtitle }) => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<div style={{
flex: 1,
backgroundColor: '#000',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
opacity
}}>
<h1 style={{ color: '#fff', fontSize: 80 }}>{title}</h1>
<p style={{ color: '#888', fontSize: 40 }}>{subtitle}</p>
</div>
);
};
## 명령어
| 명령어 | 설명 |
|--------|------|
| npm start | 프리뷰 |
| npx remotion render src/index.ts [컴포지션] out.mp4 | MP4 렌더링 |
| npx remotion still src/index.ts [컴포지션] out.png | 썸네일 |
3. 스킬 사용하기
이제 Claude Code에서:
@remotion-video 블로그 소개 영상 만들어줘 - 제목: "Tech Blog" - 부제: "개발자의 일상" - 배경: 검정 - 길이: 5초
Claude가 스킬 읽고 알아서:
- 프로젝트 구조 만들고
- 컴포넌트 코드 작성하고
- 프리뷰 실행해줌
내가 어제 해본 것
첫 번째 시도
@remotion-video 타이틀 영상 만들어줘 - 제목: 'Hello World' - 길이: 10초 - 페이드인 효과
Claude가 스킬 읽고 실행했는데… 처음엔 좀 헤맸어요.
Node.js 버전 안 맞아서 에러 나고, npm install 빠뜨려서 에러 나고.
결국 돌아가긴 했는데, 한 20분 걸린 것 같아요.
두 번째 시도
한 번 세팅해놓으니까 두 번째부터는 빨랐어요.
@remotion-video 색깔 바꿔줘. 배경 파란색, 글자 흰색으로
이러니까 바로 수정해줌. 이건 좋았어요.
세 번째: 좀 복잡한 거
@remotion-video 타이틀이 위에서 아래로 내려오면서 나타나게 해줘
이것도 해줬어요. interpolate 함수 써서 애니메이션 코드 짜주더라고요.
좋았던 점
1. 매번 설명 안 해도 됨
스킬에 템플릿이랑 명령어 다 적어놨으니까, Claude한테 매번 “Remotion이 뭔지” 설명 안 해도 돼요.
그냥 @remotion-video 붙이면 알아서 해줌.
2. 수정이 쉬움
한 번 만들어놓으면 “이거 바꿔줘” 하면 바꿔줘요.
스킬이 컨텍스트를 알고 있으니까.
3. 재사용 가능
한 번 만든 스킬은 다른 프로젝트에서도 쓸 수 있어요.
.claude/skills/ 폴더 복사하면 끝.
막혔던 점
1. 처음 스킬 세팅이 좀 귀찮음
SKILL.md 파일 직접 작성해야 해요.
템플릿 코드, 명령어, 실행 순서… 이거 한 번 정리하는 데 시간 좀 걸렸어요.
2. 스킬이 너무 단순하면 한계가 있음
제가 만든 스킬이 기본적인 것만 커버해서, 복잡한 요청은 잘 안 됐어요.
스킬을 더 정교하게 만들어야 할 것 같아요.
3. 에러 났을 때
Claude가 스킬 따라 실행하다가 에러 나면, 스킬에 에러 처리가 없으면 막혀요.
스킬에 “에러 났을 때 이렇게 해라” 추가해야 함.
실제 스킬 실행 예시
1. 스킬 호출
@remotion-video 유튜브 썸네일 영상 만들어줘 - 제목: "Claude Code 완벽 가이드" - 배경: 그라데이션 (파랑→보라) - 길이: 3초
2. Claude 실행 과정
[1] SKILL.md 읽음
[2] 프로젝트 폴더 확인 → 없음 → 생성
→ npx create-video@latest my-video
[3] 컴포넌트 작성
→ src/Thumbnail.tsx 생성
[4] Root.tsx에 컴포지션 등록
[5] 프리뷰 실행
→ npm start
[6] 결과 확인
→ "http://localhost:3000 에서 확인하세요"
3. 수정 요청
@remotion-video 제목 폰트 크기 더 키워줘
Claude가 알아서 해당 파일 찾아서 수정해줌.
하루 써본 결론
Remotion 자체가 꽤 괜찮아요.
영상을 코드로 만든다는 개념이 처음엔 어색했는데, 써보니까 이해가 되더라고요.
왜 Remotion인가?
- 반복 작업에 강함 – 블로그 썸네일 100개 만들어야 할 때, 데이터만 바꾸면 자동 생성
- 버전 관리 – 영상 파일은 Git에 안 올라가는데, 코드는 올라감. 수정 이력 추적 가능
- 프로그래밍적 사고 – 조건문, 반복문으로 동적 영상 가능. 개발자한테 익숙한 방식
프리미어나 파이널컷 열어서 드래그 앤 드롭하는 것보다, 코드 한 줄 바꾸는 게 더 빠를 때가 있어요.
앞으로 방향
1. 블로그 썸네일 자동화
지금 블로그 썸네일 Canva로 하나하나 만드는데, 이거 Remotion으로 바꾸려고요.
블로그 글 발행 → 제목/태그 추출 → Remotion 스킬 호출 → 썸네일 영상 자동 생성
매번 Canva 안 열어도 됨.
2. 데이터 기반 영상
JSON 파일에 데이터 넣어두면 영상이 자동으로 바뀌는 구조.
{
"title": "SCHD 배당금 현황",
"data": [
{ "month": "1월", "dividend": 150000 },
{ "month": "2월", "dividend": 155000 }
]
}
이 데이터만 업데이트하면 차트 영상이 자동 생성되는 거죠.
3. 유튜브 쇼츠 도전
Remotion이 세로 영상도 지원해요. 블로그 글 요약해서 60초 쇼츠로 만들어볼 생각.
코드로 짜면 템플릿화가 쉬우니까, 한 번 만들어놓으면 계속 재사용 가능.
4. AI + Remotion 시너지
Claude한테 “이 주제로 영상 대본 써줘” → 대본 기반으로 Remotion 컴포넌트 자동 생성
이런 파이프라인 만들면 진짜 자동화가 될 것 같아요.
솔직한 느낌
하루밖에 안 써봐서 확신은 없는데, 가능성은 보여요.
특히 개발자라면:
- 코드로 관리하니까 익숙하고
- 자동화 파이프라인 짜기 쉽고
- Git으로 협업도 가능
영상 편집 도구 배우는 것보다 이게 더 맞을 수도 있어요.
더 써보고 업데이트할게요.
스킬 설정 상세 가이드
1. 사전 준비
# Node.js 버전 확인 (18 이상 필요) node -v # 프로젝트 루트에 .claude 폴더 확인 ls -la .claude/
2. 스킬 폴더 구조
.claude/
└── skills/
└── remotion-video/
└── SKILL.md # 스킬 정의 파일
3. SKILL.md 필수 구성
--- name: remotion-video # 스킬 이름 description: 영상 자동 생성 # 한 줄 설명 tools: Read, Write, Shell # 사용할 도구 version: 1.0 # 버전 --- # 스킬 제목 ## 사용법 사용 방법 설명 ## 실행 순서 1. 첫 번째 단계 2. 두 번째 단계 ## 템플릿 코드 템플릿들
4. 스킬 호출 방법
# 방법 1: @ 멘션 @remotion-video 영상 만들어줘 # 방법 2: 스킬 이름 언급 remotion-video 스킬로 영상 만들어줘
5. 에러 났을 때
“스킬을 찾을 수 없습니다” → .claude/skills/ 경로 확인, SKILL.md 파일명 확인
“Node.js 버전 오류”
# nvm으로 버전 변경 nvm use 18
“npm install 필요”
cd my-video npm install