Android/다양한 기능들(Library)

[Jetpack Compose] Coil - 이미지 로딩 라이브러리

chattymin 2023. 7. 31. 11:49
728x90
반응형

코일이 뭘까?

Coil은 Kotlin Coroutines로 만들어진 Android 백엔드 이미지 로딩 라이브러리로, Cououtine Image Loader의 약자이다. 

 

근데 여기서 궁금한게 하나 생길 수 있다. 안드로이드에서 이미지를 로딩하는 라이브러리로 Glide라는 검증된 라이브러리가 있는데 왜 Coil을 쓸까??

 

공식문서의 장점을 보자.

  • 빠르다: Coil은 메모리와 디스크의 캐싱, 메모리의 이미지 다운 샘플링, Bitmap 재사용, 일시정지/취소의 자동화 등등 수 많은 최적화 작업을 수행합니다.
  • 가볍다: Coil은 최대 2000개의 method들을 APK에 추가합니다(이미 OkHttp와 Coroutines을 사용중인 앱에 한하여), 이는 Picasso 비슷한 수준이며 Glide와 Fresco보다는 적습니다.
  • 사용하기 쉽다: Coil API는 심플함과 최소한의 boilerplate를 위하여 Kotlin의 기능을 활용합니다.
  • 현대적이다: Coil Kotlin 우선이며 Coroutines, OkHttp, Okio, AndroidX Lifecycles등의 최신 라이브러리를 사용합니다.

오... 되게 좋아보인다. 그럼 공식문서에는 없는 단점은 뭘까?

 

사실 난 잘 모르겠다. 불편함도 딱히 없고 편하다. 그나마 따져 보자면 아직 기업은 Glide를 선호한다 정도?

취업을 해야하는 내 입장에선 단점일수도 있다 ㅋㅋㅋ

 

 

그러면 어떻게 쓸까?

implementation("io.coil-kt:coil:2.4.0")

원래는 이런 내용을 app수준의 build.gradle에 추가해줘야 한다. 하지만 난 Jetpack Compose를 공부하다보니 약간 다르다.

 

implementation("io.coil-kt:coil-compose:2.4.0")

이걸 추가해주자.

 

이제 이미지를 불러오고 싶을때는 Image가 아닌 AsyncImage를 호출해주면 된다.

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = null,
)

 

모양을 자른다거나, 블러처리를 한다거나, 음영을 넣는 등 정말 많은 사용방법이 있지만, 나는 그중에서 painter를 활용한 방식을 설명해보려고 한다. 물론 이게 최선의 방법은 아닐 수 있다. 하지만 이런 방법도 있구나 정도로 보면 좋을것 같다.

// url은 제가 지정한 String값 변수입니다.
// R.drawable.placeholer와 // R.drawable.error 또한 제 폴더에 있는 image입니다.
val painter =
            rememberAsyncImagePainter(
                ImageRequest.Builder(LocalContext.current).data(data = url)
                    .apply(block = fun ImageRequest.Builder.() {
                        placeholder(R.drawable.placeholder)
                        error(R.drawable.error)
                    }).build()
            )
            
Image(
        painter = painter,
        contentDescription = "Image"
    )

이런식으로 사용한다. 

 

이 방식의 장점이 뭘까? 그리고 왜 굳이 painter를 복잡하게 설정하는걸까?

코드를 보면 나오듯 painter하나에 이미지값이 여러개 들어가고있다는게 보일거다. 경우에 따른 이미지를 띄울 수 있게 해주는게 가장 큰 장점이다.

 

정상적으로 로드됐다면 url이미지를, 로딩중에는 R.drawable.placeholder 이미지를, 에러가 발생했을때는 R.drawable.error 이미지를 출력시켜준다. 다들 그런거 본적있지 않나? 사진 많은 페이지들어갔을때 모자이크같은 이미지가 떠있다가 시간 지나면 정상적인 이미지가 뜨는거. 그걸 설정해주는거다.

 

이것 외에도 기능들이 되게 많다. 아래 공식 링크를 넣어둘테니 한번 보고 적용하는 것도 좋을 것 같다.

 

 

정말 가볍고 깔끔하고 Kotlin기반이라 편하다. 현재 업데이트도 활발하고 미래 가능성이 충분해 보인다.

하지만 취업하면 뭐쓸것 같냐고 물어보면 Glide다... 아무래도 아직 활발하게 퍼지지 않았고, 사용 기업들을 별로 보지 못했다.

그래도 앞으로의 발전 가능성이 보이다 보니 Glide를 적용한 프로젝트를 해봤다면 Coil을 적용한 프로젝트도 한번정도는 해보면 좋을 것 같다. 

 

https://coil-kt.github.io/coil/

https://github.com/coil-kt

728x90
반응형