Claude Code 호버 재생 스크롤 미리보기 영상 스킬 — "호버 미리보기 영상 만들어줘" (animated-thumbnail-maker)

스킬 파일 제공

구매하시면 SKILL.md, 스크립트 3개(capture_scroll.py·encode_card_preview.sh·build_slideshow.sh), 참고 문서 4개, 설치 안내 README 가 담긴 압축 파일을 받으실 수 있습니다. ~/.claude/skills/ 에 폴더째 두면 자동으로 인식됩니다.

animated-thumbnail-maker.zip 다운로드

Claude Code 호버 재생 스크롤 미리보기 영상 스킬 —

포트폴리오나 마켓 목록의 카드는 대부분 정지 스크린샷 한 장입니다. 첫 화면만 보여서, 그 사이트가 아래로 어떻게 이어지는지는 클릭해 들어가야 압니다. collectui.com 같은 곳은 카드에 마우스를 올리면 사이트가 스크롤되며 움직이는 미리보기가 재생됩니다. 그걸 직접 만들려면 녹화, 자르기, 인코딩, 카드 마크업까지 손이 꽤 갑니다.

왜 만들었나

처음엔 간단해 보였습니다. Playwright 로 스크롤하며 녹화하고 ffmpeg 로 앞 4초를 자르면 끝날 것 같았습니다. 그런데 결과 영상이 통째로 흰 화면이었습니다. Playwright 녹화는 페이지 로딩을 기다리는 시간까지 그대로 담기 때문에, 한 사이트에서는 4초를 요청한 녹화가 13초짜리였고 앞 5초가 흰 화면이었습니다. 앞에서부터 자르니 흰 화면만 남은 4~5KB 짜리 영상이 나왔습니다.

로그인이 필요한 관리자 화면은 또 다른 문제였습니다. Playwright 는 새 브라우저라 로그인 쿠키가 없어서 403 이 납니다. 이런 함정들을 겪을 때마다 스크립트와 문서에 반영해 스킬로 묶었습니다.

무엇을 하나

공개 페이지는 스크롤 녹화 — capture_scroll.py 가 headless Chromium 으로 페이지를 끝까지 스크롤하며 녹화합니다. 폭, 높이, 길이, 스크롤 단계를 인자로 조절합니다.
카드용 경량 mp4 + poster — encode_card_preview.sh 가 콘텐츠가 시작되는 지점부터 잘라 무음 H.264 mp4(faststart)와 정지 프레임 jpg 를 만듭니다. 시작 지점을 안 주면 경고합니다.
로그인 화면은 슬라이드쇼 — 사용자의 실제 Chrome 세션(claude-in-chrome)으로 화면을 3~6장 찍고, build_slideshow.sh 가 크로스페이드로 이어 붙입니다.
호버할 때만 재생되는 카드 마크업 — 바닐라 HTML, 이벤트 위임, Svelte 세 가지 패턴과 모바일(호버 없음) 처리.
품질 검사 기준 — 코덱, 길이 3~5초, 용량 하한·상한, poster 가 빈 화면이 아닌지, 스크롤 리빌 요소가 실제로 나타나는지를 프레임을 뽑아 확인합니다.

문서에 정리된 함정

증상	원인과 대응
결과 mp4 가 몇 KB 이고 poster 가 새하얗다	녹화 앞부분이 로딩 대기 화면. 1초 간격으로 프레임을 뽑아 콘텐츠 시작 지점을 찾고 `-ss` 로 그 지점부터 자른다
관리자 화면이 403	Playwright 는 로그인 쿠키가 없다. 실제 Chrome 세션으로 스크린샷을 찍어 슬라이드쇼로
섹션이 빈 채로 지나간다	스크롤이 너무 빨라 리빌 애니메이션 전 프레임만 찍힘. 단계 20~40, 구간당 120~250ms 로 조정
ffmpeg 가 "Unable to parse option value '.7'"	bc 가 1 미만 소수를 선행 0 없이 출력. 슬라이드쇼 스크립트가 보정한다
Claude 의 브라우저 확장에서 영상이 재생 안 됨	자동화 탭은 video 디코딩이 안 됐다. 재생 여부는 ffprobe 와 사람의 눈으로 확인하고, 확인 못 한 것은 확인했다고 보고하지 않는다

쓰는 흐름

구매 후 전체 프롬프트 확인 가능

유료 프롬프트의 전문과 복사용 프롬프트는 구매자에게만 제공됩니다. 공개 본문에서는 구성, 활용 범위, 업데이트 내역만 확인할 수 있습니다.

카드에는 <video muted loop playsinline preload="metadata"> 에 poster 를 붙이고, 마우스를 올릴 때만 재생합니다. 목록 카드가 전부 자동재생되면 CPU 와 트래픽을 낭비하기 때문입니다.

구성

파일	역할
`SKILL.md`	절차 — 시작 전 확인, 공개/로그인 화면 분기, 기본 원칙, 보고 형식
`scripts/capture_scroll.py`	Playwright 스크롤 녹화 → webm
`scripts/encode_card_preview.sh`	webm → 카드용 mp4 + poster (시작 지점 지정)
`scripts/build_slideshow.sh`	스크린샷 여러 장 → 크로스페이드 mp4 + poster
`references/capture-encode.md`	캡처·인코딩 절차, GIF/WebP 대체, 로그인 화면 슬라이드쇼
`references/card-markup.md`	호버 재생 마크업 3종, 모바일 처리
`references/quality-check.md`	산출물 검사, 실패 기준, 배포 후 검증
`references/video-upload.md`	운영 서버에 올리기 — 경로 예시, rsync, nginx 확장자 확인, CMS 파일 테이블 연결

설치

unzip animated-thumbnail-maker.zip
mkdir -p ~/.claude/skills
cp -r animated-thumbnail-maker ~/.claude/skills/
python3 -m venv venv && ./venv/bin/pip install playwright
./venv/bin/python -m playwright install chromium

요구 사항

Claude Code
Python 3 + Playwright(Chromium), ffmpeg/ffprobe, bc. Linux·macOS 의 bash
로그인 화면 슬라이드쇼는 Claude in Chrome 확장이 있을 때만. 없으면 스크린샷을 직접 찍어 스크립트에 넣으면 됩니다
운영 서버 업로드 절차는 Rhymix/XE 류 CMS 경로를 예로 들었습니다. 자기 서버 경로로 바꿔 씁니다

이런 분께

포트폴리오, 템플릿 마켓, 사이트 모음 목록에 움직이는 미리보기를 넣고 싶은 분
Playwright 녹화 결과가 흰 화면이거나 너무 커서 카드에 못 쓰던 분
관리자 화면처럼 로그인이 필요한 화면도 카드 미리보기로 보여 주고 싶은 분