종이 콜라주 영화은(는) 무엇을 하나요?
콜라주 영화 = 찢어진 종이를 통한 하나의 연속적인 스톱모션 카메라 여정으로, 음악에 맞춰 컷 편집되고 타이틀, 로고로 이어지는 페이지 찢기, 그리고 행동 유도 문구로 끝납니다. 모든 것은 사진 오려내기를 제외한 코드입니다. assets/template/는 배송된 그대로 렌더링되는 완전한 10초 영화(kaye.creatives YouTube 론칭)입니다. 처음부터 시작하지 말고 이것을 적용하세요.
이 스킬 사용자가 기대하는 것 (참조/lessons.md에 설명이 있습니다)
- 먼저 참조를 보세요. 보내진 모든 링크를 열고, 12fps로 프레임을 추출하고, 시트를 읽으세요. 여러 참조가 있다면 → 그들이 가장 좋아하는 것을 찾으세요.
- 참조에서 기법을, 브랜드에서 이야기를 가져오세요. 모션 문법은 복사하되, 줄거리는 절대 복사하지 마세요(미어캣 대 미어캣 매핑 금지).
- 코드 우선; 사진 오려내기만 생성하세요. 요청하지 않는 한 생성된 배경, 사람 또는 AI 캐릭터, 비디오 생성은 없습니다.
- 선택은 추측이 아닌 렌더링된 시트로: 제목 글꼴 →
tools/font_sheet.sh, 색상 →tools/palette_sheet.sh; 사용자는 숫자로 답합니다. - 빠르고 가시성 있게: 비트 테이블, 오려내기 시트 및 초안을 일찍 보내고, 시계 시간 ETA를 제공하며, 병렬 에이전트를 사용하세요(참조/agent_workflow.md).
- 사용자의 언어로 말하고, 요청하지 않는 한 화면상의 문구는 영어로 하세요. 전체 화면 깜빡임(광과민성) 금지.
0 · 접수 (한 번에, 하나의 메시지로, 추론할 수 없는 것만 물어보세요)
정확한 브랜드/핸들 철자 및 모든 화면상 단어 · 길이 · 형식(아래 참조) · 문구 언어(키릴 문자는 글꼴 변경) · CTA(구독 / 팔로우 / 방문) · 로고 파일 또는 텍스트 로고 · 음악: 합성 또는 자체 트랙 · 오려내기에 약 N×2 크레딧 사용 가능.
형식. 콜라주 레이아웃은 1920×1080 전용으로 그려집니다(collage.js와 scenes.js는 절대 좌표 사용). 재배치 없는 9:16 릴의 경우: 16:9 영화를 렌더링하고 찢어진 종이 밴드 사이의 1080×1920 페이지에 전체 너비(1080×608)로 배치하며, 이 밴드에는 제목, 핸들 및 CTA가 포함됩니다. 진정한 세로 영화는 모든 좌표를 다시 배치해야 함을 의미합니다 — 추가 시간으로 견적을 내세요.
1 · 프로젝트 (1분)
<skill>/scripts/new_project.sh <output_root> <slug> # 새 브랜드: 팔레트 끄기(원본 종이 색상)
<skill>/scripts/new_project.sh <output_root> <slug> --example # 배송된 kaye.creatives 영화 재현(야간 팔레트)
cd <project> # 아래 모든 명령을 프로젝트에서 실행 (에이전트: 각 호출 앞에 `cd <project> &&` 추가)
comp/, audio/score.html, tools/(추출/인코딩/먹싱/그린키 컴파일), cutouts/, refs/, review/를 생성합니다. macOS(Swift, AVFoundation, afconvert 필요), Chrome/Brave, Node ≥ 22(NODE_BIN=/path/to/node로 하나 강제 지정; 폴백이 링크된 경우 export PATH="<project>/tools/bin:$PATH"로 직접 node 호출 — tools/*.sh가 자체적으로 수행) 및 Google Fonts용 인터넷이 필요합니다.
누락된 오려내기는 레이블이 지정된 회색 카드로 렌더링되므로 생성 전에 초안이 작동합니다. 예제는 다음을 로드합니다: cam_side cam_front car helmet phone plane_front plane_side clap reel laptop headphones midi phone_gimbal cassette cloud_1..4 rocks_a/b/c tree_a/b grass_strip.
2 · 참조 (10–15분)
참조를 다운로드하세요(Pinterest: pin.it 확인 → 핀 페이지 → v1.pinimg.com/videos/…/720w.mp4 또는 /mc/720p/ H.264 URL; GIF: ImageIO/Swift로 프레임 분할 — ffmpeg 없음). tools/extract ref.mp4 refs/f 12 960 0.85, 그런 다음 tools/sheet.mjs로 콘택트 시트 생성(캡션 = 프레임/12초; tools/strip.sh는 24fps를 가정하므로 12fps 프레임의 레이블은 실제 시간의 절반입니다). 살펴보세요. refs/analysis.md를 작성하세요. references/reference_san_diego.md의 제목: 컷 시간, 모션 곡선, 팔레트 16진수, 글꼴 유사 항목, 반드시 복사할 목록 — 그리고 모든 참조 장치를 CL/CLX 장치에 매핑하거나 "새 장치"로 표시하세요. 삭제할 San Diego 장치를 나열하세요. 사용자의 참조가 아래 San Diego 수치를 재정의합니다.
모션 문법 (San Diego 측정 — references/reference_san_diego.md)
- 모든 것은 2프레임 단위(12 드로잉/초): 모션 시간
q(t) = floor(t*12)/12, 드로잉당 1–2px 레이어 보일. - 로고까지 하드 컷 없음: 확대 통과, 페이지 찢기, 찢어진 와이프, 만화경 속 육각형 구멍, 스트립 로켓 뒤에서 위로 기울이기.
- 드롭인 3 드로잉(가장자리 진입 → 공중 −8° → 착지) + 1 정착 드로잉(1.03→1); 1–2 드로잉으로 팝업.
- 디테일로 푸시: ~1초에 걸쳐 지수 확대 ~1→6배, 줌 중심이 디테일로 선형 보간.
- 만화경: 반사된 링, 회전 없음, 스케일이 약 0.35–0.38초마다 두 배 증가; 반복되는 스티커는 하나의 링으로만.
- 타이틀이 위에서 착지, 9 드로잉에 걸쳐 지수-아웃, 오버슈트 없음, 흰색 종이 윤곽선 + 원근 돌출.
- 페이지 찢기 ~0.42초, 어두운 말린 뒷면 → 워드마크가 있는 찢어진 밴드; 대체 스타일 깜빡임이 2-1-2-3-2-2 프레임 동안 밴드 내부에서 유지됨.
3 · 스토리 + 비트 테이블 (~15분 이내에 보내기)
script.md 작성: time | music | what we see | on-screen text (verbatim), 120 BPM 그리드(비트 0.5초, 24fps). 길이 선택:
10초 (배송된 예제)
| t | beat |
|---|---|
| 0–1.0 | 콜라주 페이지; ▶ 드롭(0.5에 착지); 채널 태그; 커서가 ▶ 0.875를 누름 |
| 1.0 | 페이지가 중앙에서 찢어짐 → 세계 1(F1 자동차가 대각선 밴드를 통과, 중앙 1.75; 헬멧 슬랩 2.0; 태그) |
| 2.5 | 찢어진 와이프 → 필름 카메라, 렌즈로 가속 푸시, 페이퍼 아이리스 2.9–3.4(태그) |
| 3.5–4.5 | 만화경 링, 전단지 4.2/4.3/4.4, 육각형 구멍 → 책상 |
| 4.5–5.5 | 책상: 노트북 4.5, 장비 4.75/5.0/5.25, 프롬프트 입력, "생성 ✦" 5.15 → 결과 |
| 5.5–5.95 | 위로 기울이기, 스트립 로켓이 ▶를 운반하여 사라짐 |
| 6.0 | 제목 "KAYE / CREATIVES"(Fraunces Black Italic), 방사형 폭발, 복엽기 교차 |
| 7.5–7.92 | 페이지 찢기 → 로고 밴드 |
| 8.0–8.5 | 밴드 내 로고 깜빡임 |
| 8.5–10 | SUBSCRIBE 슬랩, 클릭 9.0 → SUBSCRIBED ✓, 벨 9.15, 느린 푸시 |
6초 인트로 (모든 비디오 전에 재생: 찢기 없음, 책상 없음, CTA 없음): 0–0.5 히어로 드롭 · 0.75–1.5 디테일로 푸시, 아이리스 1.0–1.42 · 1.5–2.5 만화경, 전단지 2.17/2.33, 구멍 2.33–2.5 · 2.5–2.96 로켓 위로 기울이기 · 3.0 제목(3.75에 착지) + 폭발 · 4.5–4.92 찢기 · 5.0–5.5 밴드 깜빡임 · 5.5–6 최종 히트 + 홀드. 점수: dur 6, drop 0.5, mid 1.5, build 2.5, vac 2.95, lift 3.0, end 5.5. 로고 ≥ 화면에 1.0초.
15초 프로모션 (15초 참조 미러링): 0–0.5 히어로 드롭 · 0.5–2.5 팝업 · 2.5–3.5 푸시 + 아이리스 · 3.5–5.5 만화경, 구멍 5.33 · 5.5–7.5 세계 2, 전단지가 이끄는 폭발 · 7.5–9.5 세계 3 / 제품 순간 · 9.5–10.5 로켓 · 10.5 제목(11.25에 착지) · 12.5–12.92 찢기 · 13.0–13.5 깜빡임 · 13.5–15 CTA.
30초: assets/examples/kaye_30s_scenes.js + kaye_30s_score.html(전화 광고, 랜섬 문자, 썸네일 벽).
다른 브랜드로의 재스킨
| 장치 | kaye (YouTube) | 예: 커피숍 |
|---|---|---|
| 히어로 드롭 | ▶ 재생 버튼 | 컵 / 원두 봉지(CL.sprite + CL.drop) |
| 팝업 | 카메라 소품 | 크루아상, 원두 |
| 찢기 → 세계 1 | 밴드를 통과하는 F1 자동차 | 로스터 드럼, 농장 |
| 푸시 + 아이리스 | 카메라 렌즈(cam_front) | 컵 속 크레마(스프라이트 px로 중심 + 반지름 측정; 아이리스 공식은 api.md 참조) |
| 만화경 링 | 자동차, 릴 | 원두, 컵(스티커당 하나의 링) |
| 책상 + 화면 | 프롬프트 UI | 카운터 + 주문 티켓(CLX.tag / CLX.ransom) — 또는 생략 |
| 로켓 | 스트립 위 ▶ | 스트립 깃털 위 컵 |
| 제목 / 밴드 | 채널명 / kaye.creatives | 상호명 / 로고 또는 @핸들 |
| CTA | SUBSCRIBE + 벨 + 커서 | 핸들 + 주소 칩(CLX.tag), 영업 시간 별(CLX.star) |
CLX.play, subscribe, thumb, screen 및 cursor는 YouTube 장치입니다. collage.js의 배경은 고정된 오려내기 이름을 사용합니다(CL.page: grass_strip + rocks_; CL.diag: rocks_ + cassette; CL.cloudsky: cloud_1..4): 제로 코드 재스킨은 동일한 이름으로 대체 이미지를 생성하는 것입니다(grass_strip = 커피 원두의 찢어진 스트립, rocks_* = 흑백 하프톤 자루); 그렇지 않으면 pageLayers를 scenes.js에 복사하세요. 새 이름에 대해 warm()의 cuts: 목록을 업데이트하세요.
4 · 오려내기 (5분, 각각 약 2 크레딧)
코드가 그릴 수 없는 것만: 프롬프트 템플릿, 예제 세트 및 키잉은 references/cutouts.md에 있습니다. tools/greenkey keyframes/raw/x.png cutouts/x → 알파 PNG, 다중 객체 시트는 자동으로 분할됩니다. 색상 배경에 검사 시트를 렌더링하여 보내세요.
실제 로고 파일 → cutouts/logo.png, 찢기의 drawUnder 내에서 CL.sprite로 그려짐; 깜빡임 모양 = logoBand 스타일 배경 + 해당 스프라이트. 텍스트 로고의 경우 크기 min(190, 0.78·W / 측정된 너비).
5 · 코드 편집
comp/scenes.js가 영화입니다: COPY(화면상 단어), 장면 함수(pageScene, f1Scene, camScene, kalDraw, deskScene, titleBg, titleScene, endScene), 전환(wipe, ripDraw, tearDone), K.setup({bars}) 펀치 줌. COPY 외부의 단어: 프롬프트 UI의 "PROMPT"/제목(CLX.screen o.title), '포스터' 깜빡임 모양의 포스터 글리프(collage_fx.js) — 확인하세요. API: references/api.md; 예제의 실제 타이밍 및 문제점: references/edit_notes_10s.md.
리터럴을 편집하지 않고 시간을 다시 매핑하여 재타이밍: Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a))). 오프셋을 1/12초의 배수로 유지하세요. 이웃을 그리는 장면은 하나의 블록으로 이동합니다(kalDraw→deskScene via drawNext, titleBg→deskScene before 71/12, endScene→titleScene/titleBg). 그런 다음 K.setup({bars}), 점수 큐 및 스틸 시간을 업데이트하세요. 기간 이후의 시간은 마지막 프레임으로 고정됩니다.
타이틀 글꼴은 4곳에 있습니다: comp/index.html의 <link>(패밀리의 한 페이스 로드), comp/film.js의 fonts() 목록(그렇지 않으면 스프라이트가 폴백으로 베이킹됨), COPY.titleFont 및 후보를 위한 comp/font_sheet.html의 <link>. 키릴 문자 문구: Ultra, Fraunces, Cinzel, Bevan, Abril Fatface, Shrikhand, Chango, Rye, Lilita One, Bungee, Chewy 및 Gluten에는 키릴 문자가 없습니다 — 제목 및 logoBand o.font에는 Rubik / Rubik Spray Paint, Unbounded, Yeseva One, Lobster, Playfair Display, Russo One을 사용하고 랜섬 칩을 확인하세요.
스틸: node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,….
6 · 음악
audio/score.html은 브라우저에서 점수를 합성합니다(샘플 없음): 펑크 그루브 + 종이 효과음(슬랩, 찢기, 휘파람, 팝, 타이핑, 클릭, 벨), 리미터. window.SCORE_CONFIG {dur, drop, mid, build, vac, lift, end}를 첫 번째 <script>에서 비트 테이블로 설정하고 window.SCORE_CUES = {…}로 큐를 이동하세요. 영화에 없는 이벤트에 대해 paper()의 줄을 삭제하세요(CUE.car, CUE.plane, CUE.type, CUE.gen, CUE.subClick, CUE.ding 검색) — 큐를 null로 설정하면 오류가 발생합니다. ?lv_<name>=0으로 레이어를 음소거하세요.
node tools/render_audio.mjs "<project>/audio/score.html" audio/score.wav
afconvert -f m4af -d aac -b 256000 audio/score.wav audio/score.m4a
python3 tools/music_window.py audio/score.wav --hits 0.5:0.35,1.0:1.0,6.0:1.0,7.5:0.45,8.5:1.0 # 각 큰 히트는 해당 창에서 가장 큼
python3 tools/music_window.py audio/score.wav --timeline 0.25
자체 트랙 대신: python3 tools/music_window.py track.mp3 --len <dur> → 창 선택 → python3 tools/cut_audio.py track.mp3 <start> <dur> audio/score.m4a → 드롭에 맞춰 그림 재타이밍(그리드 = 트랙의 BPM). 오디오를 들을 수 없습니다 — 숫자로 확인(references/music_notes_10s.md 참조)하고 그렇게 말하세요.
7 · 초안 → 선택 → 최종
tools/render_film.sh draft # 10초에 ~30초 → <slug>_draft.mp4 (+ .frames_draft)
tools/strip.sh .frames_draft review/strip.png 1
tools/font_sheet.sh "LINE1|LINE2" # 실제 처리 및 영화 팔레트의 번호가 매겨진 제목 글꼴
tools/palette_sheet.sh 0.75 3.75 6.9 8.75 # comp/grade.js의 모든 팔레트 on key frames (0 = 원본)
tools/render_film.sh final audio/score.m4a <slug>_final.mp4 # PNG 프레임, 30 Mbps
comp/index.html에서 window.PALETTE = '<name>'로 선택한 팔레트를 고정하세요(null = 원본 색상). grade.js는 사진과 로고를 포함한 모든 픽셀을 다시 색칠합니다. 브랜드 색상의 경우 역할에 브랜드 16진수를 사용하여 PALS 항목을 추가하고(빨간색 → 기본) 제품 사진과 로고가 여전히 진실하게 읽히는지 확인하거나 null을 설정하고 CL.C / CLX.PAL을 직접 편집하세요.
보내기 전 QA (직접 프레임을 확인하세요)
- 동기화: 그림 이벤트 vs
--hits/--timeline피크, ≤ 1 프레임. - 2프레임 단위: 프레임 쌍 해시는 의도적인 1프레임 이벤트에서만 다릅니다.
- 연결: 빈/점핑 프레임 없음; 제목/로고 홀드를 제외하고 ~1초 이상 정적 프레임 없음.
- 어떤 것도 히어로 오브젝트, 제목, 버튼 레이블, URL(커서 경로!)을 가리지 않습니다.
- 종이 칩의 태그 ≥ 36px, 각각 ≥ 0.8초; 제목 ≥ 1.5초; 로고 ≥ 1.5초(≤ 8초 영화의 경우 ≥ 1.0초).
- 전체 프레임 깜빡임 없음; 밴드 깜빡임 밝기는 한 방향으로 단계적으로 변합니다. 회색 "오려내기 누락" 카드가 남아 있지 않습니다.
- 정확한 길이(afinfo), 오디오 존재, 피크 ≤ −1 dBFS.
- 프로젝트당 한 번에 하나의 렌더링만(render_film.sh는 프레임 폴더를 지웁니다).
파일
| 필요 | 위치 |
|---|---|
| 측정된 San Diego 문법, 샷, 팔레트, 글꼴 | references/reference_san_diego.md |
| CL / CLX API | references/api.md (+ collage.js / collage_fx.js의 헤더 주석) |
| 오려내기 프롬프트, 예제 세트, 키잉 | references/cutouts.md |
| 점수 큐 맵 + 측정 | references/music_notes_10s.md |