Bang Motion — PPT가 아닌 모션 그래픽 웹
모션 설명자 라이브러리. 아래 본문은 단일 독립형 index.html(HTML + CSS + GSAP)을 위한 Bang Motion 감독 매뉴얼입니다. 이 라이브러리 내의 동일한 외형은 일반 파이프라인에 연결된 세 가지 엔진으로도 제공되므로, 릴이 다른 스타일과 마찬가지로 이를 선택할 수 있습니다:
style.json: 매니페스트(bang-motion, 캔버스 1080x1920, 30fps, 엔진remotion,fframes및kyfram)remotion/:kit/(GlowHorizon,GrainyMeshBlob,GlassCard,KineticTitle,StatusPill,BangBanner,GlassCaptions,LivingGrain),template/,sync_kit.sh,CATALOG.md,AGENT_BRIEF.mdfframes/:Cargo.toml,src/(lib, tokens, kit, look, video, main),tools/ff.shkyfram/PRELUDE.lgv: 팔레트 토큰과 비트 퍼니처 (drawBackdrop,drawBanner,drawCaptions,drawPanel,drawDot,drawFrame)docs/style-guide.md및docs/style-prompt.md: 압축된 스타일 시트 및 이식 가능한 프롬프트
에피소드는 ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion(또는 --engine fframes|kyfram)로 스캐폴딩합니다. 파이프라인 스킬은 스타일 이름을 $MOTION_STYLE로 사용하므로 워크플로우의 다른 부분은 변경되지 않습니다.
한 호흡에 담긴 스타일 DNA: 하나의 연속된 세계, 항상 움직이는 최소 두 개의 레이어로 구성된 배경(깊은 베이스와 빛나는 수평선), 랜덤 노이즈가 아닌 t에서 오프셋되는 그레인, 정적 프레임 대신 호흡하는 카메라, 단일 반복 와이프 대신 동기 있는 전환, 그리고 슬라이드 분량의 정보 대신 한 샷당 하나의 진술.
v1.19.0 · Bang Tutorial 제작 · MIT. 변경 내역은 CHANGELOG.md에; 설치 방법은 README.md에 있습니다.
이 스킬은 모든 AI 코딩 에이전트용입니다(오픈 에이전트 스킬 형식). 내용은 프레젠테이션이 아닌 비디오처럼 움직이는 모션 그래픽을 위한 법칙과 레시피입니다 — 코드를 작성하기 전에 준수하십시오.
전제 조건 — 브라우저만 있으면 됨
산출물(index.html)은 브라우저(최신 버전) + CDN용 인터넷(GSAP, 폰트)만 있으면 됩니다. Python과 Node는 선택 사항이며, 작업 도구로만 사용됩니다: scripts/serve.py (노캐시 서버, 로컬 모듈 사용 시에만 필요), puppeteer (스냅샷/자동 검증, scripts/export-frames.mjs → MP4). 사용자가 둘 다 없을 경우: (1) 단일 파일을 그대로 빌드하고, 더블 클릭으로 엽니다; (2) ?debug=1(스크러브 패널)과 키 프레임별 수동 스크린샷을 통해 시각적 검증을 수행합니다; (3) MP4는 화면 녹화(OBS / 브라우저 탭 녹화)를 진행하며, 녹화 결과에서 프레임 드롭이 발생할 수 있고 프레임별 렌더링에는 Node가 필요함을 설명합니다. 감상을 위해 npm install이 필요한 산출물을 절대 만들지 마십시오.
ffmpeg도 선택 사항입니다. 먼저 확인하십시오(ffmpeg -version); 없는 경우:
| 필요 사항 | ffmpeg 있음 | ffmpeg 없음 |
|---|---|---|
| VO 동기화 (문장/문단 경계) | silencedetect | scripts/vo-pauses.html — 브라우저에서 열고 오디오 선택, SEG/PARA 복사; 결과는 동일 (Web Audio, 설치 불필요) |
| 오디오 길이/포맷 | ffprobe | vo-pauses.html의 DUR 값; 브라우저에서 wav/mp3/m4a/ogg 직접 재생 |
| MP4 내보내기 | export-frames.mjs의 PNG 결합 | MP4 없음 — 한 줄 설치(winget install Gyan.FFmpeg / brew install ffmpeg) 또는 화면 녹화 제안 |
| 비디오 참조 학습 (프레임 추출) | fps= + tile= | 사용자에게 키 프레임의 스크린샷을 보내달라고 요청하거나 브라우저에서 비디오를 열고 특정 초에 캡처 |
ffmpeg 없이도 설명자 워크플로우는 VO 동기화까지 완료됩니다; MP4만 설치가 필요합니다.
플레이어 — 없음, 자동 재생, 반복
기본 산출물: 화면에 패널/플레이어 없음, 열리면 바로 재생되고, 끝나면 처음부터 다시 시작합니다(onComplete → play(0); 소리가 있는 경우 오디오도 함께 반복). 숨겨진 컨트롤: R 다시 시작, Space 일시 정지. 스크러브 패널/시계는 ?debug=1(리뷰 도구)에서만 나타나고, ?clean=1은 내보내기를 위해 자동 재생을 보류합니다. 소리가 있습니까? play()를 바로 시도하십시오; 브라우저에서 차단되면 프레임 0에 멈추고 첫 번째 클릭 시 시작하십시오 — "시작하려면 탭" 텍스트는 없습니다. 이는 두 스타터에 모두 내장되어 있습니다.
구조적 금지 사항 — 기계적으로 확인 가능한 PPT 테스트
다른 모델(그리고 당신도, 지쳤을 때)은 아래 법칙을 읽었음에도 이 패턴에 빠질 것입니다. 제출하기 전에, 감정이 아닌 코드를 확인하십시오:
-
grep -c "class=\"scene\"\|<section" index.html— 3개 이상의 장면이autoAlpha/opacity로 켜고 꺼지는<section>인 경우 → 슬라이드 데크입니다. 장면은 세계/카메라가 움직여서 전환되어야 합니다(카메라 이동, 다른 모퉁이로 휩, 푸시스루, 배경 변경). 섹션이 페이드 아웃되어서는 안 됩니다. 합법적인 예외: 무대 만화(references/kartun-panggung.md)는 무대 간 96px 컷/슬라이드를 사용합니다 — 각 무대가 완전히 살아 있고(≥10개의 동작 개체) 페이드되는 정적 이미지가 아니므로 허용됩니다. -
지속되는 시각적 공통 실마리가 있어야 합니다: 하나의 주제(연속적인 동작) 또는 카메라가 따라가는 하나의 콜라주/종이/흰색 세계(만화, 사진, 카탈로그, 스케치). 전체 화면 사진이 공통된 세계 없이 교체됨 → PPT. 장면당 하나의 이미지 + 하나의 문장, 장면마다 변경 → 카메라가 움직여도 여전히 슬라이드쇼: 각 장면은 구절별로 점진적으로 들어오는 3-5개의 요소(explainer.md "하나의 장면 = 3-5개 요소").
-
장면당 텍스트 노드 계산: 눈썹/킥커 + 제목 + 본문/크레딧 = 3단계 → PPT. 최대 두 개: 하나의 큰 숫자/문장 + 하나의 세계 레이블. 짧은 3줄 이하의 문서/스탬프/날짜 블록은 텍스트 단계가 아닌 개체로 계산됩니다.
-
켄 번즈(사진에서 scale 1.0→1.05)가 유일한 움직임 → PPT. 매초의 움직임은
techniques.md§7c 메뉴에서 선택한 배경 움직임 언어에서 비롯되어야 합니다(질감 배경에서 호흡하는 카메라, 이동하는 그라데이션, 떠다니는 블롭, 살아있는 그레인, 세그먼트당 라이트 스위프, 천천히 회전하는 큰 형태, 상승하는 입자, 호흡하는 그리드, 이동하는 유령 텍스트, 켄 번즈 + 시차…). 옆으로 가로지르는 막대/선/조각("레인", "범위", "스트릭", 수평 입자 비)은 이미 두 프로젝트에서 연속으로 다른 이름으로 사용되었습니다 — 기본값이 아닙니다. 주제가 속도/흐름인 경우에만, 그리고 연속된 두 프로젝트에서 사용할 수 없습니다. -
모든 컷에서 페이드 + 스케일 범프 + 라이트 릭만 있는 전환 → 템플릿 PPT입니다. 다른 모퉁이로 휩, 계기판(지도/속도계/프로필)으로 컷, 푸시스루.
-
설명자는 해당 스타일의 스타터에서 시작합니다:
starter-explainer-kartun,-jurnalisme,-katalog,-sketsa(콜라주 모드: 카메라가 정적 자산을 따라감),starter-explainer(연속 동작: 세계가 흐름), 또는starter-explainer-panggung(무대 만화: 장면당 하나의 무대, 관절 리깅, 카메라는 무대 내부에만 있음). 콜라주는 하나의 리그, 무대는 다른 리그를 사용합니다.assets/starter-opener.html(텍스트 오프너)에서 시작하지 말고, 처음부터 시작하지 마십시오. -
미니어처는 슬라이드입니다. 카메라 줌 < 1.08로 집이 엄지만하고 빈 땅이 화면 절반을 채움 → 모든 것이 움직여도 PPT입니다. 세계가 프레임 크기의 무대로 분할되고, 탐험할 하나의 큰 지도가 아닙니다(
kartun-panggung.md법칙 1). -
템플릿 골격 (오프너/프로모). 런다운과 코드를 확인하십시오: 첫 번째 장면이 확대되었다가 왼쪽으로 나가는 텍스트; 세 개의 정렬된 기능 타일/카드; 입력 상자/검색창; 후크 → 기능 → 기능 → 약속 → 로고 → CTA 순서. 개념 요구 사항 없이 두 개 이상 → 템플릿, 외관만 새로워도.
references/opener-konsep.md에서 골격을 다시 선택하십시오.
하나라도 실패하면 → 사용자에게 보여주기 전에 다시 만드십시오.
다루는 작업 유형
이 스킬은 일반적인 웹 모션 그래픽을 위한 것입니다. 설명자는 유형 중 하나일 뿐입니다 — 구조가 다르기 때문에 자체 문서가 있는 것이지, 주요 유형이기 때문이 아닙니다.
스타터는 해당 범주에 따라 이름이 지정됩니다: starter-opener.html (오프너, 프로모, 범퍼, 인트로, 키네틱 타이포그래피); starter-explainer-*.html (설명자, 모드/스타일 접미사: -kartun, -jurnalisme, -katalog, -sketsa = 콜라주; 접미사 없음 = 연속 동작; -panggung = 무대 만화). 무대 만화는 설명자 모드(스타일 6)이며, 자체 범주가 아닙니다: 목표는 여전히 VO로 설명하는 것이며, 다른 점은 제작 방식뿐입니다.
| 유형 | 일반 길이 | 특징 | 레시피 |
|---|---|---|---|
| 오프너 / 제품 프로모 | 25-40초 | 메뉴에서 하나의 콘셉트(골격은 제품에서 탄생, 고정 순서 아님), 하나의 특별한 순간, 브랜드 클로징 | references/opener-konsep.md + 아래 워크플로우 + references/techniques.md |
| 범퍼 / 아이덴트 / 로고 스팅 | 3-8초 | 로고 빌드온, 하나의 시그니처 동작, 시청자가 알아채기 전에 종료 | techniques.md (로고 빌드온, 라이트 릭) |
| 채널 인트로 / 아웃트로 | 5-12초 | 채널 이름 + 모든 에피소드에서 동일한 시그니처 동작 | 아래 워크플로우 |
| 키네틱 타이포그래피 / 가사 | 15-60초 | 텍스트가 주제; 단어/글자별 분할; 리듬이 오디오 따름 | techniques.md (분할 + 방향성 블러, 단어별 3D 팬) |
| 타이틀 / 로우어 서드 / 세그먼트 범퍼 | 2-6초 | 푸티지 위의 작은 요소, 깔끔하게 들어오고 나가며, 투명 배경 | techniques.md |
| 설명자 / 설명 비디오 | 30-90초 | 사실 기반, 개체 표시, 관점 변경, 다섯 가지 스타일 | references/explainer.md + 스타일별 스타터 |
설명자와 캐릭터: 샷을 결정하기 전에 읽을 것
캐릭터가 있는 플랫 키즈 스타일 설명자(여섯 번째 스타일, 무대 만화)의 경우, 또는 슬라이드쇼/미니어처처럼 느껴지는 수정의 경우 references/kartun-panggung.md를 읽으십시오: 장면당 하나의 무대, 줌 1.08-1.95, 무대 내에서 연속적이고 무대 간 96px 컷/슬라이드, 수동 변환을 통한 관절 리깅, 캡션 없음, 밝고 플랫한 팔레트. 문장, 시각적 비트, 프레이밍 및 무대 변경을 구분하십시오. After Effects에서 직접 구축하려면 references/ae-bridge-higgsfield.md를 읽으십시오. 이 특정 설명자 지침은 아래 오프너 규칙을 명확히 합니다. 예시 글꼴, 장면 수 및 효과는 보편적인 레시피가 아닙니다.
법칙 #1 — 이것은 비디오, 슬라이드가 아님
가장 흔한 질병: 모델이 장면을 슬라이드처럼 구성합니다 — 제목 + 부제목 + 본문 + 배지 행. 이는 즉시 "PPT"로 읽히며 거부됩니다.
엄격한 규칙:
- 오프너: 장면당 하나의 짧은 문장 + 최대 하나의 주요 개체. 킥커("01 — FITUR"), 부제목, 설명 문단, 기능 칩/배지 또는 기술 메타데이터(패키지 이름, 긴 URL)는 없습니다. 사용 중인 제품 UI의 일부인 칩, 버튼 및 레이블은 제외됩니다.
- 새로운 정보 = 새로운 시각적 반응. 설명자에서, 여전히 관련이 있다면 동일한 세계에서 상태/동작을 변경하십시오; 문장 변경이 반드시 샷을 변경해야 하는 것은 아닙니다.
- 글머리 기호 목록은 시각적으로 대체, 자동 세 개의 타일이 아님.
references/opener-konsep.md의 기능 메뉴에서 방식을 선택하십시오 (하나의 기능 시연, 단어 변경, 개체 변형, 카드 섞기, 그리드 타일…); 연속된 두 오프너는 동일한 방식을 사용할 수 없습니다. - 장면은 살아 있어야 합니다. 개체가 동작을 수행하는 동안 카메라는 고정될 수 있습니다. 무언가를 따라가거나 드러내기 위해 카메라를 움직이십시오; 정적 배경 위에 텍스트 페이드/슬라이드에 의존하지 말고, 모든 세그먼트에서 반복적인 팬/줌에 의존하지 마십시오.
- "줌 인-아웃" = 샷 크기, 카메라 호흡이 아님. 비디오가 정적이거나 사용자가 줌을 요청하는 경우, 카메라는 스토리를 전달하는 요소(미디엄 클로즈업 / 클로즈업)로 접근한 다음 내용의 비트에 따라 와이드로 후퇴합니다. 몇 퍼센트의 호흡은 거의 눈에 띄지 않습니다(
techniques.md§3b).
장면을 디자인하기 전에 references/anti-ppt.md를 읽으십시오 — 실제 위반 사항과 수정 사항 목록이 포함되어 있습니다.
법칙 #2 — 결정론적이거나 죽음
시스템 시계를 읽는 줄은 단 한 줄도 없습니다. 모든 시각적 요소는 tl.time()(GSAP 타임라인 시간)의 순수 함수입니다: 스펙트럼, 실행 중인 숫자, 입자, 카메라 떨림(고주파 사인파, Math.random() 아님), "흐르는" 개체 위치(거리 트윈, 프레임당 속도 축적 아님). 결과: After Effects 타임라인처럼 정확한 스크러빙이 가능하며, 프레임별 MP4 렌더링은 매번 동일한 이미지를 생성합니다.
법칙 #3 — 스타일은 테마에서 탄생, 스타터나 참조에서가 아님
일반적인 실패: 다른 제품용 오프너가 이전 제품의 외관과 완전히 동일하게 나오는 것입니다 — 어둡고, 파란 악센트, 글로우, 성운, 동일한 글꼴 — 모델이 스타터에서 스타일을 가져오기 때문입니다. 애니메이션은 훌륭할 수 있지만 여전히 실패입니다: 오프너는 제품의 얼굴이며, 두 제품이 같은 얼굴을 가질 수 없습니다.
- 스타일 브리핑 먼저, 코드는 나중에. 스타터를 건드리기 전에 다음 여섯 줄을 작성하고 장면 런다운과 함께 사용자에게 보여주십시오:
- 테마/제품 +
[원본이 잘렸으므로 이하 번역 불가]