AS-IS

• ImagePicker 통해 이미지 선택해 content-uri 받아왔음
• content-uri 는 파일을 읽을 수 있는 uri로, UI에 이미지를 보여주는 것은 가능함. 그러나 서버 전송을 위한 이미지 File 자체를 얻을 수 없음. 대신 이미지 권한을 요구하지 않고 갤러리 접근이 가능한 장점이 있음.
• 따라서 uri 기반 File 객체를 생성해 서버로 전송함

PROBLEM

• uri 기반 생성된 File 객체는 앱의 캐시 메모리에 저장됨 (context.cachedDir)
• 만약 이미지 파일이 너무 커서 생성된 File 객체의 크기가 앱에 할당된 메모리를 초과하면 메모리 크래시 가능성이 있음 🤯

TO-BE

1. File 객체를 생성하기 전, ImageDecoder 사용해 uri에 bitmap으로 접근 > 원본 이미지 크기를 알아낼 수 있음

   val source = ImageDecoder.createSource(context.contentResolver, uri)
   val bitmap = ImageDecoder.decodeBitmap(source) { decoder, **info**, _ ->
       // 디코더 설정
       decoder.allocator = ImageDecoder.ALLOCATOR_SOFTWARE
       decoder.isMutableRequired = true
   
       ...
   }
   

   info에 크기 정보가 담겨 있음!

2. 원본 이미지 크기를 기반으로 자체적으로 정한 한도 내의 크기가 될 수 있도록 계산해 target 설정

   val source = ImageDecoder.createSource(context.contentResolver, uri)
   val bitmap = ImageDecoder.decodeBitmap(source) { decoder, info, _ ->
       // 디코더 설정
       decoder.allocator = ImageDecoder.ALLOCATOR_SOFTWARE
       decoder.isMutableRequired = true
   
       // 리사이징 크기 설정
       **val targetSize = calculateTargetSize(info.size.width, info.size.height)
       decoder.setTargetSize(targetSize.width, targetSize.height)**
   }
   
   ...
   
   private fun calculateTargetSize(
       width: Int,
       height: Int,
   ): Size {
       if (width <= MAX_WIDTH && height <= MAX_HEIGHT) return Size(width, height)
   
       val ratio = max(width.toFloat() / MAX_WIDTH, height.toFloat() / MAX_HEIGHT)
   
       return Size((width / ratio).toInt(), (height / ratio).toInt())
   }
   
   companion object {
       private const val MAX_WIDTH = 1024
       private const val MAX_HEIGHT = 1024
       private const val QUALITY = 80
   }
   

   상수 한도를 1024로 설정하고 (1024*1024 최대로 채워도 1MB 이하)

   calculateTargetSize 원본 이미지 크기와 MAX 계산해, 원본 이미지의 비율 유지하며 한도 내 크기가 되도록 목표 사이즈 계산

   decoder.setTargetSize 설정한 크기로 이미지 압축할 수 있도록 디코더에 targetSize 옵션 넣어줌

3. 리사이징된 이미지로 File 객체 생성

   // bitmap을 리사이징(압축)한 jpeg byteArray 생성
   val compressedImage = ByteArrayOutputStream().use { stream ->
       bitmap.compress(Bitmap.CompressFormat.JPEG, QUALITY, stream)
       bitmap.recycle()
       stream.toByteArray()
   }
   
   // 임시 파일 객체 생성
   val tempFile = File(
       dir,
       "${UUID.randomUUID()}.$IMAGE_EXTENSION",
   )
   
   // 파일 객채에 리사이징 byteArray 덮어씌워 최종 이미지 파일 생성
   tempFile.outputStream().use { stream ->
       stream.write(compressedImage)
   }
   
   return tempFile
   

   이미지 파일은 JPEG로 생성하며, quality 값은 80 고정

   • 왜 JPEG? : PNG는 무손실로 이미지를 저장하기 위한 포맷으로, 분철글을 업로드하거나 프로필 사진을 업로드함에 있어 PNG를 사용할 이유가 없습니다. 원본을 보전할 필요가 없는 이미지를 처리하기 위한 전략으로 약간의 손실을 감소하고 JPEG만 사용해도 괜찮습니다. 사용자가 화질 저하를 거의 체감하지 못하며 효과적으로 이미지 용량을 줄입니다.
   • Qaulity? : 이미지 사이즈와는 무관하게 각 픽셀값과 관련된 개념입니다. 이미지는 배열로 변환되며, 배열에 저장되는 각 픽셀값은 양자화 과정을 거치며 디코딩됩니다. 양자화를 강하게 할 수록 픽셀값이 뭉쳐지듯 변형되어 이미지가 뭉게져 보이고, 거의 안 할 수록 원본 픽셀값이 살아 디테일함이 유지됩니다. Qaulity란 양자화 정도를 조정할 수 있는 값입니다.
   • 왜 80? : Qaulity는 0~100의 범위를 가지며, 100에 가까울 수록 원본에 가까운 픽셀값을 유지합니다. 80~90으로 설정할 경우 한 번 양자화를 거치는 것으로는 육안으로 체감할 수 없는 수준으로만 화질이 저하되며, 용량을 조금 줄일 수 있습니다. 따라서 80이 적절한 값이라 판단했습니다.

4. 서버 업로드 완료된다면 더 이상 파일 객체는 필요하지 않음. 따라서 삭제 로직 제공

   fun clearDirectory() {
       val directory = getDirectory()
       directory.listFiles()?.forEach { it.delete() }
   }
   

변경사항 정리

Data Layer

FileLocalDataSource 추가

위 설명한 이미지 최적화 로직은 FileLocalDataSource 가 제공합니다.