web-demo-video

웹 데모 영상 만들기

밤밤의 웹 프로젝트(모자이크, 겟백앱, 카공메이트 등) 소개 영상을 만들 때 쓰는 절차. 목업 이미지를 이어붙이는 게 아니라 실제 사이트를 실제로 조작한 화면을 찍는 게 핵심이다.

먼저 물어볼 것

영상은 어디 쓰느냐로 비율·길이가 갈린다. 만들기 전에 반드시 확인한다.

용도	비율	길이
스레드·릴스·쇼츠	9:16 (1080x1920)	15~25초
블로그·유튜브 임베드·랜딩	16:9 (1920x1080)	30~40초
인스타 피드·카톡 공유	1:1 (1080x1080)	~20초

밤밤은 시각 산출물의 형식에 구체적인 기대가 있다. 레퍼런스가 있으면 먼저 달라고 한다.

절차

1. 로컬 서버로 대상 사이트를 띄운다

cd <프로젝트> && python3 -m http.server 8899

무대(stage) 페이지와 대상 사이트는 반드시 같은 오리진이어야 한다. 포트가 다르면 iframe.contentDocument 접근이 막혀서 조작이 불가능하다. → 무대 파일을 프로젝트 폴더 안에 임시로 두고, 작업이 끝나면 반드시 빼낸다(안 그러면 다음 배포에 딸려 올라간다).

2. 무대 페이지를 만든다

assets/stage-template.html를 복사해서 고친다. 구조:

• #stage — 출력 비율 그대로의 고정 크기 div (1:1이면 540x540, dpr 2로 캡처하면 1080x1080)
• #cap / #foot — 큰 자막(상단) / 보조 문구(하단)
• #win — 맥 브라우저 창 목업(신호등 3개 + URL) 안에 <iframe>을 transform: scale()로 축소해 넣음
• #cursor — 가짜 마우스 커서 SVG. 이게 있어야 조작 영상처럼 보인다
• #ring — 클릭·브러시 크기를 보여주는 하이라이트 원
• #end — 엔딩 카드(제품명 / 한줄 설명 / 셀링포인트 3개 / URL)
• window.__tick(frameIndex) — 프레임 번호 하나를 받아 그 시점의 화면 상태를 만드는 결정론적 함수

3. 타임라인을 결정론적으로 짠다

__tick(frame) 안에서 t = frame / FPS로 시간을 계산하고, 모든 상태를 t로부터 다시 계산한다. 실시간 setTimeout을 쓰면 캡처 속도와 어긋나서 망가진다.

• 1회성 동작(이미지 로드, 모드 전환)은 once(key, fn) 으로 중복 실행을 막는다
• 드래그는 drag(t, 시작초, 끝초, ptFn) — 시작 프레임에 mousedown, 매 프레임 mousemove, 끝나면 mouseup
• 이벤트는 iframe의 W.MouseEvent로 만들어 clientX/clientY(iframe 기준 좌표)로 dispatch한다. mousedown은 대상 요소에, mousemove/mouseup은 보통 window에 붙어 있으니 확인하고 각각 맞는 타깃에 쏜다
• 좌표는 하드코딩하지 말고 요소의 getBoundingClientRect() 또는 그려넣은 목업의 rect 비율로 계산한다. 창 크기를 바꿔도 안 깨진다
• iframe 안에서 영상에 불필요한 요소(헤더, SEO 본문, 푸터, 광고 배너, 상태줄)는 iframe load 시점에 <style> 주입으로 숨긴다

4. 프레임을 캡처한다

for (let i = from; i <= to; i++) {
  await page.evaluate(f => __tick(f), i);
  const buf = await page.screenshot({ clip: { x:0, y:0, width:540, height:540 } });
  await fs.writeFile(`${DIR}/f${String(i).padStart(4,'0')}.png`, buf);
}