Android

안드로이드 앱에서 Picasso와 Glide를 사용해 이미지 표시하기

calvin.kim 2019. 5. 12. 17:44

안드로이드앱을 만들면서 가장 많이 마주치는 경우가 아마도 이미지를 표시하는 경우일 것이다. BMP, JPG, GIF등 다양한 포맷의 이미지를 표시하는 것은 시각적인 부분이 중요한 안드로이드 앱 개발에서 빼놓을 수 없는 부분이기 때문이다. PC용 운영체제들의 경우에는 OS 자체적으로 이러한 이미지들을 화면에 표시하는 방법을 제공하는 경우가 많았는데, 안드로이드에서도 기본적인 이미지 로딩 방법을 제공하고 있다. 그러나 앱 개발자가 기본 기능만을 활용하기에는 실제 앱개발 시나리오에 맞추어 추가적으로 구현해 주어야 할 코드의 양이 많아진다. 오래 전부터 이미지 표시에 대한 수요가 있어왔기에, 안드로이드 세계에는 여러 개의 이미지 로딩 라이브러리가 존재한다.

 

이번에는 안드로이드의 이미지 라이브러리들 중 가장 유명세를 떨치고 있는 Picasso와 Glide를 활용한 이미지 표시 방법을 살펴보려 한다. 두 라이브러리 모두 로컬 저장소에 파일 형태로 저장된 이미지와 인터넷에 존재하는 이미지들을 쉬운 방법으로 로딩하고 표시하는 기능을 핵심 기능으로 제공하고 있다. 안드로이드 스튜디오에서 이 라이브러리들을 사용하는 것도 매우 간단하다. 먼저 Gradle을 이용해 연동하고, 이미지 표시가 필요한 시점에 호출하면 끝이다.

 

Picasso를 활용한 이미지 표시

 

Picasso

 피카소 홈 바로가기

 

 

설치

Picasso를 설치하기 위해서는 안드로이드 스튜디오에서 프로젝트 내의 Gradle Scripts밑의 build.gradle (Module: app) 파일을 수정하면 된다. build.gradle(Project: XXXXX)와 혼동될 수 있으니 주의하자.

 

dependencies {
    ...
    implementation 'com.squareup.picasso:picasso:2.71828'
    ...
}

 

2.71828은 사용하려는 Picasso의 버전이다. 피카소 가이드는 이 자리에 최신 버전을 쓰라고 권장한다.

 

사용

Picasso를 사용하기 위해서는 Picasso 오브젝트의 load()를 불러 이미지를 로드하고, into()로 원하는 ImageView에 로드된 이미지를 표시하는 방식을 따른다. 실제 코드 예제는 다음과 같다.

// Select the ImageViews to display the images on
ImageView imageViewRes = (ImageView) findViewById(R.id.view_picasso_resource);
ImageView imageViewFile = (ImageView) findViewById(R.id.view_picasso_file);
ImageView imageViewUrl = (ImageView) findViewById(R.id.view_picasso_url);

// Display a jpg iamge from the project resource
Picasso.get().load(R.drawable.picasso_test).into(imageViewRes);

// Display a png image from the specified file
Picasso.get().load("file:///android_asset/picasso_test.png").into(imageViewFile);

// Display a jpg image from the given url
Picasso.get().load("http://android.example.com/picasso_test.jpg").into(imageViewUrl);

 

위 예제에서 첫 번째 부분은 프로젝트에 포함된 리소스에서 JPG 이미지를 로드하여 imageViewRes에 표시한다. 두 번째는 파일시스템의 지정된 위치에서 PNG 이미지를 로드하여 imageViewFile에 표시한다. 마지막 세 번째는 지정된 웹 주소에서 JPG 이미지를 로드하여 imageViewUrl에 표시한다.

 

 

Glide를 활용한 이미지 표시

 

Glide

글라이드 홈 바로가기

 

설치

Glide의 설치 역시 안드로이드 스튜디오에서 프로젝트 내의 Gradle Scripts밑의 build.gradle (Module: app) 파일을 수정하는 것으로 간단히 끝낼 수 있다.

 

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

 

위 예제는 Glide 4.9.0을 쓰는 예제이며 원하는 버전의 번호로 글라이드를 사용할 수 있다.

 

사용

Glide역시 Picasso와 유사한 형식으로 쉽게 사용할 수 있다. 한 가지 다른 점은 Picasso에서는 Picasso객체의 get()을 사용하여 객체를 얻었지만, Glide의 경우는 with()를 사용한다는 점이다. 실제 사용 예제 코드는 다음과 같다.

 

// Select the ImageViews to display glide images on
ImageView imageViewRes = (ImageView) findViewById(R.id.view_glide_resource);
ImageView imageViewUrl = (ImageView) findViewById(R.id.view_glide_url);

// Display a png image from the the project resource
Glide.with(this).load(R.drawable.glide_test).into(imageViewRes);

// Display a jpg image from the given url
Glide.with(this).load("android.example.com/glide_test.jpg").into(imageViewUrl);

 

위 예제에서 글라이드의 첫 호출을 with() 메서드로 인자로는 ImageView가 들어있는 액티비티의 컨텍스트를 전달하면 된다. 첫 번째 예제는 안드로이드 프로젝트 리소스 내의 png파일을 로드하여 표시한다. 두 번째 예제는 주어진 웹 주소의 jpg 이미지를 다운로드하여 표시한다.

 

Glide는 GIF 파일을 가장 손쉽게 로드하여 사용할 수 있다는 장점이 있다. GIF 파일을 사용할 때 주의할 점은 GIF 파일은 반드시 리소스 디렉토리 내부의 raw 디렉토리에 넣어야 한다는 점이다. 일반 PNG 이미지처럼 drawable에 넣을 경우 애니메이션이 표시되지 않을 수 있으니 주의해야 한다. 다음은 raw 폴더에 있는 sample.gif 를 재생하는 예제 코드이다. raw 폴더의 파일을 읽어올 때에는 확장자명을 생략하므로 R.raw.sample로 접근한다.

 

// Select the ImageView to display gif image
ImageView imageViewGif = (ImageView) findViewById(R.id.view_glide_gif);

// Show sample.gif in the raw directory on imageViewGif
Glide.with(this).load(R.raw.sample).into(imageViewGif);

 

 

Picasso vs Glide

 

두 라이브러리는 거의 유사한 형태의 사용성을 지니고 있으며 제공하는 기능들 역시 비슷비슷하다. 개인적으로 Java 라이브러리의 성능을 비교하는 것이 큰 의미는 없다고 생각하지만, 실제로 많이 사용되는 두 라이브러리기에 많은 사람들이 비교, 분석을 진행하고는 한다. 다음은 두 라이브러리의 비교 항목들 중 유의미하다고 생각되는 부분이다.

 

비교항목 Picasso Glide
기능 갯수 Glide와 비교해서 기능 항목이 적은 편이다. Picasso에 비해 많은 기능을 가지고 있다.
캐싱 방법 인터넷에서 받은 이미지를 사이즈 변환 없이 저장 인터넷에서 받은 이미지를 사이즈를 줄여 저장
메모리 사용량 원본 이미지 저장으로 상대적으로 많은 메모리 사용 저장된 이미지 사이즈가 상대적으로 작아 적은 메모리 사용
로딩 시간

인터넷 이미지 로딩 빠름 (사이즈 무변환)

캐시 이미지 로딩 느림

인터넷에서 이미지 로딩 느림 (사이즈 변환)

캐시 이미지 로딩 빠름
이미지 품질 Glide에 비해 비트 수가 높아 고품질 이미지 표현 Picasso에 비해 비트 수가 낮아 이미지 품질 떨어짐
GIF 지원 GIF 지원 불가 GIF 지원

 

결국 가장 큰 차이는 Picasso의 이미지 저장 포맷이 더 고화질이라는 점과 Glide는 GIF 포맷을 지원한다는 점이다. 화면에 고화질의 사진을 표현해야 하는 경우라면 Picasso를 쓰는게 유리하고, GIF 이미지를 포함해 로딩된 후에 여러 번 보여줄 이미지를 표현하는 경우라면 Glide가 유리하다. 앱 크기에 민감한 경우가 아니라면 두 라이브러리들을 다 한꺼번에 포함하여 각자 필요한 경우에 호출하는 것도 방법이다.

 

개인적으로 볼 때는 Glide를 선호한다. 캐시 이미지 비트수가 떨어지기는 하지만, 스마트폰에서 이미지 표시에 영향을 줄 정도는 아닌데다가, 필요하다면 설정값으로 늘릴 수 있다. 또한 안드로이드 이미지 라이브러리들 중 GIF를 지원하는 거의 유일한 라이브러리이기에 Glide를 쓰는 경우도 많이 있다.

 

 

Fin.

반응형