SIX — 스크롤 몰입형 탐험(Scrolling Immersive Xploration)

스크롤이 카메라를 구동하는 랜딩 페이지를 제작합니다: 장면 외부에서 내부로 다이빙한 후, 다음 장면으로 날아가며, 연속적으로, 눈에 띄는 컷 없이 연결됩니다. 비주얼은 AI 생성(MuAPI)되며, 페이지는 단순히 스크롤 위치에 따라 미리 렌더링된 비디오를 스크러빙합니다. 이는 Apple의 스크롤형 제품 페이지 뒤에 있는 동일한 기술입니다 — 카메라가 실제로 움직이며, 스크롤만이 시간을 구동합니다.

생성 결과물: N개의 장면 스틸 → N개의 "다이브인" 카메라 클립 → N-1개의 연속 장면을 매끄럽게 연결하는 "커넥터" 클립 → 전체 체인을 하나의 비행으로 재생하는 휴대용 스크러빙 엔진.

성공과 실패를 가르는 한 가지 규칙: 이음매(seam)는 프레임 단위로 동일해야 합니다. 커넥터를 생성하기 전에 매끄러운 체인을 읽으십시오. 이 부분을 잘못 이해하는 것이 가장 흔한 실패 원인이며, 장면 간에 눈에 띄는 "팝" 현상이 발생합니다.

프론트엔드 프레임워크를 가정하지 마십시오. resources/scrub-engine.js의 스크러빙 엔진은 자체 포함된 바닐라 JS입니다(자체 DOM을 구축하고 CSS를 제공된 컨테이너에 주입하며, mountSIX로 노출됨). 따라서 일반 HTML, Next.js, Vue, Python 제공 페이지 등 어디에든 삽입할 수 있습니다. 이 스킬의 가치는 MuAPI 파이프라인, 프롬프트 및 이음매 방법에 있으며, 프레임워크에 있지 않습니다.

파일 맵: SKILL.md(이 파일) → scripts/pipeline.md(전체 생성 실행을 위한 복사-붙여넣기 bash 스크립트) + scripts/knockout.py(배경 제거) → references/prompts.md(인터뷰 체크리스트 + 모든 프롬프트 템플릿) + references/muapi-model-roster.md(검증된 모델/티어/엔드포인트 매핑 — 아래 내용을 감사해야 한다면 먼저 읽으십시오) → resources/scrub-engine.js + resources/index-template.html(드롭인 엔진 + 최소 페이지).

0단계 — 부트스트랩

MuAPI CLI. muapi가 $PATH에 없으면, 환경의 일반적인 패키지 흐름에 따라 설치한 후 muapi auth configure를 실행합니다(MUAPI_API_KEY/설정 파일을 작성 — 대화형이며, 브라우저가 필요하면 인증 흐름 자체를 실행할 수 없음). muapi auth status로 작동을 확인합니다. 문서화된 CLI 크레딧 잔액 명령은 없습니다. 배치가 크레딧 관련 오류로 중단되면 muapi.ai 대시보드에서 직접 확인하십시오.
ffmpeg / ffprobe가 $PATH에 있어야 합니다(프레임 추출 + 인코딩).
이미지 도구 — 떠 있는 장면을 원한다면 배경 제거용: PIL (python3 -c "import PIL"), 또는 cwebp/sips. 선택 사항 — 3단계 참조.
jq가 $PATH에 있어야 합니다 — 파이프라인 전반에서 --output-json 응답을 파싱하고 업로드된 에셋 URL을 추출하는 데 사용됩니다.
주의사항: macOS는 bash 3.2를 탑재합니다(declare -A 없음). 스크립트에서 연관 배열을 사용하지 마십시오. MuAPI 생성은 수 분이 소요됩니다 — 항상 분리(백그라운드)하여 실행하고 폴링(--async + muapi predict wait <request_id>)해야 하며, 절대 포그라운드 차단 호출을 사용하지 마십시오. MuAPI의 비디오/이미지 엔드포인트는 로컬 파일 경로가 아닌 호스팅된 URL을 필요로 합니다 — 이는 Higgsfield의 규칙과 반대이며, 가장 흔한 마이그레이션 버그입니다: 모든 로컬 참조 이미지(장면 스틸, 추출된 경계 프레임)는 먼저 muapi upload file <path> --output-json --jq '.url'을 통해 전달되어야 하며, 반환된 URL이 --start-image/--end-image/--image-urls에 전달됩니다. 정확한 플래그 이름과 해상도/품질 옵션은 모든 모델에 걸쳐 균일하게 문서화되어 있지 않습니다 — 배치 전에 muapi video from-image --help / muapi image generate --help로 확인하고, 이미 교차 검증된 사항은 references/muapi-model-roster.md를 참조하십시오.

1단계 — 사용자 인터뷰

주제는 사용자가 말하도록 해야 합니다 — 일반 산문으로 개방형 질문으로 물어보고, 절대 가짜 객관식을 만들지 마십시오. 만들어진 업계 목록은 사용자의 편향을 유발하고 사용자를 대신해 업종을 결정하는 것으로 읽힙니다. 사용자가 자신의 말로 답변하도록 하십시오(실제 비즈니스, 고객사 또는 어떤 아이디어든). 진정으로 열거 가능하고 결정의 중요성이 낮은 아래 선택지(아트 디렉션 및 브랜드 키트 접근 방식)에 대해서만 구조화된 객관식(Claude Code의 AskUserQuestion, 다른 곳에서는 단순한 이분법적 질문)을 사용하고, 그 경우에도 사용자가 자신의 방식을 선택할 수 있음을 알리십시오("기타"). 합리적으로 기본값을 설정할 수 없는 것만 물어보십시오. 다음을 다루십시오:

주제 (객관식이 아닌 개방형으로 질문) — "이 세계는 무엇에 관한 것인가요? 귀하의 비즈니스, 고객사, 또는 어떤 아이디어든 좋습니다 — 한 단어나 한 문장이면 충분합니다." 업계/제품 + 한 줄 피치(예: "버블티 회사, 잎에서 마지막 한 모금까지")와 브랜드 이름(있는 경우)을 캡처하십시오. 없으면 아래에서 제안합니다.
브랜드 키트 — 세 가지 경로를 제공하고 하나를 선택하게 하십시오:
- URL에서 가져오기: 직접 페이지를 가져와서(웹 페치) 보이는 팔레트, 이름, 톤을 읽어냅니다. 전용 MuAPI 브랜드 키트 가져오기는 문서화되어 있지 않으므로, 이 단계는 CLI 호출이 아닌 사용자가 직접 추출하는 것입니다. 사용자가 원클릭 가져오기를 기대한다면 명확히 말하십시오.
- 사용자가 팔레트 + 이름 + 톤을 직접 제공합니다.
- 사용자가 팔레트 + 이름을 제안하고 승인하게 합니다. 4–6개의 명명된 헥스 값, 표시 이름, 그리고 한두 개의 톤 단어를 캡처하십시오.
아트 디렉션 — 기본값은 "소프트 매트 로우폴리 클레이 디오라마, 아이소메트릭, 틸트-시프트 미니어처, 따뜻한 조명"입니다. 대안을 제시하십시오(플랫 종이공예, 광택 장난감, 클레이메이션, 네온 나이트, 포토리얼리스틱 건축). 선택된 것은 공유 스타일 전문이 되어 모든 장면 프롬프트에서 그대로 재사용됩니다(이것이 세계를 일관되게 만듭니다).
여정(섹션) — 카메라가 비행하는 순서가 있는 장면들. 주제의 자체 가치 사슬에서 파생된 세트를 제안하고 사용자가 편집하게 하십시오. 5–7개가 적당합니다. 보바 예: 농장 → 진주 주방 → 플래그십 매장 → 배달 → 커뮤니티 광장 → 히어로 제품. 각 섹션에는 다음이 필요합니다: 짧은 주제 설명(디오라마 안에 무엇이 있는지), 눈썹(eyebrow), 헤드라인, 한 줄의 본문, 0–3개의 태그 파일. 마지막 섹션은 일반적으로 히어로 제품 + CTA입니다.
모바일 버전(베타) — 항상 질문하십시오. 절대 자동으로 둘 다 생성하지 마십시오. 두 가지 선택지 중 하나로 질문하십시오(Claude Code에서는 AskUserQuestion, 다른 곳에서는 일반 질문): "모바일 최적화 버전도 원하시나요? 모바일 지원은 베타입니다. 스크롤-스크러브 메커니즘은 데스크톱 네이티브이며, 휴대폰에서는 더 가벼운 인코딩과 엔진 강화를 제공하지만, 세로 모드는 16:9 프레임을 자르고 저사양 기기에서는 여전히 끊길 수 있습니다." 선택지: "데스크톱 전용" / "데스크톱 + 모바일(베타)". 베타 면책 조항은 사용자에게 명시되어야 하며, 암시만 되어서는 안 됩니다. 답변에 따라 달라지는 사항:
- 예 → -m.mp4 모바일 인코딩을 생성하고(6단계), clipMobile/connectorsMobile을 연결합니다(7단계). 전체 모바일 QA를 실행합니다(8단계). 장면의 초점 주제가 중앙에서 벗어나면 9:16 히어로 변형 탈출구를 제공하십시오(추가 MuAPI 크레딧 — 그렇게 말하십시오).
- 아니오 → 모바일 인코딩과 연결을 완전히 건너뜁니다. 엔진의 휴대폰 강화(시크 결합, iOS 프라이밍, 세이프 에리어 CSS)는 관계없이 항상 켜져 있습니다 — 그것은 "모바일 버전"이 아니라 페이지가 방문 시 깨지지 않도록 하는 것일 뿐입니다 — 따라서 데스크톱 전용 빌드도 여전히 우아하게 저하됩니다.

비디오 모델은 인터뷰 질문이 아닙니다 — 기본값 seedance-2-first-last-frame(티어 global)을 자동으로 사용합니다. 사용자가 선호도를 명시하면, 이음매를 프레임 잠글 수 있는 경우에만 존중하십시오 — 즉, 시작 이미지와 커넥터의 경우 종료 이미지도 허용해야 합니다(references/muapi-model-roster.md에 검증된 목록이 있습니다). 이 스킬은 매끄러운 출력만 제공하므로, 프레임 잠금이 불가능한 모델은 한 줄의 이유와 함께 거절되고 대체되지 않습니다 — 대신 목록의 모델을 사용하십시오.

스크롤 메커니즘은 고정(연속 비행)으로 유지하십시오 — 그것이 이 스킬의 요점입니다. 인터뷰 체크리스트와 카피 구조는 references/prompts.md를 참조하십시오.

2단계 — 장면 스틸 생성

섹션당 하나의 이미지, 모두 동일한 스타일 전문을 공유하여 일관성을 유지합니다. 기본 모델 gpt-image-2-text-to-image(선명하고 아이소메트릭 일러스트레이션에 탁월함, 단색/흰색 배경 반환 — 떠 있는 디오라마 "섬"에 완벽함). 캐릭터/만화가 많은 브리핑에는 nano-banana-pro를, 포토리얼리스틱 건축 스타일에는 google-imagen4-ultra를 사용하십시오(전체 이미지 모델 표는 references/muapi-model-roster.md 참조).

프롬프트 형태(전체 템플릿은 references/prompts.md에 있음):

<스타일 전문, 매번 동일함>. 부드러운 접촉 그림자가 있는 평범한 단색 <배경색> 배경 위에. <팔레트 헥스>. 텍스트, 글자, 로고 없음, 중앙 정렬, 3:2.
주제: <이 디오라마 안에 무엇이 있는지>.

모든 N개를 동시에 분리하여 실행하십시오. 장면당 명령:

muapi image generate --model gpt-image-2-text-to-image --prompt "$(cat scene_i.txt)" \
  --aspect-ratio 3:2 --async --output-json scene_i.job.json
id=$(jq -r '.request_id' scene_i.job.json)
muapi predict wait "$id" --json > scene_i.json

결과 URL은 폴 출력의 .result_url(또는 .output_url/.url — 정확한 키가 균일하게 문서화되어 있지 않으므로 하나의 응답을 검사하여 조정하십시오) 아래에 있습니다. curl로 다운로드하십시오.
생성이 일시적으로 실패할 수 있습니다 — 해당 개별 항목만 다시 시도하고 배치 전체를 다시 시작하지 마십시오.
계속하기 전에 스틸을 검토하십시오. 동일한 각도, 팔레트, 조명의 하나의 일관된 세계로 읽혀야 합니다. 하나가 스타일에서 벗어나면, muapi image generate로 다시 생성하십시오(새 호출, 동일한 전문) — 이전 스틸을 참조로 "잠그기" 위해 muapi image edit을 사용하지 마십시오. 편집 모드는 스타일만 일치시키는 것이 아니라 해당 참조의 실제 공간을 융합/복제합니다.

정확한 배치 스크립트는 scripts/pipeline.md를 참조하십시오.

3단계 — (선택 사항) 장면 띄우기

단색 상자 대신 대기 배경 위에 디오라마를 띄우려면, scripts/knockout.py로 평평한 배경을 투명하게 제거하십시오(경계 연결 플러드 필 — 배경과 일치하는 내부 색상(예: 크림색 벽)도 보존함). 그런 다음 webp로 인코딩하십시오. 더 간단하게 유지하려면 페이지 배경을 장면 배경과 동일한 색상으로 만들고 이 단계를 건너뛰십시오.

이 스틸은 비디오 포스터 및 지연 로딩 폴백 역할을 하므로 보관하십시오.

4단계 — 카메라 아키텍처 (하나를 선택하십시오 — 이것이 느낌을 결정합니다)

장면 사이에서 카메라가 어떻게 움직이는지는 가장 큰 품질 레버입니다. 두 가지 형태가 있으며, 미적 기준으로 선택하십시오.

비디오 모델 — 전체 체인에 대해 하나를 선택하십시오

이 스킬은 매끄러운 출력만 제공합니다. 따라서 사용 가능한 모델은 이음매를 프레임 잠글 수 있는 모델뿐입니다: 모든 연결된 클립은 --start-image를 허용해야 하며, 커넥터는 --end-image도 필요합니다. 선택 규칙은 선호도가 아닌 이 기능입니다. 전체 증거는 references/muapi-model-roster.md에 있으며, 요약하면 다음과 같습니다:

모델	티어	시작/종료 이미지	참고
`seedance-2-first-last-frame` (기본값)	`global`	✓ / ✓	`--mode first-last` — 하나의 이미지 = 구간/다이브(종료 이미지 없음), 두 개의 이미지 = 커넥터. 동일한 모델이 두 역할을 모두 커버합니다.
`seedance-2-first-last-frame-fast`	`global`	✓ / ✓	동일한 모델, 빠른 큐 변형 — 저렴한 프리비즈 티어. 전체 렌더링에 비용을 쓰기 전에 이음매를 검증하기 위해 여기서 먼저 전체 체인을 실행하십시오.
`seedance-2-vip-first-last-frame`	`vip`	✓ / ✓	NSFW/콘텐츠 필터 폴백 — VIP의 필터 대역이 다르며, global/중국 티어와 달리 참조의 사실적인 사람 얼굴을 허용하는 것으로 문서화되어 있습니다. 기본 체인이 아닌, 고집 센 단일 클립에 사용하십시오.

중국(chinese) 티어는 목록에 없습니다: first-last(두 이미지 조건화)를 사용할 수 없으며, 단일 이미지 i2v만 가능합니다 — 따라서 이음매를 유지할 수 없습니다. 같은 이유로 미디어 입력이 단일 이미지만 가능한 것은 건너뛰십시오(생성을 조건화할 수만 있을 뿐, 장면을 계속할 수는 없습니다).

규칙:

모든 연결된 클립에 대해 하나의 모델+티어를 사용하십시오. 각 렌더러/티어는 고유한 모션/색상/그레인 특성을 가지고 있습니다. 중간에 혼합하면 위치 연속성은 유지되지만(프레임은 여전히 전달됨), 렌더 특성의 변화가 미묘한 팝으로 읽힙니다. 허용되는 유일한 예외는 단일 고집 센 클립에 대한 NSFW 폴백입니다(주의사항) — 하나의 5초 커넥터에서 약간의 특성 변화는 커넥터 누락보다 낫습니다.
기본값은 global 티어의 seedance-2-first-last-frame입니다. 사용자가 명시한 선호도는 모델이 자격을 갖춘 경우에만(프레임 잠금) 존중하십시오. 자격이 없다면 그렇게 말하고 지원되는 모델을 사용하십시오 — 모델 요청을 충족시키기 위해 매끄럽지 않은 빌드를 제공하지 마십시오.
파이프라인 스크립트는 모델/티어를 $VMODEL/$VTIER로 사용하며, 티어별 플래그가 이미 분기 처리되어 있습니다(scripts/pipeline.md).

A) 연속 전진 테이크 — 현실적/워크스루에 권장

첫 장면부터 마지막 장면까지 항상 전진으로만 글라이드하는 하나의 카메라. 구간을 순차적으로 생성하십시오: 구간 0은 장면-0의 스틸에서 시작(안으로 전진 글라이드); 그런 다음 각 구간의 --start-image = 이전 구간의 실제 마지막 프레임(ffmpeg로 추출, 업로드), 프롬프트 "부드럽게 FORWARD로 [장면 i]로 계속 글라이딩, 절대 뒤로 당기지 않음"(또는 모션 핸드오프 계약에 따른 표현적인 중간 구간 움직임 — 아래 카메라 문법 참조), --end-image 없음 — 넓은 설정 장면의 종료 이미지는 카메라를 뒤로 당기게 하여, 이는 말더듬의 #1 원인입니다. 각 구간의 마지막 프레임을 추출하여 다음 구간에 공급하십시오. 결과: 모든 이음매가 프레임 단위로 동일하고 카메라가 절대 후진하지 않습니다. 커넥터가 없습니다(5단계 건너뜀) — 구간 자체가 여정입니다. 각 구간을 connectors: []와 작은 crossfade(~0.08)가 있는 섹션 클립으로 연결하십시오. --end-image가 없어도 구간은 여전히 뚜렷한 공간에 도달합니다(프롬프트가 내용을 안내함). 비용: 엄격히 순차적(병렬화 불가)이고 느리며, 실내 장면은 콘텐츠 필터에 걸릴 가능성이 높으므로 재시도를 준비하십시오(구간당 3회 시도).

B) 다이브인 + 에리얼 커넥터 — 디오라마/미니어처/신의 눈 세계 전용

"각 장면으로 다이브" 클립 + 위로 그리고 밖으로 당겨서 다음 장면으로 날아가는 커넥터(5단계). 빼내기는 모든 이음매에서 카메라 방향을 반전시킵니다(전진 다이브 → 후진 빼내기). 미니어처/디오라마 세계에서는 의도적인 "줌 아웃 → 다음 장면으로 팬 → 줌 인" 제스처로 읽힙니다. 실제 공간에서는 방향 반전이 어지럽습니다.

5단계 — 커넥터 (아키텍처 B 전용)

각 커넥터는 장면 i의 내부(마지막 프레임)에서 장면 i+1의 외부(첫 프레임)로 카메라를 이동시킵니다. 두 프레임은 프레임 단위로 동일해야 합니다. 커넥터를 순차적으로 생성하십시오:

장면 i의 진정한 마지막 프레임을 추출합니다(ffmpeg로, 정확한 지속 시간과 일치시킴). 업로드합니다.
장면 i+1의 첫 번째 프레임을 추출합니다. 업로드합니다.
두 이미지로 커넥터를 생성합니다: muapi video from-image --model seedance-2-first-last-frame --start-image <장면 i의 마지막 프레임 URL> --end-image <장면 i+1의 첫 번째 프레임 URL> --prompt "장면 i에서 부드럽게 뒤로 당겨 공중으로, 오른쪽으로 회전하고 [장면 i+1의 주제] 위로 전진하여 내려다봄, 미니어처 세계, 부드러운 팬"
커넥터의 첫 번째 프레임을 추출하고 장면 i의 마지막 프레임과 비교하십시오 — 동일해야 합니다. 그렇지 않으면 재시도하십시오.

6단계 — 인코딩

모든 클립(구간 및 커넥터)을 ffmpeg로 인코딩하십시오. 대상: -c:v libx264 -preset veryslow -crf 18 -pix_fmt yuv420p (고품질). 출력 이름: scene_<i>.mp4, connector_<i>.mp4. 모바일 인코딩은 추가로 -vf "scale=ih*9/16:ih"를 사용하여 9:16으로 자릅니다.

7단계 — 엔진 연결

resources/scrub-engine.js를 가져와 mountSIX(container, clips, connectors, options)를 호출하십시오. 클립 배열은 구간 비디오, 커넥터 배열은 연결 비디오입니다. resources/index-template.html에는 최소 예제가 포함되어 있습니다.

8단계 — QA

모든 이음매가 프레임 단위로 동일한지 확인하십시오.
모바일에서 올바르게 렌더링되는지 확인하십시오(모바일이 활성화된 경우).
모든 CTA와 텍스트가 올바른지 확인하십시오.

주의사항

이음매가 일치하지 않으면 다시 생성하십시오. 이는 가장 흔한 실패입니다.
MuAPI 생성이 실패하면 개별적으로 재시도하십시오.
모바일 베타 — 사용자에게 명시적으로 알리십시오.
크레딧 — 대시보드에서 확인하십시오. CLI 명령은 없습니다.

SIX — 스크롤 몰입형 탐험