[ios-swift] GIF 다루기

배경 설명

Gif를 로드하는 UIImageView에서 Gif 한 건 당 메모리가 50mb 씩 소요되는 현상 발생

사건 분석

이미지 로드 라이브러리로 KingFisher를 사용하고 있으나 여기에 적절한 녀석이 없을 줄 알고 구글링을 해서 gif image loader를 가져와서 사용했다. 근데 사실 KingFisher에서 제공하고 있는 녀석이 있었다.

KingFisher에서 제공하는 간편한 모델 그 녀석은 CPU을 좀 쓰긴하는데 크게 문제는 없어 보였다.

Gif 사용법 - Image 처럼 처리

@IBOutlet weak var banner: UIImageView!

banner.kf.setImage(
                with: URL(string: url),
                placeholder: UIImage(named: "camp_default"),
                options: [
                    .scaleFactor(UIScreen.main.scale),
                    .cacheOriginalImage 
                ]
            )

이 코드는 image 처리하는데는 문제가 없는데, gif를 처리하는데는 문제가 발생했다.

Gif 한 건 당 메모리가 50mb 씩 소비한다.

Gif 사용법 - KingFisher.AnimatedImage

cpu를 9% 대로 사용함

// 변경 전
@IBOutlet weak var banner: UIImageView!

// 변경 후 
@IBOutlet weak var banner: AnimatedImageView!

메모리를 1~2mb 정도 먹고 CPU 사용량이 8~9% 정도 증가함

KingFisher에서 제공하는 gif 처리에 최적화된 뷰를 사용하기만 하면 되서 간편하다. 저 선언부 말고는 바뀐게 없다. 그치만 게시글마다 gif를 올린다고하면 앱이 평균 cpu 사용량이 100%가 넘을 가능성이 있어서 잠재적인 문제가 발생할 수 있다. 새로운 방법을 찾아야 했다.

Gif 사용법 - ImageIO

이미지를 프레임단위로 누적해서 인코딩하는 방식을 인터레이싱이라고 부르는데, 이를 활용하는 방법이다.
전체 데이터를 프레임의 크기와 지속시간등으로 그 때 그 때 필요한 만큼 인코딩을 해서 보여주는 방식

비동기적으로 작업을 수행하고, 계산된 이미지나 원본 이미지를 캐싱할지 옵션에서 선택할 수 있다. 이 방식으로 하니 많은 리소스가 들지 않았다. 약 메모리 1~2mb를 소비하고, 순간적으로 높은 CPU 사용량을 보이는데 곧 정상범위로 내려온다. 자세한 코드는 [1] 주석을 참조하세요.

참조

[1] https://varun04tomar.medium.com/loading-gifs-take-lot-of-memory-in-ios-that-leads-app-to-crash-with-oom-e5df9474866d

[2] https://www.youtube.com/watch?v=qwsyrYuYLHE