Communitygithub.com

alifmahmudashik/shorts-studio-skill

~55-70초 분량의 세로형 만화 스토리 단편을 '2D 캐릭터가 있는 화려한 3D 세계' 스타일로 제작합니다. three.js와 Remotion을 사용하여 렌더링되며, 입증된 예시로 '노래를 위해 쓰러진 다리'가 있습니다.

shorts-studio-skill란 무엇인가요?

이 스킬은 AI 에이전트(예: Claude Code)가 three.js와 Remotion을 이용해 세로형(9:16) 만화 3D 애니메이션 단편 영상을 제작할 수 있도록 설계된 포괄적인 워크플로우입니다. 대상 플랫폼은 YouTube Shorts 등 세로형 영상이며, 약 55-70초 분량, 2K(1440x2560) 해상도로 출력됩니다. 스킬은 주제 선정 및 사실 조사, 대본 작성(바이럴 스토리 포맷), 음성 녹음 및 단어별 자막 생성, three.js 기반 3D 장면 구축(조명, 카메라, 캐릭터, 배경), Remotion을 통한 최종 렌더링 및 사운드 합성까지 전 과정을 단계별로 안내합니다. 특히 'laugh at a genius' 바이럴 포맷, 단어별 자막, 장소별 조명 프리셋, 끊임없이 움직이는 다양한 카메라 워크, 연속적인 흐름(flow) 유지 등 차별화된 제작 방식을 포함하며, 품질 검증을 위한 자동화된 프레이밍 체크, QA 스크립트, Opus 검증 프로세스도 갖추고 있습니다. 스킬 사용은 '다리 영상처럼' 또는 '만화 3D 스타일로'와 같은 사용자 요청에 의해 트리거됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alifmahmudashik/shorts-studio-skill/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

만화 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가 모든 확인 사항을 검증합니다.
  • 각 단계 후 저장.
  • 대본 승인 후 "그냥 실행하세요".

파이프라인

  1. 주제 및 사실. 물리적 원인과 결과가 있는 놀라운 실화 하나를 고르세요(시각적이어야 함). 그리고 그것을 설명하는 간단한 일상적인 비유도 함께 고르세요.
    • 사실을 출처와 함께 SCRIPT.md 상단에 작성하세요.
  2. 대본 (~3.7단어/초, 35-70초). 사실 단편의 경우 아래 '바이럴 스토리 포맷'과 '재미있게 만들기'를 사용하세요. 다리 비트 공식은 재난 이야기를 위한 대안입니다:
    • 훅(Hook): 한 줄로 표현한 터무니없는 사실("74명의 군인이 그냥 걸어서 철교를 무너뜨렸다.").
    • 배경: 연도, 장소, 자부심.
    • 전개: 세 개 또는 네 개의 비트(beat)로 확대되는 행동, 각각 조금씩 더 커짐.
    • 결정적 순간(Snap): 무너지는 순간.
    • 무표정 이중 대사: "운 좋게도... / 운 나쁘게도...".
    • 설명: 일상적인 비유를 통한 하나의 물리학 개념(그네 타는 아이).
    • 결과: 그로 인해 만들어진 규칙.
    • 회귀 반전: 결말.
    • 시청자가 이미 보고 있는 것을 화면에 설명하지 마십시오.
  3. 음성. voice.wav를 녹음하거나 생성한 다음, 단어 타이밍 words.json을 만드세요(단어 시간이 포함된 음성-텍스트 변환 도구 사용).
    • 프로젝트 폴더(예: ~/bridge-short/voice/)에 넣으세요.
    • 단어 타이밍을 수동으로 수정하세요. 모든 것은 words.json에 맞춰지며 자막도 여기서 가져옵니다.
  4. 장면 계획 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, '연속적인 흐름' 참조). 모든 움직임에 이름을 지정하고 모든 정지에 프레이밍 크기를 지정하세요('카메라 다양성' 및 '프레이밍' 참조).
    • 모든 장소에 자체 조명 프리셋을 부여하세요('모든 장소에 대한 조명' 참조).
  5. 세계.
    • lights.ts: LIGHTS + 조명별 LOOK 하늘/강/구름 팔레트.
    • shade.ts: 투톤 셰이딩 및 untone().
    • build.ts: 마을, 주택 및 Kenney CC0 키트 소품, 재색칠, 카메라를 막는 모든 것을 시선선에서 제거.
    • paint.ts: HD Canvas2D 페인트 텍스처, 이음새는 어두운 색조로 페인트.
    • world.ts: 하늘 셰이더, 안개 = 지평선 색상, 강, 프레임별 포즈, 샷당 고정된 태양 및 카메라 상대적.
  6. 캐릭터.
    • toon.ts: Canvas2D Pen 드로잉 API, 600x1000 디자인 캔버스, 발바닥 y = 975, 콩 머리, 막대 팔, 자두색 가변 너비 외곽선, 얼굴 라이브러리.
    • cast.ts: 카메라 방향 빌보드, 군중, 효과 카드, 깜박임, 걷기 사이클. 모든 빌보드는 NOINK 레이어로 이동.
    • cardshade.ts: 장면 조명에 의해 조명되는 카드, 자체 발광 없음.
  7. 후처리 (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
    • 합성기 순서: ink → lens pre → lens main → bloom → NEUTRAL 톤 맵 → grade (MSAA 4).
    • 모든 픽셀 매개변수는 출력 높이 / 1920에 비례하여 조정됩니다.
  8. 사운드 (~/bridge-short/audio/: timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).
    • 이벤트 테이블 → 합성 SFX + 음성 아래에 깔리는 오리지널 악보.
    • 출력: mix.wav (48kHz, 정확한 길이), 스템 및 cues.md.
    • 사운드를 만들기 전에 영상의 시간 상수를 고정하세요. 이후의 타이밍 변경은 사운드를 다시 실행해야 함을 의미합니다.
  9. 룩 체크. 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)를 실행하고 샷당 하나의 스틸(첫 번째, 중간, 마지막 프레임)로 연락처 시트를 만드세요. '품질 게이트'를 참조하세요.
  10. 최종 렌더링.
    • 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 감사를 실행하세요.
  11. 전달. 최종 mp4 파일을 보내고(SendUserFile), 메모리를 업데이트하고, 노트를 작성하세요.

사전 점검 (먼저 수행)

  • templates/bridge/, references/ 및 scripts/가 있는지 확인하세요(없으면 github.com/mromidev/claude-animated-shorts 또는 포크를 Remotion 프로젝트 옆에 클론하세요). 없으면 중지하고 가져오세요. 템플릿 없이 일반적인 three.js 룩을 즉흥적으로 만들지 마십시오.
  • 먼저 15초 테스트 클립을 만드세요(훅 + 2-3개 샷, 자막 및 사운드 포함). 스틸을 렌더링하고, 품질 게이트를 실행하고, 수정한 다음 전체 스토리로 확장하세요. 절대 바로 전체 렌더링을 하지 마십시오.

바이럴 스토리 포맷: "천재를 비웃다" (사실 단편에 사용)

매번 여섯 비트:

  1. 이상한 행동 맥락 없이, 하나의 그림으로 보여줌(훅, 처음 3초).
  2. 웃음: 다른 캐릭터들이 주인공을 조롱함.
  3. 모두 오른쪽을 봄: 시간이 흐르고 주인공이 틀렸거나 해롭지 않은 것처럼 보임.
  4. 단서: 반전을 예고하는 하나의 세부 사항.
  5. 반전: 주인공이 옳았음을 증명하는 사건(시각적 클라이맥스).
  6. 과학: 메커니즘(내부/컷어웨이/매크로 뷰)을 보여주고 간단한 한 문장으로 설명.
  • 사실 목록이 아닌 주인공이 있는 이야기로 말하세요. 한 이미지에서 볼 수 있고 사람들이 비웃을 만한 이상한 관행을 고르세요.
  • 마지막 줄은 논쟁이나 댓글(논쟁의 여지가 있는 것)을 시작하며, 깔끔한 요약이 아닙니다.
  • 제목 패턴: "왜 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), 크리핑 홀드 및 임팩트 킥을 유지하세요.

연속적인 흐름: 피사체 사이를 이동하고, 자르지 마십시오 (레퍼런스...

[번역을 위해 잘렸습니다]

관련 스킬