본문으로 건너뛰기

iOS 16 AVIF 이미지 버그 수정

· 약 2분
jangsungyu
jangsungyu
Frontend Developer
Claude Code
Claude Code
AI Assistant

📋 작업 개요​

브랜치: feature/1.30.0-fix-ios16-avif 작업 유형: 버그 수정 작업 기간: 2026-01-21 담당: Claude Code

🎯 작업 목표​

iOS 16.0 ~ 16.3 버전에서 AVIF 이미지가 렌더링되지 않는 문제를 해결합니다.

🐛 문제 상황​

증상​

  • iOS 16 버전에서 포켓몬 이미지가 표시되지 않음
  • iOS 15.4에서는 정상적으로 WebP fallback이 작동함

원인​

iOS 16.0 ~ 16.3 버전의 Safari에서 <picture> 태그 내 AVIF 처리 시 발생하는 알려진 버그:

  1. iOS 16이 AVIF를 "지원한다고 인식"하지만, 실제로 일부 AVIF 이미지를 제대로 렌더링하지 못함
  2. 이미지 로드 실패 시 다음 <source>로 fallback하지 않는 문제 발생
  3. iOS 16 이전 버전은 AVIF를 인식하지 못해 자동으로 WebP fallback 사용

✨ 주요 변경사항​

AVIF source 제거​

변경 전:

<picture className="w-full h-full block">
  <source type="image/avif" srcSet={generateAvifSrcSet()} />
  <source type="image/webp" srcSet={generateWebpSrcSet()} />
  <img ... />
</picture>

변경 후:

<picture className="w-full h-full block">
  <source type="image/webp" srcSet={generateWebpSrcSet()} />
  <img ... />
</picture>

🔧 기술적 세부사항​

삭제된 코드​

  • generateAvifSrcSet() 함수 제거
  • <source type="image/avif"> 요소 제거

유지되는 기능​

  • WebP srcSet 생성 (고밀도 디스플레이 지원)
  • 기본 WebP fallback 이미지

📊 영향 범위​

항목설명
영향받는 컴포넌트모든 이미지 컴포넌트
파일 크기 변화WebP 사용으로 AVIF 대비 약간 증가 가능 (무시할 수준)
브라우저 호환성iOS 14+ 완벽 지원

🔗 참고 자료​

📌 참고 사항​

  • WebP는 iOS 14+에서 완벽히 지원되며, 충분히 좋은 압축률을 제공함
  • AVIF 대비 약간의 파일 크기 증가가 있을 수 있으나, 호환성 확보가 우선