iOS 비디오 렌더링, 깜박임 없이 부드럽게!

iOS 15 업데이트 후 비디오 깜박임 현상 발생, 썸네일과 비디오 전환 시 문제 발생

object-fit 속성, 썸네일 위치, 로딩 상태값 조절을 통해 깜박임 및 썸네일 사라짐 문제 해결

iOS 15.5, 16.0, 16.2 버전별 분기 처리 및 transition 적용으로 렌더링 문제 최종 해결

iOS 비디오 렌더링 아키텍처 분석

iOS 비디오 렌더링은 썸네일과 비디오 간의 매끄러운 전환이 핵심이다. 구체적으로 object-fit 속성을 활용하여 화면 비율을 조정하고, 로딩 상태를 관리하여 깜박임을 방지한다. 따라서 스와이핑 중 썸네일 유지를 위해 렌더링 시점을 세밀하게 제어한다.

object-fit 속성의 함정: cover vs contain

object-fit 속성은 비디오 화면 비율을 결정하는 중요한 요소이다. cover는 화면을 꽉 채우지만, iOS 15에서 깜박임 문제를 유발했다. 반면, contain은 비율을 유지하지만, 세로형 영상에서 여백이 발생한다. 따라서 object-fit 초기값 설정과 로드 시점 변경을 통해 문제를 해결했다.

iOS 버전별 분기 처리 및 transition 적용

iOS 15, 15.5, 16.0, 16.2 버전별로 object-fit 속성 처리 방식이 달랐다. 구체적으로 display: none 대신 visibility: hidden을 사용하고, transition 효과를 추가하여 부드러운 화면 전환을 구현했다. 결과적으로 다양한 iOS 버전에서 일관된 사용자 경험을 제공한다.