walter-io/vibecoding-remotion

Remotion 스토리 연출 비디오

「하나의 이야기」를 1080p 연출 완성본으로 변환: 이야기 통독 → 주제 분위기 추출 → 이 주제에 맞춤형 시각 언어 설계 → '단락(장) → 샷(화면 비트)'으로 분해 → 각 샷의 플롯 감정에 맞는 장면 애니메이션 설계 → 텍스트 포인트 연출 → 렌더링 → 샘플 검사.

제1원칙: 스타일은 주제에 기여하며, 고정된 템플릿은 없다

파이프라인과 방법론은 일반적이지만, 시각적 스타일은 주제에 따라 반드시 재설계되어야 합니다.

• 각 새 이야기마다 먼저 '주제 분위기 분석'을 수행합니다: 이 이야기의 키워드는 무엇인가? (향수? 열정? 미스터리? 동화? 테크?) → 색상 팔레트, 글꼴 분위기, 애니메이션 리듬, 장면 화풍을 도출합니다.
• 예시 (참고용일 뿐, 규칙이 아님): 따뜻한 추억 → 세리프 명조 + 크림색/골드 + 느린 리듬의 부드러운 조명; 열정 스포츠 → 산세리프 볼드체 + 고채도 빨강/검정 + 빠른 컷과 강한 비트; SF → 차가운 색상 + 고정폭 글꼴 + 글리치/스캔라인 효과; 동화 → 둥근 글꼴 + 마카롱 색상 + 탄력 애니메이션.
• 이전 프로젝트의 스타일을 다음 프로젝트로 가져오지 마십시오. 사용자가 명시적으로 지정하지 않은 경우, 먼저 1~2개의 스타일 옵션을 제시하여 사용자가 선택하도록 합니다.

핵심 개념

• 화면이 이야기를 전달한다: 각 샷의 화면은 해당 문장의 플롯 감정 및 동작과 일치해야 합니다 (지진 문장에는 흔들리는 교실, 환호 문장에는 깃발을 흔드는 군중, 줄 서는 문장에는 난간 긴 줄) — 부정확한 매칭 (슬픔에 축제)은 가장 큰 금기입니다.
• 장면은 프로그래매틱 애니메이션을 사용합니다 (인물 실루엣/기하학적 도형 + sin 위상 차이 운동, 프레임별 구동), 정적 이미지는 사용하지 않음; 애니메이션 밀도는 주제에 따라 결정됩니다 (부드러운 소재는 적고 느리게, 열정 소재는 많고 빠르게).
• 타이포그래피는 연기의 일부입니다: 글꼴 분위기, 글자 크기 계층, 키워드 강조 색상은 모두 주제에서 도출됩니다.

파이프라인 (5단계, 순서 고정)

1. 스타일 도출: 주제 키워드 → 색상 팔레트 / 글꼴 분위기 / 애니메이션 리듬 / 장면 화풍 → (지정되지 않은 경우 사용자가 선택).
2. 이야기 분해: 플롯 아크에 따라 단락(장)으로 분해 → 샷 (1~2줄당 샷 1개); 각 단락 끝에 짧은 명언을 추출하여 요약 카드 생성; 줄 끝 구두점 정리 (clean_tail() 범용 정리).
3. 타임라인 gen_assets.py → timeline.json (샷 시작/종료/레이아웃/포인트; MIN_SHOT 3.5s 느린 컷 기본, 주제에 따라 조정 가능).
4. 단언 감사 + 동기화 check_views.py (매핑 커버리지/범위 초과) + verify_timeline.py (줄 끝 구두점=0 / 최소 샷≥3.0s / 요약 카드 길이 / 연령 태그, 임계값은 주제에 따라 조정 가능) — 하나라도 실패하면 렌더링 금지 → sync-timeline.mjs.
5. 렌더링 + 샘플 검사 npx remotion render → ffmpeg 키프레임 추출 재검토 (장면 감정/텍스트 계층/애니메이션 타이밍).

엄격한 규칙 (주제와 무관하며 항상 적용)

• 줄 끝에 구두점 없음 (대시 포함): 범용 정리 함수 + 단언 = 0.
• 화면과 대사 감정이 엄격히 일치해야 함; SHOT_VIEW 매핑 테이블의 분할 샷 변경 시 감사 재실행 필수.
• 중첩 Sequence 내 하위 컴포넌트의 애니메이션 원점 = 해당 샷의 시작 프레임 (startFrame 전달); 그렇지 않으면 입장 애니메이션이 자동으로 건너뛰어짐.
• 정치적 상징 규범적 묘사 (국기 = 빨간색 바탕 + 1개의 큰 별과 4개의 작은 별), 어떤 근사한 낙서도 금지.
• 실제 사람 음성 더빙 교체: wav 파일을 넣고 gen_assets.py를 다시 실행하면 타임라인이 자동으로 재배열됨.

기존 자산 (참조 구현, 재사용 및 개조 가능)

templates/는 완료된 프로젝트 '90后年代志'(따뜻한 추억 주제: 세리프 명조 + 크림/골드 + 느린 리듬 + 군중 실루엣 군상)에서 가져온 것입니다. 이는 주제 도출의 한 예시일 뿐, 기본 스타일이 아닙니다:

• 직접 재사용 가능한 골격: gen_assets.py (텍스트→타임라인 구조) / check_views.py (매핑 감사) / verify_timeline.py (종합 단언) / sync-timeline.mjs / fit.ts (줄바꿈) / beat.ts (비트).
• 주제에 따라 재작성되는 시각 레이어: theme.ts (색상/글자 크기) / serif.ts (글꼴) / scenes.tsx (장면 애니메이션) / TitleCard.tsx / Era.tsx / Intro.tsx (레이아웃).
• 8가지 군상 애니메이션 기법을 이식 가능: 군중 깃발 흔들기, TV 구경, 지진 교실, 줄 서기, 마스크 보행자, 아이 쫓아가며 밥 먹이기, 불꽃놀이, 등불 (색상과 화풍만 바꾸면 새 장면).

상세 매개변수

references/spec.md: 위 참조 구현의 전체 매개변수 (글자 크기 5단계/입장 4방향/심도/느린 페이드인 길이/실루엣 색조). 새 주제는 이에 맞춰 규모를 조정할 수 있으며, 값을 그대로 복사할 필요는 없습니다.