에러일기
📱 iOS에서만 발생한 무한 렌더링 이슈, 그리고 그 원인(next/image, webp)
세모이
2025. 4. 23. 16:37
반응형
❗ 문제 상황
데스크탑과 안드로이드에서는 정상적으로 열리는 페이지가 iOS 기기에서만 무한 렌더링 또는 앱 크래시 현상을 일으키는 이슈가 발생했다.
- 사파리 브라우저에서 해당 URL에 접속하면 아래와 같은 현상이 발생했고,
- 동일 URL을 React Native WebView 기반의 앱에서 열면 앱이 강제로 리로딩되며 메인 페이지로 튕기는 현상이 발생함.
이는 우리가 새롭게 오픈한 중요 서비스의 메인 페이지였기 때문에, 빠르게 원인을 찾아야만 했다.
🕵 원인을 추적하기 시작했다
- 전날까지만 해도 해당 페이지는 정상 작동했기 때문에, 최근의 코드 변경이 원인일 수 있다고 판단했다.
- 바로 어제 배포한 코드로 롤백했지만, 여전히 동일한 문제가 발생......!!!!!
- 의심이 가는 부분을 중심으로 _app.tsx, layout.tsx, middleware.ts와 해당 페이지의 모든 컴포넌트를 일일이 확인 시작!
- 코드 상에서는 무한 렌더링을 유발할만한 문제는 보이지 않았,,,. (솔직히 멘붕…)
- 혹시나 하는 마음에 이전 커밋 10개 정도를 차례대로 롤백하며 Vercel을 통해 프로덕션 배포했지만, 문제는 여전했다.
🔍 컴포넌트를 하나씩 제거하며 찾기 시작했다
- 해당 페이지에서 사용 중인 컴포넌트들을 하나씩 제거한 버전을 여러 개 만들어 배포하고,
- 에러가 발생하는 조합을 추적 시작.
- 그 결과, 특정 컴포넌트가 포함된 페이지에서만 문제가 발생하는 것을 확인.
해당 컴포넌트는 외부 데이터를 렌더링하는 단순한 구조였기 때문에 처음엔 감이 오지 않았다.
📦 원인은 '이미지 형식'
해당 컴포넌트를 자세히 살펴보던 중,
특정 업체 리스트의 이미지 데이터 포맷이 .webp 라는 것을 발견!!!!.
- 해당 이미지 컴포넌트는 next/image를 기반으로 커스텀한 컴포넌트였고,
- 문제의 이미지를 webp 포맷으로 불러오고 있었던 것이었다.
!!!!!!!!!!그리고 드디어 원인을 찾았습니다!!!!!!!!!!
✅ iOS Safari에서는 특정 상황에서 webp 이미지를 제대로 렌더링하지 못하고, 렌더링 실패가 전체 페이지 에러를 유발하는 경우가 있다.
문제의 이미지를 .png 포맷으로 변경하자, iOS에서도 페이지가 정상적으로 렌더링되었습니다.
💭 정리하며
- 평소에도 next/image에서 .webp를 써왔지만, 왜 유독 이 컴포넌트에서만 문제가 발생했는지는 좀 더 깊이 파고들 필요가 있다.
- 다른 곳에서는 next/image를 그대로 사용한 반면, 이번 이슈가 발생한 컴포넌트는 커스텀 래핑한 컴포넌트였다.
- 아마도 이 커스텀 과정에서 브라우저 호환성 처리나 fallback 이미지 설정 등이 누락되어 있었을 가능성이 있어 추후 확인이 필요하다.
📚 배운 점
- iOS에서 webp 이미지 지원은 제한적일 수 있다는 점을 다시금 체감.....
- 특히 WebView 앱에서는 더 민감하게 작동할 수 있으므로,
→ 중요한 이미지라면 jpg, png 등의 포맷으로 대응하는 것이 안전하다. - 그리고 문제가 발생했을 땐 컴포넌트를 분리하고 점진적으로 확인하는 방법이 효과적임을 다시 확인했다.
반응형