헤드리스 크롬에서 scrollIntoView({block:'center'})로 구절을 화면 가운데에 세우고 그 좌표에 형광펜을 칠했더니, 캡처에서는 형광펜이 한 줄 위에 칠해졌다. 원인은 좌표를 잰 --dump-dom 실행과 화면을 찍은 --screenshot 실행의 뷰포트가 달랐던 것이고, 그 페이지는 안쪽 상자 하나가 스크롤되고 있었다. 스크롤되는 조상 상자의 scrollTop을 절대값으로 맞추고 글꼴이 다 들어온 뒤(fonts.ready) 500ms를 기다렸다가 재니 맞았다.
퇴사하고 AI로 회사를 만들면서 판결문을 소재로 한 유튜브 영상을 만들고 있다. 전날 시제품이 “누가봐도 ai”라는 말로 반려됐고, 그래서 글자가 읽혀야 하는 화면은 실물로 찍기로 했다 — 국가법령정보센터(law.go.kr)의 판결문 원문을 헤드리스 크롬으로 캡처하고, 인용할 구절 줄마다 형광펜이 칠해지는 장면이다.
무엇이 어긋났나
형광펜이 인용할 구절의 바로 윗줄에 칠해졌다. 캡처하는 쪽은 두 단계였다. 한 번은 크롬을 --dump-dom으로 띄워 구절의 줄 상자 좌표를 뽑고, 한 번은 --screenshot으로 띄워 화면을 찍은 다음, 앞에서 뽑은 좌표 위에 형광펜을 그린다.
scrollTo로 창을 직접 내려 보고, body에 transform을 걸어 페이지 자체를 끌어올려 보기도 했는데 둘 다 흰 화면만 찍혔다. law.go.kr은 창이 아니라 판결문을 담은 안쪽 상자 하나가 스크롤하는 페이지였다.
진짜 원인
scrollIntoView({block:'center'})는 구절을 뷰포트 가운데에 세운다. 그런데 좌표를 잰 --dump-dom 실행과 찍은 --screenshot 실행은 뷰포트가 달랐고, 가운데가 다르니 같은 명령이 두 실행에서 구절을 서로 다른 높이에 세웠다. 한쪽에서 잰 좌표를 다른 쪽 그림에 얹으니 한 줄이 밀렸다.
상대 위치를 버리니 맞았다. 스크롤되는 조상 상자를 찾아 그 scrollTop을 절대값으로 맞춰서 구절이 어느 실행에서든 280px에 오게 하고, fonts.ready 뒤 500ms를 더 기다렸다가 잰다. 확인은 숫자로 하지 않았다. 캡처 위에 ffmpeg drawbox로 그 좌표의 상자를 그려 구절과 겹치는지 눈으로 봤다.
헤드리스 크롬을 두 번 띄워 한 번은 재고 한 번은 찍는다면, center 같은 상대 스크롤을 쓰지 말고 실제로 스크롤되는 상자의 scrollTop을 숫자로 박으세요.
다음
같은 영상에 들어가는 손·책상 장면은 실물 캡처 대신 생성 영상으로 채우기로 했다. 생성 영상 속 한글은 가짜 글자라서 글자가 읽혀야 하는 컷에는 쓰지 않고, 판결문 컷은 전부 law.go.kr 실캡처에 형광펜을 줄마다 칠하는 쪽으로 간다. 10컷을 한 번에 만드는 배치는 약 $9가 들어서 승인을 받은 뒤에 돌린다.