만화 3D 스토리 단편 (three.js + Remotion)
입증된 예시: 노래를 위해 쓰러진 다리. 1831년 브로튼 다리와 74명의 군인이 보조를 맞춰 행진하다 다리가 무너진 이야기에 대한 67초짜리 오리지널 단편입니다.
- 코드: Remotion 프로젝트의
src/videos/bridge/(컴포지션BridgeShort, 1080x1920, 30fps). - 대본, 음성 및 사운드:
~/bridge-short/. - 스타일 연구:
references/.
스타일 참조는 비공개로 연구된 채널입니다(references/: STYLE_BIBLE.md, reports/*.md, frames/).
- 해당 비디오는 비공개 학습 자료입니다. 절대 업로드, 게시 또는 전송하지 마십시오.
- 대본, 캐릭터 또는 장면을 절대 복사하지 마십시오. 이야기, 캐릭터 및 음성은 항상 우리만의 것입니다.
- 음성 해설이나 설명에서 채널 이름을 절대 언급하지 마십시오.
적용되는 사용자 규칙:
- 자막: Shorts의 경우 기본적으로 켜짐. 한 번에 한 단어씩, 중앙 정렬, 굵게, 어두운 외곽선, 안전 영역 내부,
words.json에 맞춰 시간 조정('자막' 참조). 사용자가 요청하는 경우에만 끕니다. 다른 화면 레이블은 없습니다. - 영어만 사용.
- 음성: 일정한 톤(무표정: 내레이터는 절대 반응하지 않고, 캐릭터가 반응함).
- 농담은 조사된 실제 사실을 기반으로 함.
- 표준 믹스: 음악 +3dB, SFX -6dB, 음성 변동 없음.
- 최종 내보내기 2K 세로: 1440x2560,
--scale 1.3333. - Opus max가 모든 확인 사항을 검증합니다.
- 각 단계 후 저장.
- 대본 승인 후 "그냥 실행하세요".
파이프라인
- 주제 및 사실. 물리적 원인과 결과가 있는 놀라운 실화 하나를 고르세요(시각적이어야 함). 그리고 그것을 설명하는 간단한 일상적인 비유도 함께 고르세요.
- 사실을 출처와 함께
SCRIPT.md상단에 작성하세요.
- 사실을 출처와 함께
- 대본 (~3.7단어/초, 35-70초). 사실 단편의 경우 아래 '바이럴 스토리 포맷'과 '재미있게 만들기'를 사용하세요. 다리 비트 공식은 재난 이야기를 위한 대안입니다:
- 훅(Hook): 한 줄로 표현한 터무니없는 사실("74명의 군인이 그냥 걸어서 철교를 무너뜨렸다.").
- 배경: 연도, 장소, 자부심.
- 전개: 세 개 또는 네 개의 비트(beat)로 확대되는 행동, 각각 조금씩 더 커짐.
- 결정적 순간(Snap): 무너지는 순간.
- 무표정 이중 대사: "운 좋게도... / 운 나쁘게도...".
- 설명: 일상적인 비유를 통한 하나의 물리학 개념(그네 타는 아이).
- 결과: 그로 인해 만들어진 규칙.
- 회귀 반전: 결말.
- 시청자가 이미 보고 있는 것을 화면에 설명하지 마십시오.
- 음성.
voice.wav를 녹음하거나 생성한 다음, 단어 타이밍words.json을 만드세요(단어 시간이 포함된 음성-텍스트 변환 도구 사용).- 프로젝트 폴더(예:
~/bridge-short/voice/)에 넣으세요. - 단어 타이밍을 수동으로 수정하세요. 모든 것은
words.json에 맞춰지며 자막도 여기서 가져옵니다.
- 프로젝트 폴더(예:
- 장면 계획 in
story.ts:templates/bridge/(최종 다리 소스, Remotion 프로젝트의src/videos/bridge/와 동일)를src/videos/<name>/에 복사하고,src/Root.tsx에BridgeShort옆에 새 컴포지션을 등록한 다음 이름을 바꾸세요.SHOTS: id, a/b 프레임, 조명(day/golden), 군중 모드,tau스토리 시간.XFADE: 장소/시간 변경 시 크로스페이드.FLASH_AT: 훅 후 흰색 플래시.CAMS: 샷별 키{f, dur?, cut?, s: f => {pos, look, fov, roll}}.KICKS: 충격 플립-셰이크.DOF/dofAt: 비트별 렌즈 블러.FOREGROUND: 근접 프레이밍 소품.- 모든 시각적 반응은 해당 단어보다 0-3프레임 먼저 나와야 합니다.
- 각 문장의 주제를 하나의 연속적인 흐름으로 연결하세요(
flow.ts, '연속적인 흐름' 참조). 모든 움직임에 이름을 지정하고 모든 정지에 프레이밍 크기를 지정하세요('카메라 다양성' 및 '프레이밍' 참조). - 모든 장소에 자체 조명 프리셋을 부여하세요('모든 장소에 대한 조명' 참조).
- 세계.
lights.ts: LIGHTS + 조명별 LOOK 하늘/강/구름 팔레트.shade.ts: 투톤 셰이딩 및untone().build.ts: 마을, 주택 및 Kenney CC0 키트 소품, 재색칠, 카메라를 막는 모든 것을 시선선에서 제거.paint.ts: HD Canvas2D 페인트 텍스처, 이음새는 어두운 색조로 페인트.world.ts: 하늘 셰이더, 안개 = 지평선 색상, 강, 프레임별 포즈, 샷당 고정된 태양 및 카메라 상대적.
- 캐릭터.
toon.ts: Canvas2DPen드로잉 API, 600x1000 디자인 캔버스, 발바닥 y = 975, 콩 머리, 막대 팔, 자두색 가변 너비 외곽선, 얼굴 라이브러리.cast.ts: 카메라 방향 빌보드, 군중, 효과 카드, 깜박임, 걷기 사이클. 모든 빌보드는NOINK레이어로 이동.cardshade.ts: 장면 조명에 의해 조명되는 카드, 자체 발광 없음.
- 후처리 (
Bridge.tsx+ink.ts+lensblur.ts+grade.ts).- 합성기 순서: ink → lens pre → lens main → bloom → NEUTRAL 톤 맵 → grade (MSAA 4).
- 모든 픽셀 매개변수는 출력 높이 / 1920에 비례하여 조정됩니다.
- 사운드 (
~/bridge-short/audio/: timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).- 이벤트 테이블 → 합성 SFX + 음성 아래에 깔리는 오리지널 악보.
- 출력: mix.wav (48kHz, 정확한 길이), 스템 및 cues.md.
- 사운드를 만들기 전에 영상의 시간 상수를 고정하세요. 이후의 타이밍 변경은 사운드를 다시 실행해야 함을 의미합니다.
- 룩 체크.
node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5를 실행하세요.BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx로 설정하여 샌드박스 복사본을 렌더링하세요.python scripts/sbs_sheet.py out.jpg --ours ... --ref ...로 참조 프레임과 나란히 비교하세요.- Opus max 검증자에게 보내세요: 1-3개 이미지, 200단어 이하 평결.
- 모든 샷에 대해 프레이밍 체크(
templates/bridge/framing.ts)를 실행하고 샷당 하나의 스틸(첫 번째, 중간, 마지막 프레임)로 연락처 시트를 만드세요. '품질 게이트'를 참조하세요.
- 최종 렌더링.
npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333-map 0:v:0 -map 1:a:0으로 먹싱 (Remotion은 무음 오디오 트랙을 기록함).- QA:
python scripts/short_qa.py final.mp4 out/<name>/qa shots.json은 모든 프레임에서 블랙, 화이트, 프리즈 및 팝 프레임과 음량 및 시트를 확인합니다. - 발견된 문제를 수정한 다음 심층 Opus 감사를 실행하세요.
- 전달. 최종 mp4 파일을 보내고(SendUserFile), 메모리를 업데이트하고, 노트를 작성하세요.
사전 점검 (먼저 수행)
templates/bridge/,references/및scripts/가 있는지 확인하세요(없으면 github.com/mromidev/claude-animated-shorts 또는 포크를 Remotion 프로젝트 옆에 클론하세요). 없으면 중지하고 가져오세요. 템플릿 없이 일반적인 three.js 룩을 즉흥적으로 만들지 마십시오.- 먼저 15초 테스트 클립을 만드세요(훅 + 2-3개 샷, 자막 및 사운드 포함). 스틸을 렌더링하고, 품질 게이트를 실행하고, 수정한 다음 전체 스토리로 확장하세요. 절대 바로 전체 렌더링을 하지 마십시오.
바이럴 스토리 포맷: "천재를 비웃다" (사실 단편에 사용)
매번 여섯 비트:
- 이상한 행동 맥락 없이, 하나의 그림으로 보여줌(훅, 처음 3초).
- 웃음: 다른 캐릭터들이 주인공을 조롱함.
- 모두 오른쪽을 봄: 시간이 흐르고 주인공이 틀렸거나 해롭지 않은 것처럼 보임.
- 단서: 반전을 예고하는 하나의 세부 사항.
- 반전: 주인공이 옳았음을 증명하는 사건(시각적 클라이맥스).
- 과학: 메커니즘(내부/컷어웨이/매크로 뷰)을 보여주고 간단한 한 문장으로 설명.
- 사실 목록이 아닌 주인공이 있는 이야기로 말하세요. 한 이미지에서 볼 수 있고 사람들이 비웃을 만한 이상한 관행을 고르세요.
- 마지막 줄은 논쟁이나 댓글(논쟁의 여지가 있는 것)을 시작하며, 깔끔한 요약이 아닙니다.
- 제목 패턴: "왜 X...", "어떻게 X...", "X가 정말 의미했던 것". 제목에 반전을 스포일러하지 마십시오.
- 페이싱: 2-3초마다 새로운 주제, 컷보다는 카메라 이동('연속적인 흐름' 참조)으로 도달, 거의 모든 움직임이나 디졸브에 사운드 효과(휙, 짤랑, 군중 웃음)와 음성 아래 음악.
- 풍부한 장소, 단순한 캐릭터(둥근 머리, 막대 팔): 60초 단편의 경우 12-16개의 뚜렷한 장소와 20개 이상의 소품을 계획하고, 각 장소에 고유한 조명 분위기를 부여하세요.
- 먼저 출처와 함께 사실을 쓰세요. 년도와 숫자는 자연스럽게 말하고("eighteen forty-seven") 자막은 숫자로 표시합니다.
- 예시:
templates/SCRIPT_viral_example.md.
재미있게 만들기 (코미디 엔진)
군중은 주인공을 비웃습니다. 시청자도 함께 웃어야 합니다.
- 무표정 목소리, 터무니없는 그림. 내레이터는 절대 반응하지 않습니다. 캐릭터가 반응합니다. 둘 사이의 간격이 농담입니다.
- 4-6초마다 개그, 단편당 최소 세 가지 종류 사용: 대사 개그(과소 표현, "운 좋게도... / 운 나쁘게도..."), 시각적 개그(반응 표정, 배경의 작은 세부 사항, 잘못된 크기의 소품), 사운드 개그(반응에 맞춰 떨어지는 우스운 SFX).
- 3의 법칙: 두 번의 정상적인 비트, 세 번째는 패턴을 깨뜨림.
- 러닝 개그: 한 명의 배경 캐릭터 또는 물체(비둘기, 샌드위치를 든 남자)가 3-4번 등장하고 마지막에 반전을 얻음.
- 반응 샷: 카메라가 펀치 단어 후 3-6프레임에 얼굴에 고정(컷이 아닌 흐름 정지 또는 랙 포커스)되고 8-12프레임 유지. 얼굴 라이브러리 사용; 적어도 하나의 '감동하지 않음'과 하나의 '충격' 포함. '반응 및 대화 비트' 참조.
- 자신감 있는 주인공, 잘난 척하는 군중, 지나치게 진지한 관리들: 캐릭터는 사소한 일을 매우 진지하게 받아들임.
- 물리를 단 하나의 비트(반전)에만 과장: 찌그러뜨리기 및 늘이기, 먼지 구름, 충격 킥.
- 회귀 결말: 마지막 줄이 일어난 일을 사용하여 첫 줄(훅)을 뒤틉니다.
- 농담은 실제 사실 안에 머물러야 합니다: 웃긴 부분은 진짜 세부 사항입니다. 실제 피해자나 집단을 향해 농담하지 마십시오. 목표는 자신감 과잉과 잘난 척함입니다.
자막 (단어별 캡션)
- 출처:
words.json(음성 단어 타이밍, 수동 수정). 어떤 음성-텍스트 변환이든 작동합니다.templates/bridge/Captions.tsx의normalizeWords()는{word|text, start|start_time, end|end_time}을 초 또는 밀리초 단위로 허용하고 ElevenLabs "간격" 항목을 건너뜁니다. - 음성-텍스트 텍스트가 대본(숫자, 이름, 철자)과 다른 경우, 텍스트를 SCRIPT 단어로 바꾸고 STT 시간을 유지하세요. 자막은 대본 철자("1847")를 표시하지만, 음성은 "eighteen forty-seven"이라고 말합니다.
- 컴포넌트:
templates/bridge/Captions.tsx를src/videos/<name>/에 복사하고<Captions words={WORDS} />를 컴포지션의 마지막 자식으로, three.js 캔버스 위의 DOM 오버레이로, 후처리 컴포저 외부(텍스트에 잉크, 블러, 블룸 또는 그레이드 없음)에서 렌더링하세요. - 스타일: 한 번에 한 단어, 프레임 높이의 약 68%(얼굴 아래, 안전 영역 내부)에서 수평 중앙 정렬, 두꺼운 산세리프, 흰색 채움, 1080 너비에서 9픽셀 어두운 외곽선, 6프레임에 걸쳐 팝인 스케일 0.8 → 1.08 → 1, 배경 상자 없음, 최대 너비 86%. 숫자, 이름 및 펀치 단어는 강조 색상(
highlight)을 사용합니다. 픽셀 크기는 출력 높이 / 1920에 비례하여 조정됩니다. - 얼굴을 절대 가리지 마십시오: 클로즈업에서 얼굴이 자막 위치에 있는 경우, 해당 샷에 대해
yPercent={(frame) => ...}를 전달하여 이동하세요. - 캡션은 해당 단어가 들리기 1프레임 전에 나타납니다(
lead). - QA: 모든 샷의 펀치 단어에서 스틸을 렌더링하고 캡션이 안전 영역 내부에 있고 얼굴을 가리지 않는지 확인하세요.
프레이밍, 안전 영역 및 줌 제한 (강제)
- 9:16 프레임. 안전 영역: 좌/우 6% 여백, 상단 8%, 하단 15%(플랫폼 UI 및 자막). 중요한 모든 것(캐릭터, 소품, 말풍선, 표지판)은 의도적인 전경 프레이밍 소품을 제외하고 완전히 그 안에 있어야 합니다.
- 캐릭터의 머리는 프레임 높이의 최대 30%를 차지합니다(원샷 반응 개그는 40% 사용 가능). 미디엄 샷(허리 위)과 전신 와이드를 선호합니다.
- 캐릭터를 발에서 자르지 말고 말풍선이나 표지판을 자르지 마십시오. 전경 소품은 알아볼 수 있거나 사라져야 합니다. 잘린 소품은 프레임의 35% 이상을 덮어서는 안 됩니다.
- 같은 크기의 샷을 연속으로 두 번 이상 사용하지 마십시오(와이드 / 미디엄 / 클로즈 / 인서트).
- 홀드 시 푸시인은 느리게 유지: 프레임당 0.15-0.35%, 펀치 단어에서 0.6%. 갑작스러운 큰 줌 금지.
- 자동 체크:
templates/bridge/framing.ts의checkShot(camera, items)는 경계 상자를 화면 공간에 투영하고 모든 문제를 나열합니다. 모든 샷의 첫 번째, 중간 및 마지막 프레임에서bridge-stills로 실행하고 렌더링하기 전에 실패한 샷을 수정하세요. 자체 테스트:npx tsx templates/scripts/framing_selftest.ts.
모든 장소에 대한 조명 (다리는 낮과 황금 시간대만 정의)
모든 장소는 lights.ts에 자체 조명 프리셋이 필요합니다: 명확한 키 방향, 투톤 셰이딩(따뜻한 조명, 차가운 음영), 캐스트 및 접촉 그림자, 그리고 일치하는 하늘 또는 천장. 평평하고 조명이 없는 방은 절대 안 되며, 실내에서 하늘이나 구름이 보여서는 안 됩니다.
- 실내 (홀, 호텔, 사무실): 천장 또는 어두운 벽 상단, 창문이나 램프에서 나오는 하나의 키 라이트, 블룸이 있는 따뜻한 실용 조명(양초, 램프), 차가운 음영면, 부드러운 비네트, 모든 소품의 바닥 및 벽 그림자, 창문에서 나오는 빛 기둥 또는 먼지.
- 밤: 달빛 푸른 키(약 #5b7fd6), 깊은 청자색 음영, 대비를 위한 따뜻한 조명 창문 및 램프, 달 원반 또는 별.
- 일출/일몰: 신광선이 있는 낮은 태양, 복숭아에서 분홍색 하늘, 보라색 음영, 긴 그림자.
- 이것들은 시작 값입니다:
references/frames/에 대해 나란히 시트(sbs_sheet.py)로 조정하세요. - 모든 캐릭터와 소품 아래 접촉 그림자, 그리고 키 라이트의 방향성 그림자 꼬리; 가구와 소품은 바닥과 벽에 그림자를 드리웁니다(카드 그림자는 실내에서 블롭이 아닌 실제 그림자임).
- 피사계 심도(아래 표)는 일관되게 적용됩니다: 클로즈업과 미디엄 샷은 완전히 선명하지 않으며, 와이드는 선명하게 유지됩니다.
카메라 다양성 (항상 움직이며, 같은 움직임을 연속으로 두 번 사용하지 않음)
- 흐름 또는 샷 내에서 명명된 움직임 사용: 느린 푸시인, 풀백 리빌, 피사체 주위 궤도선, 시차가 있는 측면 트래킹, 크레인 업/다운, 틸트, 전경 소품에서 피사체로의 랙 포커스, 작은 더치 롤(4-5°).
- 연속된 두 움직임은 같을 수 없습니다.
- 샷의 약 1/3에서 렌즈와 피사체 사이에 전경 소품(기둥, 난간, 가구)을 배치하여 카메라 움직임이 깊이로 읽히도록 하세요.
- 스토리당 최소 두 개의 인서트 샷: 비트 4-6에 대한 메커니즘의 매크로 또는 컷어웨이, 그리고 하나의 극적인 각도(낮은 영웅 각도 또는 조감도).
- 기존의 smootherstep 글라이드(18-40f), 크리핑 홀드 및 임팩트 킥을 유지하세요.
연속적인 흐름: 피사체 사이를 이동하고, 자르지 마십시오 (레퍼런스...
[번역을 위해 잘렸습니다]