oso95/scroll-world 딥다이브
— 스크롤 한 번에 "세계 속으로 날아드는" 랜딩페이지를 굽는 에이전트 스킬

1프로젝트 한 줄 요약

scroll-world는 "어떤 브랜드·업종이든 스크롤로 그 세계 속을 훑고 지나가는 몰입형 랜딩페이지를 자동으로 만들어 주는 에이전트 스킬"이다. 사용자가 원하는 것은 대개 이런 히어로(hero) 화면이다 — 물류 회사라면 창고 바깥에서 시작해 스크롤을 내리는 순간 카메라가 문을 통과해 컨베이어·선반·트럭 사이를 날아다니고, 이어서 매끄럽게 다음 층(배송·데이터·고객)으로 흘러간다. 마치 축소 모형(디오라마) 세계를 손끝으로 여행하는 느낌이다. scroll-world는 이 경험 전체 — 인터뷰 → 장면 그림 생성 → 카메라 클립 생성 → 재생 엔진 배선 — 를 하나의 절차서(SKILL.md)로 묶어 에이전트가 대신 만들게 한다.

핵심 동작 원리는 딱 한 문장이다. 미리 렌더한 영상을 "스크롤 위치 = 재생 시각"으로 감아 돌린다. 스크롤을 20% 내리면 영상의 20% 지점 프레임을, 50% 내리면 50% 지점 프레임을 보여 준다. 영상이 저절로 재생되는 게 아니라 당신의 스크롤이 곧 재생 헤드(playhead)가 되는 것 — 이것을 스크롤 스크럽(scroll-scrubbing)이라 부른다. Apple 제품 페이지에서 스크롤할 때 제품이 회전·분해되는 그 기법이다.

2왜 지금 주목받는가

2026년 TrendShift 상위권은 온통 에이전트·스킬이다. scroll-world는 그 흐름 안에서도 "보기에 화려한 결과물을 뽑는 스킬"이라 눈길을 끈다. 문제 정의가 명확하다 — 스크롤에 반응해 3D 세계 속을 나는 히어로 화면은 원래 WebGL/Three.js를 다루는 3D 아티스트나 값비싼 영상 프로덕션이 있어야 만들 수 있었다. scroll-world는 그 전체 파이프라인(프롬프트 + 생성 스크립트 + 재생 엔진)을 스킬로 포장해, 에이전트가 한 번의 인터뷰만으로 만들어 내게 한다. 실제로 plugin.json의 키워드에 webgl-alternative(WebGL 대체재)가 박혀 있다.

주목 포인트 1 — "프레임워크가 아니라 방법을 판다"는 정직함

scroll-world의 문서에서 인상적인 건 스스로 값어치의 위치를 못 박는 태도다. "이 스킬의 가치는 프레임워크가 아니라 Higgsfield 파이프라인·프롬프트·이음매 방법이다"라고 명시한다. 실제로 재생 엔진(scrub-engine.js)은 442줄에 불과하고, 정작 분량과 노하우가 몰린 곳은 어떻게 장면을 일관되게 굽고, 어떻게 이음매를 안 보이게 봉합하느냐를 적은 SKILL.md(535줄)·pipeline.md·prompts.md다. "코드"가 아니라 "노하우"가 상품인 셈이다.

주목 포인트 2 — 두 개의 "연속성"이라는 물리 문제

AI로 만든 짧은 클립 여러 개를 이어 붙여 끊김 없는 한 편처럼 보이게 하려면, 두 가지가 동시에 맞아야 한다. scroll-world가 문서로 가르치는 이 구분이 이 저장소의 지적 핵심이다.

정리하면 scroll-world의 진짜 상품은 "예쁜 영상"이 아니라, 여러 AI 클립을 물리적으로 자연스럽게 잇는 규칙이다. 이 규칙을 모르고 그냥 클립을 붙이면 이음매마다 화면이 "툭" 튀거나 되감기처럼 보인다 — scroll-world가 문서 절반을 이 실패를 막는 데 쓰는 이유다.

3기술 스택 전체 지도

보통 "스킬"이라 하면 Node/Python 프로젝트를 떠올리지만, scroll-world엔 빌드도 node_modules도 없다. 대신 두 개의 세계가 공존한다 — (A) 빌드 타임에 외부 CLI들(Higgsfield·ffmpeg·PIL)로 에셋을 굽는 파이프라인, (B) 런타임에 브라우저에서 도는 의존성 0의 재생 엔진. 이 둘의 경계가 스택 지도의 뼈대다.

SKILL.md YAML 머리말 (실제 원문)

# skills/scroll-world/SKILL.md
name: scroll-world
description: >
  Build an immersive scroll-scrubbed "fly through the world" landing page for any
  industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera
  flies from outside each scene into its interior, then flows on to the next scene
  with NO cuts — one continuous connected flight (Emons-style isometric diorama
  world, or any art direction you pick). The skill interviews the user for the topic,
  the story beats/sections, and brand kit, then generates cohesive scenes + seamless
  camera clips with Higgsfield and wires a portable, framework-agnostic scroll-scrub
  engine. Use when the user wants a "3D world" / "browse-through-the-industry" hero,
  a scroll cinematic, a diorama landing, or to turn a business into a scrollable world.
allowed-tools: Bash, Read, Write, Edit, AskUserQuestion, Skill

allowed-tools가 재미있다. 이 스킬은 Bash(higgsfield·ffmpeg 실행)·Read/Write/Edit(파일 조립)·AskUserQuestion(사용자 인터뷰)·Skill(다른 스킬 higgsfield-generate 호출)을 요구한다. 즉 스킬 스스로 "나는 셸을 돌리고, 사용자에게 질문하고, 다른 스킬을 부른다"고 선언한 것 — 스킬의 권한 명세가 곧 그 스킬의 행동 요약이다. (머리말에 version 필드는 없다. 버전 번호는 plugin.json의 0.2.0이 유일.)

4아키텍처 심화 분석

4-1. 전체 파이프라인 — 입력 한 번에서 랜딩페이지까지

scroll-world를 이해하는 가장 빠른 길은 "장면 N개"가 어떻게 "끊김 없는 한 편의 비행"이 되는지를 따라가는 것이다. 에이전트는 먼저 사용자를 인터뷰해 주제·장면 순서·브랜드 키트를 받고, 각 장면을 공통 스타일 서두(style preamble)로 일관되게 굽는다. 그다음이 이 저장소의 묘미인 이음매 봉합이다.

여기서 반드시 지켜야 할 규칙 하나 — 이음매 프레임은 "스틸 그림"이 아니라 "실제 렌더된 영상"에서 뽑아야 한다. 그림을 그대로 물리면 미묘하게 어긋나 이음매가 "툭" 튄다. 그래서 파이프라인은 dive 클립을 렌더한 뒤, 그 영상의 마지막/첫 프레임을 ffmpeg로 추출해 커넥터의 start/end 이미지로 되먹인다.

4-2. 두 개의 카메라 아키텍처 — 품질을 가르는 최대 레버

scroll-world는 콘텐츠 성격에 따라 두 가지 카메라 설계 중 하나를 고르라고 가르친다. 이 선택이 결과물의 자연스러움을 좌우한다.

핵심 통찰은 "방향 반전은 오직 하늘에서 내려다보는 미니어처 세계에서만 용서된다"는 것이다. 현실적인 1인칭 walkthrough에서 이음매마다 카메라가 뒤로 튀면 시청자는 즉시 "되감기"로 인식한다. 그래서 대부분의 경우 방식 A(커넥터 없는 연속 전진)가 안전하다.

4-3. 재생 엔진의 심장 — 스크롤을 프레임으로 (scrub-engine.js)

브라우저 쪽 원리는 단순하다. requestAnimationFrame 루프가 매 프레임 "지금 스크롤 목표값"을 향해 현재값을 부드럽게 보간(lerp)하고, 그 값을 video.currentTime으로 찍는다. 스크롤을 홱 내려도 영상이 톡 끊기지 않고 스르륵 따라오는 이유다.

// scrub-engine.js — 스크롤→재생시각 보간 루프(핵심)
function raf() {
  const eps = isMobile() ? 0.02 : 0.008;   // 폰에선 거친 스텝 = 디코딩 절약
  for (let i = 0; i < NSEG; i++) {
    const s = SEGMENTS[i];
    if (!s.hasClip || !s.ready || !s.video) continue;
    if (s.video.seeking) continue;        // 아직 seek 중이면 새 seek 안 넣음(멈춤 방지)
    if (!s.visible && Math.abs(s.cur - s.target) < 0.002) continue;
    s.cur += (s.target - s.cur) * (reduce ? 1 : 0.18);   // 스크롤 목표로 보간
    const dur = s.video.duration || 1;
    const t = clamp(s.cur, 0, 0.999) * dur;
    if (Math.abs(s.video.currentTime - t) > eps) {
      try { s.video.currentTime = t; } catch (e) {}
    }
  }
  requestAnimationFrame(raf);
}

// scrub-engine.js — 클립을 Blob으로 받아 seek 가능하게 + iOS 안전 노출
const url = (isMobile() && s.clipM) ? s.clipM : s.clip;
fetch(url).then(r => r.ok ? r.blob() : Promise.reject(new Error('404')))
  .then(blob => {
    const v = document.createElement('video');
    v.muted = true; v.playsInline = true; v.preload = 'auto';
    v.src = URL.createObjectURL(blob);          // 블롭은 항상 완전 seek 가능
    v.addEventListener('loadedmetadata', () => { s.ready = true; read(); });
    // 진짜 프레임이 그려진 뒤에야 스틸 포스터를 숨김(iOS 빈 영상 버그 회피)
    v.addEventListener('seeked', () => { s.el.classList.add('has-clip'); }, { once: true });
    s.el.appendChild(v); s.video = v; s.hasClip = true;
  }).catch(() => { s.loading = false; });

4-4. 이음매 프레임 추출 — 왜 세계가 "이어져" 보이는가 (pipeline.md)

커넥터가 앞뒤 장면과 딱 맞물리는 비결은 결국 두 줄의 ffmpeg 명령이다. 스틸이 아니라 렌더된 영상에서 경계 프레임을 뽑는 게 규칙의 전부다.

# pipeline.md — 커넥터의 start=dive_i의 마지막 프레임, end=dive_{i+1}의 첫 프레임
# 첫 프레임(도입부 establishing):
ffmpeg -v error -ss 0 -i "$WORK/dive_$n.mp4" -frames:v 1 -q:v 2 "$WORK/first_$n.png"
# 마지막 프레임(장면 내부, 끝에서 0.15초 지점):
ffmpeg -v error -sseof -0.15 -i "$WORK/dive_$n.mp4" -frames:v 1 -q:v 2 "$WORK/last_$n.png"

5디렉토리 · 파일 구조 해부

이 저장소는 작다. 그래서 오히려 스킬/플러그인의 표준 골격을 통째로 보기에 좋은 교보재다. 바깥은 플러그인·마켓플레이스 매니페스트, 안쪽은 절차서 SKILL.md, 그 아래 references/에 실제로 복사·실행할 자산들이 담긴다.

6학습 포인트

배울 것 1 — 스크롤 구동 영상 스크러빙 (Apple 제품 페이지 기법)

scrollY를 video.currentTime에 매핑하고 requestAnimationFrame으로 부드럽게 보간하는, 고급스러운 스크롤 인터랙션의 정석을 실물로 볼 수 있다. 특히 "seek 가능성(seekable)은 키프레임 밀도와 별개"라는, 실무에서 자주 헷갈리는 지점을 코드로 이해하게 된다.

배울 것 2 — 블롭 URL로 바이트 범위 문제 우회

정적 호스트가 HTTP 바이트 범위를 안 받아 seekable=[0,0]이 되는 실전 함정과, 그것을 fetch → Blob → objectURL로 우아하게 피하는 법. 영상뿐 아니라 "부분 요청이 필요한 모든 미디어"에 적용되는 범용 트릭이다.

배울 것 3 — 프레임 단위로 AI 클립 봉합하기

ffmpeg -sseof(끝 프레임)·-ss 0(첫 프레임)로 경계 프레임을 뽑아 AI 영상의 --start-image/--end-image로 되먹여 이음매 없이 잇는 기법. 짧은 생성 클립들을 긴 시퀀스로 엮는 요즘 AI 영상 워크플로의 핵심 노하우다.

배울 것 4 — 카메라 모션 연속성 이론

"위치 연속성 vs 속도 연속성", 이음매를 넘어 방향을 뒤집으면 되감기처럼 보인다는 통찰. 영상·게임·모션 그래픽 어디서나 통하는 원리를, "왜 대부분은 커넥터 없는 연속 전진이 안전한가"라는 구체적 판단으로 배운다.

배울 것 5 — 모바일 영상 하드닝(hardening)

seek 병합(video.seeking 중엔 새 seek을 안 넣어 얼어붙음 방지), iOS 프라이밍(첫 제스처에 muted play→pause를 걸어야 seek된 muted 영상이 화면에 그려짐), 스틸을 포스터로 유지, URL바만 바뀌는 resize 무시, safe-area 대응 — 모바일 웹 영상의 지뢰밭을 하나하나 밟아 본 흔적이 그대로 교재다.

배울 것 6 — Claude Code 스킬/플러그인 저작 + CSS 캐스케이드 레이어

SKILL.md 머리말(allowed-tools), plugin.json+marketplace.json 스키마, skills CLI로 20+ 에이전트에 배포하는 법. 덤으로 엔진이 쓰는 @layer sw 캐스케이드 레이어 — 사용자 테마 토큰이 항상 엔진 기본값을 이기게 하는(특정성 해킹 없이) 현대 CSS 기법과 color-mix() 테마링.

7시스템 · 실행 요구사항

요구사항은 §3에서 나눈 두 국면을 그대로 따른다. 에셋을 굽는 동안엔 외부 CLI와 유료 크레딧·인터넷이 필요하지만, 완성된 페이지 자체는 브라우저만 있으면 된다.

8직접 해볼 수 있는 실습 과제

먼저 스킬 설치. Claude Code 플러그인으로도, 범용 skills CLI로도 된다.

# 설치 (둘 중 하나)
# ① Claude Code 플러그인 마켓플레이스로
# ② 범용 skills CLI (Codex·Cursor 등 20+ 에이전트에도 설치)
npx skills add oso95/scroll-world

# 이후 에이전트에게: "우리 회사 세계를 스크롤 랜딩으로 만들어줘"

9관련 기술 심화 학습 로드맵

10핵심 키워드 사전

11참고 링크

공식
· GitHub 저장소: github.com/oso95/scroll-world (스킬/플러그인 · MIT · © 2026 cyw)
· TrendShift 카드: trendshift.io/repositories/78158 (Daily #13 · #AI skills)
· 설치: npx skills add oso95/scroll-world (범용) 또는 Claude Code 플러그인

저장소 안에서 꼭 읽을 것
· skills/scroll-world/SKILL.md — 8단계 절차 + 이음매 규칙 + 카메라 문법 + 함정(개념의 두뇌)
· references/scrub-engine.js — 스크롤 보간 · 블롭 seek · 모바일 하드닝(재생의 심장)
· references/pipeline.md — 복붙용 bash 배치(생성→프레임→커넥터→인코딩)
· references/prompts.md — 인터뷰 질문 + Higgsfield 프롬프트 템플릿 + 스타일 서두

곁들여 학습
· 이미 분석한 higgsfield-cli 딥다이브 — 이 스킬이 의존하는 영상 생성 CLI
· HTML5 <video> seek·byte-range·Blob URL (MDN)
· ffmpeg 프레임 추출·GOP·faststart 문서
· Claude Code 스킬/플러그인 저작 규격 (SKILL.md · marketplace 스키마)
· CSS 캐스케이드 레이어(@layer) · color-mix()