CI 비디오 파이프라인 내 PNG 기반 사전 렌더링 구조 도입

What I learned adding diagram and chart slides to a CI-rendered YouTube pipeline

MORINAGA2026년 6월 27일9분intermediate

AI 요약

Context

기존 Pillow 기반 슬라이드 렌더러에 Mermaid 및 matplotlib 등 외부 라이브러리 통합 필요성 대두. 서로 다른 런타임(JavaScript, Python)과 렌더링 방식의 차이로 인해 ffmpeg 내부의 직접적인 통합이 불가능한 제약 발생.

상이한 렌더링 툴셋 간의 결합도를 낮추기 위한 PNG 파일 기반의 Handoff 아키텍처 설계
Puppeteer 및 Chromium 기반의 Mermaid 렌더링 시 --no-sandbox 및 --disable-setuid-sandbox 플래그 적용을 통한 root 권한 컨테이너 실행 문제 해결
base 테마 채택 및 themeVariables 설정을 통한 브랜드 전용 컬러 팔레트의 강제 주입
npx 폴백 전략을 통한 로컬 개발 편의성 확보 및 CI 환경 내 node_modules 우선 참조로 빌드 시간 최적화
Matplotlib의 Agg 백엔드 선언 및 Figure/Axes 개별 배경색 설정을 통한 일관된 다크 모드 비주얼 구현
1600px 너비의 고해상도 사전 렌더링 후 Pillow 캔버스에 합성하는 방식으로 스케일링 아티팩트 제거

실천 포인트

1. CI 환경 내 Chromium 실행 시 `--no-sandbox` 플래그 필수 적용 여부 확인

2. Matplotlib 사용 시 `pyplot` 임포트 전 `matplotlib.use('Agg')` 호출 순서 준수

3. 외부 라이브러리 통합 시 직접 호출보다 중간 결과물(Artifact)을 통한 파이프라인 구성 검토

4. CI 빌드 속도 개선을 위해 npx 기반의 동적 다운로드보다 의존성 사전 설치 경로 우선 참조 설계

태그