iOS 환경에서 비디오 최적화 및 성능 개선 사례
프론트엔드
iOS 환경에서 비디오 최적화 및 성능 개선 사례
두줄요약
iOS 15 이후 비디오 전환 시 발생한 깜박임과 사이즈 튐 문제를 분석하고 해결한 사례입니다. 썸네일, 로딩 상태, object-fit, 버전별 분기를 조정해 자연스러운 전환을 구현했습니다.
핵심 내용
- iOS 15 이후 비디오 재생 전환 시 썸네일과 영상 사이에서 깜박임이 발생한 문제를 iOS/안드로이드 구조 차이와 함께 분석
- 스와이핑 상태, 로딩 상태, 썸네일 위치, object-fit 값 조합을 조정하며 원인 범위를 좁힘
- object-fit 초기값을 contain으로 두고 로드 시점에 cover 또는 fill로 전환하는 방식으로 전환 안정화
- iOS 버전별 차이를 반영해 display, visibility, transition, 썸네일 노출 조건을 조정하며 추가 이슈를 보완
적용해볼 점
- 플랫폼별 재생 정책과 렌더링 구조를 분리해 바라보는 접근
- 로딩 상태와 스와이핑 상태를 함께 고려한 조건 분기
- iOS 버전별 렌더링 차이를 전제로 한 점진적 대응