[SwiftUI] SDWebImage SwiftUI로 WebP 이미지 보여주기

SwiftUI에서는 기본적으로 WebP 형식의 이미지를 지원하지 않지만,

SDWebImageSwiftUI 라이브러리를 사용하면 WebP 이미지를 쉽게 로드할 수 있습니다.

이 글에서는 SDWebImageSwiftUI를 활용하여 SwiftUI에서 WebP 이미지를 표시하는 방법을 정리하겠습니다.

1. SDWebImageSwiftUI란?

SDWebImageSwiftUI는 SDWebImage의 SwiftUI 버전으로, 네트워크 이미지 로딩 및 캐싱을 쉽게 처리할 수 있도록 도와줍니다. WebP, GIF 등의 애니메이션 이미지도 지원하며, SwiftUI의 View와 자연스럽게 결합할 수 있습니다.

2. 프로젝트에 SDWebImageSwiftUI 추가하기

Swift Package Manager(SPM)를 이용하여 SDWebImageSwiftUI를 프로젝트에 추가할 수 있습니다.

1. Xcode의 프로젝트 설정에서 Package Dependencies로 이동합니다.
2. + 버튼을 클릭하여 새로운 패키지를 추가합니다.
3. 아래 URL을 입력합니다.
4. https://github.com/SDWebImage/SDWebImageSwiftUI
5. 최신 버전을 선택한 후 Add Package 버튼을 클릭합니다.

3. WebP 이미지 로드하기

패키지를 추가한 후, SDWebImageSwiftUI에서 제공하는 WebImage 뷰를 사용하여 WebP 이미지를 로드할 수 있습니다.

기본적인 사용법

import SwiftUI
import SDWebImageSwiftUI

struct ContentView: View {
    let imageURL = "https://example.com/sample.webp"
    
    var body: some View {
        WebImage(url: URL(string: imageURL))
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
            .cornerRadius(10)
    }
}

위 코드에서는 WebImage(url:)을 사용하여 네트워크에서 WebP 이미지를 로드하고, resizable(), scaledToFit()을 사용하여 화면에 맞게 조정하고 있습니다.

로딩 인디케이터 추가

이미지가 로드되는 동안 로딩 인디케이터를 표시할 수도 있습니다.

WebImage(url: URL(string: imageURL))
    .resizable()
    .placeholder {
        ProgressView() // 로딩 중 표시
    }
    .indicator(.activity) // 기본 인디케이터 스타일
    .scaledToFit()
    .frame(width: 200, height: 200)

위 코드에서는 placeholder를 이용하여 로딩 중에 ProgressView()를 표시하고, indicator(.activity)를 추가하여 기본적인 로딩 인디케이터를 적용했습니다.

캐시 적용

SDWebImage는 기본적으로 이미지 캐싱을 제공합니다. options 파라미터를 활용하면 더 다양한 캐싱 옵션을 설정할 수 있습니다.

WebImage(url: URL(string: imageURL), options: [.refreshCached])
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)

여기서 .refreshCached 옵션을 사용하면, 이전에 캐싱된 이미지가 있더라도 새로 다운로드하여 업데이트할 수 있습니다.

4. 애니메이션 WebP 지원하기

WebP 형식에는 정적인 이미지뿐만 아니라 애니메이션 이미지도 포함될 수 있습니다. WebImage는 애니메이션 WebP를 자동으로 지원합니다.

WebImage(url: URL(string: imageURL))
    .resizable()
    .scaledToFit()
    .animation(.easeInOut) // 애니메이션 적용
    .frame(width: 200, height: 200)

위 코드에서 animation(.easeInOut)을 추가하면 애니메이션 효과를 부드럽게 만들 수 있습니다.

5. 로컬 WebP 이미지 사용하기

네트워크에서 다운로드한 WebP뿐만 아니라, 앱 내부의 로컬 WebP 파일도 SDAnimatedImage를 활용하여 표시할 수 있습니다.

import SDWebImage
import SDWebImageSwiftUI

struct LocalWebPView: View {
    var body: some View {
        if let imagePath = Bundle.main.path(forResource: "local_image", ofType: "webp") {
            let imageURL = URL(fileURLWithPath: imagePath)
            WebImage(url: imageURL)
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
        }
    }
}

위 코드에서는 Bundle.main.path(forResource:ofType:)를 사용하여 앱 내부의 WebP 파일을 불러온 후,

WebImage를 통해 화면에 표시합니다.

6. 결론

SDWebImageSwiftUI를 사용하면 SwiftUI에서 WebP 이미지를 간편하게 로드할 수 있습니다.

• 네트워크 WebP 로드: WebImage(url:) 사용
• 로딩 인디케이터 추가: placeholder 및 indicator(.activity) 활용
• 애니메이션 WebP 지원: 기본적으로 지원됨
• 로컬 WebP 이미지 로드: Bundle.main.path(forResource:ofType:) 활용

이제 SwiftUI에서도 WebP 형식의 이미지를 원활하게 사용할 수 있습니다.

프로젝트에서 WebP 이미지가 필요하다면 SDWebImageSwiftUI를 적극 활용해 보시기 바랍니다.