[kotlin] Jetpack Compose에서 웹 이미지 로드 및 표시하기

Jetpack Compose는 Android 앱을 만들고 UI를 빌드하기 위한 모던한 툴킷입니다. 이미지 로딩은 대부분의 앱에서 중요한 기능 중 하나이며, 웹에서 이미지를 로드하여 Compose UI에서 표시하는 방법에 대해 알아보겠습니다.

Coil 라이브러리 추가

이미지 로딩을 위해 Coil 라이브러리를 사용할 수 있습니다. 먼저 build.gradle 파일에 다음 의존성을 추가합니다.

implementation("io.coil-kt:coil-compose:1.3.2")

의존성을 추가한 후에는 앱을 동기화하여 라이브러리를 가져옵니다.

웹 이미지 로드 및 표시

이제 Jetpack Compose에서 Coil을 사용하여 웹 이미지를 로드하고 표시하는 방법을 알아봅시다.

import androidx.compose.runtime.Composable
import dev.chrisbanes.accompanist.coil.CoilImage

@Composable
fun WebImage(url: String) {
    CoilImage(data = url, contentDescription = "Web Image", fadeIn = true)
}

위 코드는 CoilImage 컴포저를 사용하여 웹 이미지를 표시합니다. url은 이미지의 URL이며, contentDescription은 이미지에 대한 설명입니다. fadeIn은 이미지가 로드될 때 페이드 인 애니메이션을 사용할지 여부를 나타냅니다.

요약

Jetpack Compose에서 웹 이미지를 로드하고 표시하는 방법을 배웠습니다. Coil 라이브러리를 사용하여 간단하고 효율적으로 이미지를 로드하고 Compose UI에서 표시할 수 있습니다.

참고 자료