작은 웹앱 ~35개의 결과 화면을 깨끗한 모바일 캡처로 뽑아야 했습니다. 브라우저 자동화 라이브러리는 설치 안 됨. 알고 보니 헤드리스 Chrome CLI면 충분합니다.
명령
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--headless=new \
--window-size=540,1170 \
--force-device-scale-factor=2 \
--virtual-time-budget=9000 \
--screenshot=out.png \
"https://app.example.com/ko/result/..."--headless=new는 현재 헤드리스 모드(JS 렌더 → Next.js 페이지 하이드레이션됨). --force-device-scale-factor=2로 선명한 2× 이미지. --virtual-time-budget으로 페이지 안정 후 촬영.
폭 함정
처음 440px(과 390px) 캡처는 결과 카드를 잘랐습니다 — 2단 레이아웃(왼쪽 숫자, 오른쪽 백분위)이 가장자리로 넘쳤습니다. 540px가 정답(2×에서 ≈1080px): 카드가 온전히 들어갑니다. 결과 화면이 넓은 카드면 폰보다 넓게 캡처해 여백을 주세요.
열쇠: 결과 페이지가 URL로 열림
더 큰 승리는 많은 앱이 결과 페이지를 URL로 직접 노출한다는 걸 안 것입니다(예 /ko/sign/aries, /ko/type/o). 즉 자동화할 입력 플로가 없음 — 헤드리스 Chrome을 결과에 바로 겨눠 캡처하면 폼 채우기·결과 은닉·구디자인 문제가 한 번에 사라집니다.
아이콘은 ffmpeg가 SVG 직접 입력 불가라, 앱의 icon.svg를 합성 전 PNG로 래스터화(cairosvg)하세요.
솔직한 부분
습관적으로 "브라우저 자동화 프레임워크 설치"부터 떠올렸습니다. 필요 없었습니다. 이미 머신에 있는 도구를, 이미 원하는 걸 렌더하는 URL에 겨누니 끝이었습니다. 의존성을 추가하기 전에, 필요한 게 URL과 플래그 하나 거리인지 확인하세요.