[Swift] 이미지의 네트워킹 지연에 따라 잘못된 이미지가 표시되는 문제

개인적으로 정리한 글이라 틀린 내용이 있을 수 있습니다.

오픈 API를 활용해서 영화 포스터를 가져오는 프로젝트를 진행했는데, 이미지의 크기가 매우 큰 경우, 빠르게 스크롤을 하다보면 이미지가 있어야 할 셀이 아닌 다른 셀에서 보여지는 경우가 발생했다. (예를 들어 아바타의 포스터가 보여져야 하는데 엉뚱맞은 포스터가 불러와져있다던지..)

이는 셀이 재사용되기 때문에 이미지가 올바른 위치에 표시되지 않는 경우였다.

👀 이미지의 네트워킹 지연에 따라 잘못된 이미지가 표시되는 문제

1. 문제 상황

• 스크롤을 빠르게 내릴 시 상품 조회 뷰에서 이미지를 받아오는 네트워킹이 지연될 경우 data task가 쌓이게 된다.
• 셀이 재사용될 때마다 data task가 쌓여, 네트워킹이 완료될 때마다 이미 지나가서 필요하지 않는 이미지(이전 재사용 시점에 요청한 이미지)가 뒤늦게 셀에 적용되는 문제가 발생했다.
  한 페이지에 표시하는 셀이 많을수록, 스크롤 속도가 빨라질수록 심해져, 스크롤을 정지한 상태인데 하나의 셀에서 약 0.5초에 한번씩 이미지가 5-6번에 걸쳐 변경되는 것을 볼 수 있었다.

2. 해결 방법

• 이미지 네트워킹시, 캐시에 해당 이미지가 있으면 사용하고, 없으면 네트워킹 data task를 resume 하고 있었다.
• 그 후 셀의 prepareForReuse() 메서드에서 해당 셀의 data task가 cancel 되도록 구현했다.
• 셀이 화면에 더 이상 보이지 않게 되었을 때 prepareForReuse() 메서드가 실행되므로, 이미 스크롤이 옮겨져 이전에 요청했던 이미지가 불필요해지기 때문이다.
• 만약 스크롤이 넘어가기 전에 네트워킹이 완료된다면, 캐시에 저장 및 화면에 표시하도록 구현했다.

3. 의문점

• 스크롤을 위아래로 빠르게 이동할 경우, data task가 의미 없이 resume되고 cancel되는 현상이 반복된다. 즉, resume 후 cancel되는 시점까지의 데이터 작업이 무의미한 비용이 된다. 이러한 점에 대해 현업에서는 어떻게 대처하는지 궁금..?🤔