리모션|코드로 영상 만들기

리액트 코드로 영상을 만드는 Remotion 사용법을 담고 있습니다. 데이터가 바뀌면 영상도 자동으로 바뀌는 구조를 만들 수 있습니다.

도도리 AI연구소 · 최종 수정 2026년 10월 7일 · CC BY-NC 4.0

디자인 분야 · 디자인·이미지 용도 · 개발자용입니다.

remotion 스킬 설치 한 줄

Claude Code 용 명령입니다. Claude Code 는 터미널뿐 아니라 데스크톱 앱(Mac·Windows), 웹(claude.ai/code), VS Code·JetBrains 확장으로도 씁니다. 어디서 쓰시든 명령을 넣는 자리에 붙여 넣으시면 됩니다. 터미널로 쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다. 헷갈리기 쉬운 곳은 하나입니다. 대화만 하는 Claude 앱의 채팅창은 Claude Code 가 아니라서 여기에 붙여 넣으면 동작하지 않습니다. 터미널로 쓰실 때만 Node.js 가 따로 필요하며, node -v 를 쳐서 버전이 나오면 준비된 것입니다.

뒤의 두 가지는 붙여 두시는 편이 좋습니다. -g 는 계정 전체에 넣는다는 뜻으로, 없으면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 스킬이 보이지 않습니다. -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다. 이걸 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 Failed to install 이 뜨는데, 실제로는 설치가 된 상태라 헷갈립니다.

remotion 스킬 설치 절차 전체

위 한 줄에서 막히셨다면 여기를 보십시오. 터미널로 쓰시는 분을 위해 터미널 여는 법부터 확인 명령까지 순서대로 적어 두었습니다. 데스크톱 앱·웹·편집기 확장으로 쓰시면 터미널 여는 단계는 건너뛰고 명령 입력 칸에 같은 줄을 넣으시면 됩니다.

# remotion-dev/skills 설치

## 0. 어디에 붙여 넣나

Claude Code 를 쓰는 방법이 네 가지입니다. 어느 쪽이든 됩니다.

  터미널           macOS 는 터미널, Windows 는 PowerShell
  데스크톱 앱       Mac · Windows 용 Claude Code 앱
  웹              claude.ai/code
  편집기 확장       VS Code · JetBrains

명령을 넣는 자리에 아래 한 줄을 붙여 넣으시면 됩니다. 터미널로
쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다.

헷갈리기 쉬운 곳이 하나 있습니다. 대화만 하는 Claude 앱의 채팅창은
Claude Code 가 아닙니다. 거기에 붙여 넣으면 Claude 가 명령을 글로
읽고 설명만 해 줍니다.

터미널로 쓰실 때만 Node.js 가 따로 필요합니다. node -v 를 쳐서
v20.1.2 처럼 버전이 나오면 준비된 것입니다. "찾을 수 없습니다" 가
나오면 nodejs.org 에서 LTS 버전을 먼저 설치하십시오.
(앱·웹·확장에는 이미 들어 있습니다.)

  macOS    Spotlight(Command + 스페이스)에서 "터미널" 을 여십시오
  Windows  시작 메뉴에서 "PowerShell" 을 여십시오

## 1. 넣기

npx skills add remotion-dev/skills -g -a claude-code

  성공하면 이 한 줄이 나옵니다.
  Installed 1 skill → ~/.claude/skills/...

  -g 는 계정 전체에 넣는다는 뜻입니다(~/.claude/skills).
  어느 폴더에서 Claude Code 를 열든 쓸 수 있습니다.
  빼면 지금 열려 있는 폴더에만 깔려서(./.claude/skills), 다른 데서
  열면 스킬이 안 보입니다. "깔았는데 안 보인다" 는 대개 이것입니다.

  -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다.
  빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간
  "Failed to install" 이 뜹니다. 실제로는 설치가 끝난 상태인데
  실패한 것처럼 보여 여기서 멈추기 쉽습니다.

  저장소에 스킬이 여러 개면 어느 것을 넣을지 물어봅니다.
  미리 보시려면 --list 를 붙이십시오.

  npx skills add remotion-dev/skills --list

## 2. Claude Code 를 다시 시작합니다

이미 열어 두셨다면 끝내고 다시 여십시오.
실행 중인 세션은 시작할 때 읽은 목록을 그대로 씁니다.

  터미널이면 claude 를 끝내고 다시 실행합니다.
  데스크톱 앱·웹·편집기 확장이면 그 세션을 새로 엽니다.
  대화만 하는 Claude 앱은 해당되지 않습니다 — 스킬이 들어가지 않습니다.

## 3. 확인

npx skills list -g

  전역으로 넣은 스킬이 이름과 경로와 함께 나옵니다.
  -g 를 빼면 지금 폴더의 스킬만 보이므로 "없다" 고 나올 수 있습니다.

## 4. 쓰기

"코드로 영상 만들기" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.

이렇게 시켜 보세요

넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.

remotion 스킬 사용법

처음 세 번은 이 순서로 시키십시오. 지시문을 누르면 복사됩니다.

1. 인트로 로고 애니메이션을 코드로 만들어줘

   나오는 것영상을 구성하는 리액트 컴포넌트가 나옵니다. 렌더링을 해야 영상 파일이 됩니다.

   다음몇 초짜리로 짧게 렌더링해 확인하십시오. 렌더링 시간은 길이와 해상도에 비례합니다.

2. 매주 실적 숫자만 바뀌는 요약 영상 템플릿을 만들어줘

   나오는 것숫자가 들어가는 자리가 따로 분리된 템플릿이 나옵니다.

   다음다음 주에는 숫자만 바꿔 다시 렌더링합니다. 손으로 편집할 일이 없습니다.

3. 이 데이터로 30초 차트 애니메이션 영상을 만들어줘

   나오는 것데이터에 맞춰 차트가 움직이는 30초 구성이 나옵니다.

   다음한 편만 필요하면 편집 도구가 빠릅니다. 같은 형식을 수십 편 찍을 때 이 스킬이 값을 합니다. 컴포넌트를 고치려면 리액트 지식이 필요합니다.

알아 둘 것

remotion 스킬 안 될 때 확인할 것

렌더링에 시간이 걸립니다

영상 길이와 해상도에 따라 렌더링이 오래 걸릴 수 있습니다. 짧게 시험하고 늘리는 편이 안전합니다.

리액트 지식이 필요합니다

컴포넌트 구조를 이해하지 못하면 원하는 대로 고치기 어렵습니다.

언제 쓰고, 언제 안 쓰나

같은 형식의 영상을 수십 편 찍어야 한다면 손으로 만드는 것과 비교가 안 됩니다. 영상 한 편만 필요하면 직접 편집하는 편이 빠를 수 있습니다.

비슷한 것 중에 왜 이걸

algorithmic-art 와 같이 코드가 결과를 만들지만 이건 영상입니다. 데이터가 바뀌면 영상이 따라 바뀌는 구조라, 같은 형식을 수십 편 찍어야 할 때 값이 나옵니다. 한 편만 필요하면 편집 도구가 빠르고, 슬랙에 올릴 짧은 것이면 slack-gif-creator 쪽이 규격까지 맞춰 줍니다.

디자인 도구를 고를 때

Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.

원본 보기

스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.

GitHub 에서 remotion-dev/skills 열기

함께 쓰는 유료 도구

이 작업에 쓰는 장비 제휴 링크

코드와 결과를 나란히 놓고 보는 작업입니다.

27인치 4K 모니터27인치 4K IPS. 코드와 미리보기를 나란히 놓습니다.크로스오버 27USD9 iPS UHD4K 비비드 고화질 27인치 모니터, 27USD9 [무결점], 68.4cm 240,000원보기 ↗모니터암화면 높이와 각도를 손으로 조절합니다. 받침대 자리가 비워집니다.카멜마운트 폴타입 이지밸런스 싱글 스탠드 모니터암 MSS2P, 블랙, 1개 60,090원보기 ↗USB-C 독케이블 하나로 포트 12개를 씁니다.아트뮤 USB C타입 12in1 멀티허브 독 MH510, 1개, 메탈그레이 119,700원보기 ↗모니터 라이트화면 위만 비추고 화면에 반사가 없습니다.엘레센스 2in1 모니터 조명 백라이트바 스크린바 보조등, 1개, E1132 76,900원보기 ↗

이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이용자가 내는 금액은 달라지지 않습니다.

별점과 댓글

이 스킬을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.

자주 묻는 것

remotion(리모션) 스킬은 어떻게 설치합니까?

npx skills add remotion-dev/skills 한 줄입니다. 리모션을 만든 쪽에서 직접 내놓은 저장소입니다.

remotion 사용법은 어떻게 됩니까?

"인트로 로고 애니메이션을 코드로 만들어줘" 처럼 시키면 영상을 이루는 리액트 컴포넌트가 나옵니다. 렌더링을 해야 영상 파일이 됩니다. 처음에는 몇 초짜리로 짧게 렌더링해 확인하십시오. 매주 숫자만 바뀌는 영상이라면 "매주 실적 숫자만 바뀌는 요약 영상 템플릿을 만들어줘" 로 템플릿을 받고, 다음 주부터는 숫자만 바꿔 다시 렌더링합니다.

리모션으로 무엇을 만듭니까?

리액트 코드로 영상을 만듭니다. 데이터가 바뀌면 영상도 자동으로 바뀌는 구조를 짤 수 있어, 같은 형식의 영상을 수십 편 찍을 때 값이 큽니다.

리액트를 몰라도 됩니까?

어렵습니다. 컴포넌트 구조를 이해하지 못하면 원하는 대로 고치기 어렵습니다. 영상 한 편만 필요하시면 직접 편집하시는 편이 빠릅니다.

렌더링이 오래 걸립니다.

영상 길이와 해상도에 따라 오래 걸립니다. 짧게 시험해 보시고 늘리는 편이 안전합니다.

함께 보면 좋은 스킬

어느 것부터 깔지 모르겠다면 클로드 스킬 추천 15개를 보십시오. 67개를 직접 깔아 보고 골랐습니다.