프로젝트 개요
I’m Upping My P(doom)에는 Claude Code에서 Claude Opus 5.5로 생성한 뮤직비디오의 소스 코드가 포함되어 있습니다. 완성된 I’m Upping My P(doom) 뮤직비디오는 YouTube에서 시청할 수 있습니다.
애니메이션은 두 번의 생성 과정을 거쳐 제작되었습니다. 첫 번째 버전은 Claude Opus 5.5의 Medium 설정으로 생성되었으며 legacy/에 보존되어 있습니다. 두 번째 생성 버전이 저장소의 나머지 부분을 구성합니다.
프로젝트 문서에 따르면 저장소의 모든 내용은 모델이 생성했습니다. 창작 방향은 Clawd 캐릭터 디자인을 사용하고 각 가사에 흥미로운 시각 효과와 전환을 부여하는 것으로 제한되었습니다. 개별 장면 아이디어는 지정되지 않았습니다.
애니메이션 작동 방식
영상은 9개의 챕터로 나뉘며, 각 챕터에 하나의 소스 파일이 있습니다. 프레임은 p5.js와 p5.brush를 사용해 브라우저 페이지에서 그립니다. Node.js 렌더링 스크립트는 헤드리스 Chrome에서 해당 페이지를 열어 프레임을 캡처하고, 포함된 오디오 트랙과 함께 ffmpeg로 인코딩합니다.
주요 파일 및 디렉터리
src/ch/에는 9개의 챕터 파일이 들어 있습니다.src/에는 Clawd, 게스트 캐릭터, 소품, 가사, 타임라인을 위한 공통 코드가 들어 있습니다.studio.html은 p5.js와 p5.brush로 모든 프레임을 그리는 페이지입니다.render.mjs는 헤드리스 Chrome을 통해 프레임을 렌더링하고 ffmpeg를 호출해 MP4를 생성합니다.assets/pdoom.mp3은 포함된 곡 파일입니다.STORYBOARD.md에는 모델이 생성한 장면별 계획이 들어 있습니다.ANIMATION_GUIDE.md에는 병렬 서브에이전트를 위해 작성된 스타일 및 코딩 지침이 들어 있습니다.legacy/에는 프로젝트의 첫 번째 생성 버전이 보존되어 있습니다.
사전 요구 사항
영상을 렌더링하기 전에 다음 도구를 설치하세요.
- Node.js: 종속성을 설치하고
render.mjs를 실행하는 데 필요합니다. - Google Chrome: 헤드리스 브라우저에서 프레임을 그리는 데 필요합니다.
- ffmpeg: 렌더링된 프레임과 곡을 결합해 MP4를 만드는 데 필요합니다.
Node.js와 ffmpeg를 명령줄에서 사용할 수 있는지 확인하세요. Chrome 경로를 명시적으로 지정할 계획이 없다면 Chrome은 기본 Windows 위치에 설치되어 있어야 합니다.
프로젝트 설치
저장소 루트에서 터미널을 열고 Node.js 종속성을 설치하세요.
npm install저장소에 이미 assets/pdoom.mp3로 곡이 포함되어 있으므로, 문서에 설명된 작업 흐름에서는 별도의 오디오 파일을 다운로드할 필요가 없습니다.
애니메이션 프레임 렌더링
문서에 지정된 프레임 범위와 4개의 워커를 사용해 렌더링 스크립트를 실행하세요.
node render.mjs --frames=0:156.6 --workers=4이 명령은 영상 프레임을 out/frames에 그립니다. 전체 뮤직비디오를 생성하는 데 시간이 걸릴 수 있으므로 프레임 렌더링 프로세스를 중단한 지점부터 다시 진행할 수 있습니다.
--workers=4 옵션은 4개의 렌더링 워커를 사용하도록 명령을 설정합니다. 이 값을 변경할 경우 컴퓨터에서 사용할 수 있는 리소스에 적합한 워커 수를 선택하세요.
최종 MP4 인코딩
프레임 렌더링이 완료되면 포함된 곡과 결합하세요.
node render.mjs --encode --out=out/pdoom.mp4이 명령은 ffmpeg를 사용해 렌더링된 프레임과 오디오를 결합한 다음 완성된 영상을 out/pdoom.mp4에 저장합니다.
사용자 지정 Chrome 경로 사용
Chrome이 기본 Windows 경로에 설치되어 있지 않다면 렌더링 명령에 --chrome 옵션을 추가하세요.
node render.mjs --frames=0:156.6 --workers=4 --chrome=<path to chrome><path to chrome>을 Chrome 실행 파일의 경로로 바꾸세요.
제작물 탐색 및 수정
스토리보드부터 시작하기
장면을 변경하기 전에 STORYBOARD.md를 읽으세요. 이 파일에는 첫 번째 생성 이후 작성된 장면별 계획이 설명되어 있습니다. 당시 Claude에는 P5 브러시 스트로크를 사용하고, 모든 장면을 시각적으로 흥미롭게 유지하며, 각 장면을 다음 장면으로 전환하라는 지침이 전달되었습니다.
애니메이션 가이드 따르기
ANIMATION_GUIDE.md를 프로젝트의 스타일 및 구현 참고 자료로 사용하세요. Claude Opus가 병렬로 실행한 서브에이전트에게 작업을 설명하기 위해 작성한 파일이므로, 챕터 파일 전체의 일관성을 유지하는 데 가장 적합한 가이드입니다.
챕터를 독립적으로 편집하기
src/ch/의 9개 파일은 영상을 관리하기 쉬운 섹션으로 나눕니다. 영상의 특정 부분을 변경할 때는 먼저 해당 챕터를 확인한 다음 src/ 아래의 공통 타임라인, 가사, 캐릭터, 소품 코드를 참고하세요.
두 생성 버전 비교하기
legacy/ 디렉터리에는 첫 번째 생성 버전이 들어 있습니다. 이를 현재 소스와 비교하면 두 번째 생성 과정에서 시각적 방향, P5 브러시 스트로크 지침, 장면 전환이 어떻게 발전했는지 이해하는 데 도움이 됩니다.
고급 작업 흐름 팁
- 재개 가능한 출력 보존: 렌더링된 프레임은
out/frames에 기록되고 프로세스를 재개할 수 있으므로, 중단된 렌더링을 계속할 때 해당 디렉터리를 삭제하지 마세요. - 렌더링과 인코딩 분리: 인코딩 명령을 실행하기 전에 프레임 생성 명령을 완료하세요. 이렇게 하면 비용이 많이 드는 프레임 렌더링을 재개하기 쉬워지고, 최종 인코딩 단계를 불필요하게 반복하지 않아도 됩니다.
- 광범위한 변경 전에 공유 코드 검토: 캐릭터, 소품, 가사, 타임라인 동작은
src/아래에서 공유됩니다. 해당 코드를 변경하면 여러 챕터에 영향을 줄 수 있습니다. - 다른 프로젝트에는 최신 기반 사용: 작성자는 Claude Opus 5.5로 새로운 Claude 애니메이션을 제작할 때 더 안정적이고 범용적인 기반으로 ClaudeAnimationBase를 권장합니다.
크레딧 및 참고 자료
이 프로젝트는 X의 게시물에서 영감을 받았습니다. README에 따르면, 작성자가 확인한 바로는 이 곡은 2024년 YouTube 동영상에서 가져왔습니다.
결론
이 저장소는 완성된 생성형 애니메이션과 모델이 제작한 전체 제작 구조를 모두 보여 줍니다. Node.js, Chrome, ffmpeg가 설치되어 있으면 프레임을 렌더링하고, 포함된 오디오를 인코딩하며, 스토리보드와 애니메이션 가이드를 살펴보고, 9개의 p5.js 챕터가 최종 뮤직비디오로 결합되는 방식을 확인할 수 있습니다.