# 클로드 스킬 하나로 애플 제품페이지 같은 3D 홈페이지 만드는 방법
Canonical: https://social-archive.org/romi/4UAg7yOwnz
Original URL: https://www.youtube.com/watch?v=iBQMs1-vRKE
Author: Aiden의 친절한 AI
Platform: youtube
Share mode: full
## Content
스크롤을 내리면 카메라가 장면 속으로 날아 들어가는 홈페이지, 보신 적 있으신가요? 애플 제품 페이지에서 쓰는 그 방식입니다. 원래는 전문 에이전시에 맡겨야 했던 작업인데, 이제 클로드 스킬 하나로 만들 수 있습니다. 이번 영상에서는 오픈소스 스킬 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활용법