코드로 만드는 3D 영상 (영상 및 Shorts)
모든 프레임은 시간의 순수 함수이며, HTML/CSS/three.js로 작성됩니다. 같은 페이지가 라이브 편집기(즉시 재생, 저장 없음)이자 렌더링 소스(Chromium이 프레임 단위로 캡처하고 ffmpeg가 이어 붙임)입니다. 사용자는 감독이고, 당신이 작업을 수행합니다. 라이브 버전을 시청하기 전에는 어떤 것도 렌더링되지 않습니다.
워크플로우는 7단계로 구성됩니다. 순서대로 수행하고 5단계를 건너뛰지 마십시오.
| # | 단계 | 산출물 |
|---|---|---|
| 1 | 설정 | template/에서 프로젝트 폴더 복사, 서버 실행 |
| 2 | 스크립트 | script.md 작성, 이후 장면 계획: 한 문장 = 한 장면 |
| 3 | 음성 | voiceover.mp3 + 단어 타이밍, 또는 음성이 나중에 올 경우 예상 타이밍 |
| 4 | 스타일 | 숫자로 작성된 STYLE.md의 룩을 3D 월드에 구현 |
| 5 | 수정 | 라이브 편집기 검토, 노트 적용, 반복된 실수는 references/lessons.md에 추가 |
| 6 | 렌더링 | 청크 단위 렌더링, 오디오와 결합 |
| 7 | 업로드 | 제목 옵션, 설명, 챕터, 썸네일 프롬프트 |
1. 설정
- 도구는
~/.youtube-video-editor/venv(Playwright Chromium, imageio-ffmpeg, pillow, faster-whisper)에 있습니다. 없을 경우~/.claude/skills/youtube-video-editor/scripts/setup.sh를 실행하십시오. 항상~/.youtube-video-editor/venv/bin/python -I로 호출하십시오. 사용자의 Mac에는 시스템 ffmpeg나 node가 없습니다. template/를 사용자가 볼 수 있는 폴더(보통~/Downloads에서 작업) 안의<project>/로 복사하십시오. 16:9 영상 →index.html+scenes.js. 세로형 Short →short.html+scenes-short.js(스테이지 1080×1920).- 서빙: 프로젝트 폴더에서
python3 -m http.server 8766 --bind 127.0.0.1실행 (nohup … &사용), 그런 다음 브라우저 창에서http://localhost:8766/index.html을 여십시오.file://페이지는 거기서 죽은 스냅샷으로 표시되며,preview_start와 launch.json은 이 Mac에서 서버를 띄우지 못했으므로 Bash에서 시작하십시오.
2. 스크립트
- 스크립트가 영상을 결정합니다. 사용자의 목소리로 작성하십시오: 짧은 구어체 문장, 평이한 단어, 교과서 느낌 없이. 대상 시청자는 비기술적인 초보자(Low Code Studio)입니다. 분당 약 150단어; Short는 60–110단어.
- 그런 다음 애니메이션 전에 장면을 계획하십시오: 한 문장 = 한 장면, 각 장면에 대해 카메라가 보는 것을 한 줄로 설명. 계획을 바꾸는 것은 공짜지만, 애니메이션을 바꾸는 것은 공짜가 아닙니다.
- 다른 영상에서 영감을 받았다면? 구조와 교훈은 유지하되, 모든 예시, 비주얼, 대사를 바꾸십시오. 절대 그들의 푸티지, 표현, 썸네일 또는 캐릭터를 재사용하지 마십시오.
3. 음성
- 사용자는 자신의 목소리를 녹음(브랜드의 일부)하고 나중에 헤드샷을 추가합니다. 따라서 첫 번째 패스에는 오디오가
없습니다: 각 장면의 길이는
vo단어 수(engine.js의WPS/PAD)로 추정됩니다. voiceover.mp3가 존재할 때: 16kHz 모노 wav로 변환하고,~/.claude/skills/youtube-video-editor/scripts/transcribe.py를 실행하여 단어 시간을 얻은 다음, 각 장면의dur를 해당 장면의 첫 단어와 다음 장면의 첫 단어 사이의 간격으로 설정하고,data-in값을 키워드에 맞춰 조정하십시오. 장면 내 타이밍은 장면 길이에 따라 자동으로 늘어나므로(작성된 속도 → 실제 속도), 대부분의 장면은dur만 필요합니다. 렌더링 시--audio voiceover.mp3를 전달하십시오.- 이 i3 Mac에서 whisper
small은 시스템이 바쁠 때 느려질 수 있습니다.base,beam_size=1, 단어 타임스탬프 없음은 약 5배 빠르며 참고용 읽기에 충분합니다. 최종 싱크를 위해서만small+ 단어 타임스탬프를 사용하십시오.
4. 스타일: 형용사가 아닌 숫자로
"시네마틱"은 아무 의미도 없습니다. 모든 장면이 다르게 추측할 것입니다. 프로젝트에 STYLE.md를 확인 가능한 규칙으로 작성하고,
한 번만 월드에 구축하십시오. references/style-rules.md(하우스 3D 룩: 카메라 각도, 렌즈, 조명 값, 팔레트, 모션, 캡션)에서
시작하십시오. 사용자가 참조 이미지를 제공하면 그것을 읽고 보이는 것을 동일한 숫자로 변환하십시오. 그들의 고유한 참조를
사용하고, 다른 크리에이터의 영상을 복사하지 마십시오.
2D 모션 그래픽은 훨씬 적은 토큰을 사용하고 3D보다 덜 고장납니다. 공간, 규모 또는 여정이 중요한 장면(훅, "세계" 장면)에는 3D를 사용하고, 프롬프트, 목록, 비교 및 챕터 카드에는 2D 카드를 사용하십시오. 좋은 혼합은 대략 3~4개 장면마다 하나의 3D 장면입니다. Short는 몇 개의 장면만 있으므로 전체를 3D로 할 수 있습니다.
5. 수정: 라이브 편집기 (절대 건너뛰지 마십시오)
- 사용자를 위해 편집기를 열고 거기서 멈추십시오. 사용자가 명시적으로 요청한 것입니다: 전체 렌더링 전에 라이브 편집기에서 검토. 사이드 패널은 각 장면의 음성 해설을 보여주고, 길이(±0.5초)를 변경하고 메모를 작성할 수 있게 합니다. 내 리뷰 노트 복사는 모든 내용을 클립보드에 넣어 사용자가 다시 당신에게 붙여넣을 수 있게 합니다.
- 넘기기 전에 자신의 작업을 확인하십시오:
render.py --sheet sheet.jpg는 장면당 한 프레임을 제공합니다. 그것을 보고(긴 시트를 3개로 잘라 읽기 쉽게 유지), 잘못된 것을 수정하고 반복하십시오. 일반적인 첫 패스 결함은references/lessons.md에 있습니다. 빌드하기 전에 그 파일을 읽으십시오. - 동일한 노트가 두 장면 이상에서 나타나면, 영상을 수정 하고
references/lessons.md에 한 줄을 추가하여 다음 영상이 시작될 때 해결되도록 하십시오. 이것이 이 스킬의 핵심입니다.
6. 렌더링
- 사용자가 라이브 버전을 승인한 후에만.
render.py --chunks out/chunks --chunk-len 60다음render.py --join out/chunks final.mp4 [--audio voiceover.mp3]. Shorts의 경우--size 1080x1920와short.html?renderURL을 추가하십시오. 나중에 잘못된 장면이 발견되면 → 해당chunk_NNN.mp4를 삭제하고 다시 실행하면 됩니다. 해당 청크만 재렌더링됩니다. - i3에서의 속도(측정됨): 1080p에서 전체 화면 3D 장면의 경우 프레임당 약 1초, 헤드리스 WebGL이 소프트웨어로 실행되기 때문입니다.
30fps에서 10분 분량의 비디오는 18,000프레임이므로 3~5시간을 계획하고 시작 전에 사용자에게 알리십시오. 사용자가 괜찮다면
--fps 24를 사용하고, 백그라운드에서nohup으로 실행하고, Mac을 깨운 상태로 유지하십시오(request_keep_awake). 한 번에 최대 두 개의 청크 프로세스만 렌더링하십시오(--start/--end로 범위를 다른 폴더로 나누어). - 헤드리스 Chromium은 WebGL을 위해
--use-angle=swiftshader --enable-unsafe-swiftshader가 필요합니다(이미 render.py에 있음). - 다시 빌드하지 않고 재편집: 장면은 배열이므로 재정렬 또는 장면 삭제는 편집 목록일 뿐입니다. 오프닝이 느리다면 가장 강력한 장면을 인덱스 0으로 이동하십시오.
7. 업로드
스크립트를 알고 있으므로 5개의 제목 옵션(하나 추천), 설명, 장면 시작 시간 기반 챕터, 태그를 작성하십시오.
~/.claude/skills/youtube-video-editor/references/youtube-metadata.md를 따르십시오. 썸네일은 이미지 모델이 도움이 되는 유일한 곳입니다:
강력한 스틸을 렌더링하고(render.py --stills), 프롬프트를 작성한 다음 사용자가 생성하거나 합성하도록 하십시오.
썸네일의 모든 주장은 비디오와 일치해야 합니다.
장면 형식 (engine.js)
SCENES.push({
id: 'belt', chapter: '2 · Script', title: 'Box on the belt', // 편집기에 표시됨
vo: `Your box rides a belt.`, // 음성 대사; 오디오가 있을 때까지 길이 설정
dur: 4, // 선택적 고정 길이 (초)
cls: 'z', // 선택적: plain | grad | paper | z | z1 (scale-up)
html: `<div class="three abs" style="inset:0"></div>
<div class="h1" data-in="0.4" data-a="pop">Hello</div>`,
tick: (t, root) => K.draw3d(root.querySelector('.three'), 1920, 1080, t, 'belt'),
});
- 선언적:
data-in/data-out(초),data-a(up down left right pop fade drop zoom),data-d,data-type(타자기),data-count="0,2400000",data-w="0,80"(너비 %),data-draw(SVG 스트로크). tick(t)는 사용자 정의용입니다.t에만 의존해야 합니다:Date.now()나Math.random()(E.rnd(i)사용) 또는 CSS 애니메이션/전환은 사용하지 마십시오. 그렇지 않으면 렌더링이 미리보기와 일치하지 않습니다.- 키트:
K.chat()Claude 스타일 프롬프트 박스,K.track()단계 트래커,K.chapter()전체 너비 챕터 카드,K.wave()+K.waveTick(),K.draw3d(holder, w, h, t, mode)하나의 3D 뷰용,K.snap(canvas, t, mode)하나의 장면에서 여러 카메라 뷰를 표시용(공유 WebGL 렌더러 사용; 장면당 렌더러를 생성하지 마십시오). - 3D 월드는
kit.js의K.world()입니다: 한 번 빌드되고,update(t, mode)가 객체를 움직이고 카메라를 배치합니다. 새 영화의 경우 해당 객체와 카메라 모드를 교체하십시오. 패턴은 유지하십시오.examples/workflow-video/는 이 스킬로 만든 완전한 10분 분량의 비디오(45개 장면)입니다. 새 장면을 작성하기 전에 패턴을 읽으십시오.
두 가지 룩: 장난감 디오라마와 스토리 월드
kit.jsK.world()는 단순한 플랫 쉐이딩 디오라마(빌드 속도가 빠르고 설명 및 배경에 적합)입니다.template/worlds.js는 사용자가 디오라마를 "별로 현실적이지 않다"고 말한 후 선호하는 더 풍부한 스토리 룩입니다: 부드러운 장난감 같은 캐릭터(person(): 움직이는 머리, 팔, 다리 +walk()포함), 그라데이션 스카이 돔, ACES 필름릭 톤 매핑, 하나의 낮은 따뜻한 태양 + 따뜻한 프랙티컬 라이트, 램프, 증기 및 광선을 위한 가산 글로우 스프라이트, 캔버스 텍스처 창문, 깊이감을 위한 안개. 3개의 완성된 6초 월드가 포함되어 있습니다(새벽 차이 스톨, 야간 배달 라이더, 등대지기);examples/story-samples/는 이를 페이지에 배치하는 방법을 보여줍니다.kit.js다음에worlds.js를 로드하고K.drawStory(holder, w, h, t, name)로 그립니다.- 코드 3D는 포토리얼리스틱할 수 없습니다. 사용자가 "초현실적"을 요구하면, 솔직히 말하고 선택권을 제공하십시오: AI 비디오(크레딧이 소모되며, "모든 코드"라고 주장할 수 없음) 또는 스토리 룩. 그런 다음 전체 영화를 하나의 룩으로 만들기 전에 2-3개의 짧은 샘플 클립을 골라 보여주십시오.
- 모든 스토리 샷에 캐릭터가 무언가를 하고(시작과 끝이 있도록: 걸어 들어와서 멈추고, 손을 흔들고; 랜턴을 들어 올림), 이름표, 그리고 하나의 움직이는 광원을 부여하십시오. 이것이 "스토리"로 읽히는 것입니다.
Shorts 체크리스트
1080×1920, 20–45초, 하나의 아이디어. 훅이 2초 이내에 시각적으로 드러나고 말로 전달되며, 움직임으로 시작해야 합니다.
어두운 필 위에 2-5단어의 캡션(밝은 3D 하늘에 텍스트를 바로 올리면 읽을 수 없음), 안전 영역 내에 배치: 상단 220px 또는
하단 420px에는 중요한 것이 없어야 합니다. 더 타이트한 카메라 모드(belt, follow, hero)를 사용하십시오. 와이드 샷은 세로에서 작아집니다.
보상 장면으로 끝내고 팔로우를 요청하는 한 줄을 추가하십시오. 아웃트로는 생략하십시오.
번들 파일
template/: index.html, short.html, engine.js, kit.js, worlds.js, style.css, render.py, starter scenes, lib/three.min.jsexamples/story-samples/: 세 가지 캐릭터 샘플 클립 페이지examples/workflow-video/: 완전한 "How I use Claude Code for video" 빌드(scenes-1/2/3.js + index.html); 템플릿 파일 옆에 복사하여 실행하십시오(0:21 벽의 썸네일은 번들되지 않음)references/style-rules.md: 숫자로 된 3D 하우스 룩references/lessons.md: 이미 해결된 실수들(빌드 전에 읽고, 모든 리뷰 후에 추가)