LLM Wiki

scroll-world: 스크롤에 맞춰 브랜드를 3D 월드처럼 비행하는 랜딩페이지를 만드는 에이전트 스킬

Properties2
descriptionHiggsfield 생성 모델과 커넥터 클립으로 스크롤 위치를 카메라 비행 시점에 연결해, 끊김 없는 3D 월드 랜딩페이지를 코딩 에이전트가 만들게 하는 오픈소스 스킬.
tagsmultimedia, ai-coding, open-source

5 min read

출처

개요

scroll-world는 브랜드·서비스 소개 랜딩페이지를, 스크롤에 맞춰 카메라가 작은 3D 월드를 통과하며 비행하는 형태로 만들어주는 에이전트 스킬이다. 페이지를 내리면 카메라가 한 장면 바깥에서 안으로 들어갔다가 끊김 없이 다음 장면으로 흐르는 연속 비행을 보여준다(물류회사 Emons 웹사이트 연출을 원하는 브랜드에 재현하는 게 목표). 보통 전문 스튜디오가 3D 씬·카메라 경로를 렌더링하고 스크롤에 영상 재생 시점을 묶는 방식으로 만드는 이 연출을, scroll-world는 코딩 에이전트가 수행하도록 절차·도구를 하나의 스킬로 묶었다. 카메라는 실제로 움직이고 스크롤은 재생 시점(시간)만 제어하므로 사용자가 스크롤 속도로 비행을 앞뒤로 훑어볼 수 있다.

핵심 포인트

  • 에셋 생성: 장면 스틸 이미지는 Higgsfield의 GPT Image 2로, 장면 안으로 파고드는 카메라 영상은 이미지-투-비디오 모델 Seedance로 생성. Apple의 스크롤 기반 제품 소개 페이지와 같은 “스크롤 스크럽” 방식이라고 설명.
  • 커넥터 클립이 핵심 기법: 장면을 그냥 이어 붙이면 이음매에서 화면이 튀는데, scroll-world는 앞뒤 장면의 실제 렌더링된 프레임에서 커넥터 클립을 생성해 이음매를 프레임 단위로 일치시켜 컷 없는 하나의 카메라 이동처럼 보이게 함.
  • 프레임워크 독립 스크럽 엔진: 완성 페이지는 스크롤 위치를 영상 재생 시점에 연결하는 순수 자바스크립트 스크럽 엔진(scrub-engine.js)이 재생 — 순수 HTML, Next.js, Vue, Python 서빙 페이지 어디에나 끼워 넣을 수 있음. blob 탐색·지연 로딩·이음매 크로스페이드 처리 포함.
  • 3단계 파이프라인: (1) 인터뷰 — 주제·피치·브랜드킷·아트 디렉션·장면 순서 수집. (2) Higgsfield로 씬별 스틸+다이브인 클립+커넥터 클립 생성(백그라운드 생성 후 폴링). (3) 생성된 에셋을 config 기반 스크럽 엔진에 연결해 하나의 연속 비행으로 구성.
  • 설치: Claude Code는 /plugin marketplace add oso95/scroll-world → /plugin install scroll-world@scroll-world. Codex 등은 Vercel skills CLI로 npx skills add oso95/scroll-world. 실행에는 인증·크레딧이 있는 Higgsfield CLI, ffmpeg/ffprobe, (선택) Pillow 설치된 Python 3 필요 — 장면 수 N에 대해 대략 N장 이미지 + 2N-1개 영상 생성이 필요해 Higgsfield 크레딧을 소비. MIT 라이선스.

왜 중요한가

“생성형 이미지/비디오 모델 + 스크롤 기반 재생 엔진”을 결합해 예전에는 전문 스튜디오의 3D 렌더링 파이프라인이 필요했던 마케팅 연출을 코딩 에이전트 워크플로로 끌어내린 사례다. 커넥터 클립으로 이음매를 프레임 단위로 맞추는 기법은 생성 에셋을 이어 붙이는 다른 멀티미디어 에이전트 스킬에도 응용 가능한 패턴.

더 읽어보기 (원문 인용)

참고 링크

관련 위키

백링크