Claude Code와 Remotion으로 전문 모션 그래픽 영상을 제작하는 방법 (편집 없음)

AAndy Lo
컴퓨터/소프트웨어창업/스타트업사진/예술AI/미래기술

Transcript

00:00:00우리가 제작한 이 설명 영상을 한번 보세요.
00:00:02붉은 행성 화성, 수세기 동안 인류의 마음을 사로잡아 온 세상입니다.
00:00:08태양에서 네 번째로 떨어진 행성으로, 우리 태양계에서 지구 바로 너머에 위치해 있죠.
00:00:14이 영상은 애프터 이펙트로 편집한 게 아닙니다.
00:00:16키프레임을 건드리지도 않았고, 어떤 것도 수작업으로 애니메이션화하지 않았습니다.
00:00:21새로운 Remotion Agent 스킬을 사용해 Claude를 호출했고, Claude가 우리를 위해 영상을 빌드하고 렌더링해 주었습니다.
00:00:26모션, 타이밍, 그 모든 것이 그저 프롬프팅만으로 완성되었습니다.
00:00:30하지만 먼저, Claude 스킬에 대해 알아봅시다.
00:00:33최근 AI 트렌드를 따라오셨다면, Claude 스킬이 현재 가장 뜨거운 주제라는 걸 아실 겁니다.
00:00:38모두가 이것에 대해 이야기하고 있지만, 실제로 무엇인지 설명해 드릴게요.
00:00:43Claude에게 특정 도구와 워크플로우를 마스터하는 법을 가르치는 지침서라고 보시면 됩니다.
00:00:49Claude를 일반적인 비서에서 특정 분야의 전문가로 변화시켜 주는
00:00:54영상 제작, 데이터 분석, 자동화와 같은 도메인의 전문 지식 팩입니다.
00:01:00이 스킬들을 Claude Code 및 Anthropic의 에이전트 코딩 도구와 결합하면,
00:01:05강력한 무언가가 탄생합니다.
00:01:07이제 Remotion을 살펴봅시다.
00:01:09현대적인 웹사이트를 구동하는 기술인 React 코드를 사용하여 영상을 만들 수 있게 해주는 프레임워크입니다.
00:01:13웹사이트를 만드는 것과 같은 기술이죠.
00:01:15하지만 문제가 하나 있습니다.
00:01:16Remotion은 매우 강력하지만 동시에 복잡하다는 점입니다.
00:01:20React, 애니메이션 라이브러리, 타이밍 함수, 그리고 영상 렌더링에 대한 이해가 필요합니다.
00:01:26대부분의 사람들에게는 접근하기 어려운 개발자용 도구였죠.
00:01:30그래서 이 Remotion Agent 스킬이 게임 체인저가 되는 것입니다.
00:01:33이 스킬은 Claude에게 Remotion 프레임워크 전체에 대한 깊은 지식을 제공합니다.
00:01:37컴포지션을 구성하는 법, 애니메이션을 연출하는 법,
00:01:41타이밍 관리, 에셋 처리 등 모든 것을 포함해서요.
00:01:45이제 Claude는 영상 코드를 추측하는 대신, 프레임워크를 이해하게 되었습니다.
00:01:50전문 Remotion 개발자처럼 말이죠.
00:01:53이것은 개발자들이 영상을 자동 생성할 때 이미 사용하고 있는 설정과 동일합니다.
00:01:58그리고 이 영상이 끝날 때쯤이면,
00:02:00여러분은 프롬프트만으로 전문적인 모션 그래픽을 디렉팅할 수 있게 될 것입니다.
00:02:04그럼 시작해 봅시다.
00:02:05우선 Remotion Claude 스킬을 설치해야 합니다.
00:02:08설치를 위해 여기에 있는 명령어를 입력하겠습니다.
00:02:11이 명령어는 Remotion 웹사이트 도구에서 찾으실 수 있습니다.
00:02:14스페이스를 눌러 목록의 모든 모델을 선택한 다음 엔터를 칩니다.
00:02:19프로젝트에 Claude 스킬이 설치되면,
00:02:22Claude Code 터미널을 열고 새로운 Remotion 프로젝트를 시작하라고 요청합니다.
00:02:28설정이 완료될 때까지 잠시 기다려 봅시다.
00:02:30이제 프로젝트와 템플릿 설정이 모두 끝났습니다.
00:02:38안내에 따라 Remotion Studio를 실행해 보세요.
00:02:42어떻게 보이는지 확인해 볼까요? 좋네요.
00:02:45이것이 Remotion의 모습입니다.
00:02:46영상 편집 앱 같지만, 각 장면을 프로그래밍하는 방식이죠.
00:02:51프로젝트 설치를 마치고 Remotion이 어떻게 작동하는지 알았으니,
00:02:56본격적인 개발로 들어가 보겠습니다.
00:02:59개발 과정은 총 9단계로 이루어집니다.
00:03:021단계에서 3단계는 Claude가 작동할 시스템을 구축합니다.
00:03:074단계에서 7단계는 에셋을 만들고 사용할 수 있는 컴포넌트를 정의합니다.
00:03:13마지막 8단계와 9단계는 실행 단계입니다.
00:03:16그럼 진행해 보죠.
00:03:19당연히 1단계부터 시작합니다.
00:03:21모든 설치를 마쳤으니,
00:03:25우리가 이 영상을 위해 특별히 제작한 빌드 가이드를 열어보겠습니다.
00:03:29이 빌드 가이드는 특정 영상을 제작하기 위한 것이지만,
00:03:35프롬프트의 작동 원리만 이해하면 다른 영상을 만들 때도
00:03:39이 가이드를 변형해서 활용할 수 있습니다.
00:03:42이 프롬프트 복사본이 필요하시다면,
00:03:44이런 가이드들을 업로드하는 저희 무료 커뮤니티를 확인해 보세요.
00:03:48여러분도 AI로 직접 빌드해 보실 수 있습니다.
00:03:511단계 프롬프트를 복사해서 Claude Code에 붙여넣습니다.
00:03:56그리고 엔터를 누릅니다.
00:03:57이 프롬프트는 Claude가 개발 과정 내내 따라야 할
00:04:02기술적 토대를 구축하는 역할을 합니다.
00:04:06Claude가 준수해야 할 규칙과 패턴이라고 생각하시면 됩니다.
00:04:09이 작업은 매우 중요합니다. 대부분의 프로젝트가 실패하는 이유는
00:04:13시각적인 방향성이 부족해서가 아니라,
00:04:16AI에게 구체적인 규칙을 주지 않아 AI가 제멋대로 행동하기 때문입니다.
00:04:231단계가 완료되면 이런 모습이 됩니다.
00:04:27그리고 개발 마크다운 파일이 생성될 것입니다.
00:04:31Claude가 기초 공사를 마쳤습니다.
00:04:34이제 다음 단계인 2단계로 넘어갈 수 있습니다.
00:04:37이제 이 영상의 아트 디렉션과 비주얼 시스템을 구축해 보겠습니다.
00:04:42이것은 워크플로우에서 정말 중요한 단계입니다.
00:04:46지금까지는 환경을 설정하고 Claude가 Remotion을 이해하는지 확인했습니다.
00:04:52여기서 하는 일은 실제 코드를 쓰기 전에 Claude가 시각적으로 사고하는 법을 가르치는 것입니다.
00:05:00다시 빌드 가이드를 열어주세요.
00:05:032단계라고 표시된 섹션이 보일 겁니다.
00:05:05해당 프롬프트 전체를 있는 그대로 복사하세요.
00:05:10그런 다음 터미널의 Claude Code로 돌아갑니다.
00:05:15프롬프트를 붙여넣고 엔터를 누릅니다.
00:05:17잠시 Claude가 처리하도록 두겠습니다.
00:05:21여기서 잠시 멈추고 왜 이 프롬프트가 중요한지 설명하고 싶네요.
00:05:25많은 분이 이 단계를 건너뛰거나 모든 것을 과하게 통제하려고 하기 때문입니다.
00:05:30이 프롬프트는 아직 Claude에게 전체 영상을 만들라고 요청하는 것이 아닙니다.
00:05:35시스템적인 사고를 정립하는 단계입니다.
00:05:39Claude가 빌드할 세상의 규칙을 정의하는 것과 같죠.
00:05:43지시사항이 아니라 크리에이티브 디렉션이라고 생각하시면 됩니다.
00:05:46전반적인 톤, 시각적 제약 사항,
00:05:52모션의 느낌, 명시되지 않은 부분에 대한 디자인 결정 방식 등을 Claude에게 알려주는 것입니다.
00:06:00이게 왜 중요하냐면, 우리가 영상의 모든 픽셀을 일일이 설명할 수는 없기 때문입니다.
00:06:07그건 불가능한 일이죠.
00:06:08동시에 Claude가 마음대로 추측하거나 우리 스타일과 전혀 맞지 않는 패턴을 만드는 것도 원치 않습니다.
00:06:15그래서 이 프롬프트는 마이크로매니징 없이도 통제력을 갖게 해줍니다.
00:06:19Claude가 작동할 수 있는 프레임워크를 제공하는 것이죠.
00:06:22이제 Claude는 "깔끔함"이나 "현대적임"이 무엇인지 추측하는 대신, 우리와 공유된 정의를 갖게 됩니다.
00:06:29환각 현상을 일으키는 대신, 기술적인 스킬과
00:06:33창의적인 가이드라인을 모두 갖추고 올바르게 작업하게 됩니다.
00:06:36엔터를 누르고 Claude가 처리할 때까지 기다려 봅시다.
00:06:39좋습니다, Claude가 작업을 마치면 아트 디렉션 파일이 생성된 것을 볼 수 있습니다.
00:06:44향후의 결정을 어떻게 내리고 실행해야 할지 요약된 파일이죠.
00:06:48실제 개발 단계에 들어갔을 때, 이 부분에서 피드백을 주고받는 것을 주저하지 마세요.
00:06:55여러분이 원하는 아트 디렉션이 프로젝트에 반영되어야 하니까요.
00:06:58Claude에게 수정이나 추가를 요청해야 할 수도 있습니다.
00:07:02그렇게 하면 워크플로우의 다음 단계가 열립니다.
00:07:07이제 여러분과 AI 사이에 공유된 시각적 언어가 생겼습니다.
00:07:12Claude는 컴포지션이나 시퀀스를 작성하기 전부터 이 영상에 대해 어떻게 생각해야 할지 알게 된 것이죠.
00:07:18이건 정말 큰 진전입니다.
00:07:19지금까지 아트 디렉션과 시각적 제어 시스템을 성공적으로 구축했습니다.
00:07:24아직 영상을 직접 만든 건 아닙니다.
00:07:26하지만 결과물을 예측 가능하고 전문적으로 만들어 줄 토대를 마련했습니다.
00:07:31아트 디렉션이 확정되었으니, 다음으로 할 일은 영상의 스토리를 짜는 것입니다.
00:07:37이 단계에서 필요한 시스템이 완성됩니다.
00:07:40영상의 느낌을 정의하는 것에서 나아가, 매 순간 어떤 일이 일어날지 정의하는 단계로 넘어가는 것이죠.
00:07:47목표는 아주 간단합니다.
00:07:49장면, 흐름, 그리고 타이밍을 정의하는 것입니다.
00:07:52애니메이션을 만들기 전에 영상의 맥락이 맞는지 확인하는 거죠.
00:07:56자, 다시 빌드 가이드로 가서 3단계 프롬프트를 찾습니다.
00:08:02전체를 복사하세요.
00:08:03복사가 끝났으면 다시 Claude Code로 돌아갑니다.
00:08:08프롬프트를 붙여넣고 엔터를 누릅니다.
00:08:10이제 Claude가 처리하기를 기다립니다.
00:08:13Claude는 앞서 정의한 아트 디렉션을 바탕으로 타임라인을 만들고 있습니다.
00:08:18몇 개의 장면이 필요한지, 각 장면의 역할은 무엇인지,
00:08:23그리고 각 순간이 화면에 얼마나 머물러야 할지 결정하고 있죠.
00:08:27이 과정을 통해 10초든 60초든 영상이
00:08:32무작위하거나 조급해 보이지 않고 의도된 대로 느껴지게 만들 수 있습니다.
00:08:36Claude가 작업을 마치면 장면별 분석 내용이 보일 겁니다.
00:08:40각 장면은 명확한 역할을 가지고 있습니다.
00:08:43보통 오프닝 훅, 메인 메시지 섹션, 보조 장면, 그리고 클로징으로 구성되죠.
00:08:52이것은 사실상 텍스트로 작성된 스토리보드입니다.
00:08:56시각 자료 대신 텍스트로 표현된 스토리보드 같은 것이죠.
00:09:02이 시점에서 Claude에게 수정을 요청할 수 있습니다.
00:09:05어떤 장면이 의도와 맞지 않는 것 같으면 그렇게 말하면 됩니다.
00:09:10순서를 바꾸거나 특정 섹션을 완전히 삭제하고 싶다면 지금이 적기입니다.
00:09:15여기서 많이들 막히시곤 하는데요.
00:09:17첫 번째 결과물을 무조건 받아들여야 한다고 생각하시더라고요.
00:09:20전혀 그럴 필요 없습니다.
00:09:21함께 만들어가는 초안이라고 생각하세요.
00:09:25그게 다입니다.
00:09:27이번 경우에는 구조가 탄탄해 보이네요, 그렇죠?
00:09:30호흡도 적절하고 장면 연결도 논리적이며 목표한 길이에도 잘 맞습니다.
00:09:37더 이상의 수정 대신 Claude에게 진행 신호를 주겠습니다.
00:09:41그냥 Claude에게 진행하라고 말하고
00:09:45이 구조를 바탕으로 스토리보드 파일을 만들라고 하면 됩니다.
00:09:48그러면 Claude는 영상의 전체 타임라인을 나타내는
00:09:52전용 파일을 생성할 것입니다.
00:09:55이 파일은 우리가 앞으로 빌드할 작업의 단일 정보 소스가 됩니다.
00:10:00이렇게 해서 영상의 스토리가 확정되었습니다.
00:10:04무엇이 언제, 왜 일어나는지 이제 우리는 알고 있습니다.
00:10:08아직 애니메이션은 없지만, 가장 어려운 창의적 결정은 끝난 셈입니다.
00:10:13스토리보드가 완성되었으니 4단계인
00:10:18에셋 인벤토리 정의 단계로 넘어가겠습니다.
00:10:20처음에는 선택 사항처럼 느껴질 수도 있는 단계지만,
00:10:24pero en realidad es fundamental si quieres resultados limpios y consistentes.
00:10:28목표는 단순합니다. 어떤 에셋이 필요한지 정의하고,
00:10:33애니메이션을 만들거나 배치하기 전에 그 에셋들이 어떻게 보여야 할지 정하는 것입니다.
00:10:38이 단계는 디자인 결정과 장면 로직을 분리해 주기 때문에 매우 결정적입니다.
00:10:44이런 분리가 나중에 작업이 꼬이는 것을 막아줍니다.
00:10:48이게 왜 중요한지 설명해 드릴게요.
00:10:50만약 Claude에게 에셋을 디자인하고, 어떻게 보일지 결정하고,
00:10:54그게 장면 어디에 들어갈지까지 한꺼번에 시킨다면,
00:10:59한 단계에 너무 많은 결정을 몰아넣는 것이고, 거기서 실패가 발생합니다.
00:11:04일관성이 없고 좋지 않은 결과가 나오게 되죠.
00:11:07자, 다시 빌드 가이드로 가서 4단계 프롬프트를 복사합니다.
00:11:11복사가 완료되면 Claude 터미널에 붙여넣고 엔터를 누릅니다.
00:11:17이제 Claude가 처리하는 동안 기다려 봅시다.
00:11:19작동되는 동안 이 프롬프트가 뒤에서 무엇을 하고 있는지 설명해 드릴게요.
00:11:24아직 비주얼을 만드는 건 아닙니다.
00:11:25우리가 필요로 할 각 에셋에 대한 디자인 파라미터를 정의하고 있는 겁니다.
00:11:29객체나 색상 사용법 같은 것들 말이죠.
00:11:33여기서 흔히 하는 실수는 이 단계를 건너뛰고 각 장면이 에셋을 알아서 만들게 하는 것입니다.
00:11:39그러면 장면마다 따로 노는 느낌이 들고 통일감이 없는 영상이 되고 맙니다.
00:11:45Claude가 작업을 마치면 명확하게 구성된 에셋 인벤토리 파일이 생성됩니다.
00:11:53각 에셋은 이름과 정의된 파라미터를 갖게 되죠.
00:11:57이 시점에서는 빠진 게 있거나 불필요한 게 있지 않은 이상 크게 바꿀 건 없습니다.
00:12:04추가하거나 변경하고 싶은 게 있다면 Claude에게 요청하세요.
00:12:10이렇게 해서 에셋 목록과 이를 규정하는 디자인 시스템이 완성되었습니다.
00:12:17이는 곧 Claude가 Remotion 컴포넌트를 생성하기 시작할 때,
00:12:22어떻게 보일지 추측할 필요가 없다는 뜻입니다.
00:12:25이 인벤토리에서 직접 정보를 가져올 테니까요.
00:12:28에셋 사양이 확정되었으니 5단계로 넘어가겠습니다.
00:12:33바로 에셋 자체를 실제로 생성하는 단계입니다.
00:12:36영상 전체에 사용될 구체적인 요소들을 이제 제작할 것입니다.
00:12:42자, 지금까지 우리는 의도적으로 관심사를 분리해 왔습니다.
00:12:48시스템 정의, 아트 디렉션, 스토리보드, 그리고 방금 에셋 사양까지 말이죠.
00:12:56이제 이 단계에서는 정의된 것들을 책임의 혼선 없이 실제 사용 가능한 에셋으로 변환합니다.
00:13:04덕분에 Claude Code는 매우 명확한 지침과 컨텍스트를 가지고 개발에 임할 수 있습니다.
00:13:10이 방식이 신뢰도가 높은 이유이기도 하죠.
00:13:13그럼 같이 살펴봅시다.
00:13:15빌드 가이드에서 5단계 프롬프트를 가져와 Claude 터미널에 붙여넣습니다.
00:13:20하지만 엔터를 누르기 전에 중요한 점이 있습니다.
00:13:23다양한 카테고리의 에셋이 많은 대규모 프로젝트를 할 때는,
00:13:29카테고리별로 일괄 생성(batch)하는 것이 좋습니다.
00:13:33프롬프트에 한 번에 한 가지 에셋 카테고리만 생성하라는
00:13:37규칙을 추가하는 방식이죠.
00:13:40이렇게 하면 AI가 환각 현상을 일으킬 확률을 줄여주고,
00:13:45서로 다른 에셋 간에 스타일이 어긋날 위험을 낮춰줍니다.
00:13:49우리의 경우, 이번 영상은 에셋 인벤토리가 그리 크지 않습니다.
00:13:53그래서 한 번에 모든 것을 생성하도록 하겠습니다.
00:13:57프로젝트 규모가 커질수록 일괄 처리가 최선이라는 점만 알아두세요.
00:14:03자, 이 부분은 보통 시간이 좀 걸리니 인내심을 갖고 기다려 주세요.
00:14:08완료되면 잠시 결과물을 훑어보며 필요한 에셋이 모두 있는지 확인합니다.
00:14:15보통은 모든 파일이 SRC 폴더에 들어 있을 거예요.
00:14:20이렇게 해서 바로 사용할 수 있는 생성된 에셋 세트가 준비되었습니다.
00:14:25이제 이것들은 더 이상 추상적인 아이디어가 아닙니다.
00:14:28여러 장면에 걸쳐 재사용될 실제 빌딩 블록들이죠.
00:14:32이것이 바로 우리가 원하는 영상의 일관성을 만들어 줍니다.
00:14:36모든 에셋이 완성되었으니, 다음 단계는 생동감을 불어넣는 것입니다.
00:14:41이것이 6단계이며, 각 에셋이 어떻게 움직일지 정의하는 것이 목표입니다.
00:14:47아직 최종 장면은 아니고요, 어디서나 재사용될 모션의 기본 요소를 만드는 겁니다.
00:14:53이를 '모션 프리미티브(Motion Primitives)'라고 생각하시면 됩니다.
00:14:56기본적으로 영상 전체에 사용할 공통의 모션 언어를 만드는 과정이죠.
00:15:01빌드 가이드에서 6단계 프롬프트를 복사해 Claude Code에 붙여넣으세요.
00:15:07여기서 중요한 사고방식의 전환이 필요합니다.
00:15:10너무 기술적일 필요는 없다는 점입니다.
00:15:13모든 키프레임을 나열하거나 애니메이션을 상세히 설명하지 않아도 됩니다.
00:15:18그 이유는 우리가 이전에 해둔 작업 덕분입니다.
00:15:23초기 단계에서 Claude가 어떻게 사고해야 할지 이미 설정했으니까요.
00:15:28마크다운 파일들을 통해 개발 규칙, 패턴, 시각적 원칙, 스토리텔링,
00:15:33그리고 디자인 제약 사항들을 이미 정의해 두었습니다.
00:15:37덕분에 Claude는 우리가 지향하는 스타일, 속도감, 톤을 깊이 이해하고 있습니다.
00:15:44따라서 이제는 Claude가 프로젝트 전체를 평가하고
00:15:48합리적인 모션 패턴을 제안하도록 믿고 맡길 수 있습니다.
00:15:50프롬프트를 붙여넣었다면 엔터를 누르세요.
00:15:55Claude가 에셋을 분석하고 모션 프리미티브를 생성하기 시작할 겁니다.
00:15:58이 단계에서 흔히 하는 실수가 과도하게 통제하려는 것입니다.
00:16:02모션을 하나하나 세세하게 간섭하려다 보면,
00:16:05특정 장면에만 국한된 움직임이 모션 시스템에 고착될 수 있습니다.
00:16:10그러면 나중에 재사용하기가 더 어려워지죠.
00:16:13대신 우리는 영상 전체에서 일관되게 느껴지는
00:16:17유연하고 범용적인 모션 패턴을 목표로 합니다.
00:16:21그렇다고 Claude가 처음부터 모든 걸 완벽하게 해낸다는 뜻은 아닙니다.
00:16:25그래도 괜찮습니다.
00:16:26첫 시도에 결점 없는 모션을 기대하는 게 우리의 역할은 아니니까요.
00:16:31우리의 역할은 튼튼한 기준점을 잡는 것입니다.
00:16:34나중에 장면 결과물을 확인하면서 특정 부분을 다듬고 다듬을 시간은 충분합니다.
00:16:39잠시 처리가 끝나면 Claude가 작업을 마칩니다.
00:16:42자, 이제 프로젝트를 위한 모션 프리미티브 세트가 정의되었습니다.
00:16:47이들은 재사용 가능하고 일관성이 있으며, 우리가 앞서 구축한
00:16:52시각적 및 서사적 시스템과도 잘 맞물립니다.
00:16:54정말 큰 고비를 넘겼네요.
00:16:57에셋도 확보했고, 모션도 준비되었습니다.
00:17:00이제 이 모든 걸 영상으로 만드는 일만 남았습니다.
00:17:04이제 7단계와 8단계입니다.
00:17:06이 부분은 기본적으로 모든 요소를 하나로 묶는 과정입니다.
00:17:09이 프롬프트가 Claude에게 요청하는 작업 중 일부는
00:17:12이미 초기 단계에서 고려되었을 가능성이 높습니다.
00:17:17그럼에도 불구하고 필요한 구성 요소를 생성하고
00:17:22누락된 부분이 없는지 확인하기 위해 이 단계를 실행하는 것이 중요합니다.
00:17:25Claude Code 터미널에서 실행하되,
00:17:28이미 완료된 작업은 건너뛰도록 Claude에게 요청하세요.
00:17:31좋습니다, 이제 모든 준비가 끝났으니,
00:17:34드디어 장면을 구축하고 영상을 조립할 차례입니다.
00:17:40이것이 9단계입니다.
00:17:42솔직히 말씀드리면, 전체 워크플로우 중에서 이 부분이 가장 쉽습니다.
00:17:46어려운 고민은 이미 다 끝냈기 때문이죠.
00:17:50조금만 더 힘내봅시다.
00:17:51이 시점에서 Claude는 더 이상 추측하지 않습니다.
00:17:54우리가 정교하게 설정한 시스템 안에서 실행만 할 뿐이죠.
00:17:57목표는 아주 간단합니다.
00:17:59각 장면의 코드를 생성하고,
00:18:02어떻게 보이는지 검토한 뒤,
00:18:05모든 것을 매끄럽고 완성도 높은 하나의 최종 영상으로 합치는 것입니다.
00:18:10먼저 빌드 가이드에서 9단계 프롬프트를 복사해
00:18:13Claude 터미널에 붙여넣고 엔터를 누르세요.
00:18:17이 프롬프트는 Claude에게 우리가 지금까지 만든
00:18:21모든 것들을 활용해서 실제 모션 장면을
00:18:23만들기 시작하라고 지시합니다.
00:18:26아트 디렉션, 스토리보드, 에셋,
00:18:29그리고 모션 프리미티브가 여기서 하나로 합쳐집니다.
00:18:32이상적으로는, 특히 큰 프로젝트일수록
00:18:35장면을 하나씩 생성하는 것이 좋습니다.
00:18:38그래서 프롬프트도 그렇게 설계했습니다.
00:18:41비록 1분 30초짜리 짧은 영상일지라도,
00:18:45이런 모범 사례를 일찍 익혀두면 나중에 큰 도움이 됩니다.
00:18:49장면을 개별적으로 생성하면,
00:18:52전체 영상을 망가뜨리지 않고도 디버깅과 수정을
00:18:55반복하며 특정 부분을 고치기가 훨씬 쉽습니다.
00:18:591번 장면이 완료되면 다음 장면들을 순차적으로 생성합니다.
00:19:04모두 끝난 후에는 우리가 무엇을 만들었는지 실제로 확인해 봐야겠죠.
00:19:08Claude에게 Remotion Studio를 실행해달라고 하면
00:19:10접속 URL을 알려줄 겁니다.
00:19:12아니면 터미널에서 `npm start`를 직접 입력해도 됩니다.
00:19:16이제 Remotion Studio 안으로 들어왔습니다. 재생 버튼을 눌러보죠.
00:19:21모든 장면에 걸쳐 아트 디렉션과 시각적 스타일이
00:19:24일관되게 유지되는 것을 즉시 확인할 수 있습니다.
00:19:28정말 좋은 신호네요.
00:19:29영상이 약간 밋밋하게 느껴질 수도 있지만, 그건 지극히 정상입니다.
00:19:34지금은 장면만 만든 상태이고, 아직 영상 조립이나
00:19:38전환 효과(transition)를 세밀하게 다듬지 않았으니까요.
00:19:42여기서부터는 다시 Claude Code로 돌아가
00:19:45관찰한 문제점들을 제기하고 개선하고 싶은 점을 정확히 말해주면 됩니다.
00:19:50장면이 어떻게 움직여야 할지 세부적인 파라미터를 알려주는 식이죠.
00:19:56여기서 사용한 정확한 프롬프트 자체가 중요한 건 아닙니다.
00:19:58각 섹션마다 여러분의 결과물은 제 것과 다를 수 있습니다.
00:20:04여기서 사용한 정확한 프롬프트는 그렇게 중요하지 않습니다.
00:20:07결과물은 제 것과 여러분의 것이 서로 다를 수 있어요.
00:20:10그건 오히려 좋은 현상입니다. 이때부터 여러분만의
00:20:14작업물을 다듬고 디버깅하는 기술이 길러지기 시작하거든요.
00:20:17더 이상 단순히 프롬프트를 따라가는 게 아니라,
00:20:20스스로 최종 판단을 내리게 되는 겁니다.
00:20:22수정이 끝나고 영상을 다시 확인해 봅니다.
00:20:25보세요, 모든 게 훨씬 짜임새 있어졌죠.
00:20:28움직임은 깔끔해졌고, 장면 전환도 좋아졌으며,
00:20:31영상이 기계적인 느낌을 벗어나 의도된 연출처럼 보이기 시작합니다.
00:20:35자, 하지만 여기서 끝이 아닙니다.
00:20:37마지막 레이어인 성우 내레이션과 배경 음악이 남았습니다.
00:20:41이를 위해 11 Labs SDK를 사용하겠습니다.
00:20:44이 부분은 빠르게 진행하죠.
00:20:4611 Labs 공식 문서로 이동해서
00:20:49여러분의 환경에 맞는 명령어를 가져오세요.
00:20:52우리는 Node.js를 사용하고 있으니 해당 버전을 사용하겠습니다.
00:20:56Claude에게 명령어를 실행하고 내레이션과 음악을 위한 11 Labs 연동 설정을 요청하세요.
00:21:03그러면 Claude가 .env 파일을 생성해 줄 것이고, 거기에 11 Labs API 키를 붙여넣으면 됩니다.
00:21:09그 후 Claude에게 우리가 만든 영상에 맞는
00:21:13내레이션 스크립트를 생성해달라고 하세요.
00:21:16모든 연결 작업이 끝나면, 결과물을 다시 확인해 봅시다.
00:21:20화성, 붉은 행성, 수 세기 동안 인류를 매료시켜 온 세상입니다.
00:21:27태양계에서 지구 바로 너머에 위치한 네 번째 행성입니다.
00:21:31가장 가까울 때 화성은 지구에서 2억 2,500만 킬로미터 떨어져 있습니다.
00:21:37우주선으로 7개월이나 걸리는 여정이죠.
00:21:41인내심을 두둑이 챙겨야겠네요.
00:21:42화성은 지구 크기의 절반 정도지만, 매력만큼은 결코 뒤지지 않습니다.
00:21:48화성의 하루는 24시간 37분으로 지구와 거의 비슷합니다.
00:21:54하지만 1년은 지구 기준으로 687일, 즉 우리 시간으로 거의 2년이 걸립니다.
00:22:01대기는 지구의 1% 수준으로 매우 희박합니다.
00:22:05우주복은 필수겠죠.
00:22:07왜 이렇게 붉게 보일까요?
00:22:09산화철, 즉 녹이 표면을 덮고 있어 화성 특유의 색깔을 띱니다.
00:22:15화성에는 태양계 최대 화산인 올림푸스 산이 있는데,
00:22:19에베레스트보다 세 배나 높습니다.
00:22:21그리고 양극에는 얼음이, 지하에는 물이 숨겨져 있을 가능성이 있어,
00:22:27미래 탐사의 핵심 열쇠가 될 것입니다.
00:22:29우리는 이미 소저너, 스피릿, 오퍼튜니티, 큐리오시티, 퍼서비어런스까지 다섯 대의 로버를 보냈습니다.
00:22:37언젠가 인류는 화성에 발을 내딛고,
00:22:40기지를 세우고 깃발을 꽂으며 그곳을 제2의 고향이라 부를 것입니다.
00:22:45화성이 기다립니다!
00:22:46자, 이것이 우리가 만든 화성 설명 영상의 모습입니다.
00:22:51완전히 구축되고 세련되며 깔끔하고 전문적인 설명 영상이죠.
00:22:56단순한 추측이 아닌 체계적인 시스템을 통해 만들어졌습니다.
00:22:59스토리텔링도 훌륭하고, 시각적 요소와 장면 전환도 매끄럽습니다.
00:23:05내용 전달도 좋고, 비주얼과 트랜지션이 아주 부드럽게 이어지네요.
00:23:12자, 잠시 뒤로 물러나 우리가 방금 무엇을 했는지 살펴봅시다.
00:23:16빈 폴더에서 시작해 완전히 렌더링된 전문적인 영상을 만들어냈습니다.
00:23:22애프터 이펙트도, 타임라인도, 키프레임 노가다도 없었습니다.
00:23:26Claude Code, Remotion, Agent Skills를 하나의 시스템으로 활용했죠.
00:23:32모든 조각을 수동으로 만드는 대신 결과를 '디렉팅'한 것입니다.
00:23:38이것은 여러분이 지금 당장 게시하거나 배포하고 워크플로우에 적용할 수 있는 실제 자산입니다.
00:23:44이것이 이번 과정의 핵심 포인트입니다.
00:23:47AI가 단순히 빨라졌다는 게 아니라, 이 도구들이 서로 협력한다는 사실이죠.
00:23:52Claude Code가 Remotion을 이해하고 적시에 지식을 주입할 수 있을 때,
00:23:59여러분은 더 이상 1인 크리에이터가 아니라 작은 팀처럼 일하게 됩니다.
00:24:05이것이 바로 AI를 '사용'하는 단계에서 AI로 '구축'하는 단계로의 전환입니다.
00:24:09이제 여러분은 단순히 영상을 만드는 것이 아니라 시각적 시스템을 구축하는 것입니다.
00:24:14분위기를 바꾸고 데이터를 교체하며 새로운 버전을 생성해 누구의 도움 없이도 출시할 수 있습니다.
00:24:21이러한 방식은 창의성을 대체하는 것이 아니라 오히려 증폭시켜 줍니다.
00:24:26이 워크플로우를 익히면 제품 데모, 소셜 클립,
00:24:30클라이언트 작업 등 무엇이든 원하는 대로 만들어낼 수 있습니다.
00:24:34더 깊이 배우고 싶다면 AnyNoCode 프리미엄 커뮤니티에서 함께하실 수 있습니다.
00:24:40이러한 실전 워크플로우를 분석하고 AI로 수익을 창출하는 법을 공유하며,
00:24:46전문적인 창업가 및 빌더들과 함께 학습하게 됩니다.
00:24:50또한 AI 웹사이트 디자인 코스 등을 통해 더 빠르게 구현하는 법을 배울 수 있습니다.
00:24:54영상이 마음에 드셨다면 좋아요와 구독을 부탁드리며,
00:24:58앞으로 더 유익한 튜토리얼로 찾아뵙겠습니다.
00:25:01다음 영상에서 만나요.

Key Takeaway

Claude Code의 에이전트 능력과 Remotion의 코드 기반 영상 편집 기능을 결합하면, 수작업 없이 프롬프트만으로 고품질의 전문 모션 그래픽 영상을 체계적으로 제작할 수 있습니다.

Highlights

Claude Code와 Remotion을 결합하여 복잡한 키프레임 작업 없이 프롬프트만으로 전문 모션 그래픽 제작 가능

Claude Skills를 통해 Claude를 특정 도구(Remotion)의 전문가로 변환시켜 에이전트 방식의 워크플로우 구현

성공적인 AI 영상 제작을 위해 아트 디렉션, 스토리보드, 에셋 인벤토리 등 체계적인 9단계 개발 프로세스 제시

관심사 분리(Separation of Concerns) 원칙을 적용하여 디자인 결정과 코드 생성을 분리함으로써 AI 환각 현상 최소화

11 Labs API를 연동하여 AI 보이스 내레이션과 배경 음악까지 포함된 완성도 높은 최종 영상 자동 생성

단순한 AI 도구 사용을 넘어 AI와 협력하여 시각적 시스템을 '구축'하는 크리에이티브 디렉터로서의 역할 강조

Timeline

Claude Code와 Remotion 에이전트 스킬 소개

영상은 애프터 이펙트와 같은 전통적인 툴 대신 Claude와 Remotion을 사용하여 제작된 화성 설명 영상을 보여주며 시작합니다. Claude Skills는 Claude에게 특정 도구와 워크플로우를 가르치는 지침서 역할을 하며, 이를 통해 일반 AI 비서를 영상 제작 전문가로 변화시킵니다. Remotion은 React 코드로 영상을 만드는 강력한 프레임워크지만 개발 지식이 필요하다는 진입장벽이 존재했습니다. 하지만 새로운 Remotion Agent 스킬은 Claude에게 프레임워크 전체에 대한 깊은 지식을 제공하여 누구나 프롬프트로 모션 그래픽을 디렉팅할 수 있게 합니다. 이 섹션은 개발자가 영상을 자동 생성할 때 사용하는 설정과 동일한 환경을 구축하는 혁신적인 접근 방식을 강조합니다.

환경 설정 및 9단계 개발 프로세스 시작

실제 제작을 위해 Remotion Claude 스킬을 설치하고 프로젝트 템플릿을 설정하는 구체적인 명령어를 설명합니다. 제작 과정은 시스템 구축, 에셋 정의, 실행 등 총 9단계로 구성되며, 1단계에서는 Claude가 따라야 할 기술적 토대와 규칙을 설정합니다. 프로젝트 실패의 주된 원인이 시각적 방향성 부족보다는 구체적인 규칙 부재에 있다는 점을 지적하며 기초 공사의 중요성을 언급합니다. Claude Code 터미널에서 프롬프트를 입력하면 향후 개발 과정에서 준수해야 할 규칙이 담긴 개발 마크다운 파일이 생성됩니다. 이 단계는 AI가 제멋대로 행동하지 않도록 제어 가능한 프레임워크를 제공하는 필수적인 과정입니다.

아트 디렉션 및 시각적 시스템 구축

2단계에서는 실제 코드를 작성하기 전 Claude에게 시각적으로 사고하는 법을 가르치는 아트 디렉션 단계를 진행합니다. 전반적인 톤, 시각적 제약 사항, 모션의 느낌 등 크리에이티브 디렉션을 정의하여 AI가 스타일을 추측하지 않도록 합니다. 모든 픽셀을 일일이 설명할 수 없으므로 공유된 정의를 통해 마이크로매니징 없이도 통제력을 갖는 것이 핵심입니다. 결과적으로 Claude는 '깔끔함'이나 '현대적임'에 대한 명확한 기준을 갖게 되어 환각 현상을 줄이고 일관된 작업을 수행하게 됩니다. 이 과정을 통해 사용자와 AI 사이에 공유된 시각적 언어가 생성되며 전문적인 결과물을 위한 토대가 마련됩니다.

스토리보드 작성 및 타임라인 정의

3단계는 영상의 흐름과 타이밍을 정의하는 스토리보드 작성 단계로, 매 순간 어떤 일이 일어날지를 구체화합니다. Claude는 정의된 아트 디렉션을 바탕으로 장면의 개수, 역할, 화면 체류 시간 등을 결정하여 논리적인 타임라인을 구축합니다. 텍스트로 작성된 스토리보드는 오프닝 훅, 메인 메시지, 클로징 등으로 구성되어 영상이 무작위하게 느껴지지 않도록 만듭니다. 사용자는 이 시점에서 AI의 초안을 검토하고 장면 순서를 바꾸거나 섹션을 삭제하는 등 자유롭게 수정을 요청할 수 있습니다. 확정된 구조는 전용 스토리보드 파일로 생성되어 향후 모든 빌드 작업의 단일 정보 소스(Single Source of Truth)로 활용됩니다.

에셋 인벤토리 정의 및 실제 생성

4단계와 5단계에서는 영상에 사용될 구체적인 디자인 요소들을 정의하고 실제로 생성하는 과정을 다룹니다. 디자인 결정과 장면 로직을 분리하는 '관심사 분리'를 통해 AI에게 한꺼번에 너무 많은 결정을 내리게 함으로써 발생하는 오류를 방지합니다. 대규모 프로젝트의 경우 에셋을 카테고리별로 일괄 생성(batch)하여 스타일 어긋남과 환각 현상을 최소화하는 노하우를 공유합니다. Claude는 사전에 정의된 파라미터를 바탕으로 SRC 폴더 내에 실제 사용 가능한 React 컴포넌트 형태의 에셋들을 제작합니다. 이 단계가 완료되면 추상적인 아이디어가 여러 장면에 걸쳐 재사용될 수 있는 실제 빌딩 블록으로 변환되어 영상의 일관성을 보장합니다.

모션 프리미티브 및 장면 조립

6단계부터 9단계는 생성된 에셋에 생동감을 불어넣고 최종 영상으로 조립하는 실행 단계입니다. '모션 프리미티브'를 통해 영상 전체에 공통으로 적용될 모션 언어를 정의하며, 이전 단계에서 구축한 시스템 덕분에 세세한 키프레임 지시 없이도 Claude가 적절한 움직임을 제안합니다. 9단계에서는 각 장면의 코드를 개별적으로 생성하여 디버깅과 수정을 용이하게 하며, 마지막에 이를 하나의 매끄러운 영상으로 합칩니다. Remotion Studio를 실행하여 실시간으로 결과물을 확인하고, 밋밋한 부분이나 트랜지션을 Claude와 피드백을 주고받으며 다듬습니다. 이 과정을 통해 기계적인 느낌을 벗어나 의도된 연출이 가미된 전문적인 모션 그래픽이 완성됩니다.

AI 음성 연동 및 최종 워크플로우 요약

마지막 단계로 11 Labs SDK를 연동하여 전문적인 성우 내레이션과 배경 음악을 영상에 추가합니다. Claude에게 내레이션 스크립트 생성을 요청하고 API를 통해 오디오 파일을 생성하여 영상의 최종 레이어를 완성하는 과정을 보여줍니다. 완성된 화성 설명 영상은 시각적 요소와 오디오가 완벽하게 조화된 높은 퀄리티를 자랑하며, 이 모든 것이 전통적인 편집 도구 없이 시스템 디렉팅만으로 가능했음을 강조합니다. AI를 단순히 사용하는 단계에서 시각적 시스템을 '구축'하는 단계로의 전환이 이번 워크플로우의 핵심 가치입니다. 마지막으로 이러한 실전 기술을 더 깊이 배울 수 있는 커뮤니티를 소개하며 구독자들에게 인사를 전하고 영상을 마무리합니다.

Community Posts

View all posts