drawImage
영상으로 스크롤 페이지 만들기 (Film Slicer)
해결하는 문제
애플 제품 페이지처럼 스크롤하면 영상이 감기는 페이지를 ffmpeg 없이 만들고 싶다.
영상을 끌어다 놓으면 브라우저가 프레임을 하나씩 캔버스에 그려 뽑고, 스크롤하면 영상이 감기는 페이지를 HTML 한 장으로 만들어 줍니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것짧은 영상 파일
브라우저가 하는 일시점을 옮기며 프레임을 캔버스에 그려 이미지 묶음으로 만들고 스크롤 엔진에 주입
나오는 것스크롤로 재생되는 단일 HTML 페이지
쓰는 브라우저 기술
HTMLVideoElement (currentTime, seeked)Canvas drawImagetoDataURLBlob · a download
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 추출 프레임 수와 화질
- 스크롤 길이와 고정(sticky) 구간
- 문구와 카드 등장 위치
자주 막히는 곳
- 영상 위치를 옮긴 뒤 다 옮겨질 때까지 기다리지 않으면 같은 장면이 반복된다
- 프레임이 많으면 결과 HTML이 수십 MB가 된다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI 영상으로 만든 제품 스크롤 스토리
- 프레임별 장면 설명으로 자동 문구
웹 서비스
- 제품 소개 랜딩
- 보고서 스크롤 스토리
피지컬 AI
- 제품 분해 과정 시각화
- 로봇 동작 기록 영상 분석
넓히는 방법
- ScrollFilm처럼 브랜드 랜딩 제작 서비스로
- WebCodecs로 더 빠른 추출
- AI 영상 프롬프트 라이브러리와 연결
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
영상을 끌어다 놓으면 프레임을 캔버스로 뽑아서, 스크롤하면 영상이 감기고 되감기는 단일 HTML 페이지를 만들어 내려받게 해줘.
같은 분류의 능력
03 미디어 처리에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md