렌더링, 내보내기, 수정
projects/<name>/ 디렉토리 내에서 실행하세요. 최종 승인된 파일은 작업 공간 루트의 exports/ 폴더로 복사됩니다.
치트 시트
npx hyperframes render . -o renders/video.mp4 # 기본값
npx hyperframes render . --fps 60 -o renders/video-60fps.mp4
npx hyperframes render . --resolution 4k -o renders/video-4k.mp4 # 종횡비가 일치해야 함; 세로 → 세로-4k
npx hyperframes render . --resolution 4k --fps 120 -o renders/video-4k-120.mp4
npx hyperframes render . --fps 24 -o renders/video-24fps.mp4
npx hyperframes render . --format mov -o renders/video.mov # ProRes
npx hyperframes render . --format png-sequence -o renders/frames
npx hyperframes render . --crf 23 -o renders/smaller.mp4 # 파일 크기 축소
- 그래픽이 사용자의 영상 위에 있는 경우, 사용자가 별도로 요청하지 않는 한 영상의 fps를 유지하세요.
- 타이밍 참고 (4코어 i3 노트북, 약 12GB RAM 기준; 더 빠른 PC는 더 빠름): 단순 1080p 그래픽 6초 ≈ 24초; 1080x1920 영상 + 종이 컷 3분 20초 ≈ 1.5시간 (~1.1fps:
filter: drop-shadow는 스크린샷 캡처를 강제하며, 빠른 캡처는 macOS에서만 작동). 긴 렌더링 전에 사용자에게 경고하고 마지막에 한 번만 렌더링하세요. - 속도 조절 레버:
--workers 3(각 Chrome 약 256MB; 기본auto는 여기서 1을 선택함 – 짧은 클립으로 먼저 테스트),--quality draft(검토용 렌더링), 또는 더 짧은 클립. 렌더링 중 메모리 부족 또는 타임아웃이 발생하면--low-memory-mode및/또는--protocol-timeout 600000을 추가하세요. - 오디오만 변경하는 경우 재렌더링이 필요하지 않습니다:
node tools/sfx.mjs projects/<n> --mix in.mp4 out.mp4(비디오 스트림이 복사됨). npx hyperframes snapshot(빠름)으로 반복 작업하고, 프레임이 올바르게 보일 때만 렌더링하세요.
투명 내보내기 (PROMPT 14)
배경이 투명한 경우에만 MOV/PNG가 투명해집니다.
- 배경과 모든 영상을 제거하여 카드(들)만 남깁니다; 주변은 모두 투명하게 합니다.
- 프로스트 카드는 뒤에 아무것도 없으면 블러가 사라집니다 → 오버레이에는 단색 카드로 전환하세요.
renders/card.mov(알파 포함 ProRes 4444,--format mov)와 PNG 시퀀스를renders/card-png에 내보냅니다 (--format png-sequence).- 체커보드 위에 스냅샷을 찍어 카드만 보이는지 확인합니다. (
--format webm도 또 다른 투명 옵션입니다.)
문제가 보일 때
| 증상 | 해결 방법 |
|---|---|
| 잘못된 글꼴 / 기본 대체 글꼴 | fonts/ 디렉토리 내 파일을 @font-face로 사용하세요; 웹 폰트 URL은 절대 사용하지 마세요. lint는 font_family_without_font_face를 플래그합니다. |
| 휴대폰에서 텍스트 잘림 | 모든 텍스트를 너비의 중간 80% 안에 유지하세요. |
| 카드가 자막을 가림 | 모든 카드를 아래쪽 1/3 위로 이동하세요. |
| 카드가 약간 빠르거나 늦음 | 음성-텍스트 변환은 약 1초 정도 어긋날 수 있습니다. 정확한 발화 시점에 맞게 다시 타임하세요 (주변 오디오 확인). |
| 파일 크기가 큼 | --crf 23으로 다시 렌더링하세요 (특히 그레인 스타일). |
| 렌더링 무음 | 모든 <audio>에는 id가 필요합니다; <video>는 muted 상태가 아니어야 하고 data-has-audio="true"가 필요합니다. |
사용자가 문제를 일반 언어로 설명하면, 이를 위 표의 항목 또는 mg-styles의 설정 값으로 변환하세요. |