[TIL] Kotlin 이미지 로딩 라이브러리 Glide, Coil

-1- Glide

Glide란?

• 안정성과 성능 면에서 우수한 이미지 로딩 라이브러리로, 앱 전반적인 이미지 관리를 할 수 있는 라이브러리이다.

 

 

Glide를 사용하는 이유

• 비동기적인 이미지 로딩
  • Glide는 백그라운드 Thread 에서 비동기적으로 이미지를 로딩하므로 UI Thread가 차단되거나 멈추는 현상을 방지한다. 이로인해 반응성과 성능이 향상 된다.
• 다양한 방식의 이미지 로드
  • Glide는 원격 서버, 로컬 파일, 리소스 등 다양한 소스에서 이미지를 로드할 수 있다. 이를 통해 네트워크에서 이미지를 다운로드하거나 디바이스의 저장소에서 이미지를 가져올 수 있다.
• 메모리 및 디스크 캐싱
  • Glide는 메모리와 디스크에 캐시하여 동일한 URL또는 리소스에 대해 중복된 요청을 방지한다. 이를 통해 반복적인 네트워크 요청을 줄여 성능을 최적화 할 수 있다.
• 이미지 변환 및 처리 가능
  • Glide는 이미지를 변환하고 처리하기 위해 .override, centerCrop() 등 회전, 필터링 다양한 옵션을 제공한다.

 

Glide 사용하기

build.gradle - dependencies추가하기

• 버전확인 https://github.com/bumptech/glide

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

 

 

Image로드 하기

class MainAcitivity : AppCompatActivity() {


	override fun onCreate() {
    	...
        
        ...
        
		Glide.with(context)
    		.load("이미지 URL 또는 리소스 ID")
    		.diskCacheStrategy(DiskCacheStrategy.ALL) // 디스크 캐싱 전략 설정
    		.override(200, 200) // 이미지 크기 조정
    		.centerCrop() // 이미지 크롭
    		.placeholder(R.drawable.placeholder) // 로딩 중에 표시할 이미지
    		.error(R.drawable.error) // 에러 발생 시 표시할 이미지
    		.into(imageView 객체)
      	  
	}        
}

 

 

갤러리 앱에서 사용자가 선택한 사진 출력

val intent = Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
intent.type = "image/*"
getGallery.launch(intent)

//갤러리 인텐트
private val getGallery = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
	if (it.resultCode == RESULT_OK) {
		Glide.with(this)
			.load(it.data!!.data)
			.into(imageView 객체)
	}
}

 

-2- Coil

Coil이란

• Coil은 Coroutines Image Loader로 Coroutiones으로 만들어 Android 백앤드 이미지 로딩 라이브러리이다. 다른 이미지 로딩 라이브러리에 비해 간단해서 사용하기 쉽고 코드가 간결하게 작성될 수 있으며 성능을 최적화하는 데 중점을 둔 라이브러리로 앱을 비교적 가볍게 할 수 있다.

 

Coil 사용하기

build.gradle - dependencies 추가

• 버전 확인 https://coil-kt.github.io/coil

dependencies {
  implementation("io.coil-kt:coil:2.4.0")
}

 

 

MainActivity.kt -이미지 로드하기

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.imageView.load(R.drawable.test_img){
//            transformations(CircleCropTransformation()) // 이미지 원모양으로 자르기
            crossfade(5000) // 이미지 로딩 완료 시 Fade 효과
            size(300,200) // 이미지 크기 조정
            error(R.drawable.ic_launcher_foreground) // 로딩 실패 시 표시할 이미지
            transformations(RoundedCornersTransformation(5f,5f,5f,5f)) // 각각 코너 모서리 라운드 지정


        }
    }
}

 

URL 이미지 로드할 때 오류가 날 경우

• 웹 URL을 얻어와서 이미지를 띄우기 위해서는 권한을 얻어야 한다 
• AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application
    ...
    ...
    >
</manifest>

 

 

fade효과 적용된 모습

 

 

 

-3- Glide과 Coil 비교

https://techblog.lotteon.com/glide-vs-coil-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%9F%89-%EB%B9%84%EA%B5%90-cb93cffb9fc0

Glide vs. Coil 메모리 사용량 비교

 

 

 

 

 

 

---

 

[오늘 복습한 내용]

1. 딱히 없는 것 같다. 

 

---

[오류,에러 등등]

1. missing INTERNET permission? 오류

FATAL EXCEPTION: OkHttp Dispatcher Process: com.example.coil,

PID: 5481 java.lang.SecurityException: Permission denied (missing INTERNET permission?)

 

→ Manifest에 권한 추가. 

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

주말에는 사용자로부터 권한을 받아오는 걸 배워봐야 겠다.

 

 

---

[느낀 점]

1. 내가 지금 이거 배우고 있을때 인가... 싶다 

 

2. 근데 궁금한 걸 어떡하지

 

3. 알아두면 (언젠가)쓸모있는 신비한 이미지로더라이브러리

 

 

---

[Reference]

// Glide

https://github.com/bumptech/glide

https://velog.io/@ywown/kotlin-Glide-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC

 

// Coil

https://notepad96.tistory.com/177

https://coil-kt.github.io/coil/

https://square.github.io/okhttp/

 

// Coil, Glide 비교

https://techblog.lotteon.com/glide-vs-coil-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%9F%89-%EB%B9%84%EA%B5%90-cb93cffb9fc0