[SwiftUI] - Firebase의 Storage가 overflow 되어 앱이 크래시 되는 문제 해결

프로필 이미지를 업데이트 할 때, Storage가 오버플로우 되어 앱이 크래시 되는 현상을 해결하고자 한다.

💥 문제 원인

Task {
	await userInfoStore.uploadPhoto(editImage.pngData())
}

기존에는 사용자의 이미지를 png 파일로 Storage에 저장하게끔 설정하였다.

그러나 png 파일이 축적될수록 Storage를 사용할 수 있는 용량에 금방 다다르게 되어, 중간에 앱이 크래시 되는 문제가 발생.

✅ 문제 해결

문제를 해결하는 방법의 최후 수단인 '결제'를 통한 Storage 용량 추가 방법이 있었으나, 이미지의 포맷을 변경하는 방식으로 접근하였다.

기본적으로 가장 보편적으로 사용되는 이미지 파일의 확장자인 png와 jpg의 차이를 먼저 알아보았다.

PNG (Portable Network Graphics)

• 압축 방식: 비손실 압축 (무손실 압축, Lossless Compression)

• 파일 크기: JPG 보다 큼

• 화질: 원본이 훼손되지 않는 품질을 유지

• 용도: 로고, 아이콘, UI 요소, 텍스트가 많은 이미지

• 장점

  • 투명 배경이 가능

  • 선명한 가장자리 표현에 유리 (텍스트, 도형 등)

JPG (JPEG, Joint Photographic Experts Group)

• 압축 방식: 손실 압축 (Lossy Compression)

• 파일 크기: 상대적으로 작음

• 화질: 압축률이 높을수록 화질 저하 발생 (사람 눈에 거슬리지 않을 정도)

• 용도: 사진, 웹사이트 이미지, SNS 이미지 등

• 장점

  • 사진에 적합 (자연스러운 색상 그라데이션 표현)

  • 저장 용량 절약

사용자는 프로필 이미지를 일반적으로 '사진'으로 지정하는 경우가 보편적이다 보니,
이러한 관점에서 보았을때 PNG보다는 JPG가 더 적절하다고 판단.

UIImage의 공식 문서를 통해, 이미지 객체를 jpg 형식의 Data로 변환하는 방법을 알 수 있음.

jpegData(compressionQuality)의 파라미터인 compressionQuality는 JPG의 품질 값을 조정하는 값으로, 아래와 같이 설정이 가능.

• 값이 0.0인 경우: 가장 높은 압축률 (즉, 가장 낮은 화질)

• 값이 1.0인 경우: 가장 낮은 압축률 (즉, 가장 높은 화질)

Task {
//	pngData()를 jpegData()로 변환
await userInfoStore.uploadPhoto(editImage.jpegData(compressionQuality: 0.5))
}

compressionQuality의 값을 0.5로 설정.

pngData()와 jpegData(compressionQuality: 0.5)를 사용했을 때,
Image Picker에서 제공하는 기본 이미지의 바이트 값을 알아봄.

• pngData()
  28060981 Byte, 11314250 Byte, 7063988 Byte, 11227530 Byte, 24888535 Byte, 18752666 Byte

• jpegData(compressionQuality: 0.5)
  2051228 Byte, 710070 Byte, 500606 Byte, 1060244 Byte, 835768 Byte, 692560 Byte

평균적으로 약 93% 감소 됨을 알 수 있었다.
이를 통해 overflow 문제를 해결하며, 앱 크래시 현상을 방지할 수 있었다.