브라우저의 시간을 속여 비디오 렌더링 엔진을 구축하는 방법

웹 페이지의 애니메이션을 비디오 파일로 변환하는 작업은 브라우저가 실시간 시스템이라는 점 때문에 매우 까다롭다. 브라우저는 부하가 발생하면 프레임을 건너뛰고 실제 시간(wall-clock time)에 맞춰 애니메이션을 실행하므로, 캡처 속도와 애니메이션 속도가 불일치하면 영상이 끊기는 문제가 발생한다.

Remotion과 같은 기존 도구는 결정론적 렌더링을 제공하지만, 사용자가 반드시 해당 프레임워크 내에서 콘텐츠를 구축해야 한다는 제약이 있다. 반면, 이 엔진은 특정 프레임워크에 종속되지 않고 임의의 URL을 입력받아 완벽하게 캡처하는 것을 목표로 한다.

이를 위해 모든 페이지에 **가상 시계(Virtual Clock)**를 주입한다. setTimeout, setInterval, requestAnimationFrame, Date, performance.now() 등 브라우저의 주요 시간 관련 API를 직접 제어하는 가짜 시계로 대체한다.

렌더링 프로세스는 다음과 같은 루프를 따른다:

• 가상 시계의 시간 진행
• setInterval, setTimeout, rAF 등의 콜백 실행
• 해당 프레임의 스크린샷 캡처

이 방식을 통해 렌더링에 시간이 얼마나 걸리든 상관없이, 영상은 항상 일정한 FPS를 유지하며 부드럽게 생성된다. 또한, Chrome의 컴포지터(Compositor)가 유휴 상태가 되어 버퍼가 만료되는 문제를 방지하기 위해, 녹화 시작 전 **웜업 루프(Warmup loop)**를 실행하여 프레임을 지속적으로 발행하도록 설계했다.