논스톱 모션 (Nonstop Motion)
주제를 15~40초 세로형 모션 그래픽 영상으로 바꿉니다.
- 처음 0.5초 안에 스크롤을 멈춥니다. (0번 프레임에서 이미 훅이 보이며, 절대 검은 화면에서 페이드 인하지 않습니다.)
- 절대 멈추지 않습니다. 세 가지 모션 레이어(카메라, 앰비언트, 콘텐츠)가 항상 작동합니다.
- 빠르지만 읽기 쉽습니다. 각 비트의 길이는 포함된 단어 수에 따라 계산되므로, 모든 줄이 읽을 수 있을 만큼 충분히, 그러나 그 이상 오래 머물지 않습니다.
- 모든 주제에 적용됩니다. 비트 유형은 일반적입니다(훅, 통계, 목록, 비교, UI, 채팅, 대화 등). 4가지 테마와 3가지 템포로 테크, 금융, 교육, 코미디, 제품, 스토리 콘텐츠를 다룹니다.
각 영상은 두 개의 레이어로 구성됩니다:
- 배경: 로우폴리 3D 월드(3가지 세트: 책상, 옥상, 무대), 3D 마스코트 블립, 14가지 시네마틱 카메라 샷(스냅-줌, 버티고 돌리-줌, 휩, 크레인, 더치, 오빗 등). 각 비트는 고유한 샷을 가집니다.
- 전면: 키네틱 타이포그래피, UI 창, 채팅, 통계 링, 목록, 전체 화면 펀치.
- 사운드: 오리지널 생성 음악. 모든 컷이 킥 드럼 위에서 떨어지고, 카메라는 모든 비트에 맞춰 펀치를 넣으며, SFX는 컷에 맞춰 효과음을 냅니다.
엔진은 template/ 디렉토리에 있는 Remotion 프로젝트입니다. 일반 영상의 경우 애니메이션 코드를 직접 작성하지 않습니다. scripts/<slug>.json 파일을 작성한 후 렌더링합니다.
워크플로우 (순서대로 따르세요)
1. 브리프 (추론할 수 없는 것만 질문)
- 주제 + 시청자가 떠나며 가져가야 할 핵심 (한 문장).
- 청중 + 언어. 크리에이터가 게시하는 언어로 작성하세요. 속어도 포함합니다(예: 인도네시아어 casual "lu/gw").
- 목표 → CTA: 팔로우(시리즈), 저장(유용한 목록), 공유(공감), 댓글(의견 또는 질문).
- 니치 → 테마 + 템포.
references/adaptation.md를 참조하세요.
2. 구조 선택
references/adaptation.md에서 하나의 아크를 선택하세요(문제→반전, 신화→진실, 스토리/관점, 리스트글, 대결, 숫자 우선, 빌드업→펀치). 그런 다음 비트로 매핑하세요. 610비트, 1835초를 목표로 하세요.
3. 비트 스크립트 작성
모든 비트의 필드는 references/beats.md를 읽으세요. 엄격한 규칙:
- 비트 1은 항상
hook이며, 최대 8단어, 호기심 갭 또는 긴장감을 포함해야 합니다(공식은references/retention.md참조). - 비트당 하나의 아이디어. 텍스트 비트는 12단어 이하로 유지하세요. 줄이 더 길면 두 개의 비트로 나누세요. 빠른 템포는 더 많은 단어가 아닌 더 많은 비트에서 나옵니다.
- 비트당 하나의 강조를
*별표*로 표시하세요. 강조된 부분은 강조 색상으로 마커 스위프 효과와 함께 렌더링되며, 시청자의 시선이 먼저 그곳으로 향합니다. - 적어도 2비트마다 비트 유형을 변경하세요. 같은 유형을 3번 연속으로 사용하지 마세요. 약 3-4비트마다
punch또는stat을 패턴 인터럽트로 사용하세요. - 보여주세요, 자막으로 설명하지 마세요. 주제에 소프트웨어가 관련되면
ui를 사용하세요. 대화는chat, 숫자는stat, A vs B는compare에 넣으세요. - 마지막 비트는
cta입니다. CTA는 1단계의 목표와 일치해야 합니다. - 사실을 지어내지 마세요. 예시 숫자는 예시("contoh", "예:")로 표시하거나 실제 출처가 있는 수치를 사용하세요.
4. 린트, 렌더링, QA
template/ 디렉토리는 이 SKILL.md 옆에 있습니다. 처음 사용 시 template/node_modules가 없으면 npm install을 실행하세요(약 1분 소요).
cd template
npm install # 첫 번째에만 실행
npm run lint:script -- scripts/<slug>.json # 가독성, 템포, 샷 계획, 비트 그리드 타이밍 확인
npx remotion render NonstopShort out/<slug>-draft.mp4 --props=scripts/<slug>.json --scale=0.4 # 빠른 드래프트
npx remotion render NonstopShort out/<slug>.mp4 --props=scripts/<slug>.json # 최종 1080×1920
bash scripts/qa-sheet.sh out/<slug>.mp4 # 연락처 시트 → out/<slug>-sheet.png
연락처 시트를 열고 다음을 확인하세요:
- 프레임 0: 훅이 보이나요?
- 각 비트: 텍스트를 읽을 수 있고 안전 영역 안에 있나요?
- 정적 구간: 어떤 샷이라도 약 1초 이상 정지해 있나요?
- 겹침: 요소들이 충돌하지 않나요?
먼저 JSON을 편집하여 수정하세요: 비트 나누기, hold 사용(0.8은 조이고 1.3은 여유를 줌), 또는 transition, shot, set 변경. JSON으로 변경을 표현할 수 없을 때만 코드를 편집하세요. 3D 렌더링은 CPU 서버에서 프레임당 약 1~2초가 걸리므로 항상 --scale=0.4 드래프트로 먼저 QA하세요.
대화형 미리보기: npx remotion studio
5. 전달
MP4, JSON, 그리고 3~5개의 해시태그가 포함된 캡션을 전달하세요. 음악과 SFX는 이미 MP4에 포함되어 있습니다: 템포에 맞춰 생성된 오리지널 트랙입니다. 대신 트렌드 사운드를 사용하려면 "music": false로 렌더링하고 앱에서 사운드를 추가하세요. 컷은 여전히 92/118/140 bpm 그리드를 따릅니다.
테마 × 템포
| 테마 | 비주얼 | 최적 대상 |
|---|---|---|
midnight | 밤하늘 인디고, 따뜻한 앰버 포인트, 은은한 글로우, 마스코트 | AI/테크, 스토리텔링, POV 스킷 |
paper | 크림색 종이, 검은 윤곽선, 오프셋 "스티커" 그림자 | 교육, 과학 사실, 라이프스타일, 코미디 |
terminal | 거의 검은색, 인광 녹색, 3D 스크롤 그리드 | 개발자 유머, 해킹/보안, 게임 |
editorial | 오프 화이트, 세리프 디스플레이, 차분한 라인 | 금융, 비즈니스, 뉴스, 자기계발 |
| 템포 | 읽기 속도 | 최소 비트 | 느낌 |
|---|---|---|---|
chill | 2.6 wps | 1.6 s | 스토리텔링, 감성적 |
fast (기본) | 3.5 wps | 1.0 s | 대부분의 콘텐츠 |
hyper | 4.0 wps | 0.75 s | 밈, 빠른 목록, Z세대 유머 |
meta.mascot: false는 마스코트를 제거합니다(진지하거나 브랜드 콘텐츠에 사용). meta.mascotName으로 이름을 바꿉니다.
meta.world: "flat"은 3D 월드를 제거합니다(2D 전용, 약 3배 빠름). meta.music: false 또는 { file, bpm, volume }. meta.sfx: false는 휘파람 소리를 음소거합니다.
참조 파일 (필요할 때 읽으세요)
references/beats.md: 모든 비트 유형, 필드 및 사용 시기. 스크립트 작성 전에 읽으세요.references/adaptation.md: 니치 → 테마/템포/아크 및 준비된 비트 시퀀스.references/retention.md: 훅 공식, 패턴 인터럽트, 루프, CTA.references/camera-and-music.md: 세트, 14가지 카메라 샷, 비트 싱크 규칙, 커스텀 음악, 렌더링 속도.references/tempo-and-motion.md: 타이밍 수학과 모션 원칙; 코드 변경 전에 읽으세요.references/style-principles.md: 비주얼 뒤에 숨은 원칙(분위기 월드, 강조 색상, 캐릭터, 리듬).references/originality.md: 독창성을 유지하기 위한 규칙(브랜드/IP 요청 전에 읽으세요).references/extending.md: 테마, 비트 유형, 커스텀 마스코트, 음악 또는 음성 해설, 기타 화면 비율 추가.