Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
라이브 데이터를 소셜 미디어용 영상으로 자동 변환하는 'asset bakery' 워크플로를 소개합니다. Playwright와 ffmpeg를 활용해 웹 페이지를 프레임 단위로 캡처하여 결정론적인 영상을 생성하는 파이프라인을 구축했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기영상은 별도 편집 프로젝트가 아니라 웹사이트 안의
숨겨진 전용 페이지에서 출발함
이 페이지는 Reels, Shorts, TikTok에서 쓰는 세로형
9:16 화면에 맞춰 설계됨
화면에는 라이브 사이트의 기존 요소를 재사용함
헤드라인
큰 기관 수치
애니메이션 차트
전국 지도
작은 크레딧 라인
웹 브라우저의 타임라인 애니메이션과 모션 효과를 활용하고, 컴퓨터가 사용자에게 보이지 않는
헤드리스 브라우저를 제어함
일반 웹 페이지처럼 브라우저에서 직접 열어 앞뒤로 넘기며 미리보기와 디버깅을 할 수 있음
사이트의 다국어 프레임워크를 그대로 상속해 지원 언어별 영상을 캡처할 수 있음
이 프로젝트의 asset bakery, 데이터 파이프라인, 프론트엔드는 open source로 공개되어 있음
storyboard.ts 파일 하나가 영상의 타이밍과 변환을 감독의 샷 리스트처럼 정의함
구성은 몇 개의 이름 붙은 beat와 지속 시간으로 이뤄짐
오늘의 전체 수치를 1.5초 유지
0.7초 페이드
데이터가 시작되는 2024년 12월 지점을 1.5초 유지
이후 18개월 성장 구간을 앞으로 재생
다시 오늘 화면에 정착
전체 결과물은 약
14초 클립임
차트 그리기, 지도 점 표시, 카운터 증가는 하나의
playhead에 묶여 움직임
playhead는 특정 timestamp에서 모든 컴포넌트가 같은 상태를 렌더링하게 해 화면 요소가 서로 어긋나지 않게 함
실제 영상 파일은 헤드리스 브라우저에서 웹 페이지를 열고, Playwright로 Chromium을 제어해 만듦
처음에는 가상으로 재생 버튼을 누른 뒤 화면 녹화로 캡처할 수 있다고 봤지만, 실시간 녹화는 프레임 누락이나 끊김이 생길 수 있었음
같은 영상도 로컬에서는 부드럽게 돌아가고 클라우드 하드웨어에서는 다르게 동작할 수 있었으며, 초기 실험 중에는 때때로 비정상적으로 빠르게 재생되기도 함
더 안정적인 결과를 위해 실시간 녹화 대신
flipbook처럼 프레임을 하나씩 생성함
페이지에 “0.04초 시점의 모습을 보여달라”고 지시
스크린샷을 찍음
0.08초로 이동해 다시 스크린샷을 찍음
이 과정을 수백 번 반복함
얼어 있는 페이지를 손으로 넘기듯 진행하기 때문에 각 이미지는 완전히 렌더링된 상태로 캡처됨
결과는
결정적이고 테스트 가능하며, 두 번 실행하면 검증 가능하게 동일한 프레임을 얻어야 함
프레임 수를 두 배로 늘리면 렌더링에 필요한 계산 시간과 저장 공간도 대략 두 배가 됨
전국 지도는 MapLibre GL JS를 사용하며, 일반적으로 GPU를 기대하는 WebGL 코드로 렌더링함
서버에는 GPU가 없으므로 Chromium이
소프트웨어 렌더링을 사용하도록 설정함
실제 그래픽 하드웨어보다 느림
거의 모든 플랫폼에서 같은 품질로 실행 가능함
각 프레임은 PNG가 아니라
JPEG로 저장함
스크린샷에서 PNG 인코딩이 느린 부분임
결과 영상은 동일하게 보이므로 수백 프레임 전체에서 속도 이득이 생김
헤드리스 브라우저가 컨테이너 안의 bare server에서 안정적으로 실행되도록 몇 가지 플래그가 필요하며, 전체 세부 사항은 공개 저장소에 있음
생성된 수백 장의 이미지는 ffmpeg로 MP4와 반복 GIF로 이어 붙임
전체 과정은 예약된
GitHub Action으로 실행되는 자동 데이터 파이프라인에 연결됨
하루에 몇 번 데이터가 바뀌었는지 확인함
새 데이터가 들어오면 작업은 다음을 수행함
사이트 재빌드
사이트 재배포
정사각형/세로 비율과 영어/스페인어 조합의
4개 컷 생성
CloudFront CDN에 게시
공개 다운로드 페이지는 지원 언어별 최신 컷을 제공함
마지막 단계에는 YouTube 초안 업로드와 Instagram 게시 알림이 포함됨
이 방식의 장점은 영상 디자인이 곧
웹 디자인이 된다는 점임
After Effects, 수동 재내보내기, 오래된 수치, 바쁜 웹 프로듀서에 의존하지 않음
색상이나 라벨 변경은 한 줄 수정으로 끝나고, 다음 렌더링에 반영됨
전체 시스템은 기존 도구 주위의 몇백 줄짜리 glue code로 구성됨
데이터 파이프라인
헤드리스 브라우저
사이트에서 이미 쓰는 지도와 차트
ffmpeg
실행 비용은 월 몇 달러 수준임
비교 대상으로 든 Missouri Vehicle Stops MCP는 현재 월 약
50달러 비용이 드는 것으로 보임
asset bakery는 MCP보다 사용자당 비용이 낮고, MCP는 더 깊은 데이터 참여를 제공하는 도구에 가까움