[Android / Kotlin] Compose에서 Coil 라이브러리 활용하여 이미지, GIF 로딩

이미지 로딩 라이브러리에는 다양한 종류가 있습니다. Picasso, Glide, Coil.. 대표적으로 이 3가지가 많이 사용됩니다.

Coil 특징 몇 가지를 정리해 보자면

1. 주로 사용되는 3가지 라이브러리 중 이미지 로딩 속도가 가장 빠릅니다.

2. Coroutine 기반으로 비동기 이미지 로딩을 처리합니다. 메모리 성능이 향상되고 누수 확률도 줄어듭니다.

3. Glide보다 속도가 빠르면서도 Glide를 많이 참조했기 때문에 캐싱, 오류 처리, 이미지 변환 등의 기능 제공에도 문제가 없습니다.

 

오늘은 간단하게 라이브러리 추가 및 컴포즈에서 이미지를 로딩하는 방법까지 확인해 보겠습니다.

먼저 Gradle에 의존성 추가를 진행합니다. 

implementation "io.coil-kt:coil-compose:2.1.0"
implementation "io.coil-kt:coil-gif:2.1.0" //gif 로딩 필요할 시에 추가

 

컴포즈에서 rememberAsyncImagePainter() 함수를 활용하여 실제 이미지 요청 모델을 구성해 줍니다.
해당 과정을 통해 ImageRequest를 비동기적으로 실행하고 결과를 렌더링하는 AsyncImagePainter를 반환합니다.

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(context).data(item.imgUrl)
        .placeholder(R.drawable.blank_img).build()
)

위 과정에서 data에는 drawable을 넣거나 이미지 url을 넣어주시면 되겠습니다.

placeholder Drawable도 설정해 줍니다.

 

그리고 반환된 AsyncImagePainter를 Image 컴포저블을 통해 렌더링 해주시면 됩니다.

 Image(
    painter = painter,
    contentDescription = "Item Image",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(60.dp)
        .clip(RoundedCornerShape(8.dp))
)

 

사용 방법이 매우 간단하고.. 렌더링 속도와 효율성에 중점을 두는 컴포즈 UI에서는 계속 저는 Coil을 사용하고 있습니다.

다음은 gif를 렌더링 하는 방법입니다.

 

Gif를 활용 가능하도록 변환 처리해 줄 이미지 로더를 구성해줘야 합니다.
해당 로더는 ImageDecoder라는 GIF, 애니메이션 WebP 및 애니메이션 HEIF를 디코딩하는 디코더를 가져야 합니다.

단 API 28 이상부터 사용 가능이라 그 아래는 GIF만을 지원하는 GifDecoder를 사용해야 합니다.

val imageLoader = ImageLoader.Builder(context)
    .components {
        if (SDK_INT >= 28) {
            add(ImageDecoderDecoder.Factory())
        } else {
            add(GifDecoder.Factory())
        }
    }.build()

 

이제 이미지 때와 똑같이 파일 자체 또는 파일 url을 넣어서 AsyncImagePainter를 만들고, Image 컴포저블에 사용하면 정상적으로 GIF 파일 또한 재생되는 것을 확인하실 수 있습니다.

Image(
    painter = rememberAsyncImagePainter(
        ImageRequest.Builder(context).data(data = videoFile).apply(
            block = { size(Size.ORIGINAL) }).build(), imageLoader = imageLoader
    ),
    contentDescription = null,
    modifier = Modifier
        .fillMaxSize()
        .clip(RoundedCornerShape(12.dp)),
    contentScale = ContentScale.Crop
)