[Android] Glide / 글라이드 라이브러리 / 이미지 로드

 

이번 포스팅에서는 안드로이드 라이브러리 中,

글라이드에 대해서 알아보겠다.

 

 

---

 

Gilde 란?

 

 

공식 GitHub 링크 ↓

 

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

 

공식 GitHub에서는 다음과 같이 설명한다.

 

글라이드는 안드로이드를 위한 빠르고 효율적인 오픈 소스 미디어 관리 및 이미지 로딩 프레임 워크로, 미디어 디코딩, 메모리 및 디스크 캐싱, 리소스 풀링을 간단하고 사용하기 쉬운 인터페이스로 포장한다.

글라이드는 비디오 스틸, 이미지 및 애니메이션 가져오기, 디코딩 및 표시를 지원하며 개발자가 거의 모든 네트워크 스택에 연결할 수 있는 유연한 API가 포함되어 있다.

글라이드의 주요 초점은 모든 종류의 이미지 목록을 가능한 부드럽고 빠르게 스크롤하는 것이다.

 

 

번역본이라 문맥이 조금 어렵게 다가올 수 있다.

 

쉽게 요약하면,

안드로이드에서 이미지를 편리하고 빠르게 불러올 수 있는 라이브러리다.

 

 

이제 글라이드 라이브러리 사용법에 대해 알아보겠다.

 

 

---

 

Glide 사용법

 

 

✅ 그래들 - 모듈에 의존성을 추가해준다.

 

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.16.0'
}

 

위 작성된 버전은 작성일 기준 최신 버전이다.

버전은 언제든지 업데이트될 수 있으니, 공식 사이트에 들어가서 확인하기 바란다.

 

 

---

 

✅ 필요 시, 매니페스트에 인터넷 권한을 추가해준다.

(네트워크 통신으로 이미지를 가져올 때)

 

<uses-permission android:name="android.permission.INTERNET"/>

 

 

---

 

✅ 작성할 기본 문법은 다음과 같다.

 

Glide.with(Context)
.load(이미지)
.into(이미지 넣을 뷰);

 

with(), load(), into() 이렇게 3가지 메서드가 기본적으로 사용된다.

 

위 예제에서 작성하였지만 첨언하자면

with() 메서드에 인자값으로는 Context를 작성해주고,

load() 메서드에는 추가할 이미지를 작성해주고,

into() 메서드에는 ImageView, ImageButton 등 이미지가 들어갈 뷰를 작성해준다.

 

 

여기서 확인할 수 있는 글라이드의 강점 중 하나는

load() 메서드에서 나타난다.

 

Glide - RequestManager 클래스

 

 

기존에는(Glide를 사용하지 않고) 이미지를 띄우려면

다음과 같은 메서드를 사용해야 했다.

ImageView.setImageURI();

ImageView.setImageResorce();

ImageView.setImageBitmap();

ImageView.setImageDrawable();

// 등등

 

위 메서드들은 ImageView 클래스가 보유한 메서드이고,

보다시피 작성할 이미지의 타입을 정확히 해줘야만 한다.

 

 

하지만 글라이드는 load() 메서드 하나만으로 모든 이미지 타입을 작성할 수 있다.

 

어떻게 보면 별 것 아니라고 생각할 수 있지만,

개발자 입장에서 신경써야할 부분을 덜어주는 소중한 메서드다.

 

 

---

 

✅ 예제로 테스트해 보자.

 

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_result);

        // ImageView & Button 참조.
        ImageView imageView = findViewById(R.id.imageView);
        Button button = findViewById(R.id.button);

        // 버튼 클릭 리스너
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            
                // 글라이드
                Glide.with(getApplicationContext())
                      .load("http://{작성자IP}/catImage.jpg")
                      .into(imageView);
            }
        });
}

 

(레이아웃은 각자 입맛대로 생성하기 바란다)

 

간단히 만들어준 ImageView와 Button을 참조하고,

Button을 클릭하면 글라이드로 이미지를 ImageView에 띄워주는 내용이다.

 

 

---

 

✅ 결과는 다음과 같다.

 

 

귀여운 고양이를 확인할 수 있다.

 

 

---

 

추가적인 Glide 메서드

 

Glide에서 강조하는 부분은 이미지를 '빠르고 부드럽게' 가져온다는 점이다.

 

여기서 '빠르게' 는 기술적인 부분이라 치고,

주목해야 할 것은 '부드럽게' 라는 부분이다.

 

 

 

앱 자체적으로 보유한 이미지 파일이나

기기에 저장되어 있는 이미지 파일을 로드하는 것은 비교적 간단하다.

 

하지만 네트워크 통신으로 이미지 파일을 로드할 때는 고려해야 할 사항이 많아진다.

 

- 이미지를 로드하는 시간이 길어질 때
- 가져올 이미지 경로가 잘못되었을 때
- 이미지 로딩을 실패했을 때 등

 

 

글라이드는 위와 같은 케이스에 대한 예방책을 제시해준다.

 

 Glide.with(getApplicationContext())
     .load("로드할 이미지")
     .placeholder("로딩 중 보여줄 이미지")
     .fallback("로드할 이미지 URL이 null 일 때 보여줄 이미지")
     .error("이미지 로드가 실패했을 때 보여줄 이미지")
     .into(imageView);

 

위에서 작성해 놓은 대로 로딩중 일 때, 로드 실패했을 때 등

사용자 입장을 고려한 케이스를 처리할 수 있는 메서드가 구현되어 있다.

 

 

---

 

✅ placeholder() 적용 ↓

 

 

위 영상에서는 인터넷 속도가 빨라서 로딩 시간이 매우 짧지만,

여러 인터넷 환경을 고려한다면 로딩이 길어질 수도 있다.

 

로딩중 일 때의 이미지를 처리하지 않는다면

그 몇 초간 사용자는 당황할 수 밖에 없을 것이다.

 

 

---

 

✅ fallback() & error()  적용 ↓

 

 

 

load() 메서드에 null 값을 넣고 로드하면

fallback() 메서드로 호출된 이미지가 로드된다.

 

fallback() 메서드를 굳이 작성하지 않고

error() 메서드만 작성하여도 동일하게 보여진다.

 

error() 메서드는 fallback() 메서드가 호출될 상황을 포함한다고 볼 수 있다.

조금 더 세부적으로 구분하고 싶을 때 2개 모두 사용하면 될 것 같다.

 

 

 

결론적으로, 위 3가지 메서드는 '대체 이미지로 처리하는 방식'을 사용했다.

그렇기에 사용자의 입장에서는 비교적 '부드럽게' 로드된다고 느낄 수 있다.

 

 

---

 

✅ gif(움짤) 파일 로드하기 - asGif()

 

gif 파일을 가져올 때는 asGif() 메서드를 작성해준다.

위 메서드를 작성해주면 리소스를 GifDrawable 타입으로 가져온다.

 

 Glide.with(getApplicationContext())
     .asGif()
     .load("로드할 gif 이미지")
     .placeholder("로딩 중 보여줄 이미지")
     .into(imageView);

 

결과는 다음과 같다.

 

 

위에서 사용했던 gif 파일을 로드했다.

 

 

사실, gif 파일이면 asGif()

그렇지 않으면 asDrawable() 메서드를 사용하는데,

 

asDrawable() 메서드는 굳이 작성해주지 않아도 된다.

 

Glide - ReqeustManager 클래스

 

위에서 보다시피, load() 메서드는 기본적으로

asDrawable().load() 값을 리턴하기 때문이다.

 

 

---

 

✅ 디스크에 캐싱 처리

 

 Glide.with(getApplicationContext())
     .load("로드할 이미지")
     .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
     .into(imageView);

 

diskCacheStrategy() 메서드를 사용하여

디스크 캐시 정책을 지정할 수 있다.

 

 

● 디스크에 캐싱 처리를 하여 얻을 수 있는 이점

이미 가져온 적이 있는 리소스를 여러번 가져오려고 할 때
캐시에 저장된 리소스를 재사용하여 자원 낭비를 줄일 수 있다.

 

 

기본 값은 위에 작성한 DiskCacheStrategy.AUTOMATIC 이다.

 

AUTOMATIC은 디스크에 있는 리소스를 가공하는 비용과

새로 리소스를 가져오는 비용을 비교하여 더 효율적인 방법을 자동으로 선택해준다.

 

AUTOMATIC은 기본 값이기 때문에 따로 작성해줄 필요는 없다.

 

 

● 기본 값 이외의 캐시 정책은 다음과 같다.

- DiskCacheStrategy.DATA
원본 데이터를 디코딩하지 않고 그대로 캐시.

- DiskCacheStrategy.ALL
원본 데이터와 디코딩한 리소스 모두 사용.

- DiskCacheStrategy.RESOURCE
원본 데이터를 디코딩하고 캐시.

- DiskCacheStrategy.NONE
디스크 캐시를 사용하지 않음.

 

 

자신의 상황에 맞게끔 캐싱 정책을 지정하는 걸 추천한다.

 

 

 

---

 

 

 

이번 포스팅에서는 Glide 라이브러리에 대해 간단히 알아보았다.

 

아직 Glide를 사용해 보지 않은 사람들에게 적극 추천한다.

 

 

다양한 기능과 뛰어난 성능은 이미 Glide 가 공식적으로 자부하고 있다.

개인적으로 다른 건 제쳐두고, 간단하고 편리한 사용법이 제일 끌렸던 것 같다.