4week_AOS_tech_post_5

문제 1 (Blinking Issue 발생)

이미지 60장을 이용한 스핀 이미지 기능을 구현을 하다 캐싱이 안되는 문제 마주

• Coil ImageLoader를 사용해서 프리 로딩을 구현 했는데 Blinking 현상 발생
• Log에는 이미지 60장 url을 다 불러오는 것을 확인하고 스와이프 했지만 여전히 Blinking 현상 발생
• 프론트엔드 분과 함께 고민한 결과 찍혔던 Log는 이미지 URL 요청만 한 상태이고 실제 이미지를 받아오지는 않은 상태라고 추측 (비동기성을 고려하지 않고 로그 코드를 작성한 문제)

  • 코드 및 실행 결과

    fun preloadImages(urls: List<String>) {
            imageLoader.memoryCache?.clear()
            val currentMemoryUsage = imageLoader.memoryCache?.size?.div((1024 * 1024))
            val maxMemoryCacheSize = imageLoader.memoryCache?.maxSize?.div((1024 * 1024))
    
            Log.d("test", "currentMemoryUsage: ${currentMemoryUsage}")
            Log.d("test", "maxMemoryCacheSize: ${maxMemoryCacheSize}")
    
            CoroutineScope(Dispatchers.IO).launch {
                val successfulLoads: AtomicInteger = AtomicInteger(0)
    
                urls.forEachIndexed { index, url ->
                    val request = ImageRequest.Builder(CaArtApplication.getApplicationContext())
                        .data(url)
                        .build()
    
                    Log.d("test", "Call: ${url}")
                }
            }
        }

• 더 정확한 분석을 하기 위해 프론트엔드 분과 함께 ImageLoader의 내부 코드를 분석하기 시작
• 내부 코드를 확인해보니 ImageLoader 의 excute 함수가 ImageResult 객체를 반환하고 요청 성공시 SuccessResult 타입으로 반환 되는 것을 확인
  • 분석 코드

interface ImageLoader {
          ... 
  suspend fun execute(request: ImageRequest): ImageResult
          ...
 }
        
class ImageRequest() {
          ...
        @JvmDefaultWithCompatibility
            interface Listener {
        			...
        @MainThread
         fun onSuccess(request: ImageRequest, result: SuccessResult) {}
        			...
        }
         ... 
      }

• 해당 반환 타입을 통해 60장 모두 성공적으로 요청해서 이미지 받아오는 것까지 확인

문제 2 (이미지를 모두 받아와서 스와이프를 해도 여전히 발생하는 Blinking Issue)

• 이후 혼자 고민한 결과 캐싱이 잘 안되었다고 추측

• listener를 통해 onSuccess시 metadata.dataSource를 이용해 캐싱이 되었는지 안되었는지 확인

  • 내부 코드

    /**
     * Represents the source that an image was loaded from.
     *
     * @see SourceResult.dataSource
     * @see DrawableResult.dataSource
     */
    enum class DataSource {
    
        /**
         * Represents an [ImageLoader]'s memory cache.
         *
         * This is a special data source as it means the request was
         * short circuited and skipped the full image pipeline.
         */
        MEMORY_CACHE,
    
        /**
         * Represents an in-memory data source (e.g. [Bitmap], [ByteBuffer]).
         */
        MEMORY,
    
        /**
         * Represents a disk-based data source (e.g. [DrawableRes], [File]).
         */
        DISK,
    
        /**
         * Represents a network-based data source (e.g. [HttpUrl]).
         */
        NETWORK
    }

• 디버깅 결과 프리로딩 후 이미지 60장을 재 호출할 때 Memory Cahing과 Disk Caching 둘다 하는 것을 확인할 수 있었고 DiskCaching시 Blinking 현상이 발생한다는 것을 확인할 수 있었음

  • 코드 및 실행 결과

    @BindingAdapter("url", "circleCrop", "radius", "blurRadius", "blurSampling", requireAll = false)
    fun ImageView.setImageSrcWithUrl(
        url: String?,
        isCircleCrop: Boolean = false,
        radius: Float? = null,
        blurRadius: Int? = null,
        blurSampling: Float? = null
    ) {
    
        load(url, ImageUtils.imageLoader) {
    	      ...
            listener(
                onSuccess = { request, metadata ->
                    Log.d("ImageLoading", "Loaded from: ${request.data}")
                    when (metadata.dataSource) {
                        DataSource.MEMORY -> Log.d("ImageLoading", "Loaded from Memory Cache")
                        DataSource.DISK -> Log.d("ImageLoading", "Loaded from Disk Cache")
                        DataSource.NETWORK -> Log.d("ImageLoading", "Loaded from Network")
                        DataSource.MEMORY_CACHE -> Log.d("ImageLoading", "Loaded from MEMORY_CACHE")
                        else -> Log.d("ImageLoading", "Loaded from other")
                    }
                }
            )
    			...
    }

• memoryCache의 maxSizePercent를 통해 캐싱 용량을 전체 메모리의 30%로 설정

문제 3 (메모리 용량을 올려도 조금씩 발생하는 Blinking Issue)

• 여전히 Blinking Issue가 발생하여 메모리 캐싱 용량을 전체 메모리의 50%로 설정

  • 설정 코드

    val imageLoader: ImageLoader by lazy {
            ImageLoader.Builder(CaArtApplication.getApplicationContext())
                .memoryCache {
                    MemoryCache.Builder(CaArtApplication.getApplicationContext())
                        .maxSizePercent(0.5)
                        .build()
                }
                .build()
        }

• 이후 Blinking 현상이 해결 되었지만 max값이 과한 감이 있고 실제로 50%나 필요한지 의문이 들어 실제 캐싱에 필요한 총 메모리 용량을 측정해보기로 결정

• SuceessResult 의 bitmap 용량을 측정해 본 결과 이미지 한장 당 1.86MB가 필요한 것을 확인 가능

  • 측정 코드

    fun preloadImages(urls: List<String>, onImageLoaded: (Int) -> Unit) {
            imageLoader.memoryCache?.clear()
            val currentMemoryUsage = imageLoader.memoryCache?.size?.div((1024 * 1024))
            val maxMemoryCacheSize = imageLoader.memoryCache?.maxSize?.div((1024 * 1024))
    
            Log.d("test", "currentMemoryUsage: ${currentMemoryUsage}")
            Log.d("test", "maxMemoryCacheSize: ${maxMemoryCacheSize}")
    
            CoroutineScope(Dispatchers.IO).launch {
                val successfulLoads: AtomicInteger = AtomicInteger(0)
    
                urls.forEachIndexed { index, url ->
                    val request = ImageRequest.Builder(CaArtApplication.getApplicationContext())
                        .data(url)
                        .build()
    
                    val result = imageLoader.execute(request)
    
                    if (result is SuccessResult) {
                        successfulLoads.incrementAndGet()
                        if (result.drawable is BitmapDrawable) {
                            val bitmapSizeInBytes = (result.drawable as BitmapDrawable).bitmap.byteCount
                            val bitmapSizeInMB = bitmapSizeInBytes.toFloat() / (1024 * 1024)
                            Log.d("test", "Size of the cached image in bytes: $bitmapSizeInMB")
                        }
                    }
    
                    val loadProgress = (successfulLoads.get().toFloat() / urls.size * 100).toInt()
    
                    onImageLoaded(loadProgress)
                }
            }
        }

문제 4 (실제 캐싱할 수 있는 용량을 초과해도 정상 작동하는 문제)

• maxSize를 40%로 설정하면 캐싱해서 담을 수 있는 용량은 76MB 인데 서버에서 받아온 이미지 60장의 총 크기는 약 111MB 이다.

  • 설정 코드 및 디버깅 결과

    val imageLoader: ImageLoader by lazy {
            ImageLoader.Builder(CaArtApplication.getApplicationContext())
                .memoryCache {
                    MemoryCache.Builder(CaArtApplication.getApplicationContext())
                        .maxSizePercent(0.4)
                        .build()
                }
                .build()
        }

    

• 허용하는 캐싱 용량을 넘어서는데 어떻게 캐싱이 되는지 의문이 들어 ImageLoader의 내부 코드를 더 분석해보기로 함

• ImageLoader의 내부에 이미지를 로딩해서 메모리에 캐싱하는 MemoryCache 클래스를 확인할 수 있었음

  • ImageLoader 내부 코드

    interface ImageLoader {
    
        ...
    
        /**
         * An in-memory cache of previously loaded images.
         */
        val memoryCache: MemoryCache?
    
         ...

• MemoryCahce 클래스의 내부를 확인해보면 캐싱하는 이미지들을 Value클래스에서 map을 통해 Bitmap으로 관리하는 것을 확인할 수 있었고 실제 캐싱해서 저장되어 있는 BitMap을 가져오려면 MemoryChace클래스에서 get(key) 메소드를 이용해서 가져올 수 있는 것을 확인

• 이 후 실제 캐싱해서 저장되어 있는 BitMap 크기를 측정해보니 실제로 총 78MB가 필요한 것을 확인할 수 있었음

  • 측정 코드 및 측정 결과

    fun preloadImages(urls: List<String>, onImageLoaded: (Int) -> Unit) {
            imageLoader.memoryCache?.clear()
            val currentMemoryUsage = imageLoader.memoryCache?.size?.div((1024 * 1024))
            val maxMemoryCacheSize = imageLoader.memoryCache?.maxSize?.div((1024 * 1024))
    
            Log.d("test", "currentMemoryUsage: ${currentMemoryUsage}")
            Log.d("test", "maxMemoryCacheSize: ${maxMemoryCacheSize}")
    
            CoroutineScope(Dispatchers.IO).launch {
                val successfulLoads: AtomicInteger = AtomicInteger(0)
    
                urls.forEachIndexed { index, url ->
                    val request = ImageRequest.Builder(CaArtApplication.getApplicationContext())
                        .data(url)
                        .build()
                    
                    val result = imageLoader.execute(request)
    
                    if (result is SuccessResult) {
                        successfulLoads.incrementAndGet()
                    }
    
                    val loadProgress = (successfulLoads.get().toFloat() / urls.size * 100).toInt()
    
                    if(loadProgress >= 100) {
                        imageLoader.memoryCache?.keys?.forEach { key ->
                            Log.d("test", "realSize: ${imageLoader.memoryCache?.get(key)?.bitmap?.byteCount?.div((1024 * 1024))}")
                        }
                    }
    
                    onImageLoaded(loadProgress)
                }
            }
        }

---

결과