편집 프로그램 없이 코드로 만드는 15초 쇼츠: 리모션과 클로드 코드 7단계

STEP 1프로젝트 만들기5분

이 단계에서는 공식 명령 한 줄로 빈 리모션 프로젝트를 만듭니다.

공식 문서의 최소 요구 사항은 Node 16(또는 Bun 1.0.3)이지만, 직접 만들어 본 빈 템플릿 프로젝트의 package.json에는 리모션 4.0.539와 함께 Node.js 버전 조건이 '^20.19.0 || ^22.13.0 || >=24'로 적혀 있었습니다. 이 템플릿으로 시작한다면 이 조건에 맞는 Node.js를 씁니다. 옵션 없이 npx create-video@latest를 실행하면 템플릿과 스킬 설치 여부를 고르는 마법사가 열립니다. 패키지 관리자는 실행한 명령에 따라 정해지므로, 다른 관리자를 쓰려면 pnpm create video, yarn create video, bun create video로 실행합니다.

npx create-video@latest --yes --blank my-video
cd my-video

STEP 2Claude Code에 리모션 스킬 붙이기5분

이 단계에서는 Claude Code가 리모션 코드를 쓸 때 참고할 공식 스킬을 프로젝트에 넣습니다.

Claude Code 플러그인으로 설치하는 방법도 있습니다. 공식 문서는 터미널에서 리모션 마켓플레이스를 추가하고 플러그인을 설치한 뒤 Claude Code를 다시 시작하라고 안내합니다. 플러그인에도 같은 스킬이 들어 있어서, 영상을 만들 폴더에서 Claude Code 새 세션을 열고 /remotion:remotion-create 뒤에 원하는 영상을 적으면 프로젝트 만들기부터 맡길 수 있습니다. 편집부는 Claude Code를 실행하지 않아서 이 플러그인 설치와 /remotion:remotion-create 호출은 해 보지 못했습니다. npx remotion skills add로 스킬 설치가 끝날 때 화면에는 스킬이 에이전트 권한 그대로 실행되니 쓰기 전에 살펴보라는 안내가 나옵니다.

npx remotion skills add

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

STEP 3세로 화면 규격 정하기3분

이 단계에서는 릴스·쇼츠용 세로 화면 크기와 영상 길이를 컴포지션에 적습니다.

<Composition
  id="Shorts"
  component={ShortsTitle}
  durationInFrames={450}
  fps={30}
  width={1080}
  height={1920}
/>

STEP 4Claude Code에게 장면 맡기기10분

이 단계에서는 장면 구성과 문구, 지켜야 할 규칙을 한 번에 적어 Claude Code에게 코드를 맡깁니다.

편집부는 Claude Code를 실행하지 않았고, 이 글의 데모는 아래 프롬프트와 같은 조건으로 편집부가 직접 쓴 코드로 만들었습니다. Claude Code가 이 프롬프트로 같은 결과를 내는지는 확인하지 못했습니다. 코드에는 리모션 기본 기능인 Sequence, interpolate, spring, useCurrentFrame만 썼습니다. 한글 글꼴은 컴퓨터마다 설치된 것이 달라서, 데모는 작업 환경(리눅스)에 있던 Noto Sans CJK 글꼴로 렌더링됐습니다. 어느 컴퓨터에서나 같은 글꼴로 뽑으려면 공식 문서가 안내하는 @remotion/google-fonts 패키지로 글꼴을 불러오는 방법이 있습니다. 패키지에는 Noto Sans KR과 'korean' 서브셋이 들어 있지만, 렌더링할 때 글꼴 파일을 fonts.gstatic.com에서 받아 오므로 인터넷이 막힌 곳에서는 쓸 수 없고, 편집부도 이 방법으로 렌더링해 보지는 못했습니다. 인터넷 없이 쓰려면 글꼴 파일을 public/ 폴더에 넣고 @remotion/fonts의 loadFont()로 불러옵니다.

STEP 5스튜디오에서 미리 보고 고치기5분

이 단계에서는 리모션 스튜디오를 열어 장면과 타이밍을 브라우저에서 확인합니다.

스튜디오 창을 닫아 버렸다면 npm run dev가 켜져 있는 터미널에서 s 키를 누르면 다시 열린다고 공식 문서가 안내합니다. 확인이 끝나면 그 터미널에서 Ctrl+C를 눌러 스튜디오를 끕니다.

npm run dev

STEP 6MP4로 렌더링하기5분

이 단계에서는 완성한 컴포지션을 H.264 코덱의 MP4 파일로 내보냅니다.

리모션은 렌더링에 쓸 크롬 헤드리스 셸(Chrome Headless Shell)을 프로젝트의 node_modules 안에 자동으로 내려받습니다. 회사망처럼 다운로드가 막힌 곳에서는 여기서 멈출 수 있는데, 이미 설치된 크롬이나 크로미움 경로를 --browser-executable 옵션으로 알려 주면 그 브라우저로 렌더링합니다. 이 글의 작업 환경도 다운로드가 막혀 있어서, 미리 설치된 크로미움 헤드리스 셸 경로를 지정해 렌더링했습니다. 리눅스라면 공식 문서의 리눅스 의존성 목록에 있는 라이브러리도 설치해야 합니다.

npx remotion render Shorts out/shorts.mp4

npx remotion render Shorts out/shorts.mp4 --browser-executable=[크롬 실행 파일 경로]

STEP 7결과 확인하고 썸네일 뽑기5분

이 단계에서는 렌더링한 MP4를 처음부터 끝까지 재생해 보고, 표지로 쓸 장면을 이미지 한 장으로 저장합니다.

같은 틀에 문구만 바꿔 여러 편을 만들 계획이라면 Claude Code에게 문구를 컴포지션의 defaultProps로 빼 달라고 합니다. 공식 문서에 따르면 스튜디오가 defaultProps 값을 보고 입력 칸을 만들어 주므로, 코드를 열지 않고 문구를 바꿔 볼 수 있습니다.

npx remotion still Shorts out/thumb.png --frame=60