[SwiftUI] 이미지캐싱 Kingfisher SDWebImage 차이 & 사용법

Kingfisher는 Swift로 작성된 인기있는 iOS용 이미지 다운로드 및 캐싱 프레임워크이다.

원격 URL에서 이미지를 로드하고 표시하기 위한 사용하기 쉬운 API를 제공한다. kingfisher는 이미지 로딩 성능을 개선할 수 있는 고급기능도 제공한다. 

 

캐싱이란?

캐싱(Caching)은 데이터나 정보를 미리 저장해두는 것이다. 이를 통해 이후에 해당 데이터나 정보에 대한 요청이 있을때 빠르게 제공할 수 있다. 

보통 캐싱은 매우 빠른 속도로 데이터를 처리하는 메모리나 디스크에 저장된다. 이렇게 저장된 데이터는 나중에 같은 데이터에 대한 요청이 있을 때, 캐시에서 직접 가져와서 처리함으로써 원래 데이터를 가져오는 것보다 훨씬 빠르게 처리가 가능하다.

 

 

Ex) Firebase에 등록되어 있는 imageURL을 불러오는 코드이다.

1. 서버에서 불러오는 코드를 ObservableObject class로 만들어준다.

import Kingfisher
import Foundation
import FirebaseFirestore
import SwiftUI
import FirebaseStorage

class ImageViewModel: ObservableObject {
    @Published var reviewImageURLs: [String: URL] = [:]

    func retrieveImages(reviewId: String, imageName: String) {
      
            let ref = storage.reference().child("images/\(reviewId)/\(imageName)")
            ref.downloadURL() { url, error in
                if let error = error {
                    print(#function, error.localizedDescription)
                }else if let url = url  {
                    let imageUrl = URL(string: url.absoluteString)!
                    self.reviewImageURLs[imageName] = imageUrl
                }
            }
    }
    }

2. View에서 새로 그려질때마다 ViewModel의 함수를 호출하여 Kingfisher사용하여 이미지 불러온다.

import SwiftUI
import Kingfisher

struct imageView:  View {
    @StateObject var imageViewModel: ImageViewModel

    var body: some View {

 ForEach(Array(image.images!.enumerated()), id: \.offset) { index, imageURL in
                  
                        KFImage(reviewViewModel.reviewImageURLs[imageURL])
                            .placeholder{
                                ProgressView()
                                    .frame(width: getWidth(index: index), height: getHeight(index: index))
                            }
                            .setProcessor(DownsamplingImageProcessor(size: CGSize(width: getWidth(index: index) * 2.0 , height: getHeight(index: index) * 2.0)))
                            .cacheMemoryOnly()
                            .fade(duration: 0.25)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: getWidth(index: index), height: getHeight(index: index))
                            .cornerRadius(5)
                    }
                    
                
}

}.onAppear{
	imageViewModel.retrieveImages()
}
}

modifier로 setProcessor는 이미지의 사이즈 *n배 만큼 다운샘플링을 해줘 이미지의 품질을 낮춰주는 기능을한다. 상황에 따라 고품질 또는 저품질로 구분지어 사용하면된다.

다운샘플링 * 2                                                다운샘플링 x                                                  다운샘플링 * 1

 

시뮬레이터와 실기기에서 확인하면 이미지품질 차이가 확실히 느껴지는데 웹상에선 차이가 뚜렷하게 보이질 않는다.

---

SDWebImage는 Objective-C로 작성된 iOS용 이미지 다운로드 및 캐싱 프레임워크이다.

Kingfisher와 유사한 기능을 제공하지만 애니메이션 이미지 및 GIF도 지원한다. SDWebImage는 Kingfisher보다 오래 사용되어 더 널리 사용되지만 Kingfisher는 최신 Swift기반 API로 인해 인기를 얻었다.

 

import SwiftUI
import SDWebImageSwiftUI

struct ImageView: View {
    var imageURL: URL
    var body: some View {
        VStack{
            WebImage(url: imageURL)
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 100)
        }
        .padding()
        
    }
}