CSS px와 비디오 해상도 간 간극을 메운 정확한 라이브 프리뷰 구현 전략

Context

기존 텍스트 오버레이 기능의 스타일 제어 범위가 제한적이었던 구조. 프론트엔드 프리뷰와 백엔드 렌더링 결과물이 일치하지 않는 렌더링 불일치 문제 발생. 사용자 경험 저하로 인한 반복적인 렌더링 시도와 시간 낭비 초래.

Technical Solution

• 폰트 크기(40-200), HTML5 컬러 피커 기반 HEX 색상, 위치 프리셋을 포함한 스타일 컨트롤 시스템 구축
• 백엔드 호출 없이 브라우저 내에서 즉각적으로 변경 사항을 반영하는 클라이언트 사이드 전용 라이브 프리뷰 설계
• 비디오 메타데이터의 원본 해상도(videoWidth, videoHeight)와 프리뷰 프레임 크기를 비교한 스케일 팩터(Scale Factor) 계산 로직 도입
• 선택한 폰트 크기에 계산된 스케일을 곱하여 렌더링하는 previewFontSize = selectedFontSize * scale 방식의 동적 스케일링 적용
• 원본 종횡비 유지 및 스케일링된 엣지 패딩을 적용한 수직 배치 미러링 전략 구현
• MoviePy 기반의 기존 백엔드 파이프라인을 유지하며 스타일 페이로드를 전달하는 효율적인 API 통합 구조

Key Takeaway

서로 다른 렌더링 컨텍스트(CSS px vs 비디오 해상도) 사이의 좌표계와 크기 단위를 물리적 비율로 변환하여 일치시키는 정규화 과정의 중요성.