Coil 이미지 URL 바꾸기

라이브러리에서 이미지 요청 변조하기

Mar 1. 2024

Coil 라이브러리를 이용하여 외부 url 의 이미지를 불러올 때, 특정 조건인 경우 url 을 변경하여 다른 이미지를 불러오는 방법을 알아보자.

Coil 동작 방식

Coil 라이브러리는 이미지 로딩을 위한 다양한 편의 기능을 제공하여, 각 기능을 개발자가 변경하여 원하는 기능을 구현할 수 있도록 설계 되어 있다.

이미지 로딩과 관련된 부분은 Coil 의 ImageLoader 에서 담당하며, ImageLoader 를 custom 하여 캐싱정책등 다양한 설정을 변경할 수 있다.

네트워크 요청을 담당하는 HttpClient 설정도 ImageLoader 에서 관리하며, 네트워크 요청은 널리 이용되는 OkHttp 를 사용하고 있기 때문에 우리는 OkHttp 의 네트워크 요청부를 변경하여 url 을 바꿔치기를 구현할 수 있다.

https://picsum.photos/id/300/600 요청이 들어오면, Coil 내부에서 https://picsum.photos/id/200/600 로 요청을 변경하는 코드를 만들어 보자.

우선 OkHttp 에서 network 요청을 변경하기 위해서 사용 할 Interceptor 를 작성한다.

샘플 코드는 요청 url 의 host 가 picsum.photos 인 경우 요청 url을 https://picsum.photos/id/200/600 로 바꾸고 있다. url 을 변경하려는 목적에 맞게 if 문을 구현하면 된다.

이제, 이 Interceptor 가 적용된 OkHttpClient 를 Coil ImageLoader 에 적용 하고, ImageLoader 를 사용하여 이미지를 요청 한다.

이미지를 요청하는 코드에서는 https://picsum.photos/id/300/600 를 요청하지만

실제 화면에 보여지는 이미지는 https://picsum.photos/id/200/600 가 보여지게 된다.

외부 이미지가 아닌 다른 리소르를 불러올 때 에도, 특정 조건에 요청을 다르게 변조할 수 있다.

이미지를 요청할 때 data : Any?에 이미지 소스를 전달 하는데, 이때 Coil 이 처리할 수 있는 유형은 아래와 같다.

String (treated as a Uri)

Uri (android.resource, content, file, http, and https schemes)

HttpUrl

File

DrawableRes

Drawable

Bitmap

ByteArray

ByteBuffer

그리고, 위 유형들에 대해서 ImageLoader 의 ComponentRegistry에 mapper 를 넣어줄 수 있다.

Glide 도 Coil 과 유사한 구조로 되어 있고, 네트워크 요청 역시 OkHttp를 사용하고 있기 때문에 위에 설명한 network 요청 url 를 바꾸는 Interceptor 를 넣어주는 방법도 가능하고,

Tip1 에 설명한 것처럼 요청 유형을 보고 변경을 하는 방법 모두 사용이 가능 하다.

keyword

Kein

hello