[문제1] ios에서 swipe 시 먹통됨
webApp에서 대량 image(60장 이상)를 상세보기 viewer로 띄우는 화면을 개발했다. 여러장을 좌우로 swipe 할 수 있도록 Swiper React Components를 사용하고 있었는데, 이미지가 50여장을 넘어가면 swipe시 먹통되는 문제가 발생했다. 참고로 web, mobile web, android에선 발생하지 않으나, ios에서만 발생했다.
해결 - lazy loading
여러장의 이미지를 한번에 <Swipe> 컴포넌트에 load하다보니 발생하는 것으로 판단하여 lazy load 시키는 방법을 찾아보았고, <Swiper lazyPreloadPrevNext={number}>와 같이 lazyPreloadPrevNext를 넘겨주니 해결되었다.
현재 slide 기준 전/후로 preload할 slide의 개수를 제한해주는 기능으로, 10개 정도로 적은 수를 명시함으로써 한번에 많은 slide가 로드되는 것을 방지할 수 있다. 단, browser의 native lazy loading api를 사용할 때만 적용 가능하다.
[문제2] 최신 ios에서 동일 현상 반복
3.1절 연휴 후에 돌아오니 신기하게도 동일한 문제가 몇몇 ios에서 발생했다. 18.3.1버전으로 업데이트된 기종들에서는 동일하게 memory issue로 OS에서 error를 보내게 되었다.
native 개발자분과 디버깅한 결과, image는 load되지 않으나, ios의 layer가 slide 개수만큼 생성되어 memory 부족으로 먹통되는 것이라 판단했다.(왜 최신 ios에서만 발생하는지는 파악하지 못했다)
해결 - virtual slide
slide 개수가 많아서 문제이므로 하나의 slide를 재사용하되, 표시되는 image만 바꿔주면 된다. Swiper 컴포넌트는 이러한 virtual slide 기능을 지원한다
<Swiper
(...)
modules={[Pagination, Navigation, Zoom, Virtual]}
virtual
>
<SwiperSlide virtualIndex={index}>위와 같이 Swiper에 module, props를 추가하고 SwiperSlide에도 추가해야한다.(Swiper 컴포넌트에 virtual props만 명시하면 적용되지 않는다)
[문제3] slide 누른채로 swipe 시, 깜빡임
이 문제는 발견이 어려웠다. slide를 넘기는 속도에 따라 잠깐 깜빡이는 현상이 발견됐는데, B2C 어플인 만큼 UX가 중요하기에 이 또한 해결하기로 결정했다.
문제 현상을 재현해본 결과, slide를 꾹 누른채로 swipe 시에 깜빡임이 발생했다. virtual slide는 1개의 slide를 재사용하는 것인데, 현재 slide를 누르고있는 상태에서 다음 slide가 로드되다보니 깜빡임이 발생하는 것으로 판단했다.
해결 - 불필요한 props 삭제
기존에 전달되고 있던 Swiper 컴포넌트의 props들을 하나씩 지워가며 리로드되는 원인을 분석한 결과, observer props가 문제였다.
observer는 slide의 CSS나 slide 추가/삭제 시 Swiper를 update하여 변경사항을 Swiper에 반영하는 옵션인데, 개발중인 화면에서는 필요 없는 기능이라 이를 지움으로써 마지막 issue까지 해결할 수 있었다.
참고
