Skip to content

[FE/perf] 홈 동영상 배너 posterUrl 적용 및 선택 슬라이드 지연 로딩 #356

Description

@bottlenote-app

목적

홈 동영상 배너가 API의 posterUrl을 재생 전 대표 이미지로 사용하고, 선택되지 않은 슬라이드의 불필요한 MP4 로드를 줄이도록 합니다.

작업 범위

  • Banner API 타입에 nullable posterUrl을 추가합니다.
  • VIDEO 배너의 video poster 속성에 posterUrl을 적용합니다.
  • 동영상 배너는 현재 선택된 carousel 슬라이드에서만 video srcautoPlay를 활성화합니다.
  • 선택되지 않은 VIDEO 배너는 실제 MP4를 로드하지 않고 poster 이미지 또는 기존 placeholder만 표시합니다.
  • carousel 이동 시 새 선택 슬라이드의 영상만 로드·재생합니다.
  • posterUrl이 없거나 로드 실패하면 기존 공통 placeholder를 사용합니다.
  • IMAGE 배너 렌더링과 기존 carousel 이동·영상 오류 skip 동작을 유지합니다.
  • 관련 HomeCarousel 테스트를 갱신합니다.

완료 기준

  • posterUrl이 있는 VIDEO 배너에서 실제 대표 이미지가 재생 전 표시됩니다.
  • posterUrl 없음·로드 실패 시 기존 placeholder fallback이 동작합니다.
  • 홈 최초 진입 시 선택된 동영상 배너 외 MP4 요청이 발생하지 않습니다.
  • 다음/이전 이동 시 새 선택 동영상만 로드·재생합니다.
  • 느린 네트워크에서도 poster가 영상 재생 전 표시됩니다.
  • 이미지 배너 및 기존 carousel 이동·오류 처리에 회귀가 없습니다.

검증 항목

  • HomeCarousel 단위 테스트에서 초기 선택 영상만 src가 설정되는지, 슬라이드 이동 뒤 대상 영상만 활성화되는지 확인합니다.
  • 개발 환경 브라우저 Network에서 최초 MP4 요청 수와 슬라이드 전환 후 요청 대상을 확인합니다.
  • 390px/430px 모바일 화면에서 autoplay, 이동 버튼, poster fallback을 확인합니다.

제외 범위

  • 서버 컴포넌트 제거
  • ISR/revalidate·배너 목록 캐시 변경
  • 서버 FFmpeg/트랜스코딩
  • 영상 해상도·오디오·CDN 캐시 정책 변경

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions