스크롤을 내리면 카메라가 장면 속으로 날아 들어가는 홈페이지, 보신 적 있으신가요? 애플 제품 페이지에서 쓰는 그 방식입니다.
원래는 전문 에이전시에 맡겨야 했던 작업인데, 이제 클로드 스킬 하나로 만들 수 있습니다.

이번 영상에서는 오픈소스 스킬 scroll-world로 3D 비행 랜딩페이지를 만드는 전 과정을 보여드립니다.
원리는 두 문장이면 됩니다. 카메라가 날아다니는 영상을 미리 만들어둔다. 스크롤은 그 영상의 재생 위치를 조종한다 — 스크롤이 리모컨, 화면은 영상.

말로만 하지 않습니다. 샐러드 정기배송 비즈니스를 예시로 4개 장면짜리 랜딩페이지를 실제로 만들었고, 크레딧이 정확히 얼마 들었는지(496크레딧, 약 2만 9천 원)까지 항목별로 공개합니다.

▶ 이번 영상에서 배우는 핵심 내용
스크롤 비행 페이지의 원리 — 3D 렌더링이 아니라 '미리 만든 영상 + 스크롤 스크러빙'인 이유
scroll-world 스킬의 구조 — 인터뷰 → 예산 승인 → 에셋 생성 → 조립, 왜 생성 전에 비용을 먼저 보여주는가
설치 과정 — 터미널이 필요한 순간은 딱 두 번, 나머지 준비물은 클로드가 알아서 설치하는 과정
비용 협의 시연 — 예상 650~750크레딧을 보고 섹션을 줄여 조정하는 실제 화면
컷 없는 연결의 비결 — 앞 영상의 마지막 프레임으로 다음 영상을 만든다는 것
실제 비용 공개 — 스틸·다이브 영상·연결 영상 항목별 크레딧과 원화 환산

▶ 타임라인
[00:00] 인트로 — 이 페이지, 스킬 하나로 만들었습니다
[00:31] scroll-world 스킬 소개
[01:30] 준비물 — 필수는 딱 두 개 (힉스필드, ffmpeg)
[03:48] 스킬 설치
[04:25] 시연 시작 — 클로드 데스크탑 앱
[05:14] 인터뷰 — 샐러드 정기배송 비즈니스로 진행
[06:25] 예상 비용 확인과 섹션 조정
[06:55] 힉스필드 로그인과 테스트 렌더
[07:33] 장면 이미지 확인
[08:30] 완성된 페이지 확인
[09:49] 실제 크레딧 정리
[11:04] 마무리

💬 아래 오픈채팅방에서 영상 내용 전체를 정리한 가이드 문서를 받아보실 수 있습니다.
👉 [Aiden의 친절한 AI] AI 정보 공유방: https://open.kakao.com/o/gcinVrFi

▶ scroll-world 스킬 저장소 (오픈소스, MIT 라이선스)
https://github.com/oso95/scroll-world

▶ 설치 명령어 (터미널)
claude plugin marketplace add oso95/scroll-world
claude plugin install scroll-world@scroll-world

#클로드 #Claude #클로드코드 #ClaudeCode #클로드스킬 #ClaudeSkill #skills #scrollworld #스크롤월드 #홈페이지제작 #랜딩페이지 #3D홈페이지 #인터랙티브웹 #힉스필드 #Higgsfield #AI홈페이지 #AI활용법