scroll-world 소개
scroll-world는 브랜드나 서비스를 소개하는 랜딩페이지를, 스크롤에 맞춰 카메라가 하나의 작은 3D 월드를 통과하며 비행하는 형태로 만들어 주는 에이전트 스킬입니다. 페이지를 아래로 내리면 카메라가 한 장면의 바깥에서 안으로 들어갔다가, 끊김 없이 다음 장면으로 흘러가는 연속된 비행을 보여줍니다. 물류 회사 Emons의 웹사이트처럼 여러 장면이 하나의 비행으로 이어지는 연출을, 원하는 산업이나 브랜드에 맞춰 재현하는 것이 목표입니다.
이런 스크롤 연출은 보통 전문 스튜디오가 3D 씬을 만들고 카메라 경로를 잡아 영상으로 렌더링한 뒤, 스크롤 위치에 영상 재생 시점을 묶는 방식으로 제작합니다. scroll-world는 이 과정을 코딩 에이전트가 수행하도록 절차와 도구를 하나의 스킬로 묶었습니다. 카메라는 실제로 움직이고 스크롤은 재생 시점(시간)만 제어하기 때문에, 사용자는 스크롤 속도에 맞춰 비행을 앞뒤로 훑어볼 수 있습니다.
scroll-world는 Claude Code와 Codex를 비롯해 SKILL.md 규격을 따르는 에이전트에서 실행할 수 있습니다. 장면의 그림과 카메라 영상은 Higgsfield의 생성 모델에 의존하고, 완성된 결과물은 특정 프레임워크에 묶이지 않은 순수 자바스크립트 스크럽 엔진으로 재생됩니다. 즉 스킬이 제공하는 것은 Higgsfield 생성 파이프라인, 프롬프트 템플릿, 그리고 어디에나 끼워 넣을 수 있는 스크럽 엔진입니다.
스크롤 ↓ = 재생 시점(시간)
┌──────────┐ 커넥터 ┌──────────┐ 커넥터 ┌──────────┐
│ 씬 1 │ ─────────▶ │ 씬 2 │ ─────────▶ │ 씬 3 │
│ 바깥→내부 │ (이웃 프레임 │ 바깥→내부 │ (이웃 프레임 │ 바깥→내부 │
│ 다이브인 │ 으로 이음) │ 다이브인 │ 으로 이음) │ 다이브인 │
└──────────┘ └──────────┘ └──────────┘
카메라가 장면 안으로 들어갔다가 끊김 없이 다음 장면으로 비행
scroll-world가 만드는 스크롤 비행의 원리
scroll-world의 결과물은 장면(씬)마다 만든 정지 이미지와 카메라 영상 클립을, 스크롤 위치에 따라 재생하는 방식으로 동작합니다. 장면의 스틸 이미지는 Higgsfield의 GPT Image 2로, 장면 안으로 파고드는 카메라 영상은 이미지-투-비디오 모델인 Seedance로 생성합니다. 개발팀은 이를 Apple의 스크롤 기반 제품 소개 페이지에서 쓰이는 것과 같은 스크롤 스크럽 방식이라고 설명합니다.
여러 장면을 하나의 비행으로 잇는 핵심은 커넥터(connector) 클립입니다. 두 장면을 그냥 이어 붙이면 이음매에서 화면이 튀는데, scroll-world는 앞 장면과 뒤 장면의 실제 렌더링된 프레임에서 커넥터 클립을 생성해 이음매가 프레임 단위로 일치하도록 만듭니다. 그 덕분에 장면과 장면 사이에 컷이 느껴지지 않고 하나의 연속된 카메라 이동으로 보입니다.
완성된 페이지는 스크롤 위치를 영상 재생 시점에 연결하는 스크럽 엔진이 재생합니다. 이 엔진은 특정 프레임워크에 종속되지 않아 순수 HTML, Next.js, Vue, 또는 파이썬으로 서빙하는 페이지에 그대로 끼워 넣을 수 있습니다. 스크럽 엔진의 구현은 저장소의 references/scrub-engine.js에서 확인할 수 있으며, blob 탐색과 지연 로딩, 이음매 크로스페이드 처리를 포함합니다.
scroll-world의 3단계 파이프라인
스킬을 실행하면 작업은 크게 세 단계로 진행됩니다.
[1] 인터뷰 [2] 에셋 생성 (Higgsfield) [3] 스크롤 엔진 연결
주제·피치·브랜드킷· ─▶ 씬별 스틸 (GPT Image 2) ─▶ config 기반
아트 디렉션· + 다이브인 클립 (Seedance) 스크럽 엔진에 연결
장면 순서를 수집 + 커넥터 클립 (이웃 프레임 기반) = 하나의 연속 비행
첫 단계에서 스킬은 무엇을 만들지 인터뷰합니다. 소개할 주제와 피치, 브랜드 킷(URL에서 가져오거나 직접 전달하거나 제안받는 방식), 아트 디렉션, 그리고 카메라가 지나갈 장면의 순서를 정리합니다.
두 번째 단계에서는 Higgsfield로 에셋을 생성합니다. 장면마다 정지 이미지 한 장과 장면 안으로 들어가는 다이브인 클립 하나를 만들고, 연속된 두 장면을 잇는 커넥터 클립을 이웃 장면의 실제 프레임에서 생성합니다. 이미지·영상 생성은 백그라운드로 돌리고 완료 여부를 폴링하는 방식으로 진행됩니다.
세 번째 단계에서는 이렇게 만든 에셋을 설정(config) 기반 스크럽 엔진에 연결해, 전체 체인이 하나의 비행으로 재생되도록 페이지를 구성합니다.
scroll-world 설치와 요구 사항
Claude Code에서는 플러그인으로 설치하는 방식을 권장합니다.
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world
Codex를 비롯한 다른 에이전트에서는 Vercel의 skills CLI로 설치할 수 있습니다. 이 CLI는 Codex, Claude Code, Cursor 등 여러 에이전트에 스킬을 설치해 줍니다.
npx skills add oso95/scroll-world # 설치할 에이전트를 선택
npx skills add oso95/scroll-world -a codex # Codex를 직접 지정
실행에는 다음이 필요합니다. 인증을 마치고 크레딧이 있는 Higgsfield CLI, 프레임 추출과 인코딩을 위한 ffmpeg / ffprobe, 그리고 투명 배경 처리(knockout)에 쓰이는 Pillow가 설치된 Python 3(선택 사항)입니다. 에셋 생성은 장면 수 N에 대해 대략 N장의 이미지 생성과 2N-1개의 영상 생성이 필요하며 Higgsfield 크레딧을 소비합니다.
scroll-world의 구성
스킬의 실제 내용은 저장소의 skills/scroll-world 아래에 있습니다. 절차와 이음매 규칙, 주의 사항은 SKILL.md에 정리되어 있고, 그 밖의 자료는 references/ 디렉토리에 모여 있습니다. 인터뷰 체크리스트와 Higgsfield 프롬프트 템플릿은 prompts.md, 생성부터 프레임 추출·커넥터 생성·인코딩까지의 배치 스크립트는 pipeline.md, 재생을 담당하는 스크럽 엔진은 scrub-engine.js, 엔진을 올려 두는 최소 페이지는 index-template.html, 떠 있는 장면을 위한 배경 제거는 knockout.py가 담당합니다.
scroll-world의 라이선스
scroll-world는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.
scroll-world 프로젝트 GitHub 저장소
더 읽어보기
-
Nothing Design Skill: Nothing 디자인 언어로 모노크롬 UI를 생성하는 Claude Code 스킬
-
Swift-Agent-Skills: Claude Code와 Codex용 Swift 개발 AI 에이전트 스킬 모음
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. 
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 