iOS Kingfisher로 비동기 이미지 불러오기

이번 포스트에서는 Kingfisher를 사용하여 비동기로 이미지를 불러오는 방법을 소개합니다.

이미지를 비동기로 불러오는 방법에는 크게 2가지가 있습니다.

 

1. 이미지를 불러온 후 UIImageView에 직접 적용하기

이미지를 재가공할 필요 없이 바로 적용할 경우 사용하는 가장 일반적이고 기본적인 방법입니다.

 

2. 이미지를 불러와서 UIImage로 저장한 후 해당 이미지를 후처리한 후 UIImageView에 적용하기

이미지를 재가공할 필요가 있을 경우 사용하는 방법입니다. 캐싱할 경우에도 사용할 수 있는 방법이 되겠습니다.

 

어플리케이션을 개발 할 때 두 가지 경우 모두 사용할 수 있기 때문에 알아두시면 좋을 것 같습니다.

1. 이미지의 URL을 통해 바로 UIImageView에 적용하기

특별한 부가 설명은 필요가 없을 정도로 사용 방법이 정말 간단합니다.

let url = URL(string: "https://example.com/image.png")
imageView.kf.setImage(with: url)

이렇게 사용하면 바로 이미지를 비동기로 불러올 수 있습니다.

만약, 이미지 주소에 한글이 있어 이미지 로딩 중 문제가 발생할 경우 다음과 같이 인코딩 작업을 해주면 됩니다.

let urlStr = "https://example.com/오렌지.jpg"
let urlString = urlStr.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)

2. URL을 통해 UIImage를 만들고 해당 이미지를 재가공 후 적용하기

이미지의 사이즈를 변경하거나 품질을 변경하거나 등 이미지를 가공한 후에 사용하고 싶을 경우에 적용할 수 있는 방법입니다. 예를 들어, 썸네일 이미지를 보여주고 싶은데 이미지의 사이즈가 너무 클 경우 imageView의 크기만큼 이미지 크기를 줄여서 적용할 수 있을 것입니다. 이 경우에는 URL을 통해 UIImage를 만들고 해당 이미지의 크기를 변경한 후에 적용할 수 있습니다.

KingfisherManager라는 것을 사용하면 손쉽게 구현할 수 있습니다.

if let thumbnailUrl = URL(string: item.thumbnailUrl!) {
	KingfisherManager.shared.retrieveImage(with: thumbnailUrl, completionHandler: { result in
	switch(result) {
		case .success(let imageResult):
			let resized = imageResult.image.resizedImageWithContentMode(.scaleAspectFit, bounds: CGSize(width: 84, height: 84), interpolationQuality: .medium)
			imageView.isHidden = false
			imageView.image = resized
		case .failure(let error):
			imageView.isHidden = true
		}
	})
}

먼저 KingfisherManager의 retrieveImage라는 함수를 사용하여 이미지를 가져오게 됩니다.

KingfisherManager.shared.retrieveImage(with: thumbnailUrl, completionHandler: { result in

})

위 함수는 Escaping Closure로 결과 값을 전달하기 때문에 해당 클로저를 구현해주시면 되겠습니다.

해당 크로저 안에 위에서 나온 것 처럼 성공 시, 실패 시를 구분한 후에 가공 및 적용을 해주시면 됩니다.

Escaping Closure로 전달해주는 값은 Result<Success, Failure> 타입이기 때문에 Switch로 체크해주시면 좋습니다.

3. 별도의 요청 헤더 추가하기 (Request Headers)

대규모의 서비스를 만들거나 보다 안전한 통신을 위해 이미지 비동기 다운로드 시에도 별도의 요청 헤더가 필요할 경우 사용할 수 있는 방법입니다. 이 방법은 위의 1번과 2번 방법에 더해서 사용할 수 있는 방법이므로 알아두시면 좋을 것 같습니다.

let imageDownloadRequest = AnyModifier { request in
    var requestBody = request
    requestBody.setValue(authValue, forHTTPHeaderField: "Authorization")
    requestBody.setValue(custom1Value, forHTTPHeaderField: "custom1")
    requestBody.setValue(custom2Value, forHTTPHeaderField: "custom2")
    requestBody.setValue(userAgent, forHTTPHeaderField: "User-Agent")
    return requestBody
}

위의 코드를 Kingfisher 코드 위에 먼저 정의해주시고 Kingfisher에서는 아래와 같이 options 옵션을 추가해주시면 됩니다.

// 1번의 방법
imageView.kf.setImage(with: url, options: [.requestModifier(imageDownloadRequest)])

// 2번의 방법
KingfisherManager.shared.retrieveImage(with: thumbnailUrl, options: [.requestModifier(imageDownloadRequest)], completionHandler: { result in

})

 

이번 포스트에서는 Kingfisher의 사용법에 대해 정리해보았습니다.