Coil로 이미지 로드하기
Coil로 네트워크 이미지를 효율적으로 로드하고 캐시합니다. 변환(CircleCrop, RoundedCorners)을 적용하고 자리 표시자와 오류를 처리합니다.
Coil로 이미지 로드하기은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 6개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 6개의 강의가 포함되어 있습니다.
이미지 라이브러리가 필요한 이유
인터넷에서 이미지를 로드하는 작업은 생각보다 복잡합니다.
- 백그라운드 스레드에서 다운로드
- 디스크와 메모리에 캐시
- 효율적으로 디코딩(OOM 오류 방지)
- 로드하는 동안 플레이스홀더 표시
- 오류 처리(잘못된 링크, 네트워크 없음)
Coil은 이 모든 작업을 한 줄의 코드로 처리합니다.
Coil이란 무엇일까요?
Coil(Coroutine Image Loader)은 Kotlin과 코루틴을 위해 만들어진 최신 Android 이미지 로딩 라이브러리입니다.
- 가벼움 — Glide나 Picasso보다 작습니다.
- Kotlin 우선 설계 및 코루틴 지원
- 수명 주기 인식 — 로드를 자동으로 취소합니다.
- GIF, SVG, 동영상 프레임 지원
Coil 추가
app/build.gradle에 의존성을 추가합니다.
// app/build.gradle
dependencies {
implementation 'io.coil-kt:coil:2.6.0'
}
// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />기본 이미지 로드
한 줄로 ImageView에 이미지를 로드합니다.
import coil.load
// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")
// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
placeholder(R.drawable.ic_placeholder)
error(R.drawable.ic_error)
crossfade(true) // smooth fade-in animation
}RecyclerView에서 로드하기
ViewHolder가 재활용될 때 Coil이 대기 중인 로드를 자동으로 취소하므로 잘못된 행에 잘못된 이미지가 표시되는 것을 방지합니다.
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val post = getItem(position)
holder.tvTitle.text = post.title
holder.ivCover.load(post.imageUrl) {
placeholder(R.drawable.ic_image_placeholder)
error(R.drawable.ic_broken_image)
crossfade(300) // 300ms fade-in
size(200, 200) // resize to 200×200 pixels
}
}변환
로드한 이미지에 변환을 적용합니다.
CircleCropTransformation()— 원형 이미지로 변환합니다(아바타에 적합합니다).RoundedCornersTransformation(radius)— 모서리를 둥글게 만듭니다.BlurTransformation(context, radius)— 흐림 효과를 적용합니다.
변환 예제
원형 사용자 아바타를 표시합니다.
import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation
// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
transformations(CircleCropTransformation())
placeholder(R.drawable.ic_default_avatar)
error(R.drawable.ic_default_avatar)
}
// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
transformations(RoundedCornersTransformation(16f))
crossfade(true)
}캐싱 동작
Coil은 두 가지 수준에서 이미지를 자동으로 캐시합니다.
- 메모리 캐시 — 가장 빠르며 앱이 종료되면 삭제됩니다.
- 디스크 캐시 — 앱을 다시 실행해도 유지되며 기본 크기는 250 MB입니다.
같은 URL을 두 번 로드하면 두 번째 로드는 캐시에서 가져오므로 네트워크 요청이 발생하지 않습니다.
다양한 소스에서 로드하기
Coil은 URL뿐만 아니라 다양한 소스에서 이미지를 로드할 수 있습니다.
// From a URL (most common)
imageView.load("https://example.com/image.jpg")
// From a URI (e.g., gallery image)
imageView.load(uri)
// From a drawable resource
imageView.load(R.drawable.my_image)
// From a File
imageView.load(File("/sdcard/photo.jpg"))
// From a bitmap
imageView.load(bitmap)빠른 확인
사용자 프로필 사진을 원형으로 표시하려면 어떤 Coil 변환을 사용해야 합니까?
복습: Coil로 이미지 로드하기
이제 네트워크 이미지를 효율적으로 표시할 수 있습니다.
- Gradle 의존성 하나로 Coil 추가
imageView.load(url) { }— 한 줄로 로드- 자리 표시자 및 오류 대체 이미지
- 변환: CircleCrop, RoundedCorners, Blur
- 메모리와 디스크 수준에서 자동 캐싱
- URL, URI, 파일, 드로어블, 비트맵 지원
다음 내용에서는 오류를 우아하게 처리하고 사용자에게 유용한 피드백을 제공하는 방법을 알아봅니다.
자주 묻는 질문
“Coil로 이미지 로드하기” 강의는 무료인가요?
네 — “Coil로 이미지 로드하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 6개의 강의가 포함되어 있습니다.
“Coil로 이미지 로드하기”에서 뭘 배우나요?
Coil로 네트워크 이미지를 효율적으로 로드하고 캐시합니다. 변환(CircleCrop, RoundedCorners)을 적용하고 자리 표시자와 오류를 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 6개 중 2번째 강의입니다.
“Coil로 이미지 로드하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.