다운샘플링으로 메모리 효율적인 이미지 처리하기

이전 게시물에서 알아보았던 PHPicker를 사용해서 이미지를 처리하던 중 아래와 같은 에러를 마주쳤습니다.

Swift가 허용한 4,194,304 바이트보다 큰 데이터를 UserDefaults에 저장할 수 없다는 에러입니다.

UserDefaults는 작은 데이터들을 저장할 목적으로 만들어진 것이기 때문에 위와 같은 에러는 자연스러운 현상인 듯 합니다.

지금 저장하려는 이미지는 원본 이미지 그 자체였으니 당연히 용량이 컸을 것이고, 이미지의 용량을 줄이려면 보통 이미지 크기를 줄이겠다는 생각부터 하겠죠?

이미지 크기의 축소는 가장 직관적으로 이미지 용량을 줄이고 메모리 가용률도 높이는 좋은 방법 중 하나입니다.

그래서 저도 이미지를 줄일 수 있는 방법부터 찾아보게 되었죠.

이미지 리사이즈시의 CPU와 메모리 동작

하지만 공부를 한 지 얼마 지나지 않아 단순히 이미지를 줄이는 방법은 좋은 방법이 아니고, 오히려 앱이 기기에 과부하를 더 줄 수 있다는 사실을 깨달았습니다.

그 까닭은 2018년에 진행된 WWDC2018에서 찾아볼 수 있었습니다.

Image and Graphics Best Practices - WWDC18 - Videos - Apple Developer

이미 이미지 처리 게시물들에서 많이 다루고 있고 iOS의 화면 표현 방법을 학습해볼 수 있는 세션입니다.

아래는 UIGraphicsImageRenderer를 사용하여 PHPicker를 통해 받은 이미지 여러개의 크기를 줄이는 코드입니다.

var images: [UIImage] = []

var result in results {
  result.itemProvider.loadObject(ofClass: UIImage.self) { object, error in
    guard let image = object as? UIImage else { return }
    guard let resizedImage: UIImage = UIGraphicsImageRenderer(size: CGSize(width: 2_000, height: 2_000)).image { context in
      image.draw(in: CGRect(origin: CGPoint.zero, size: newSize))
    } else { return }
    images.append(resizedImage)
  }
}

단순히 보기에는 아무런 문제가 없어보이죠.

문제는 두 번에 걸쳐서 발생합니다.

1. 원본을 로드한다.

guard let image = object as? UIImage else { return }

첫 번째 문제입니다.

이미지 사이즈를 줄이는 목적이 무엇이였나요?

메모리에 부하를 덜 주기 위해서였죠.

위 방법은 성공적으로 수행만 된다면 그 이후에는 메모리 사용률을 낮춰줄겁니다.

그런데 이미지 크기를 줄이기 위해서 우선 원본 이미지를 한 번 로드해주어야 합니다.

그 한 번 로드하는 과정에서 백그라운드 작업들을 종료시키거나 심하면 앱 자체를 종료시키는 현상이 발생할 수 있습니다.

실제로 위 코드만 봐도 PHPicker는 선택한 데이터를 UIImage 타입으로서 제공하지 않습니다.

굳이 크기가 큰 그 데이터를 아무런 처리 없이 UIImage로 바로 변환하여 사용하고 있었던 것이죠!

2. 작은 이미지를 직접 그린다.

image.draw(in: CGRect(origin: .zero, size: newSize))

두 번째 문제입니다.

위 방법은 이미지를 불러와 그 이미지의 작은 버전을 draw 메서드를 사용하여 직접 그려줘야 하는 방법입니다.

그래픽 작업을 하는 것이기 때문에 CPU와 메모리 두 하드웨어 모두에게 작업을 부여하는 것이고, 이 또한 메모리 부하를 줄이는 것과는 거리가 먼 것을 알 수 있습니다.

다운 샘플링

그러면 단순히 이미지를 리사이징 하는 방법 외에 어떤 방법이 있을까요?

바로 데이터를 UIImage로 바로 변환하여 사용하는 것이 아니라 CGImage 타입의 데이터를 사용하여 디코딩할 파일(data buffer) 자체의 사이즈를 줄이는 다운샘플링 방법이 있습니다.

다만 이 방법은 Core Graphics이라는 한 층 더 low-level한 내용을 사용하기 때문에 코드가 좀 더 길고 복잡합니다.

func downsample(at url: URL, to pointSize: CGSize, scale: CGFloat) -> Data? {

  let sourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary

  guard let source = CGImageSourceCreateWithURL(url as CFURL, sourceOptions) else { return nil }

  let maxDimensionInPixels = max(pointSize.width, pointSize.height) * scale

  let downsampleOptions = [
    kCGImageSourceCreateThumbnailFromImageAlways: true,
    kCGImageSourceCreateThumbnailWithTransform: true,
    kCGImageSourceThumbnailMaxPixelSize: maxDimensionInPixels
  ] as CFDictionary

  guard let cgImage = CGImageSourceCreateThumbnailAtIndex(source, 0, downsampleOptions) else { return nil }

  let data = NSMutableData()

  guard let imageDestination = CGImageDestinationCreateWithData(data, UTType.jpeg.identifier as CFString, 1, nil) else { return nil }

  let isPNG: Bool = {
    guard let utType = cgImage.utType else { return false }
    return (utType as String) == UTType.png.identifier
  }()

  let destinationProperties = [
    kCGImageDestinationLossyCompressionQuality: isPNG ? 1.0 : 0.75
  ] as CFDictionary

  CGImageDestinationAddImage(imageDestination, cgImage, destinationProperties)
  CGImageDestinationFinalize(imageDestination)

  return data as Data
}

어질어질하쥬..? 😵

복잡해 보이지만 두 파트로 나눌 수 있습니다. 한 번 살펴봅시다.

1. CGImage 생성

let sourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary
guard let source = CGImageSourceCreateWithURL(url as CFURL, sourceOptions) else { return nil }

let maxDimensionInPixels = max(pointSize.width, pointSize.height) * scale
let downsampleOptions = [
  kCGImageSourceCreateThumbnailFromImageAlways: true,  
  kCGImageSourceShouldCacheImmediately: true,
  kCGImageSourceCreateThumbnailWithTransform: true,
  kCGImageSourceThumbnailMaxPixelSize: maxDimensionInPixels
] as CFDictionary

guard let cgImage = CGImageSourceCreateThumbnailAtIndex(source, 0, downsampleOptions) else { return nil }

downsampling의 핵심이 되는 부분입니다.

사실상 필수적인 로직들은 이 안에 다 있습니다.

Option flag를 정의해주고 해당 옵션을 통해 CGImage를 생성해주는 방식입니다.

kCGImageSourceShouldCache: false 이미지 소스에 대한 참조값만을 생성하고 CGImageSource가 생성되는 즉시 디코딩을 진행하지 않습니다.
kCGImageSourceShouldCacheImmediately: true 앞선 옵션과는 반대로 다운샘플링 로직이 시작됨과 동시에 디코딩 작업을 수행합니다.
kCGImageSourceCreateThumbnailWithTransform: true 다운샘플링된 이미지를 원본 이미지와 같은 형태를 갖도록 합니다.

2. PNG 퀄리티 보존

let data = NSMutableData()

guard let imageDestination = CGImageDestinationCreateWithData(data, UTType.jpeg.identifier as CFString, 1, nil) else { return nil }

let isPNG: Bool = {
  guard let utType = cgImage.utType else { return false }
  return (utType as String) == UTType.png.identifier
}()

let destinationProperties = [
  kCGImageDestinationLossyCompressionQuality: isPNG ? 1.0 : 0.75
] as CFDictionary

CGImageDestinationAddImage(imageDestination, cgImage, destinationProperties)
CGImageDestinationFinalize(imageDestination)

return data as Data

이 부분은 사실 선택적으로 구현하면 되는 부분입니다.

PNG 확장자는 보통 스크린샷과 같이 이미지의 품질이 중요한 이미지들에 사용됩니다.

이러한 이미지의 품질이 손상된다면 이미지에 포함된 텍스트 등의 시인성, 가독성이 중요한 요소들에 영향이 갈 수 있습니다.

PNG 확장자라면 1.0의 손상 없는 압축을, 그 외의 확장자라면 0.75의 압축률로 데이터를 디코딩하였습니다.

PHPicker와의 사용

이전 PHPicker를 사용할 때는 아래와 같은 코드를 사용하였습니다.

itemProvider.loadObject(ofClass: UIImage.self) { image, error in
  // do something
}

이번 게시물에서 사용한 방법은 URL 타입으로 이미지를 받기 때문에 아래와 같이 사용해야 합니다.

itemProvider.loadFileRepresentation(forTypeIdentifier: UTType.image.identifier) { url, error in
  // do something
}