Recording a Web Page to Make a Video

Why a browser

음성에 맞춰 글자가 하나씩 나타나는 화면을 만들고 싶었다. FFmpeg 으로 텍스트 애니메이션을 하려면 프레임마다 필터를 쌓아야 한다. 같은 걸 브라우저에서는 CSS 로 몇 줄이면 된다. 그래서 장면을 HTML 로 만들고 헤드리스 브라우저로 녹화해서 영상으로 뽑았다. 렌더링 엔진을 이미 만들어둔 걸 쓴 셈이다.

이미 잘 그리는 물건이 있으면 그걸 녹화하는 게 빠르다.

Windows

이 결정의 대가는 사흘 뒤에 왔다. 전부 Windows 문제였다. · Chromium 실행 파일을 못 찾음 — 자동 탐지를 붙였다 · 한글이 깨짐 — UTF-8 인코딩을 명시 · 경로 구분자 — 역슬래시를 POSIX 슬래시로 변환 · 임시 스크립트 위치 — 프로젝트 루트에 만들도록 고정 · 녹화 타임아웃 — 두 번 늘렸다 브라우저를 끌어들이면 브라우저의 환경 문제도 같이 들어온다. 리눅스에서만 돌릴 거면 안 겪었을 것들이다.

The player got redesigned twice

같은 날 HTML 플레이어를 두 번 다시 짰다. 처음엔 AI 대화 스타일로 만들었다. 말풍선이 위로 쌓이는 형태다. 그런데 슬라이드 이미지를 같이 보여줘야 하는 영상에서 그 배치가 안 맞았다. 왼쪽에 자막, 오른쪽에 이미지로 바꿨다. 대화처럼 보이는 것보다 강의처럼 보이는 게 맞았다.