# 라이브 데이터를 공유 가능한 영상으로 자동 변환하는 방법

> Clean Markdown view of GeekNews topic #31167. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=31167](https://news.hada.io/topic?id=31167)
- GeekNews Markdown: [https://news.hada.io/topic/31167.md](https://news.hada.io/topic/31167.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-07-06T10:36:13+09:00
- Updated: 2026-07-06T10:36:13+09:00
- Original source: [recoveredfactory.net](https://recoveredfactory.net/en/live-data-to-video)
- Points: 2
- Comments: 0

## Topic Body

- 며칠마다 갱신되는 **라이브 데이터**를 사람이 매번 편집하지 않고 소셜 영상으로 만들기 위해 웹 기반 워크플로를 구축  
- 영상의 원본은 편집 파일이 아니라 **숨겨진 웹 페이지**이며, Playwright가 브라우저를 프레임별로 움직이고 ffmpeg가 이를 MP4와 GIF로 묶음  
- 짧은 **storyboard.ts**와 단일 playhead가 오늘 수치, 페이드, 2024년 12월 시작점, 18개월 성장 구간을 약 14초 클립으로 구성함  
- 예약된 GitHub Action은 데이터 변경을 감지해 사이트를 재빌드·재배포하고, 비율과 언어 조합에 따른 **4개 컷**을 만들어 CloudFront CDN에 게시함  
- YouTube는 미공개 초안 업로드가 가능하지만 Instagram은 바로 공개 게시만 지원해, 최종 검토와 캡션 편집을 위한 **사람의 승인 단계**를 유지함  
  
---  
  
### 웹 페이지를 영상 원본으로 쓰는 구조  
- 영상은 별도 편집 프로젝트가 아니라 웹사이트 안의 **숨겨진 전용 페이지**에서 출발함  
- 이 페이지는 Reels, Shorts, TikTok에서 쓰는 세로형 **9:16 화면**에 맞춰 설계됨  
- 화면에는 라이브 사이트의 기존 요소를 재사용함  
  - 헤드라인  
  - 큰 기관 수치  
  - 애니메이션 차트  
  - 전국 지도  
  - 작은 크레딧 라인  
- 웹 브라우저의 타임라인 애니메이션과 모션 효과를 활용하고, 컴퓨터가 사용자에게 보이지 않는 **헤드리스 브라우저**를 제어함  
- 일반 웹 페이지처럼 브라우저에서 직접 열어 앞뒤로 넘기며 미리보기와 디버깅을 할 수 있음  
- 사이트의 다국어 프레임워크를 그대로 상속해 지원 언어별 영상을 캡처할 수 있음  
- 이 프로젝트의 asset bakery, 데이터 파이프라인, 프론트엔드는 [open source](https://github.com/recoveredfactory/287g-explorer/)로 공개되어 있음  
  
### storyboard.ts와 playhead  
- [storyboard.ts](https://github.com/recoveredfactory/287g-explorer/blob/main/packages/web/src/lib/video/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](https://maplibre.org/maplibre-gl-js/docs/)를 사용하며, 일반적으로 GPU를 기대하는 WebGL 코드로 렌더링함  
- 서버에는 GPU가 없으므로 Chromium이 **소프트웨어 렌더링**을 사용하도록 설정함  
  - 실제 그래픽 하드웨어보다 느림  
  - 거의 모든 플랫폼에서 같은 품질로 실행 가능함  
- 각 프레임은 PNG가 아니라 **JPEG**로 저장함  
  - 스크린샷에서 PNG 인코딩이 느린 부분임  
  - 결과 영상은 동일하게 보이므로 수백 프레임 전체에서 속도 이득이 생김  
- 헤드리스 브라우저가 컨테이너 안의 bare server에서 안정적으로 실행되도록 몇 가지 플래그가 필요하며, 전체 세부 사항은 공개 저장소에 있음  
- 생성된 수백 장의 이미지는 [ffmpeg](https://www.ffmpeg.org/)로 MP4와 반복 GIF로 이어 붙임  
  
### GitHub Action 기반 자동화  
- 전체 과정은 예약된 **GitHub Action**으로 실행되는 자동 데이터 파이프라인에 연결됨  
- 하루에 몇 번 데이터가 바뀌었는지 확인함  
- 새 데이터가 들어오면 작업은 다음을 수행함  
  - 사이트 재빌드  
  - 사이트 재배포  
  - 정사각형/세로 비율과 영어/스페인어 조합의 **4개 컷** 생성  
  - CloudFront CDN에 게시  
- 공개 다운로드 페이지는 지원 언어별 최신 컷을 제공함  
- 마지막 단계에는 YouTube 초안 업로드와 Instagram 게시 알림이 포함됨  
  - YouTube용 스크립트는 [publish-social-youtube.mjs](https://github.com/recoveredfactory/287g-explorer/blob/main/packages/web/scripts/publish-social-youtube.mjs)  
  - Instagram 게시 준비 알림은 [notify-social-ready.mjs](https://github.com/recoveredfactory/287g-explorer/blob/main/packages/web/scripts/notify-social-ready.mjs)  
  - TikTok 통합도 예정되어 있음  
  
### 자동화와 편집 통제의 경계  
- 이 프로젝트는 완전 자동화를 배제하지 않지만, 모든 영상이 나가기 전 **사람의 검토**를 유지함  
- 헤드라인과 캡션에 대한 편집 통제, 최종 리뷰, 게시 방식 판단은 사람이 맡음  
- 입력 데이터가 나쁘거나 시스템이 잘못된 결과를 만들 수 있기 때문에 맹목적인 자동 게시를 피함  
- YouTube는 공식 API로 미공개 **초안 영상**을 생성함  
- Instagram API는 바로 공개 게시만 지원하므로, 새 데이터가 있을 때마다 YouTube 초안을 만들고 Instagram 게시를 수동으로 만들라는 이메일 알림을 보냄  
  
### 웹 디자인으로 끝나는 소셜 영상 제작  
- 이 방식의 장점은 영상 디자인이 곧 **웹 디자인**이 된다는 점임  
- After Effects, 수동 재내보내기, 오래된 수치, 바쁜 웹 프로듀서에 의존하지 않음  
- 색상이나 라벨 변경은 한 줄 수정으로 끝나고, 다음 렌더링에 반영됨  
- 전체 시스템은 기존 도구 주위의 몇백 줄짜리 glue code로 구성됨  
  - 데이터 파이프라인  
  - 헤드리스 브라우저  
  - 사이트에서 이미 쓰는 지도와 차트  
  - ffmpeg  
- 실행 비용은 월 몇 달러 수준임  
- 비교 대상으로 든 Missouri Vehicle Stops MCP는 현재 월 약 **50달러** 비용이 드는 것으로 보임  
- asset bakery는 MCP보다 사용자당 비용이 낮고, MCP는 더 깊은 데이터 참여를 제공하는 도구에 가까움  
  
### 전략과 “shortcut”의 역할  
- 고품질 공유용 자동 생성 자산으로 주류 플랫폼에 대응하면서, 깊이 관여하는 사용자를 위해 MCP 같은 현대적 데이터 도구도 함께 지원하는 전략임  
- 목표는 바이럴 서커스나 불명확한 일반 대중, 모두에게 맞는 단일 제품이 아님  
- shortcut은 속임수가 아니라 이미 있는 자원을 활용해 더 멀리 가고 덜 소진되기 위한 방법임  
- GitHub Action으로 기존 자원을 묶으면, 영상을 만들고 싶거나 상황이 정말 요구할 때만 영상에 대해 생각하면 됨

## Comments



_No public comments on this page._