[iOS] 이미지를 효율적으로 로드하는 방법

Prefetching 이란?

UICollectionView Prefetching은 iOS 10 이상에서 사용할 수 있는 기능으로, 성능을 최적화하기 위해 사용됩니다.
이 기능은 미리 데이터를 로드하고 화면에 표시되기 전에 셀을 미리 로드하여 스크롤 및 데이터 로딩 성능을 향상시킬 수 있습니다.

즉, Prefetching은 사용자 경험을 향상시키고 스크롤 및 데이터 로딩 성능을 최적화하는 데 도움이 되는 중요한 기술입니다. 특히 대규모 데이터 세트를 처리하는 UICollectionView에서 유용합니다.

자세한 설명은 공식 문서를 확인해 주세요~ 샘플 코드도 있습니다!

• Prefetching collection view data(공식 문서)
  https://developer.apple.com/documentation/uikit/uicollectionviewdatasourceprefetching/prefetching_collection_view_data

Prefetching 활용

위의 영상에서 각각의 셀에는 고화질 이미지가 들어가서 셀을 이동할 때마다 이미지 로딩에 오래 걸리지만, Prefetching을 사용해서 셀을 미리 로드하는 방식으로 구현했습니다.

• 셀 이동에 따른 이미지 로딩 결과
  

코드

• ViewController

override func viewDidLoad() {
	super.viewDidLoad()
    
	pictureView.collectionView.prefetchDataSource = self
}

extension ViewController: UICollectionViewDataSourcePrefetching {
    func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) {
        for indexPath in indexPaths {
            let imageName = imageBaseName + "\(indexPath.item)"
            ImageCacheManager.shared.prefetchImage(imgName: imageName)
        }
    }
}

• ImageCacheManager

final class ImageCacheManager {
    static let shared = ImageCacheManager()
    private init() { }
    
    private let cache = NSCache<NSString, UIImage>()
    
    func prefetchImage(imgName: String) {
        let image = UIImage(named: imgName)
        cachingImage(imgName: imgName, image: image)
    }
    
    func loadImage(imgName: String) -> UIImage? {
        if let image = cachedImage(imgName: imgName) {
            return image
        }
        return UIImage(named: imgName)
    }
    
    private func cachingImage(imgName: String, image: UIImage?) {
        guard let image = image else { return }
        cache.setObject(image, forKey: imgName as NSString)
    }
    
    private func cachedImage(imgName: String) -> UIImage? {
        cache.object(forKey: imgName as NSString)
    }
}

설명

collectionView(_:prefetchItemsAt:) 메서드는 데이터를 미리 로드해야 할 인덱스 경로의 배열을 받습니다.
해당 메서드에서는 화면에 표시되기 전에 데이터를 미리 로드하거나 캐시에 저장할 수 있습니다.
따라서 해당 메서드에서 로드 할 셀의 인덱스를 이용해서 고화질 이미지를 미리 로드하여 캐시에 저장하는 방식으로 성능 최적화를 할 수 있습니다.

참고

• 이미지 캐시 처리 참고 링크
  https://velog.io/@oasis444/이미지-캐시-처리