Library - Kingfisher 사용해보기

안녕하세요 BeePeach입니다 :)

 

오늘은 image를 외부에서 가져올 때 많이 사용하는 Kingfisher에 대해서 공부해보려고 합니다.

 

Kingfisher는 Web에서 image를 다운로드하거나 캐싱할 때 사용하는 오픈소스 라이브러리입니다.

 

Kingfisher는 URLSession을 기반으로 만들어졌습니다.

주요 특징으로는 여러가지가 있습니다. 두 가지 정도만 예로 들어보자면

• Asynchronous 이미지 다운로드 및 캐싱
• 메모리 또는 디스크에 저장하는 캐시 지원

 

https://github.com/onevcat/Kingfisher

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

 

 

---

 

준비물

 

이미지를 내려주는 서버 api를 알고 있거나 Image의 URL을 알고 있어야 합니다.

 

저는 간단하게 랜덤 이미지를 보내주는 사이트를 이용해보겠습니다.

 

https://picsum.photos

Lorem Picsum

 

 

---

 

사용하기 전의 코드

 

 Image 리소스의 url을 알고 있다면 우리는 이 이미지를 가져올 수 있습니다.

그럼 일단 kingfisher를 사용하지 않고 이미지를 가져와서 이미지 뷰에 나타내 보도록 하겠습니다.

 

 

Sync

 

 

애초에 가져오는 코드 자체가 간단하네요.

끝!

이 아니라 이 코드는 문제가 있습니다.

바로 async한 코드가 아니라는 점입니다.

지금 이 코드는 MainThread에서 sync하게 동작하기 때문에 만약 이미지를 가져오는데 많은 시간이 걸린다면 그동안 main thread는 block상태이고 터치도 처리하지 못하고 화면이 멈춘 것처럼 보이게 됩니다.

 

 

async

 

 

그렇다면 이 코드를 async하게 처리하면 되겠다!

해서 이렇게 구현할 수 도 있지만... 이 코드도 그렇게 좋은 코드는 아닙니다.

http 통신을 할 때는 URLSession을 이용합니다.

 

 

UseURLSession

 

 

이 방법이 URLSession을 이용한 정석적인 방법입니다.

사용 방법이 좀 귀찮죠??

 

그리고 이 방식은 캐시를 저장하는 코드가 없습니다.

그냥 데이터를 가져와서 ImageView에 그려주는 역할만 하는 거죠.

 

그럼 이제 Kingfisher를 이용해서 쉽게 구현해보도록 하겠습니다.

 

 

---

 

Kingfisher 사용하기

 

 

 

허무할 만큼 코드가 줄어들었습니다.

파라미터로 URL을 전달하면 끝입니다.

 

이전 코드와 다른 부분은 파라미터를 옵셔널로 받기 때문에 URL도 guard문으로 바인딩하지 않았네요.

물론 확실하게 하고 싶다면 옵셔널 바인딩을 해도 상관없습니다.

 

kf.indicatorType은 이미지를 가져오기 전에 인디케이터를 표시할지 안 할지 정하는 프로퍼티입니다.

사용 안 해주셔도 되고 인디케이터를 표시하고 싶다면 activity를 전달해주면 됩니다.

 

 

여기서 사용한 setImage(with:) 메서드는 사실 좀 더 많은 프로퍼티를 받습니다.

한번 살펴볼까요??

 

 

첫 번째 파라미터를 제외하고 모두 기본값으로 nil을 가지고 있어서 생략이 가능했습니다.

각각 파라미터에 대해서 간단하게 알아보자면

 

placeholder: 만약 이미지를 가져오지 못하면 표시할 기본 이미지를 설정합니다.

options: fade옵션, 캐시 처리방식 등 다양한 옵션을 줄 수 있습니다.

 

completionHandler: 이미지를 가져온 후에 실행될 코드를 작성하는 곳입니다.

 

 

---

 

placeholder

 

이미지를 가져오는데 실패하면 나타날 이미지를 설정합니다.

한번 잘못된 URL을 전달해서 실패하도록 만들어보겠습니다.

 

 

 

 

이미지를 가져오는데 실패하므로 우리가 지정한 placeholder가 나타나는 것을 확인할 수 있습니다.

 

 

---

 

Options

 

 

URL이 변경된 것은 고화질 이미지를 가져오도록해서 데이터를 가져오는데 오래 걸리도록 만드려고 변경했습니다.

 

options은 정말 다양하게 제공됩니다.

 

여기선 3가지만 사용해보았습니다.

.transition()은 이미지를 가져올 때 어떤 애니메이션을 넣어서 가져올지 정합니다.

저는 fade를 사용하고 1.0초 동안 적용시켰습니다.하지만 만약 이미지를 가져오는데 1.0보다 적은 시간이 걸린다면 그냥 바로 슉하고 나타나게 됩니다.

 

그래서 무조건 fade가 적용되도록 .forceTransition 옵션을 넣었습니다.

 

 

이미지를 가져올 때 transition이 적용된 것을 확인할 수 있습니다.

 

마지막 옵션은 캐시를 메모리에만 저장하는 옵션입니다.

다양한 옵션에 대해서는 KingfisherOptionsInfoItem에 선언되어 있으므로 확인해보시면 좋습니다.

 

 

 

 

---

 

Cache

 

Kingfisher의 강력한 기능은 바로  캐시를 이용한다는 점입니다.

그래서 디스크나 메모리에 캐시가 존재한다면 이미지를 바로 가져와서 불필요한 리소스를 낭비하지 않습니다.

 

바로 확인해보면 되겠죠??

시뮬레이터라면 Mac의 인터넷 연결을 해재하고 iPhone이라면 비행기 모드로 실행해보면 됩니다.

 

 

먼저 앞에서 살펴봤던 URLSession을 이용한 방법으로 실행해봤습니다.

인터넷 연결이 끊어졌으니 당연히 네트워크를 통해서 데이터를 가져올 수 없습니다.

그리고 캐시도 저장하고 있지 않기 때문에 아무것도 표시되지 않습니다.

 

 

하지만 Kingfisher를 이용하면 이렇게 캐시에 저장된 이미지를 가져와서 표시해줍니다.

 

캐시와 profress에 대한 자세한 이후에 추가하도록 하겠습니다.

 

 

---

 

참고자료

 

https://github.com/onevcat/Kingfisher

 

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