[SwiftUI] SwiftUI에서 Kingfisher로 비동기 이미지 불러오기

SwiftUI에서 네트워크 이미지를 로드할 때 기본적으로 제공되는 AsyncImage를 사용할 수도 있지만, 더 강력한 기능을 원한다면 Kingfisher 라이브러리를 사용하는 것이 좋습니다. Kingfisher는 캐싱, 플레이스홀더, 에러 처리 등 다양한 기능을 제공하여 더욱 효율적으로 이미지를 로드할 수 있도록 돕습니다.

이번 글에서는 Kingfisher를 활용하여 SwiftUI에서 비동기적으로 이미지를 불러오는 방법을 예제 코드와 함께 살펴보겠습니다.

1. Kingfisher 설치하기

Kingfisher는 Swift Package Manager(SPM)를 통해 손쉽게 설치할 수 있습니다.

Swift Package Manager(SPM) 설치 방법

1. Xcode에서 프로젝트를 엽니다.
2. File > Add Packages... 를 선택합니다.
3. 아래 URL을 입력합니다.
4. https://github.com/onevcat/Kingfisher
5. 최신 버전을 선택하고 Add Package 버튼을 눌러 추가합니다.

2. 기본적인 Kingfisher 사용법

Kingfisher에서 KFImage 뷰를 사용하면 간단하게 네트워크 이미지를 로드할 수 있습니다.

import SwiftUI
import Kingfisher

struct ContentView: View {
    var body: some View {
        KFImage(URL(string: "https://example.com/sample.jpg"))
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
}

위 코드를 실행하면 KFImage가 URL에서 이미지를 비동기적으로 불러오고, resizable()과 scaledToFit()을 적용하여 크기를 조정합니다.

3. 플레이스홀더 및 에러 처리

네트워크 상태가 좋지 않거나 이미지 로드에 실패할 경우를 대비해 플레이스홀더 및 에러 이미지를 설정할 수 있습니다.

struct ContentView: View {
    var body: some View {
        KFImage(URL(string: "https://example.com/sample.jpg"))
            .resizable()
            .placeholder {
                ProgressView() // 로딩 중일 때 표시할 뷰
            }
            .onFailure { error in
                print("이미지 로드 실패: \(error.localizedDescription)")
            }
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
}

위 코드에서는 이미지가 로딩 중일 때 ProgressView()를 표시하고, 만약 이미지 로드가 실패하면 콘솔에 에러 메시지를 출력하도록 설정하였습니다.

4. 캐시 설정

Kingfisher는 기본적으로 이미지를 캐싱하여 동일한 이미지를 다시 요청할 경우 빠르게 로드할 수 있도록 지원합니다. 캐시를 설정하는 방법도 간단합니다.

let cache = ImageCache.default
cache.memoryStorage.config.totalCostLimit = 50 * 1024 * 1024 // 50MB 제한 설정
cache.diskStorage.config.sizeLimit = 100 * 1024 * 1024 // 100MB 제한 설정

위 코드를 적용하면 메모리 캐시와 디스크 캐시의 최대 크기를 설정할 수 있습니다.

5. 애니메이션 효과 적용하기

이미지가 로드될 때 애니메이션을 추가하면 더욱 부드러운 사용자 경험을 제공할 수 있습니다.

struct ContentView: View {
    var body: some View {
        KFImage(URL(string: "https://example.com/sample.jpg"))
            .resizable()
            .fade(duration: 0.3) // 페이드 인 효과 적용
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
}

위 코드에서는 .fade(duration: 0.3)을 사용하여 이미지가 0.3초 동안 부드럽게 나타나도록 설정하였습니다.

6. 캐시된 이미지 삭제하기

앱에서 캐시된 이미지를 삭제하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

ImageCache.default.clearMemoryCache() // 메모리 캐시 삭제
ImageCache.default.clearDiskCache() // 디스크 캐시 삭제

위 코드를 실행하면 캐시된 이미지가 모두 삭제되므로 새롭게 이미지를 불러오게 됩니다.

7. Kingfisher를 활용한 리스트 구현

Kingfisher를 활용하여 List에서 여러 개의 이미지를 로드하는 방법도 알아보겠습니다.

struct ContentView: View {
    let imageUrls = [
        "https://example.com/image1.jpg",
        "https://example.com/image2.jpg",
        "https://example.com/image3.jpg"
    ]

    var body: some View {
        List(imageUrls, id: \ .self) { imageUrl in
            KFImage(URL(string: imageUrl))
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
        }
    }
}

위 코드를 실행하면 List에 여러 개의 이미지가 원형으로 표시됩니다.

 

이번 글에서는 Kingfisher를 사용하여 SwiftUI에서 네트워크 이미지를 비동기적으로 불러오는 방법을 살펴보았습니다.