Scroll World 스킬로 Fable 5·GPT-5.6을 웹디자인 괴물로 만들기

01핵심 개요

02스킬 작동 원리

• 단일 앵커 이미지에서 출발, 이를 영상으로 변환
• FFmpeg로 영상에서 개별 프레임을 추출해 사용자의 스크롤 위치와 매핑
• 여러 씬이 서로를 참조하도록 설계해 하나의 스토리처럼 일관성 유지
• 이미지 생성은 GPT image 2, 영상 생성은 Seed Dance 모델 사용 (Higgs Field MCP/CLI 경유)
• Codex(GPT-5.6)는 자체 이미지 생성 기능 보유 → 이미지는 네이티브로, 영상만 Higgs Field로 전송
• Claude Code는 이미지 생성 기능 없음 → 이미지·영상 전 과정을 Higgs Field가 전담

03실행 절차 (인터뷰 방식)

1. 크리에이티브 방향 설정: 웹사이트 주제와 아트 스타일을 대화로 지정 (예: "일본 여행 부티크 브랜드, 오리가미 스타일")
2. 예산 티어 선택: 씬 개수 결정 (기본 6씬은 과함, 4씬이 적정선 권장, 최소 3씬 가능) — 씬이 많을수록 Higgs Field 크레딧 소모 급증(6씬 기준 약 800크레딧)
3. 모바일 대응 수준 선택: 단순 크롭 세이프부터 풀 포트레이트 체인(모바일 전용 영상 추가 생성)까지 단계 선택 가능
4. 저니 제안 확인: 씬별 이미지 생성 수, 씬 다이브 영상 수, 커넥터·크로스페이드 등 총 생성 개수와 예상 소요 시간 제시
5. 앵커 이미지 승인: 전체 아트 디렙션을 결정짓는 첫 정지 이미지를 확인 후 승인해야 이후 전 과정이 진행됨
6. 자동 생성 및 완성: 승인 후 스킬이 전체 씬을 순차 생성해 로컬호스트에 결과물 배포 (예시 사례: 4씬, 10회 생성, 소요 32분)

04결과물 품질 비교 (Fable 5 vs GPT-5.6)

05확장 가능성과 한계

• 스크롤 애니메이션 자체를 수작업(영상 촬영, 시작 프레임 추출, 프레임 단위 작업)으로 만들면 매우 번거롭고 시간 소모가 큼 — 스킬이 이 과정을 대폭 단순화
• 현재 결과물은 "비주얼 스펙터클" 단계이며, 텍스트·CTA(콜투액션)·폼 등 기능적 요소 추가는 상대적으로 쉬운 후속 작업으로 평가됨
• 3~9개월 전 기준으로는 이런 수준의 코히런트한 스크롤 사이트 제작이 상당히 어려웠던 작업이었다는 점을 강조
• 씬 간 하드 컷 문제는 스킬 개선 여지로 남아 있음 (전환 스무딩 추가 시 완성도 상승 기대)

06스킬 획득 및 연결 방법

• 원작: Peter Wang의 오픈소스 "Scroll World" 스킬 (Twitter에서 공개)
• Chase AI 포크 버전 개선점: 예산 티어 도입(씬 개수 조절로 비용 절감), 모바일 버전 개선, SEO 관련 개선
• 연결 절차: Higgs Field 사이트 → MCP and CLI 메뉴 → MCP URL 복사 → 인증 진행 → 스킬 URL을 Claude Code/Codex에 전달(플러그인 형태 설치도 가능)
• 두 버전(원작·Chase AI 개선판) 모두 영상 설명란에 링크 제공 예정

07활용 시나리오

1. 부티크 여행사·호텔 등 브랜드 스토리텔링이 중요한 랜딩페이지를 짧은 시간에 원샷으로 시안 제작할 때
2. 예산 제약이 있는 소규모 팀이 씬 개수(4씬 권장)와 모바일 대응 수준을 조절해 Higgs Field 크레딧 비용을 통제하면서 프리미엄 스크롤 사이트를 만들 때
3. Claude Code와 Codex(GPT-5.6) 양쪽에서 동일 스킬 결과물을 비교해 팀의 AI 코딩 도구 선택 기준(전환 품질 등)을 세울 때

08용어 사전