iOS SDWebImage vs Kingfisher 비교

이미지를 API에서 받아올때 버벅 거리고, 이미지가 바뀌는 현상이 나타납니다 

 

 

이런 현상을 막기 위해선 캐싱 작업이 필요합니다.

 

캐싱이란?

caching - 파일 사본을 임시 저장소에 저장해서 보다 빠르게 접근할 수있게 해주는 프로세스

 

 

예를 들어 API를 통해 네트워크 통신 할때 사진의 양이 많으면 오래 걸리고, 버벅거리는데, 

캐시를 만들면 임시저장소에 있는 사진을 끌어와서 버벅거림과 빠른 속도로 이미지를 로드할 수있다. 

 

iOS에서는 다양한 방법으로 캐싱작업을 할수 있는데 

기본적으로 제공해주는 NSCaChe 를 사용하여 만들 수있다 .

 

NSCaChe 적용 방법은 블로그를 참고해보시길 바란다.

https://ios-development.tistory.com/658

[iOS - swift] NSCache 개념, 이미지 캐시 (Image cache), (memory cache, disk cache)

 

오늘은 이미지 캐싱 작업을 쉽고 빠르게 도와줄 라이브러리를 비교해보려고한다.

 

1. SDWebImage

https://github.com/SDWebImage/SDWebImage

GitHub - SDWebImage/SDWebImage: Asynchronous image downloader with cache support as a UIImageView category

대중적이고 현재도 사용되고 있는 이미지 라이브러리이다. 

 

제가 직접해보고 느껴본 특징은 다음과 같다.

 

1. Thumbnail image decoding to save CPU && Memory for large images  

: 큰 이미지를 일때 썸네일 이미지 디코딩을 해서 메모리와 CPU를 절약할 수있다. 

 

예시를 통해 확인해보자.

 

일반적으로 사용하게 되면 메모리가 1.21GB를 사용한다. 

 

하지만 썸네일를 이용하면 메모리는 기하급수적으로 줄어든다.

 

이렇게 썸네일을 이용하면 큰 이미지를 불러올때 메모리 사용량을 줄일 수 있다.

 

 

2. Image loading (indicators) / (transition animation)

: 이미지의 표시자  즉, progressView를 만들 수있다

imageView1.sd_imageIndicator = SDWebImageActivityIndicator.gray
imageView2.sd_imageIndicator = SDWebImageProgressIndicator.default

 

 

1) SDWebImageActivityIndicator 이다. 

 

SDWebImageActivityIndicator의 속성을 보면 

ProgressView를 다양하게 만들수 있다.

 

또한 trainsition을 이용하여 어떤 애니메이션을 적용할 지 선택할 수있다.

 

예시로 

 

 

 

2) SDWebImageProgressIndicator

: ProgressView를 보여주는 것이지만 다른 느낌 버젼으로 보여준다.

 

속성을 보면 

두 가지 밖에 없지만 

barIndicator는 MacOS와, TvOs에서만 사용할 수 있다.

 

자 그렇다면 적용해보자.

 

 

 

 

 

 

2. Kingfisher

https://github.com/onevcat/Kingfisher

GitHub - onevcat/Kingfisher: A lightweight, pure-Swift library for downloading and caching images from the web.

Kingfisher는 SDWebImage보다 나중에 나온 라이브러이다. 

 

많은 개발자들이 Kingfisher로 이동한 이유에는 여러가지가 있지만

Kingfisher만의 특징은 이미지 캐싱된 것을 삭제 할 수 있다는 점이다.

 

자 그럼 직접 사용해보고 느낀 특징을 나열해보겠다.

 

1. 기반이 Swift로 만들어져서 빠르고 SwiftUI에도 쉽게 적용할 수 있다.

 

 

2. resize를 통해 메모리 사용량을 줄일 수있다.

 

위의 기본 코드를 사용해서 적용하면 메모리가 300MB가 넘는걸 확인 할 수있다.

 

SDWebImage 처럼 메모리 사용량을 줄이는 방법이 존재한다.

바로 processor를 만들어서 DownsamplingImageProcessor를 사용하는 것이다. 

이렇게 하면 메모리는 33.9MB 밖에 안나오는 것을 확인 할 수 있다.

 

3. Kingfisher 깃헙에 있는 예제 하나로 다양한 부분을 설정할 수있다.

예제를 보면 직관적인 부분이 있어서 활용하기 쉬웠다.

transition, scaleFactor, processor 등 

 

활용 예시

        let url = URL(string: imageUrl!)
        // image Resize과정
        let processor = DownsamplingImageProcessor(size: self.mainImageView.bounds.size)
        |> RoundCornerImageProcessor(cornerRadius: 20)

        self.mainImageView.kf.indicatorType = .activity
        self.mainImageView.kf.setImage(
            with: url,
            placeholder: UIImage(named: "placeholderImage"),
            options: [
                .processor(processor),
                .scaleFactor(UIScreen.main.scale),
                .transition(.fade(1)),
                .cacheOriginalImage
            ])
        {
            result in
            switch result {
            case .success(let value):
                print("Task done for: \(value.source.url?.absoluteString ?? "")")
            case .failure(let error):
                print("Job failed: \(error.localizedDescription)")
            }
        }

 

 

 

 

SDWebImage vs Kingfisher 느낀점

큰 차이점은 느끼지 못했고, 자신이 편한 것으로 사용하면 될 거 같습니다. Kingfisher의 큰 특징중 하나인 캐싱된 이미지를 삭제 할 수 있는 것이지만, 이번 프로젝트에서 사용하지 않아서 장점으로 크게 못느꼈습니다. 아직 사용해보지 못한 부분이 많지만 개인적으로는 Kingfisher가 더 사용하기 편했습니다. 

 

자주 라이브러리를 사용해보면서 장 단점을 알아가보록 하겠습니다.