iOS 앱 개발 포트폴리오 | 네컷사진 추억앨범 & 포토위키 플랫폼

Kingfisher 라이브러리 도입 배경

문제점

1. 이미지를 불러오는 과정이 1초 정도 걸린다.
• 초기에는 인디케이터를 사용해서 사용자에게 앱이 멈추지 않은 것을 알려줬다.

2. 이미지를 사용할 때 마다, 이미지 URL을 통해 이미지를 반복해서 불러오는 것은 비효율적이다.

이미지 캐싱 적용 전/후 속도 비교

사진 상세보기 페이지

[ 적용 전 ]

[ 적용 후 ]

• Kingfisher 라이브러리 적용 전에 이미지를 불러오는 속도는 아래의 코드를 사용해서 확인했다.
이미지 불러오는 속도 확인 코드
var photoData: Photo? {
        didSet {
            setupPhotoData { start in
                print("걸린 시간은 \(Date().timeIntervalSince(start))초 입니다.")
            }
        }
    }
 
• 기존 storageManager 의 downloadImage(urlString:) 메서드를 호출해서 이미지를 불러오는 코드
private func setupPhotoData(completion: @escaping (Date) -> Void) {
		let start = Date()
		guard let photoData = photoData else { return }
		storageManager.downloadImage(urlString: photoData.image) { image in
        self.mainImageView.image = image
        self.backgroundImageView.image = image
        let dominantColor = image?.dominantColor()
        self.setGradientBackground(dominantColor: dominantColor!)
        self.titleLabel.text = photoData.memo
        self.dateLabel.text = photoData.date
        completion(start)
    }
}
 
• Kingfisher 라이브러리의 setImage(with:) 메서드를 호출해서 이미지를 불러오는 코드
private func setupPhotoData(completion: @escaping (Date) -> Void) {
		let start = Date()
    guard let photoData = photoData else { return }
    guard let photoURL = URL(string: photoData.image) else { return }
    self.mainImageView.kf.setImage(with: photoURL)
    self.backgroundImageView.kf.setImage(with: photoURL) { [weak self] result in
        switch result {
        case .success(let value):
            if let dominantColor = value.image.dominantColor() {
                self?.setGradientBackground(dominantColor: dominantColor)
            }
            self?.titleLabel.text = photoData.memo
            self?.dateLabel.text = photoData.date
            completion(start)
        case .failure(let error):
            print("Error: \(error)")
        }
    }
}
 

사진 추가 페이지에서 태그 이미지

[ 적용 전 ]

[ 적용 후 ]

• Kingfisher 라이브러리 적용 전에 이미지를 불러오는 속도는 아래의 코드를 사용해서 확인했다.
이미지 불러오는 속도 확인 코드

• 기존 storageManager 의 downloadImage(urlString:) 메서드를 호출해서 이미지를 불러오는 코드

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TagCollectionViewCell", for: indexPath) as? TagCell else { return UICollectionViewCell() }
    let start = Date()
    let data = self.dataArray[indexPath.row]
    StorageManager.shared.downloadImage(urlString: data.tagImage) { image in
        cell.tagImageView.image = image
        cell.tagLabel.text = data.tagLabel
        print("걸린 시간 \(Date().timeIntervalSince(start))초 입니다.")
    }
    return cell
}

 

• Kingfisher 라이브러리의 setImage(with:) 메서드를 호출해서 이미지를 불러오는 코드

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TagCollectionViewCell", for: indexPath) as? TagCell else { return UICollectionViewCell() }
    let start = Date()
    let data = self.dataArray[indexPath.row]
    let url = URL(string: data.tagImage)
    cell.tagImageView.kf.indicatorType = .activity
    cell.tagImageView.kf.setImage(with: url) { result in
        cell.tagLabel.text = data.tagLabel
        print("걸린 시간 \(Date().timeIntervalSince(start))초 입니다.")
    }
    return cell
}

찜한 포즈 페이지

[ 적용 전 ]

 

[ 적용 후 ]

 

• 사진 추가하기 페이지에서 태그 이미지를 불러오는 비교 코드와 동일한 방식으로 테스트했다.

Kingfisher 는 이미지를 어디에 캐싱할까?

추가적인 옵션 제공