유료 도구 0원! Claude AI + 무료 AI 비디오로 1,000만 원 상당 인터랙티브 스크롤 웹사이트 만들기
유료 도구 0원! Claude AI + 무료 AI 비디오로 1,000만 원 상당 인터랙티브 스크롤 웹사이트 만들기
외주 개발비 없이 스크롤 애니메이션(Scrollytelling) 기반의 고화질 브랜드 웹사이트를 완성하는 풀버전 가이드입니다.
📌 이 글 하나로 끝내는 핵심 요약
- 유료 힉스필드(Higgsfield) 대체: Kling AI, Hailuo AI 등 무료 AI로 스크롤 반응형 영상 제작
- 프롬프트 엔지니어링: 스크롤 시 화면이 튀지 않는 4대 황금 법칙 및 업종별 프롬프트 제공
- GSAP ScrollTrigger 적용: Claude Code를 활용한 프레임 단위 스크롤 제어 구현
- 무료/원클릭 배포: 로컬 테스트부터 도메인 라이브 배포까지 전 과정 포함
1. 왜 '스크롤 반응형 비디오(Scrollytelling)'인가?
최근 글로벌 명품 브랜드나 하이엔드 테크 기업 웹사이트를 보면, 사용자가 마우스 스크롤을 내릴 때마다 배경 동영상이 마우스 움직임에 맞춰 재생되는 효과를 볼 수 있습니다. (예: 커피가 잔으로 내려오거나, 화장품 세럼이 떨어지며 병으로 변하는 연출)
과거에는 이를 구현하려면 전문 프론트엔드 개발자와 3D 디자이너가 붙어 1,000만 원 이상의 견적이 발생했으나, 이제는 Claude Code와 무료 AI 비디오 생성기 조합으로 단 10분 만에 직접 제작이 가능합니다.
2. 100% 무료 도구 조합 (Higgsfield 대체 플랜)
기존 방식은 힉스필드(Higgsfield) 유료 구독이 필요했지만, 아래 3가지 무료 AI 도구와 로컬 에셋 폴더 연동 방식을 사용하면 비용 0원으로 완전히 대체할 수 있습니다.
| 도구 이름 | 무료 혜택 | 강점 및 특화 기능 |
|---|---|---|
| Kling AI | 매일 무료 크레딧 지급 | 직관적인 카메라 동선 제어 (Dolly Push, Tilt 등) |
| Hailuo AI (MiniMax) | 매일 무료 생성 지원 | 액체, 연기, 초고화질 피사체 질감 및 물리 표현 극대화 |
| Luma Dream Machine | 가입 시 무료 생성권 | 3D 입체 제품 회전 및 감성적인 배경 애니메이션 |
3. [필수] 스크롤 반응형 AI 비디오 프롬프트 4대 법칙
일반 홍보 영상과 스크롤용 영상은 프롬프트 작성법이 다릅니다. 사용자가 마우스를 올리고 내릴 때 영상이 멈칫하거나 울컥거리지 않으려면 아래 4가지 원칙을 반드시 지켜야 합니다.
1️⃣ 단일 카메라 동선 유지 (One-Directional Motion)
카메라가 이동하다 멈추거나 꺾이면 스크롤 시 화면이 튀게 됩니다. Slow dolly push-in 또는 Slow tilt up 중 딱 1개의 동선만 지시하세요.
2️⃣ 초슬로우 페이싱 지시어 (Ultra-Slow Pace)
영상의 빠른 움직임은 스크롤 감도를 망칩니다. 프롬프트 끝에 slow-motion, ultra-slow steady pace를 필수 입력하세요.
3️⃣ 피사체의 단방향 변화 (Linear Progression)
위에서 아래로 흘러내림, 왼쪽에서 오른쪽으로 자수가 놓임, 0도에서 180도로 회전함 등 명확한 시작과 끝이 있는 일직선 변화를 부여하세요.
4️⃣ 고정된 배경 및 조명 (Static Environment)
배경이 깜빡이는 걸 막기 위해 dark minimal static background, consistent studio lighting을 포함해야 합니다.
4. 업종별 바로 복사하는 영문 프롬프트 예제 6종
Kling AI나 Hailuo AI의 입력창에 아래 영문 텍스트를 그대로 복사해 넣으시면 스크롤에 가장 적합한 고화질 영상이 생성됩니다.
☕ 1. 카페/음료 (에스프레소 추출)
Extreme close-up shot, a rich dark espresso shot slowly pouring downward from a portafilter into a clear glass cup, liquid flowing gently in ultra-slow motion, smooth downward motion, dramatic warm studio lighting, dark minimal background, photorealistic 4K.
🧴 2. 뷰티/화장품 (세럼 물방울 변형)
Macro close-up shot, a single glowing serum drop slowly falling vertically from top to bottom, landing softly and transforming into a sleek glass perfume bottle, slow and deliberate movement, soft diffused sunlight, clean aesthetic background, ultra-realistic.
🎧 3. 테크/전자기기 (헤드폰 3D 전진)
Center-framed close-up shot, a modern wireless headphone floating in mid-air, camera slowly pushing in (dolly-in) towards the metallic side texture, smooth continuous forward movement, high-contrast studio neon lighting, cinematic depth of field, 8k resolution.
👖 4. 패션/의류 (청바지 스티치 자수)
Close-up shot of denim fabric, a bright green thread smoothly stitching along the pocket edge from left to right, steady macro tracking shot, ultra-slow motion, rich fabric texture detail, warm studio light, clean background.
🥐 5. 베이커리/디저트 (오븐 오르는 빵)
Close-up shot inside a bakery oven, a fresh croissant dough slowly rising and turning golden brown, smooth upward motion, warm glowing oven light, soft steam rising gently, photorealistic quality.
👟 6. 피트니스/운동화 (3D 스니커즈 회전)
Studio shot, a futuristic running shoe floating mid-air, rotating smoothly from side to front view (180 degree slow rotation), steady lighting with sharp shadows, dark gray studio backdrop, 8k resolution.
5. 구체적인 제작 및 코드 적용 5단계
1단계: Claude Desktop 환경 구축 및 폴더 설정
- Claude 계정 로그인 후 Pro 플랜 이상을 활성화합니다.
- Claude 데스크톱 앱을 실행하고 좌측 상단의 [Code] 탭을 클릭합니다.
- 오른쪽 아래에서 모델을 Opus 또는 Fable로 설정하고, 추론 깊이(Effort) 슬라이더를 최우측(Maximum)으로 올립니다.
- 바탕화면에 새 폴더(예:
10k-website-demo)를 만들고 Claude Code에서 **[Open Folder]**로 연결합니다.
2단계: 무료 AI 비디오 생성 및 에셋 폴더 연결
- 위 4번 항목의 프롬프트를 사용하여 Kling AI 또는 Hailuo AI에서 5초짜리 영상을 생성합니다.
- 생성된 영상을 다운로드하여 바탕화면 작업 폴더 내
assets/hero-video.mp4로 저장합니다.
📁 10k-website-demo (작업 폴더)
└── 📁 assets
└── 🎬 hero-video.mp4
3단계: Claude Code 프롬프트 실행 (GSAP 스크롤 연동)
Claude Code 채팅창에 아래 명령어를 복사하여 전송합니다:
4단계: 실시간 프뷰 및 디버깅
Claude가 생성을 마치고 제공하는 http://localhost:... 링크를 눌러 브라우저에서 스크롤을 시연해 봅니다. 수정사항이 있다면 Claude 마이크 버튼을 눌러 음성으로 편하게 수정 명령을 내립니다.
5단계: 배포 및 라이브 전개
Hostinger 커넥터(Hostinger Connector)를 Claude Code에 연결하여 명령어 한 줄로 실제 도메인에 전개하거나, Vercel/Netlify 등 무료 호스팅에 index.html 및 assets 폴더를 드래그하여 무료로 라이브로 띄웁니다.
댓글
댓글 쓰기