[Cheliz] Pagination (+ API 통신)

 

  문제  

 

작품 검색 화면에서 Pagination을 위해, UIScrollViewDelegate Protocol을 사용하여 scrollView의 offset을 활용해 검색 결과 추가 로딩을 구현하였다.

offset.y가 scrollView.contentSize.height (== searchView.collectionView.contentSize.height)의 67% 이상이 될 때, 마지막으로 로딩한 페이지가 총 페이지 수보다 적을 경우 다음 페이지를 API 통신을 통해 받아 오는 로직으로 구성하였다.

 

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        isPaginating = true

        let contentOffset = scrollView.contentOffset.y
        let collectionViewHeight = searchView.collectionView.contentSize.height
        let remainingHeight = collectionViewHeight * 0.33

        // contentSize.height은 왜인지 너무 커서(2553.6) remainingHeight이 collectionViewHeight의 20%일 때는 더이상 로딩이 안 됨.

        print("🍋 contentOffset: \\(contentOffset)")
        print("🍒 collectionViewHeight: \\(collectionViewHeight)")  // 2553.6
        print("🫐 remainingHeight: \\(remainingHeight)")  // 1021.44
        print("🍒 - 🫐: \\(collectionViewHeight - remainingHeight)")
//        print(page < totalPages)
        print("📃 page: \\(page)")

        if contentOffset > collectionViewHeight - remainingHeight && page < totalPages {
            page += 1
            search()
        }
    }

 

일단, 다음 페이지를 불러오는 것이 가능하긴 하다..

하지만 scrollViewDidScroll 메서드는 사용자가 스크롤을 할 때마다 호출되고, 손가락이 화면을 터치하고 뗄 때 한 번 호출되는 것이 아니라 offset이 조금이라도 바뀌면 호출되는 것을 알 수 있었다..

 

API 통신 후 response가 오고 나서야 collectionView가 업데이트 되면서 contentSize.height(이하 컬렉션 뷰 높이)가 바뀌는데, 보통 그 전에 스크롤이 계속 이루어지므로 해당 메서드는 계속 호출이 되고, 이 때 offset.y는 업데이트 되기 전의 컬렉션 뷰 높이의 67% 이상이므로 메서드가 호출될 때마다 API 통신이 일어나게 되어 과호출이 발생한다.

 

이는 아이폰 화면에서 스크롤바의 위치를 통해 시각적으로도 확인이 가능한데, 첫 검색 결과 표시 화면에서 스크롤을 해서 다음 검색 결과를 확인하려 하면, 스크롤이 작아지고 스크롤바가 엄청난 상단..;;으로 이동하는 것을 볼 수 있다. 스크롤바가 이동할 때도 부드럽게 움직이기보다 뚝뚝 끊겨 (choppy) 보인다. (위로 엄청나게 점프하니까ㅠ)

 

과호출로 인해 과다한 데이터를 불러오게 되고, 이 과다한 데이터를 UI로 보여주어야 하는 Main Thread가 할 일이 많아 막히는 것이다.. ㅠ 결국 매끄럽지 못하고 끊겨 보이게 되어 사용자가 보기에도 사용성이 떨어지게 된다...ㅠ.ㅠ

 

또한 이는 API 과호출로 인한 서버단의 클라이언트 block을 초래할 수 있다.. 유저의 셀룰러/와이파이 과다 사용은 덤..

 

 

  해결  

이를 해결하기 위해 pagination 방법을 변경했다..! 

UICollectionViewDataSourcePrefetching protocol을 사용하였다. prefetching을 통해 셀을 화면에 표시하기 전 데이터를 미리 요청할 수 있도록 했다.

extension SearchViewController: UICollectionViewDataSourcePrefetching {
    func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) {
        for indexPath in indexPaths {  // indexPaths: prefetch되는 셀들
            if searchResults.count - 1 == indexPath.item && page < totalPages {
                isPaginating = true
                page += 1
                search()
            }
        }
    }
}

prefetch 되는 셀들 중 이미 불러온 검색결과의 가장 마지막에 해당하는 셀에서 다음 데이터를 미리 받아오도록 구현하였고, 이렇게 화면에 보이기 전 미리 로딩된 데이터는 UICollectionViewDataSource 프로토콜의 cellForItemAt 메서드에서 화면에 표시된다.

 

UICollectionViewDataSourcePrefetching protocol을 사용하면 스크롤 성능도 향상된다고 한다! 그것이 스크롤바의 매끄러운 이동을 뜻하는 건지는 정확하게 모르겠지만,.. 유저로서 보기에는 이전보다 훨씬 smooth한 스크롤바를 볼 수 있었다..! (네이버 검색처럼..)

 

 

 

 

참고

Apple Developer Documentation - UICollectionViewDataSourcePrefetching

Apple Developer Documentation - Prefetching Collection View Data

Apple Developer Documentation

Kodeco - UICollectionView Tutorial: Prefetching APIs

UICollectionView Tutorial: Prefetching APIs