Bang Motion: PPT가 아닌 웹 모션 그래픽
v1.19.0 · Bang Tutorial · MIT. 변경 내역은 업스트림 CHANGELOG.md에 있습니다; 설치 방법은 업스트림 README.md에 있습니다. 이 문서는 업스트림 스킬의 한국어 번역입니다.
이 스킬은 모든 AI 코딩 에이전트(오픈 Agent Skills 형식)를 위한 것입니다. 프레젠테이션이 아닌 비디오처럼 움직이는 모션 그래픽을 위한 법칙과 레시피를 담고 있습니다. 코드를 작성하기 전에 이를 따르십시오.
전제 조건: 브라우저만 있으면 됩니다
결과물(index.html)은 최신 브라우저와 CDN(GSAP, 폰트)을 위한 인터넷 연결만 필요합니다. Python과 Node는 선택 사항이며 작업 도구에만 사용됩니다: scripts/serve.py(로컬 모듈 사용 시에만 필요한 노캐시 서버), puppeteer(자동 스냅샷/검증, scripts/export-frames.mjs → MP4). 사용자가 둘 다 없을 경우: (1) 단일 파일을 만들어 더블클릭으로 엽니다; (2) ?debug=1(스크러브 패널)과 주요 초에서의 수동 스크린샷으로 시각적 검증을 합니다; (3) OBS/브라우저 탭 녹화로 MP4를 얻고, 화면 녹화는 프레임 드롭이 발생할 수 있으며 프레임별 렌더링에는 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:autoAlpha/opacity로 켜고 끄는<section>요소로 만든 장면이 3개 이상이면 그것은 슬라이드 덱입니다. 장면은 WORLD/CAMERA가 움직이기 때문에 변경되어야 합니다(카메라가 움직이거나, 다른 구석으로 휙 돌거나, 밀고 들어가거나, 배경이 바뀜), 섹션이 페이드 아웃되기 때문이 아닙니다. 합법적인 예외: 만화 무대 (references/cartoon-stage.md)는 무대 간 컷/96px 슬라이드를 사용합니다. 각 무대가 완전히 활성화되어 있기 때문에(≥10개의 오브젝트가 동작 중) 허용되며, 페이드 되는 정지 이미지가 아닙니다.- 시각적 연결선이 지속됩니다: 하나의 주제(연속 동작) 또는 카메라가 이동하는 하나의 콜라주/종이/흰색 세계(만화, 사진, 카탈로그, 스케치). 공유 세계 없이 전체 화면 사진이 교체되는 → PPT. 장면마다 한 장의 그림 + 한 문장이 교체되는 → 카메라가 움직여도 여전히 슬라이드쇼: 각 장면에는 구절당 3-5개의 요소가 점진적으로 등장합니다(explainer.md "한 장면 = 3-5개 요소").
- 장면당 텍스트 노드 개수: 키커/eyebrow + 제목 + 본문/크레딧 = 3단계 → PPT. 최대 두 개: 하나의 큰 숫자/문장 + 하나의 세계 레이블. 3줄 이하의 문서/스탬프/날짜 블록은 텍스트 단계가 아닌 오브젝트로 간주합니다.
- Ken Burns(사진에서 스케일 1.0→1.05)가 유일한 모션인 경우 → PPT. 매초의 모션은 스타일 브리프에서 선택한
techniques.md§7c 메뉴의 백그라운드 모션 언어에서 비롯되어야 합니다(질감 배경의 카메라 브리딩, 드리프팅 그래디언트, 떠다니는 블롭, 라이브 그레인, 세그먼트당 라이트 스윕, 천천히 회전하는 큰 모양, 떠오르는 파티클, 브리딩 그리드, 떠다니는 고스트 텍스트, Ken Burns + 시차…). 막대/선/조각이 옆으로 교차하는 것("레인", "레인지", "스트릭", 수평 파티클 레인)은 이미 서로 다른 이름으로 두 프로젝트에서 연속으로 사용되었습니다. 그것들은 기본값이 아닙니다. 테마가 정말 속도/흐름일 때만 사용하고, 두 프로젝트에서 연속으로 사용하지 마십시오. - 모든 컷에서 페이드 + 스케일 범프 + 라이트 릭만 있는 전환 → PPT 템플릿. 다른 구석으로 휙 돌기, 악기(지도/속도계/프로필)로 컷, 밀어넣기(push-through).
- 설명 영상은 해당 스타일의 스타터에서 시작합니다:
starter-explainer-cartoon,-journalism,-catalog,-sketch(콜라주 모드: 카메라가 정적 에셋 위를 이동),starter-explainer(연속 동작: 세계가 흐름), 또는starter-explainer-stage(만화 무대: 장면당 하나의 무대, 조인트 리그, 카메라는 무대 내부에서만). 콜라주는 하나의 리그를 공유하고, 무대는 다른 리그를 사용합니다.assets/starter-opener.html(텍스트 오프너)에서 시작하지 말고, 처음부터 시작하지 마십시오. - 미니어처는 슬라이드입니다. 카메라가 < 1.08로 확대되어 집이 엄지손가락 크기이고 빈 땅이 화면 절반을 채우는 경우 → 모든 것이 움직여도 PPT입니다. 탐험할 하나의 큰 지도보다는 세계를 프레임 크기의 무대로 나누십시오(
cartoon-stage.md법칙 1). - 템플릿 골격(오프너/프로모션). 런다운과 코드를 확인하십시오: 첫 번째 장면은 텍스트가 커지다가 왼쪽으로 나가는 것; 세 개의 기능 타일/카드가 나란히 있는 것; 입력 상자/서치바에 입력되는 것; 순서 훅 → 기능 → 기능 → 약속 → 로고 → CTA. 개념의 요구 없이 두 개 이상이면 → 템플릿, 새로운 스킨을 입혀도 마찬가지입니다.
references/opener-concepts.md에서 골격을 다시 선택하십시오.
하나라도 실패하면 → 사용자에게 보여주기 전에 재작업하십시오.
다루는 작업 종류
이 스킬은 일반적인 웹 모션 그래픽을 위한 것입니다. 설명 영상은 그중 하나일 뿐이며, 구조가 다르기 때문에 별도의 문서가 있지 주요 작업이라는 의미는 아닙니다.
스타터는 카테고리별로 명명됩니다: starter-opener.html(오프너, 프로모션, 범퍼, 인트로, 키네틱 타이포그래피); starter-explainer-*.html(설명 영상), 모드/스타일 접미사 포함(-cartoon, -journalism, -catalog, -sketch = 콜라주; 접미사 없음 = 연속 동작; -stage = 만화 무대). 만화 무대는 설명 영상 모드(스타일 6)이지 별도의 카테고리가 아닙니다: 그 목표는 여전히 VO로 설명하는 것이며, 제작 방식만 다릅니다.
| 종류 | 일반 길이 | 특징 | 레시피 |
|---|---|---|---|
| 오프너 / 제품 프로모션 | 25-40초 | 메뉴에서 하나의 콘셉트(골격은 고정된 순서가 아닌 제품에서 비롯됨), 하나의 특별한 순간, 브랜드 클로징 | references/opener-concepts.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/cartoon-stage.md를 읽으십시오: 장면당 하나의 무대, 줌 1.08-1.95, 무대 내부에서는 연속적이고 무대 간에는 컷/96px 슬라이드, 수동 변환이 있는 조인트 리그, 자막 없음, 밝고 평평한 팔레트. 문장, 시각적 비트, 프레이밍, 무대 변경을 구분하십시오. After Effects에서 직접 제작하려면 references/ae-bridge-higgsfield.md를 읽으십시오. 이 설명 영상별 지침은 아래 오프너 규칙을 더욱 선명하게 합니다; 예제 폰트, 장면 수, 효과는 보편적인 레시피가 아닙니다.
법칙 #1: 이것은 비디오이지 슬라이드가 아닙니다
가장 흔한 질병: 모델이 장면을 슬라이드처럼 배치하여 제목 + 부제목 + 본문 + 배지 행을 포함합니다. 이는 즉시 "PPT"처럼 읽히고 거부됩니다.
엄격한 규칙:
- 오프너의 경우: 장면당 하나의 짧은 문장 + 최대 하나의 메인 오브젝트. 키커("01 — 기능"), 부제목, 설명 문단, 기능 칩/배지, 또는 기술적 메타데이터(패키지 이름, 긴 URL)가 없습니다. 사용 중인 제품 UI의 일부인 칩, 버튼, 레이블은 제외됩니다.
- 새로운 정보 = 새로운 시각적 반응. 설명 영상에서, 여전히 관련이 있을 때 동일한 세계에서 상태/동작을 변경하십시오; 새로운 문장이 반드시 샷을 변경할 필요는 없습니다.
- 글머리 기호 목록을 자동으로 세 개의 타일이 아닌 시각 자료로 대체하십시오.
references/opener-concepts.md의 기능 메뉴에서 방법을 선택하십시오(하나의 기능 데모, 교체되는 단어, 변형되는 오브젝트, 섞인 카드, 타일 그리드…); 연속된 두 오프너는 동일한 방법을 사용하지 않습니다. - 장면은 살아 있어야 합니다. 카메라는 오브젝트가 동작을 수행하는 동안 쉴 수 있습니다. 카메라를 움직여 무언가를 따라가거나 드러내십시오. 정적 배경 위에 텍스트를 페이드/슬라이드하거나 모든 세그먼트에서 반복적인 팬/줌에 의존하지 마십시오.
- "확대/축소" = 샷 크기이지 카메라 브리딩이 아닙니다. 비디오가 정적으로 느껴지거나 사용자가 줌을 요청할 때, 카메라는 스토리를 전달하는 요소(미디엄 클로즈업 / 클로즈업)로 이동한 다음 콘텐츠의 비트에 따라 와이드로 후퇴합니다. 몇 퍼센트의 브리딩은 거의 보이지 않습니다(
techniques.md§3b).
장면을 디자인하기 전에 references/anti-ppt.md를 읽으십시오. 실제 위반 사례와 해결 방법이 함께 나열되어 있습니다.
법칙 #2: 결정론적이거나 죽거나
단 한 줄도 시스템 시계를 읽지 않습니다. 모든 시각적 요소는 tl.time()(GSAP 타임라인 시간)의 순수 함수입니다: 스펙트럼, 실행 중인 숫자, 파티클, 카메라 흔들림(고주파 사인, Math.random() 아님), "흐르는" 오브젝트의 위치(거리 트윈, 프레임당 속도 누적 금지). 결과: 스크러빙이 After Effects 타임라인처럼 정확하고, MP4로의 프레임별 렌더링이 매번 동일한 이미지를 생성합니다.
법칙 #3: 스타일은 테마에서 태어난다, 스타터나 참조에서가 아니다
흔한 실패: 다른 제품의 오프너가 이전 제품 오프너의 스킨과 정확히 동일하게 나오는 경우: 어두운 배경, 파란 악센트, 글로우, 성운, 동일한 폰트. 모델이 스타터에서 스타일을 가져왔기 때문입니다. 애니메이션이 좋아도 여전히 실패입니다: 오프너는 제품의 얼굴이며, 두 제품이 같은 얼굴을 공유해서는 안 됩니다.
- 스타일 브리프 먼저, 코드는 나중에. 스타터를 건드리기 전에, 다음 줄을 작성하고 장면 런다운과 함께 사용자에게 보여주십시오:
- 테마/제품 + 남길 느낌을 설명하는 세 개의 형용사;
- 콘셉트 및 구조 지문 (오프너/프로모션):
references/opener-concepts.md에서 세 개의 후보 콘셉트, 제품에서 이유와 함께 선택된 하나, 그다음콘셉트 · 장면 수 · 장면당 메인 오브젝트 · 오프닝 · 클로징; - 팔레트: 브랜드/테마(로고, 앱 아이콘, 사이트, 패키징)에서 가져온 하나의 메인 색상, 하나의 배경색, 하나의 악센트. 각 색상의 16진수와 출처를 명시하십시오. 브랜드에서 가져오지 않은 색상은 "파생됨: 이유"로 작성하십시오;
- 그 느낌에 맞는 개성이 있는 디스플레이 폰트(Poppins/Inter/Roboto/Montserrat/Arial 아님) + 동반 폰트; 예외: 주장 → 방법 → 결과 콘셉트는 제품 자체의 UI 폰트를 사용합니다(
references/opener-concepts.md); - 텍스트 강조: 단어 하이라이트 없음, 또는 한 가지 형태의 하이라이트(이름 지정). 단어 하이라이트는 선택 사항이지 모든 오프너의 기본값이 아닙니다;
- 세그먼트별 배경 언어: 전체에 대해 "스타일 방향" 테이블에서 하나의 방향, 또는 변경 계획(어떤 세그먼트가 변경되는지, 무엇으로, 이유, 무엇에 의해 트리거되는지);
- 시그니처 무브: 아이덴티티로 반복되는 한 가지 종류의 모션(오브젝트 와이프, 단어별 3D 롤, 나는 종이, 선 그리기, 가장자리를 때리는 색상 블록…);
- 백그라운드 모션:
techniques.md§7c 메뉴에서 하나의 언어. 시그니처 무브와 같은 것이 아니며, 자동으로 "오브젝트 교차"가 아닙니다; - 백그라운드 표면: §7d 메뉴(그래디언트/라이트/텍스처/그레이니 그래디언트, ≥ 2개 레이어)에서 선택, 평면이 아님;
- 오브젝트 렌더링 스타일:
techniques.md§7e 메뉴에서 하나의 패밀리(플랫, 클레이, 글로시, 유리, 아이소메트릭, 사실적, 네온 라인…); - 사진 에셋(콘셉트가 사람/장소/제품 사진을 사용하는 경우): 출처(사용자 사진, Higgsfield MCP를 통해 생성, 또는 라이선스 스톡)를 사용자에게 물어보고, 행별 샷 리스트를 추가하십시오(
references/opener-concepts.md, "오프너의 사진"); - 전환: 효과가 필요한 경계와 단순 컷으로 충분한 경계를 결정하십시오. 컨텍스트에 맞게 §4c 메뉴에서 선택하십시오. 두 가지 종류 또는 3D는 필수가 아닙니다;
- 하나의 특별한 순간(가장 비싼 효과가 한 번 사용되는 곳).
- 스타터는 아키텍처이지 스타일이 아닙니다.
assets/starter-opener.html의 회색, 시스템 폰트, WebGL 배경은 자리 표시자입니다. 결과물에 그중 하나라도 보이면, 스타일이 파생되지 않은 것입니다. WebGL 배경(성운, 더미 명암, 렌즈 플레어, 정적 파티클 등)은 특히 위험합니다: "starter-opener에는 WebGL이 있습니다"라는 이유로 유지되며 메인 비주얼이 됩니다. 사용자 개념에 WebGL 배경이 필요하지 않으면 즉시 제거하십시오. 오프너가 어둡고 성운이 있는 배경이 되는 것이 싫다면, WebGL이 있는 스타터를 사용하지 마십시오.
워크플로우
- 요청 분석 (사용자 의도 식별: 오프너/프로모션, 키네틱 타이포그래피, 설명 영상 등)
- 스타일 브리프 생성 (위 법칙 #3 참조)
- 장면 런다운 작성 (각 장면: 시간, 오브젝트, 카메라 동작, 텍스트)
- 스타터 선택 (종류에 따라 적절한 HTML 파일)
- 코딩 (HTML + CSS + GSAP, 필요시 Three.js)
- 검증 (위 PPT 검사, 결정론적 애니메이션 확인)
- 내보내기 (MP4 또는 화면 녹화 안내)
참조 문서
references/anti-ppt.md- PPT 스타일 위반 사례 및 해결 방법references/cartoon-stage.md- 만화 무대 설명 영상 가이드references/explainer.md- 설명 영상 구조 가이드references/opener-concepts.md- 오프너 콘셉트 메뉴references/techniques.md- 모션 그래픽 기법 모음references/ae-bridge-higgsfield.md- After Effects Higgsfield 브릿지 가이드