코드로 움직이는 고퀄리티 영상을, 말로 만든다
완성하면 생기는 것
내 손으로 렌더한 MP4 영상 파일 1개 (유튜브에 바로 올릴 수 있는 화질)
Claude Pro 이상 구독필수
바이브코딩의 두뇌입니다. 최소 Claude Pro($20/월)면 충분히 시작할 수 있고, 하루에 많이 만들 계획이면 Max 요금제가 한도가 넉넉합니다. 무료 플랜으로도 맛보기는 되지만 금방 한도에 걸립니다.
컴퓨터 (윈도우 또는 맥)필수
사양은 크게 중요하지 않습니다. 인터넷이 되는 노트북이면 충분합니다.
Node.js LTS 버전필수
코드를 실행하는 엔진입니다. nodejs.org에서 'LTS'라고 적힌 안정 버전을 받습니다. 설치는 아래 1단계에서 같이 합니다.
VS Code (비주얼 스튜디오 코드)필수
무료 코드 편집기입니다. 여기에 Claude Code 확장을 깔아서 'AI와 대화하며 코딩'합니다. 마이크로소프트의 Visual Studio(유료 IDE)와는 다른 프로그램이니 이름에 주의하세요.
Remotion은 '코드로 영상을 만드는 도구'입니다. React라는 웹 기술로 화면을 그리면, 그 화면을 1초에 30장씩 이어 붙여 동영상으로 뽑아줍니다. 어렵게 들리지만, 여러분이 직접 코드를 쓰는 게 아닙니다.
여러분은 Claude에게 한국어로 '검은 배경에 노란 글씨로 제목이 떠오르는 인트로 만들어줘'처럼 말만 합니다. Claude가 코드를 작성하고, 화면 한쪽의 Remotion Studio에서 결과가 실시간으로 보입니다. 마음에 안 들면 '글씨를 더 크게', '색을 파란색으로'라고 다시 말하면 됩니다. 이게 바이브코딩입니다.
팁
이 화면 위쪽의 인트로 영상이 바로 Remotion으로 만든 것입니다. 끝까지 따라 하면 이런 영상을 직접 만들 수 있습니다.
먼저 코드를 실행할 엔진인 Node.js를 깝니다. nodejs.org에 접속해 'LTS'라고 적힌 큰 버튼을 눌러 설치 파일을 받고, 계속 '다음'을 누르면 됩니다.
설치가 끝났는지 확인합니다. VS Code를 열고 위쪽 메뉴에서 터미널 → 새 터미널(또는 Ctrl + `)을 연 다음, 아래 명령을 한 줄씩 입력하고 엔터를 칩니다.
$node -v$npm -v
v20.18.0 10.8.2
이렇게 나오면 성공
위처럼 v20.18.0 같은 버전 숫자 두 개가 나오면 성공입니다. 숫자는 달라도 됩니다. 숫자가 나온다는 것 자체가 '설치 완료'라는 뜻입니다.
오류가 나면?
VS Code를 code.visualstudio.com에서 받아 설치합니다. 그다음 왼쪽 세로 막대의 네모 4개 아이콘(확장/Extensions)을 누르고, 검색창에 'Claude Code'를 입력해 설치합니다.
설치하면 사이드바에 Claude 아이콘이 생깁니다. 클릭하고 'Sign in'을 누르면 브라우저가 열리는데, 여기서 Claude 계정으로 로그인하면 여러분의 Pro/Max 구독이 연결됩니다. 이제부터 VS Code 안에서 Claude와 대화하며 코딩합니다.
팁
Claude Code는 채팅창에 한국어로 말해도 됩니다. '왜 오류가 났어?', '이 부분 더 예쁘게'처럼 평소 말투로 시켜도 알아듣습니다.
오류가 나면?
영상 프로젝트가 들어갈 빈 폴더를 하나 만듭니다. 터미널에 아래 명령을 입력하면 바탕화면에 my-video 폴더가 생기고 그 안으로 이동합니다.
또는 탐색기에서 폴더를 직접 만든 뒤, VS Code에서 파일 → 폴더 열기로 그 폴더를 열고 터미널을 새로 열어도 됩니다. 중요한 건 '앞으로의 명령을 이 폴더 안에서 실행한다'는 점입니다.
$cd Desktop$mkdir my-video$cd my-video
주의
한글이나 띄어쓰기가 많이 들어간 경로(예: 바탕 화면\새 폴더)는 가끔 문제를 일으킵니다. 가능하면 영어 폴더명(my-video)을 권장합니다.
이제 Remotion을 설치합니다. 터미널에 아래 한 줄을 입력하고 엔터를 칩니다. 잠시 뒤 질문이 몇 개 나옵니다.
프로젝트 이름을 묻고, 템플릿을 고르라고 합니다. 화살표 키로 'Hello World (recommended)'를 선택하고 엔터를 칩니다. 그러면 필요한 파일을 자동으로 내려받아 설치합니다(1~3분).
$npx create-video@latest
┌ Welcome to Remotion! │ ◇ What would you like to call your video? │ my-video │ ◇ Choose a template │ ● Hello World (recommended) │ ◇ Installing dependencies... └ Done! Created your project.
이렇게 나오면 성공
마지막에 'Done! Created your project.' 같은 문구가 나오면 설치 성공입니다. 폴더 안에 src 같은 폴더와 여러 파일이 생겼을 겁니다.
오류가 나면?
설치한 폴더 안에서 아래 명령을 입력합니다. 이게 작업 내내 켜둘 '미리보기 화면(Remotion Studio)'을 띄우는 명령입니다.
잠시 뒤 'Server ready - Local: http://localhost:3000' 같은 줄이 보이면, 브라우저가 자동으로 열리거나 그 주소를 직접 열면 됩니다. 샘플 영상이 재생되는 스튜디오 화면이 나타납니다.
$npm run dev
> remotion studio Server ready - Local: http://localhost:3000
이렇게 나오면 성공
왼쪽에 영상 목록, 가운데에 미리보기, 아래에 재생 타임라인이 있는 화면이 Remotion Studio입니다. 여기서 앞으로 만든 영상을 즉시 확인합니다.
팁
이 터미널 창은 작업하는 동안 끄지 마세요. 끄면 미리보기가 멈춥니다. 새 명령이 필요하면 터미널을 하나 더 열면 됩니다.
오류가 나면?
이제 VS Code의 Claude 채팅창에 만들고 싶은 영상을 말로 설명합니다. 처음부터 거창하게 말고, 한 장면씩 시킵니다. 예를 들어:
"검은 배경 가운데에 'VibeCampus'라는 흰색 큰 제목이 서서히 떠오르고, 그 아래 노란색 부제가 따라 나오는 5초짜리 인트로 장면을 만들어줘."
Claude가 src 폴더의 파일을 수정하면, 켜둔 Remotion Studio가 자동으로 새로고침되며 결과가 바로 보입니다. 마음에 안 들면 '제목을 더 크게', '배경에 보라색 빛 번짐 추가', '부제 폰트를 더 두껍게'처럼 계속 다듬으면 됩니다. 이 반복이 바이브코딩의 전부입니다.
팁
한 번에 하나씩 바꾸세요. '제목 크게 + 색 바꾸고 + 음악 넣고'를 한꺼번에 시키면 어디가 바뀌었는지 보기 어렵습니다. 작게 시키고, 확인하고, 또 시키는 리듬이 가장 빠릅니다.
오류가 나면?
영상이 마음에 들면 진짜 동영상 파일로 뽑습니다(렌더링). 터미널을 하나 더 열어(스튜디오는 켜둔 채) 아래 명령을 입력합니다. MyVideo 자리에는 스튜디오 왼쪽 목록에 보이는 영상 이름을 넣습니다.
--crf=12 는 화질 설정입니다. 숫자가 낮을수록 고화질이며, 이 채널은 12로 고정해 최고 수준의 화질로 뽑습니다. 진행률이 100%가 되면 out 폴더 안에 video.mp4가 생깁니다.
$npx remotion render MyVideo out/video.mp4 --codec=h264 --crf=12 --pixel-format=yuv420p
Bundling video... 100% Rendering frames... 100% (900/900) Encoding... 100% + out/video.mp4 (24.1 MB)
이렇게 나오면 성공
마지막에 '+ out/video.mp4' 같은 줄과 파일 용량이 보이면 완성입니다. 그 파일을 더블클릭해 재생해 보고, 그대로 유튜브에 올리면 됩니다.
팁
세로 쇼츠(1080×1920)가 필요하면, 가로 영상을 만든 뒤 ffmpeg로 잘라 위아래에 흐린 배경을 채우는 방법을 Claude에게 물어보세요. 이 채널도 그렇게 쇼츠를 만듭니다.
오류가 나면?
축하합니다. 코드 한 줄 직접 안 쓰고 고화질 영상을 만들고 뽑았습니다. 이게 진짜 바이브코딩입니다.
다음엔 자막, 배경음악(BGM), 효과음, 장면 전환, 데이터 차트 애니메이션까지 전부 같은 방식으로 시켜볼 수 있습니다. 만든 영상은 VibeCampus 스튜디오나 런치패드에 올려 다른 바이브코더들과 공유해 보세요.
