scroll-world 스킬 — 코딩 없이 만드는 3D 비행 랜딩페이지

스크롤을 내리면 카메라가 장면 속으로 날아 들어가고, 컷 없이 다음 장면으로 이어지는 — 애플 제품 페이지 방식의 스크롤 인터랙티브 웹사이트를 코딩 한 줄 없이 만드는 가이드입니다. 영상에서 진행한 설치부터 인터뷰, 비용 협의, 완성까지 전 과정과 실제 크레딧 사용량을 정리했습니다.

📺 영상 채널: Aiden의 친절한 AI (https://www.youtube.com/@Aiden_channel)

---

이 가이드로 하는 것

1. scroll-world 스킬의 동작 원리를 이해한다
2. 클로드 코드 플러그인으로 스킬을 설치한다
3. 인터뷰에 답해 브랜드·장면 구성·품질을 정한다
4. 예상 크레딧 비용을 먼저 확인하고 협의한 뒤 생성을 승인한다
5. 테스트 렌더로 스타일을 검증하고, 완성된 랜딩페이지를 확인한다

💡 영상에서는 ’샐러드 정기배송 비즈니스’를 예시로 — 채소 수확 → 샐러드 키친 → 배송 여정 → 우리 집 도착까지, 비즈니스의 전 과정을 하나의 비행 여정으로 담은 페이지를 만들었습니다.

---

준비물

필수 2가지

준비물	역할
힉스필드(Higgsfield) 계정 + 크레딧 + CLI	AI 이미지·영상 생성 플랫폼. 각 장면의 이미지와 카메라 영상을 전부 여기서 생성 (크레딧은 유료 — 실제 사용량은 아래 ‘비용 정리’ 참고)
ffmpeg	영상 처리 표준 오픈소스 도구. ① 앞 장면 영상의 마지막 프레임 추출 ② 완성 영상을 웹 재생용으로 변환. 함께 언급되는 ffprobe는 ffmpeg 설치 시 같이 설치됨

💡 힉스필드 CLI와 ffmpeg는 수동으로 설치할 필요 없습니다. 스킬을 실행하면 클로드가 없는 걸 감지해서 대신 설치해줍니다.

선택 사항

준비물	언제 필요한가
Python + Pillow	모바일 세로 버전 제작, 장면 이미지 배경 투명화
Codex CLI	ChatGPT 구독자용 옵션 — 장면 이미지를 힉스필드 대신 코덱스로 생성해 크레딧 절약 (단, 영상은 힉스필드로만 생성 가능)

---

시작 전에 — scroll-world는 어떻게 동작하나

scroll-world는 Peter Wang이 오픈소스로 공개한 스킬로, 공개된 지 얼마 안 돼 스타 4천 개를 넘겼습니다. Claude Code, Codex뿐 아니라 SKILL.md 형식을 지원하는 모든 에이전트에서 쓸 수 있고, 어떤 산업·브랜드든 적용 가능한 스크롤 조작형 랜딩 페이지를 만들어줍니다.

원리는 생각보다 단순합니다.

⭐ 스크롤이 리모컨이고, 화면은 영상입니다. 장면 속을 날아다니는 카메라 영상을 미리 만들어두고, 스크롤로 그 영상의 재생 위치를 앞뒤로 조종합니다. 스크롤을 멈추면 화면도 멈추고, 올리면 거꾸로 감깁니다.

장면과 장면이 컷 없이 이어지는 비결 — 앞 장면 영상의 마지막 프레임을 그대로 꺼내서, 그 이미지로 다음 연결 영상을 만듭니다. 끝나는 그림과 시작하는 그림이 픽셀 단위로 똑같으니, 이어 붙여도 티가 나지 않습니다.

스킬의 진행 방식 (실행하면 이 순서로 흘러갑니다)

1. 인터뷰 — 주제·산업, 핵심 메시지, 장면 순서, 모바일 버전 필요 여부
2. 비용 승인 ⭐ — 에셋 생성 전에 예상 크레딧 비용을 먼저 보여주고 승인을 받음
3. 에셋 생성 — 장면 이미지와 카메라 영상
4. 랜딩페이지 완성 — 에셋을 연결해 페이지 조립

---

STEP 1. 스킬 설치 — 클로드 코드 플러그인

터미널에서 두 명령어를 순서대로 입력합니다.

claude plugin marketplace add oso95/scroll-world

→ 저장소를 일종의 앱스토어처럼 등록

claude plugin install scroll-world@scroll-world

→ 방금 등록한 곳에서 스킬을 내려받아 설치

이걸로 스킬 설치는 끝입니다.

---

STEP 2. 스킬 실행

영상에서는 클로드 데스크탑 앱으로 진행했습니다.

1. 데스크탑 앱 → 코드 탭을 눌러 클로드 코드로 이동
2. 작업물이 저장될 폴더 지정
3. 입력창에 슬래시(/)를 누르고 scroll까지만 입력 → 목록에 뜨는 scroll-world 스킬 선택 → 엔터

실행하면 인터뷰 전에 필수 준비물(힉스필드 CLI, ffmpeg) 설치 여부를 먼저 확인하고, 없으면 알아서 설치를 진행해줍니다.

💡 이때 힉스필드 계정을 연결하라는 메시지가 함께 나오는데, 계정 연결은 나중에 해도 됩니다(STEP 5). 영상에서도 인터뷰부터 진행했습니다.

---

STEP 3. 인터뷰 — 브랜드와 장면 정하기

한글로 인터뷰를 진행해달라고 요청한 뒤, 질문에 답해 나갑니다. 영상에서의 선택은 이랬습니다.

질문	영상에서의 선택
어떤 주제로 만들 것인가	샐러드 정기배송 비즈니스
브랜드 이름·컬러·톤	직접 제안해달라고 요청 → 스킬이 ’그린루트’라는 가상 브랜드를 지어줌
비주얼 스타일	추천해주는 항목으로 선택
모바일 전용 버전 제작 여부	데스크톱만 — 모바일까지 만들면 크레딧이 두 배
영상 품질 티어	표준

인터뷰가 끝나면 브랜드 이름·톤·컬러와 함께, 각 섹션이 어떻게 구성되는지 설명해줍니다.

---

STEP 4. 예상 비용 확인하고 협의하기 ⭐

에셋 생성 전, 스킬이 예상 크레딧 비용을 먼저 보여주고 승인을 받습니다. 영상에서는 6개 섹션 기준 650~750크레딧이 예상됐는데, 비용을 줄이고 싶어서 섹션을 4개로 줄여달라고 협의했습니다.

💡 최종 산출물 제작 전에 비용을 보고 섹션 수를 조정할 수 있다는 게 이 스킬의 안심되는 부분입니다. 예산이 정해져 있다면 이 단계에서 조율하세요.

---

STEP 5. 힉스필드 계정 연결

터미널에서:

higgsfield auth login

브라우저 창이 뜨면서 계정 연결을 허용할지 묻습니다. Allow를 누르면 승인 메시지와 함께 로그인이 완료됩니다. 다시 클로드로 돌아와 로그인이 완료됐다고 알려주세요.

---

STEP 6. 테스트 렌더 — 스타일 먼저 검증하기 ⭐

본격 생성 전에 테스트 렌더를 요청합니다. 전체를 만들기 전에 장면 하나만 먼저 뽑아 스타일이 원하는 방향인지 확인하는 단계입니다.

1. 잠시 기다리면 첫 장면의 스틸 이미지가 완성됩니다 (영상 예시: 채소를 수확하는 장면)
2. 테스트 렌더에 실제로 쓰인 크레딧을 기준으로 전체 예상 비용을 더 정확하게 재계산해줍니다
3. 나머지 섹션 이미지도 보고 진행할지, 바로 진행할지 물어봅니다 — 영상에서는 나머지 이미지도 전부 확인하고 진행했습니다

⭐ 마음에 안 드는 장면이 있으면 이 단계에서 다시 만들어달라고 하세요. 영상 생성에 들어가기 전이라, 수정하기 가장 좋은 타이밍입니다. (이미지는 장당 7크레딧, 영상은 개당 45~72크레딧 — 이미지 단계 수정이 압도적으로 저렴합니다)

---

STEP 7. 생성 대기 → 완성 확인

승인하면 에셋 생성과 페이지 조립이 진행됩니다. 영상에서는 40~50분 정도 걸렸습니다.

완성된 페이지에서 확인할 것:

• 첫 장면에서 시작해, 스크롤을 내리면 카메라가 다음 장면 속으로 날아 들어가는지
• 장면과 장면 사이에 끊기는 지점이 없는지 (마지막 프레임 연결 방식의 결과)
• 스크롤을 올리면 거꾸로 감기는지

영상 예시 페이지의 여정: 농장 수확 → 샐러드 키친 → 스쿠터 배송 → 완성된 샐러드 볼과 함께 도착.

---

비용 정리 — 실제로 얼마나 들었나

영상 제작 기준(데스크톱 전용, 4개 장면, 표준 품질)의 실제 사용량입니다.

항목	단가	수량	소계
장면 스틸 이미지	7크레딧/장	4장	28크레딧
다이브 영상 (8초, 1080p — 장면 속으로 날아 들어가는 영상)	72크레딧/개	4개	288크레딧
연결 영상 (5초 — 장면과 장면을 잇는 영상)	45크레딧/개	3개 + 재시도 1회	180크레딧
합계			496크레딧 ≈ $19.84 (약 2만 9천 원)

💡 인터뷰 때 6개 섹션 기준 650~750크레딧으로 예상됐던 걸 4개로 줄여 진행한 결과라, 예상 범위에서 크게 벗어나지 않았습니다. 비용의 대부분은 영상입니다 — 이미지는 저렴하니 이미지 단계에서 충분히 검토하고, 장면을 늘리거나 모바일 버전까지 만들면 비용이 그만큼 늘어난다고 보면 됩니다.

---

정리

구분	내용
스킬	scroll-world (Peter Wang, 오픈소스) — SKILL.md 지원 에이전트 어디서나 사용 가능
원리	스크롤 = 영상 재생 위치 리모컨. 마지막 프레임 재사용으로 컷 없는 장면 전환
필수 준비물	힉스필드(계정·크레딧·CLI) + ffmpeg — 둘 다 스킬이 자동 설치
핵심 안전장치	생성 전 비용 승인 + 테스트 렌더로 스타일 검증
실제 비용	데스크톱 4장면 기준 496크레딧 (≈ 2만 9천 원, 40~50분 소요)

전문 기술 없이 이 정도 수준의 인터랙티브 페이지를 만들 수 있다는 게 이 스킬의 매력입니다. 공간과 이야기가 있는 비즈니스라면 어디든 잘 어울리는 방식 — 운영하시는 비즈니스가 있다면, 손님에게 닿기까지의 여정을 이런 식으로 보여주는 것도 좋은 방법입니다.

---

참고 링크

• scroll-world 스킬 저장소: https://github.com/oso95/scroll-world
• 힉스필드(Higgsfield): https://higgsfield.ai
• ffmpeg: https://ffmpeg.org

---

Aiden의 친절한 AI