애플 홈페이지처럼 움직이는 웹사이트, 제미나이로 10분 만에 만들었습니다.

🚀 ASC 모집 (연간 멤버십 프로그램): https://www.solopreneur.co.kr
조쉬의 '실행' 중심 연간 멤버십 프로그램 모집 정보를 확인하세요!

🎬 스크롤에 반응하는 영상 웹사이트: Gemini와 AI 스튜디오로 인터랙티브 랜딩페이지 완성하기
이번 영상에서는 동영상을 스크롤에 반응하는 인터랙티브 웹사이트로 변환하는 전체 실전 흐름을 보여드립니다.
AI 크리에이터, 1인 비즈니스, 프론트엔드 초보라도 따라 할 수 있도록 Gemini, VMake, Supabase, Google AI 스튜디오까지 한 번에 정리했습니다.
영상에 실제로 사용한 기술 프롬프트 전문도 설명란에 남겨두었으니 그대로 복붙해서 활용하실 수 있어요.

[영상에 쓰인 프롬프트]
"비디오의 프레임을 스크롤에 따라 반응하는 웹사이트로 만들어줘. 단, 부드러운 성능을 위해 다음 기술적인 제약 사항을 반드시 지켜줘:
이벤트 분리 (Decoupling): scroll 이벤트 내에서 직접 video.currentTime을 변경하지 마. 스크롤 이벤트는 오직 targetTime 변수만 업데이트하게 해줘.
렌더링 루프 (Render Loop): 실제 비디오 시간 업데이트는 requestAnimationFrame 루프 안에서 처리해줘.
병목 방지 (Seeking Guard): 루프 안에서 반드시 if (!video.seeking) 조건을 확인해서, 비디오가 이전 프레임을 찾고 있는 중(seeking)이라면 새로운 업데이트를 건너뛰도록 해줘. 이렇게 해서 디코더 대기열이 쌓이지 않게 해줘."


⏱️ Timestamps (타임스탬프)
0:00 - 완성 결과 데모와 스크롤 인터랙션 미리보기
0:24 - 오늘 만들 스크롤 반응 웹사이트 개요
1:02 - 애플 아이폰 공식 웹사이트 스크롤 연출 분석
1:29 - 도날드덕 놀이공원 스크롤 웹사이트 예시
1:59 - 테슬라 모델 Y 자동차 소개 웹사이트 예시
2:24 - 오늘 만들 아이폰 스크롤 소개 웹사이트 기획
3:06 - Gemini(제미나이)에 캡처 이미지 업로드 및 프롬프트 작성
3:41 - 360도 회전 아이폰 동영상 생성 결과 확인
4:12 - VMake로 배경 제거해서 투명 비디오 만들기
5:20 - MP4 → WebM 변환 워크플로우(프리컨버트 활용)
6:24 - Supabase 스토리지에 WebM 업로드 및 퍼블릭 URL 발급
8:06 - Google AI 스튜디오에서 스크롤 연동 랜딩페이지 자동 생성

🔑 핵심 요점 (Key Points)
1. 애플 아이폰 공식 페이지처럼 스크롤에 맞춰 제품이 회전하는 웹사이트를 노코드에 가깝게 구현합니다.
2. Gemini(제미나이)에 캡처 이미지만 올려도 360도 회전 동영상을 자동으로 생성할 수 있습니다.
3. VMake를 활용해 영상 배경을 투명 처리해 어떤 랜딩페이지에도 자연스럽게 올릴 수 있습니다.
4. 프리컨버트로 MP4를 WebM으로 변환해 웹에서 부드럽게 재생되도록 최적화합니다.
5. Supabase 스토리지를 이용해 WebM 파일을 호스팅하고 퍼블릭 URL을 받아 실서비스처럼 연결합니다.
6. Google AI 스튜디오에 프롬프트만 넣어도 스크롤 위치에 따라 프레임이 바뀌는 웹사이트 코드가 자동 생성됩니다.
7. 자동차, 캐릭터, 제품 등 다양한 프로덕트 소개 페이지에 그대로 응용 가능한 재사용 워크플로우를 제공합니다.

📝 세부 내용 요약 (Section Summaries)
■ 스크롤 반응 웹사이트 데모
AI 크리에이터 관점에서 완성된 스크롤 반응 웹사이트를 먼저 보여주며, 랜딩페이지가 어떻게 인터랙티브하게 동작하는지 한눈에 이해할 수 있게 합니다.

■ 레퍼런스 분석과 콘셉트 기획
애플 아이폰 웹사이트의 스크롤 연출을 분석하며 프론트엔드 연출 포인트와 1인 비즈니스에서도 적용 가능한 구조를 정리합니다.

■ 캐릭터·자동차 예시 웹사이트
도날드덕 놀이공원과 테슬라 모델 Y 같은 예시를 통해 B2B/B2C 프로덕트나 SaaS 서비스도 짧고 임팩트 있게 소개하는 방법을 보여줍니다.

■ Gemini로 360도 회전 영상 생성
캡처한 이미지를 Gemini에 넣고 프롬프트로 제어해 AI 자동화 방식으로 360도 회전 동영상을 만드는 과정을 자세히 설명합니다.

■ VMake와 WebM 변환 워크플로우
VMake로 배경을 제거하고 프리컨버트를 활용해 WebM으로 변환해, 프론트엔드에서 부드럽게 돌아가는 영상 자산을 완성합니다.

■ Supabase 업로드와 URL 준비
Supabase 스토리지에 WebM 파일을 업로드하고 퍼블릭 버킷으로 설정해, 실제 프로덕트 웹사이트에서 쓸 수 있는 안정적인 파일 URL을 확보합니다.

■ AI 스튜디오로 스크롤 연동 랜딩페이지 제작
Google AI 스튜디오에서 준비한 URL과 기술 프롬프트를 활용해 스크롤에 따라 비디오 프레임이 바뀌는 랜딩페이지 코드를 자동 생성하고, Antigravity 같은 개발 도구와도 연계 가능한 확장 아이디어를 제안합니다.


----

[조쉬의 뉴스레터 및 소셜 미디어]

🗞️ 조쉬의 뉴스레터 (1만명 이상 구독 중)
뉴스레터를 구독하고, 가장 빨리 AI 인사이트를 받아보세요!
https://maily.so/josh

🔗 소셜 미디어 (도합 3만 이상)
Threads: https://www.threads.com/@joshproductletter
LinkedIn: https://www.linkedin.com/in/uxjosh/