(android) bumptech - Glide

 이 글의 주제는 Glide라는 이미지 로딩 관련 라이브러리입니다. 이 라이브러리는 Bump technologies에서 개발한 라이브러리로 기존에는 오픈소스가 아니었지만, 현재 구글이 이 회사를 인수한 이후 오픈소스 라이브러리로 유지하고 있는 것이 특징입니다. 다른 라이브러리인 Picasso와 마찬가지로 이미지 로딩 관련 기능을 제공합니다.

---

https://github.com/bumptech/glide

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

 공식 github 문서 링크입니다.

 이 라이브러리는 이미지 로딩을 좀 더 간편하게 해주는 라이브러리로, 구글에서 bump라는 회사를 인수한 후에 공개한 라이브러리입니다. 가장 큰 특징은 로컬 이미지 뿐 아니라, 네트워크 상의 이미지도 간단하게 불러올 수 있다는 점이고, 또한 gif 파일까지 로드 지원이 가능합니다.

repositories {
  google()
  mavenCentral()
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.13.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'
}

 이 라이브러리는 위와 같이 dependencies를 추가하는 것으로 사용이 가능합니다. 현재 최신 버전(2022년 4월 17일)은 4.13.0입니다.

 보통 이미지 로딩 라이브러리를 사용하는 것은 로컬에 있는 이미지를 가져오기 위해서는 아닐 것입니다. 물론 로컬 이미지를 가져오는 부분에서도 충분히 간편함을 가져다주기 때문에 사용하는 것이 훨씬 이점이 많기는 하지만 오픈소스 라이브러리의 가장 큰 단점인 언제 업데이트가 멈출 지 모른다는 리스크를 감수하고서 쓸만할 정도로 이슈가 있지는 않기 마련이죠. 그렇기 때문에 가장 큰 사용 목적은 특정 서버에서 불러와야 하는 이미지를 로드하는 것이 아닌가 싶습니다. 기본적으로 서버와의 통신은 불안정함이 가미되기 때문에 이미지를 100% 불러온다고 장담할 수 없습니다. 또한 통신 과정에서 어떤 문제 때문에 이미지가 제대로 불러와지지 않는지, 혹은 깨지는 지 등등 파악해야 할 부분이 많죠.

// For a simple view:
@Override public void onCreate(Bundle savedInstanceState) {
  ...
  ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

  Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}

// For a simple image list:
@Override public View getView(int position, View recycled, ViewGroup container) {
  final ImageView myImageView;
  if (recycled == null) {
    myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
  } else {
    myImageView = (ImageView) recycled;
  }

  String url = myUrls.get(position);

  Glide
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

  return myImageView;
}

 위 코드는 공식 문서의 예제 입니다.

 먼저 with는 context를 불러올 view를 파라미터로 받습니다. 아래에는 제가 사용하는 코드를 첨부했는데 같이 보면서 얘기하겠습니다.

Glide.with(binding.root)
     .load(item.file.signedUrl)
     .diskCacheStrategy(DiskCacheStrategy.ALL)
     .fitCenter()
     .into(binding.imgView)

 제 코드에서는 binding.root가 있습니다. 이 코드는 viewHolder내 bind 메소드에 위치하고 있는데, binding.root는 ViewHolder item의 root view를 의미합니다. 이처럼 context가 존재하는 view라면 꼭 activity나 fragment가 아니더라도 Glide의 with를 이용할 수 있습니다.

 load는 이미지를 url을 통해 가져오는 메소드입니다. 여기의 url은 로컬 파일의 url은 물론, 서버에 있는 이미지 파일도 로딩이 가능합니다.(물론 여기서 에러가 나면 앱이 터지지는 않고 이미지가 로드되지 않습니다.) 이 load를 하기 전에, asGif, asBitmap, asDrawable등의 메소드를 먼저 사용하면 불러올 이미지의 타입을 지정할 수 있습니다. asGif를 사용하지 않고 load 하게 되도 글라이드에서 자동으로 load한 리소스를 확인해 적절하게 변경해주나, gif가 아닌 경우 발생하지 않게 하고 싶거나 직접접으로 gif를 다루고 싶은 경우 등에 사용할 수 있습니다. 이는 asBitmap, asDrawable 모두 포함입니다.

 

diskCacheStrategy는 glide가 이미지를 불러올 때 캐싱 전략을 사용할지에 대한 메소드인데요. 파라미터로 받는 값은 아래 네가지로 분류할 수 있습니다. 또한 .skipMemoryCache(true)를 이용해서 캐싱을 하지 않을 수 있습니다. 기본값은 캐싱을 하는 형태로 작동됩니다.

• DiskCacheStrategy.NONE : 디스크 캐싱을 하지 않는다.
• DiskCacheStrategy.SOURCE : 원본 이미지만 캐싱
• DiskCacheStrategy.RESULT : 변형된 이미지만 캐싱
• DiskCacheStrategy.ALL : 모든 이미지를 캐싱(기본)

 centerCrop과 fitCenter는 이미지 리사이징을 위해 사용하는 메소드입니다. centerCrop은 실제 이미지가 뷰의 크기보다 클 때, 이미지의 중심과 뷰의 중심을 맞춰 나머지를 자르는 리사이징 방법이고, fitCenter는 이미지의 중심과 뷰 중심을 기준으로 둘을 동일한 사이즈로 변경하는 리사이징 방법입니다.

 placeholder는 원본 이미지를 불러오기 전에 빈 시간동안 보여질 이미지를 파라미터로 받는 메소드입니다. error로 이미지 로딩 실패시 보여지는 이미지도 설정할 수 있습니다.

 또한 RequestListener를 통해 이미지 로딩 실패 혹은 성공을 했을 때 특정 행동을 취하게 할 수 있습니다.

RequestListener<Drawable> {
    // Image Load 실패 시 CallBack
    override fun onLoadFailed(
        e: GlideException?,
        model: Any?,
        target: Target<Drawable>?,
        isFirstResource: Boolean
        ): Boolean { return false }

    // Image Load 후 CallBack
    override fun onResourceReady(
        resource: Drawable?,
        model: Any?,
        target: Target<Drawable>?,
        dataSource: DataSource?,
        isFirstResource: Boolean
        ): Boolean { return false }
}

 그 다음은 코드에는 보이지 않지만 thubnail(0.1f)를 통해 썸네일을 불러오는 기능도 존재합니다. 0.1f를 파라미터로 넣는 경우 10%의 화질을 가진 썸네일을 불러올 수 있습니다.

 다른 메소드로는 animate가 있는데, 이 메소드는 xml로 작성한 애니메이션 또는 class로 작성된 애니메이션을 적용할 수 있는 메소드입니다.

마지막으로 into는 파라미터로 받은 view에 load한 이미지를 자동으로 채워넣는 것을 의미하는데, 기존에 나왔던 옵션들을 포함합니다. 이때 info 외에 submit을 사용해 glide로 로드한 파일을 직접 변수에 할당할 수 있습니다. submit()을 마지막에 사용하면 return type이 FutureTarget으로 받아오며 여기서 get을 하는 경우 원하는 형태의 데이터를 받아올 수 있게 됩니다. 이때 반환하는 데이터의 형은 asFile, asBitmap 등으로 조절할 수 있으며 Target 클래스 내부의 value 값을 통해 사용할 수 있습니다.

---

 이미지를 쉽게 로드할 수 있게 해주는 라이브러리로 기본적인 기능들은 대부분 제공해주어 이미지 로딩에 대한 부담감을 크게 덜어준 라이브러리가 아닌가 싶습니다. 더욱이 구글에서 공개한 라이브러리이기 때문에 안드로이드와의 호환성은 더 좋아질 거라 예상할 수 있을 텐데요.(물론 구글의 이때까지의 발자취를 보면 갑자기 지원을 중단할 수도 있을 것 같습니다.) 아무쪼록 이미지의 처리에 대한 부담감이 있을 때 발견하면 좋은 라이브러리가 아닌가 싶습니다.