Jsoup과 Glide 4.0을 활용한 HTML 페이지 내 이미지 파싱 및 리스트 표시 방법

안드로이드 개발을 위한 무료 이미지 추출 프로젝트에 대해 설명합니다. 이전에 모회사의 면접과제로 진행했던 프로젝트인데, 임의의 사이트에서 이미지를 추출하는 것이었습니다만, 저작권 문제를 우려하여 무료 이미지 사이트인 Pixabay의 사이트에서 진행하였습니다.

소스 구성도

프로젝트의 주요 흐름

Pixabay의 무료 이미지를 추출하기 위해 이용하는 안드로이ด 앱의 주요 작동 흐름은 다음과 같습니다:

1. MainActivity : 리스트를 구성하고, Callback 인터페이스를 구현한 후 Networker에게 Jsoup 통신을 요청합니다.
2. Networker : 받은 요청을 Jsoup으로 처리하고, 이미지 정보를 파싱하여 ImageListModel의 리스트를 구성합니다. 이후 요청시 전달받은 Callback(MainActivity)으로 리스트를 전달합니다.
3. MainActivity : 리스트 데이터를 전달 받아서 갱신합니다.

Pixabay 사이트에서 이미지 정보 추출

Pixabay 사이트에서 필요한 이미지 정보는 크롬 개발자 모드에서 img 태그의 정보들을 파악 후 Jsoup을 사용하여 파싱하였습니다.

Networker 코드 예시

화면 회전에 대응하는 옵션 구현

이 프로젝트에서는 화면 회전에 대응하는 옵션을 구현했습니다. 이 기능은 AndroidManifest 파일에서 activity 옵션에 'android:configChanges="screenSize|orientation"'를 추가하여 스크린 사이즈나 방향 변경 시 자동으로 처리하도록 설정하였습니다.

Glide를 이용한 이미지 로딩

이미지 로딩은 Glide 라이브러리를 사용했습니다. Glide 3.0과 4.0의 사용 방식이 다르므로, 여기서는 placeholder와 error 이미지 표시를 적용해 보았습니다.

Glide 4.0 placeholder와 error 이미지 추가 예시

RecyclerView에서 onClickListener 설정

또한, RecyclerView에서 onClickListener를 onBindViewHolder에서 설정하는 대신 viewHolder 생성 시 리스너를 설정하였습니다.

Pixabay 사이트의 lazy loading

Pixabay 사이트에서는 이미지 로딩 최적화를 위해 lazy loading을 사용합니다. 이 때문에 중간부터 이미지가 잘 불러오다가 오류가 발생할 수 있습니다. 이 문제는 예외 처리하지 않고 그대로 두었습니다.

예제소스 다운로드

아래 링크를 클릭하면, 본 프로젝트의 예제 소스 코드를 다운로드 받을 수 있습니다:

예제소스 다운로드