[Android] 우여곡절 개발기 : Bitmap 이미지 업로드가 느릴때

안녕하세요.

이번 시간에는 안드로이드 스튜디오에서 여러 개의 이미지를 빠르게 로드 하는 방법에 대해서 다뤄보고자 합니다.

 

 

아래의 내용들은 부족한 제 지식을 바탕으로 이미지 업로드를 어떻게 빠르게 할 것인지를 고민해 본 과정이기 때문에

오류와 부족한 점이 많을 수 있으니 참고만 해주세요!!

 

 

 

 

 

문제의 발단과 배경

 

 

안드로이드에서 이미지를 업로드하고, 게시글로 보여주는 게시판을 만드려고 ListView에 ImageView들을 넣어주고 있었는데,

중간부터 문제가 생기기 시작했습니다.

이미지가 하나만 있을 때에는 괜찮았는데, 서버에서 이미지를 여러개 받아오기 시작하니 점점 느려지기 시작했습니다.

이미지만 느리게 올라가나... 싶더니 터치도 안먹고 렉도 심하게 걸리는 모습을 보였습니다.

그래서 뭔가 문제가 생긴 것 같아 로그를 확인하니 아래와 같은 글을 볼 수 있었습니다.

 

 

대강 내용은 main 쓰레드에서 일을 너무 많이 하고 있어서 앱이 느려진다는 것이었습니다.

즉, 이미지를 가져오는 동작을 주 쓰레드에서 하고 있기 때문에 기존에 주 쓰레드가 처리해야 하는 터치 등도 잘 먹지 않는 것이 문제였습니다.

 

 

 

 

 

AsynTask를 바꿔서!

 

그러나 이미 AsyncTask를 사용하여 서버에서 이미지를 받아오고 있었기 때문에 왜 main thread가 바쁘게 돌아간다는 건지 전혀 이해를 못 하고 있던 와중 아래의 글을 보게 되었습니다.

 

 

okky.kr/article/469713

OKKY | The application may be doing too much work on its main thread 오류 질문입니다

 

글을 잘 읽어보니 AsyncTask를 이용하여 쓰레드를 돌린 것 까지는 좋았는데,

 

image = task.execute().get();

 

이 코드가 문제임을 알 수 있었습니다.

task에서 무언가를 가져오는 것은 주 쓰레드에서 하기 때문에 주 쓰레드에서 저 get() 을 계속 기다려주고 있는 것이 문제인 것 같았습니다.

 

 

그래서 아래의 블로그를 참고해서 .get을 사용하지 않고 ImageView를 인자로 넘겨서

ImageView에 Bitmap을 전달하는 과정까지 AsyncTask에서 할 수 있도록 함수를 조금 변형 해 주었습니다.

 

 

ismydream.tistory.com/130

안드로이드 비동기 처리하기 AsyncTask

 

 

 

 

속도는 개선됐지만 ...?

 

정확히 말하면 "속도가 빨라졌다" 보다는 "쓰레드를 돌리기 때문에 모든 이미지가 다 ListView의 ImageView에 들어올 때까지 메인 쓰레드가 기다려주지 않는다"는 표현이 더 정확한 것 같습니다.

그래서 이미지가 아직 다 로드되지 않았어도 다른 버튼도 잘 눌리는 것 까지느 좋았지만 ..

이미지 하나하나를 로드 하는 것 자체의 속도가 빨라진 것은 아니기 때문에 그냥 체감상 빨라질 뿐이었습니다.

 

그래서 하나씩 로그를 찍어보니 Bitmap을 디코딩 하는 과정이 이미지를 느리게 뜨게 하는 가장 큰 원인이었습니다.

끝없는 구글링을 한 결과, Glide라는 이미지 로딩 라이브러리를 찾게 되었습니다.

 

 

왜 이 글을 이제서야 봤을까??

www.masterqna.com/android/74548/%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%B7%B0%EC%97%90%EC%84%9C-%EC%9B%B9-url-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EB%B0%9B%EC%95%84%EC%84%9C-%EB%BF%8C%EB%A6%B4%EB%95%8C-%EC%86%8D%EB%8F%84%EA%B4%80%EB%A0%A8

안드로이드 - 리스트뷰에서 웹 URL 이미지를 받아서 뿌릴때 속도관련 - 안드로이드 Q&A

 

 

 

 

결론 

 

 

결론적으로 말하자면 이미지 로딩 라이브러리 사용하는 것이 매우매우매우 정답이었습니다.

AsyncTask를 이용해서 이미지를 빠르게 로드하기 위한 시도는 많이 공부가 되었지만 처음에 이런게 있다는 걸 봤을 때는 허무했습니다....

몇 시간동안 한 고민이 몇 분만에 끝이 난 이 기분....

그래도 헤매면서 얻어간 건 많으니 좋은 경험 했다고 생각합니다.

 

 

저는 이미지 로딩을 위해서 Glide라는 라이브러리를 사용하였습니다.

사용방법은 아래의 블로그에서 간단하고 쉽게 설명해주셨습니다.

 

 

velog.io/@rjsdnqkr1/Glide-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-yuk1fmwzo1

Glide 라이브러리 사용하기

 

 

Dependency에 적어준 다음에 블로그 안에서 공유해주신 코드 중에서 자신에게 필요한 것을 찾아 사용하시면 됩니다 :)

혹시나 저처럼 어려움을 겪으신 분들을 위해 +  우여곡절 기록 겸 글을 남겨봅니다.