scroll-world: 프롬프트로 만드는 애플식 3D 스크롤 경험

카메라가 3D 공간을 비행하며 장면을 연속적으로 통과하는 애플식 스크롤 경험은 비용과 전문 인력 때문에 일부 브랜드만 시도할 수 있었습니다.

• 대형 스토리텔링 에이전시에 맡기면 약 15,000~100,000달러와 3~6개월이 필요합니다.
  • 디자이너, 3D 아티스트, WebGL 개발자가 함께 참여하는 프로젝트 규모입니다.
• 프리랜서나 Three.js 개발자를 활용해도 약 3,500~8,000달러 이상이 들고, 전문 인력을 찾기 어렵다는 병목이 있습니다.

scroll-world는 브랜드와 장면 순서를 설명하면 이미지·영상 생성과 스크롤 연결 작업을 하나의 에이전트 파이프라인으로 수행합니다.

• GPT Image 2로 일관된 등각투영 정지 장면을 만들고, Monid의 Seedance로 각 장면을 통과하는 카메라 영상을 생성합니다.
  • 수개월짜리 제작 과정을 몇 시간 규모의 실험으로 줄입니다.
• 인접한 두 장면의 실제 경계 프레임을 시작점과 끝점으로 사용해 연결 클립을 만듭니다.
  • 장면 사이의 깜빡임이나 컷이 드러나지 않는 연속 비행을 구현합니다.

도구 자체는 MIT 라이선스로 무료이며, 실제 비용은 이미지와 영상 생성에 사용되는 API 크레딧에서 발생합니다.

• 6개 장면의 1080p 체인은 약 27달러 수준으로 소개됐습니다.
  • 개발자는 댓글에서 실제 비용이 더 낮을 수 있고, Monid AI를 기본 경로로 적용해 약 20%를 추가 절감했다고 설명했습니다.
• 모바일용 화면을 단순히 자르지 않고 네이티브 9:16 비율의 별도 연출로 생성합니다.
• 바닐라 JS 스크럽 엔진이 스크롤 위치를 영상 재생 시점에 연결합니다.
  • blob 탐색, 지연 로딩, 이음매 크로스페이드가 포함되며 HTML·Next.js·Vue 등에 적용할 수 있습니다.

고비용 연출을 에이전트가 대중화한다는 기대가 컸지만, 스크롤 주도권과 결과물 수정 가능성에 대한 비판도 함께 나왔습니다.

• 직접 테스트하거나 제작 중인 사이트에 적용해 보겠다는 긍정적인 반응이 이어졌습니다.
• 반면 스크롤 속도에 카메라 움직임이 강하게 묶이면 불쾌감이나 어지러움을 유발할 수 있다는 UX 지적이 있었습니다.
• 콘셉트와 프로토타입에는 효과적이지만, 생성 코드를 세밀하게 수정하거나 실제 3D 모델로 대체하면 기존 수준의 비용이 다시 발생할 수 있습니다.