피드로 돌아가기
Dev.toFrontend
원문 읽기
Client-side Canvas 기반 LINE 채팅 애니메이션 MP4 생성 엔진 구현
From static slides to a postable video: finishing my LINE-style chat generator with GitHub Copilot
AI 요약
Context
python-pptx 기반의 정적 슬라이드 생성 구조로 인해 소셜 미디어 공유를 위한 동영상 포맷 지원 불가. 기존 CSS 기반 브라우저 프리뷰는 비디오 레코딩이 불가능한 구조적 한계 존재.
Technical Solution
- 비디오 렌더링 호환성 확보를 위해 UI 레이어를 HTML/CSS에서 HTML5 Canvas로 전면 재설계
- ctx.measureText를 활용한 정밀한 Bubble Wrapping 로직 구현으로 텍스트 렌더링 정확도 개선
- 렌더링 상태를 시간(t)의 함수로 정의한 renderFrame(ctx, opts, t) 구조를 통해 애니메이션과 레코딩 일관성 유지
- 외부 의존성 제거를 위해 Chrome MediaRecorder의 video/mp4;codecs=avc1.42E01E(H.264) 네이티브 지원 활용
- Background Tab 내 레코딩 중단을 방지하기 위해 requestAnimationFrame을 setTimeout 및 canvas.captureStream(0) 조합으로 대체
실천 포인트
- 브라우저 기반 비디오 생성 시 외부 라이브러리(ffmpeg.wasm) 도입 전 네이티브 MediaRecorder의 코덱 지원 여부 검토 - Background Tab에서의 실행 보장이 필요한 경우 requestAnimationFrame 대신 setTimeout 기반의 렌더링 루프 고려 - 복잡한 UI 컴포넌트 구현 시 상세 Spec 중심의 주석을 작성하여 LLM의 코드 생성 정확도 제고