Signed HLS 적용 및 Preload 최적화로 Poster LCP 2.8s에서 1s 미만 단축

Context

Sanity CMS와 Mux Video 연동 시 단순 업로드를 넘어선 보안 재생 경로 및 렌더링 최적화 필요성 대두. 특히 Signed URL 적용 시 클라이언트 사이드에서 Signing Secret 노출 위험과 비디오 포스터 로딩으로 인한 LCP 저하 및 CLS 발생이 주요 병목 지점으로 분석됨.

Technical Solution

• 보안 강화를 위해 Next.js Route Handler에서 RS256 알고리즘 기반의 단기 JWT를 생성하는 Server-side Token 발행 구조 설계
• jose 라이브러리를 활용하여 Edge Runtime에서 동작하는 가벼운 토큰 생성 로직을 구현하고 Cache-Control 헤더를 통한 Edge Caching 적용으로 API 부하 감소
• 브라우저별 HLS 지원 여부에 따라 Native Playback(Safari)과 hls.js 라이브러리를 선택적으로 사용하는 Adaptive Loading 전략 채택
• generateMetadata를 통해 비디오 포스터 이미지를 <link rel="preload">로 처리하여 브라우저 파싱 단계에서 리소스 우선순위 상향 조정
• Sanity에서 제공하는 aspect_ratio 데이터를 기반으로 CSS padding-bottom을 적용하여 비디오 로드 전 영역을 확보하는 CLS 방지 설계
• WebP 포맷 및 width 파라미터 최적화를 통해 포스터 이미지의 전송 크기 최소화