iOS 15~16 비디오 깜박임, object-fit과 버전별 분기 처리로 해결

V 컬러링 서비스에서 iOS 15 업데이트 이후 비디오 재생 시 화면 깜박임 현상이 발생했다. 특히 전체 화면 스와이핑 시 눈 피로를 유발하는 이 문제를 해결하기 위해 썸네일 노출 방식과 object-fit 속성을 단계적으로 최적화했다.

iOS와 안드로이드의 구조적 차이

안드로이드는 스와이퍼 내부에 비디오 컨트롤을 포함하지만, iOS는 자동 재생 시 음소거 정책으로 인해 비디오 영역을 스와이퍼 외부로 분리해야 했다. 초기에는 썸네일 제거, 로드 상태값 변경 등 다양한 시도를 했으나 완전한 해결에는 실패했다.

object-fit 속성 최적화

가로형 영상은 contain, 세로형 영상은 cover를 적용하던 기존 방식에서 문제가 발견되었다. iOS 15에서 cover 값이 썸네일과 영상 전환 시 자연스럽지 못한 렌더링을 유발했기 때문이다. 초기값을 contain으로 변경하고 로드 시점에 cover로 전환하는 방식으로 깜박임을 완화했다.

iOS 버전별 분기 처리

iOS 15.5와 iOS 16 업데이트로 인해 object-fit cover 사용 시 너비 변경이나 깜박임이 재발했다. 이에 따라 버전별 특성을 분석하여 다음과 같이 분기 처리했다.

• iOS 15.0~15.4: 기존 코드 유지
• iOS 15.5~16.1: object-fit을 fill로 변경하여 위화감 제거
• iOS 16.2 이상: 렌더링 이상 방지를 위해 fill 적용 후 추가 검증

또한 display: none 대신 visibility: hidden을 적용해 리플로우를 방지하고, transition이 불가능한 display 속성 대신 opacity를 활용해 스와이핑 중 썸네일 깜박임을 제어했다. 최종적으로 loaded/moving 상태 값과 이미지 로드 위치, object-fit 조합을 통해 매끄러운 화면 전환을 달성했다.