SDWebImage: 것이 뭐인지, 핵심 개념 및 UIImageView

SDWebImage란 뭐인가?

SDWebImage는 Apple 플랫폼 (iOS, macOS, tvOS, watchOS)에서 비동기 이미지 로딩을 위한 라이브러리입니다. UIImageView에 대한 sd_setImage 메서드를 제공하여 코드 한 줄로 모든 소스에서 이미지를 로드, 캐시 및 표시합니다.

이 라이브러리는 진행적 로딩(바이트가 수신됨에 따라 이미지가 나타남), 애니메이션 이미지(GIF, APNG), 변환(동그래기, 자르기, 워터마크), 그리고 사용자 정의 디코더를 지원합니다. GitHub 통계에 따르면, SDWebImage는 25,000개 이상의 스타를 보유하고 있으며 Twitter, Pinterest 및 Instagram을 포함한 주요 애플리케이션에서 사용됩니다.

아키텍처는 컴포넌트 체인으로 구축되어 있습니다: Coder(디코딩), Cache(저장), Loader(네트워크) 및 Transformer(처리). 각 컴포넌트는 교체 가능하여 특정 프로젝트 요구사항에 맞게 라이브러리를 적응시킬 수 있습니다.

SDWebImage 작동 방식: 매니저와 캐시

SDWebImageManager는 로딩 프로세스를 조율하는 중앙 컴포넌트입니다. URL을 수신하고, 캐시를 확인하고, 데이터를 로드하고, UIImage로 디코딩한 다음 ImageView 또는 Completion Handler에 전달합니다. 매니저는 공유 싱글톤을 통해 작동하며, 애플리케이션 어디서나 접근할 수 있습니다.

로딩 프로세스

매니저는 메모리 캐시(UIImage가 있는 NSDictionary), 그다음으로 디스크 캐시(파일 시스템)를 순차적으로 확인합니다. 캐시 미스시 NSURLSession을 통해 네트워크 요청이 이루어집니다. 로딩 후 데이터는 디코딩되고, 변환을 거쳐 둘 모두의 캐시에 저장됩니다. 전체 프로세스는 백그라운드 큐에서 실행되며, 결과는 메인 큐에 전달됩니다.

• 메모리 캐시 — O(1) 루업, 구성 가능한 메모리 제한으로 UIImage 저장
• 디스크 캐시 — 파일 시스템에서 읽기, 압축된 데이터 저장
• NSURLSession — HTTP/2 지원 및 구성 가능한 시간초과를 통한 로딩

UIImageView 카테고리

UIImageView+WebCache는 sd_setImage 메서드를 추가하는 Objective-C 카테고리입니다(Swift에서 접근 가능). 이 메서드는 URL, placeholder, 옵션(SDWebImageOptions) 및 완료 블록을 수신합니다. 카테고리는 sd_cancelCurrentImageLoad 메커니즘을 통해 테이블 셀이 재사용될 때 이전 요청을 자동으로 취소합니다.

SDWebImage의 기본 클래스

SDWebImage 아키텍처는 명확한 잡임 영역을 가진 여러 모듈로 나뉘어 있습니다. 각 클래스는 로딩부터 표시까지 한 가지 작업을 해결합니다.

SDWebImageManager

SDWebImageManager는 모든 이미지 작업의 퍼사드입니다. ImageCache(SDImageCache) 및 ImageLoader(SDWebImageDownloader)에 대한 참조를 포함합니다. SDWebImageManagerDelegate를 통해 로딩을 가로채기하고 URL 또는 동작을 변경할 수 있습니다.

SDImageCache

SDImageCache는 두 수준 캐시(메모리 + 디스크)로 고유한 네임스페이스로 초기화됩니다. 메모리 캐시는 구성 가능한 제한(기본값은 시스템 메모리 경고 전)으로 UIImage를 저장합니다. 디스크 캐시는 Library/Caches 디렉토리에 구성 가능한 보관 기간(기본 7일)으로 데이터를 저장합니다.

SDWebImageDownloader

SDWebImageDownloader는 NSURLSession 기반의 HTTP 클라이언트로 헤더, 시간초과 및 재시도를 지원합니다. 다운로더는 동일한 요청을 하나의 네트워크 호출로 중복 제거하고 결과를 모든 구독자에게 분배합니다.

SDWebImage 캐시링 아키텍처

SDWebImage는 결정적인 확인 순서를 가진 두 수준 캐시링을 구현합니다: 먼저 메모리, 그다음 디스크. 캐시 키는 쿠리 파라미터가 없는 절대 이미지 URL 또는 그 MD5 해시입니다.

메모리 경고를 수신하면, iOS는 UIApplicationDidReceiveMemoryWarningNotification을 통해 SDImageCache에 알리고, 그 후 메모리 캐시가 완전히 삭제됩니다. 디스크 캐시는 TTL 또는 제한 초과시 삭제되며, 파일은 최근 접근 날짜순으로 정렬됩니다.

수동 캐시 관리를 위해 다음 메서드를 사용할 수 있습니다: clearMemory, clearDisk, calculateSize. SDWebImageCacheMemoryOnly 또는 SDWebImageAvoidAutoSetImage 옵션을 사용하여 특정 요청에 대해 캐시링을 비활성화할 수 있습니다.

Swift에서 SDWebImage 사용 예제

SDWebImage는 간단한 UIImageView 카테고리부터 사용자 정의 처리를 지원하는 고급 매니저까지 여러 인터페이스를 제공합니다.

UIImageView에서 기본 로딩

sd_setImage는 UIImageView에 이미지를 로드하는 기본 메서드입니다. URL, placeholder 및 Options와 Context를 통한 옵션 파라미터를 수신합니다. 모든 Completion Handler는 메인 스레드에서 실행됩니다.

let imageView = UIImageView()
imageView.sd_setImage(
    with: URL(string: "https://example.com/photo.jpg"),
    placeholderImage: UIImage(named: "placeholder"),
    options: [.progressiveLoad, .retryFailed],
    context: [.imageThumbnailPixelSize : CGSize(width: 300, height: 300)]
)

이 메서드는 SDWebImageToken(작업)을 반환하며 필요시 취소할 수 있습니다. 내부적으로 sd_setImage는 SDWebImageManager.load를 호출하여 자동 이미지 설정을 위해 ImageView를 Target으로 전달합니다.

사용자 정의 변환으로 로딩

SDWebImage는 Transformer—단일 메서드 transformedImage를 가진 프로토콜을 지원합니다. 내장 변환에는 원, 동그래기 모서리, 색상 필터 오버레이 및 크기 변경이 있습니다. 변환은 && 연산자를 사용하여 결합할 수 있습니다.

let transformer = SDImageResizingTransformer(
    size: CGSize(width: 200, height: 200),
    scaleMode: .aspectFill
)
let roundedTransformer = SDImageRoundCornerTransformer(
    radius: 16,
    corners: .allCorners,
    borderWidth: 0
)
imageView.sd_setImage(
    with: url,
    placeholderImage: placeholder,
    context: [.imageTransformer : transformer && roundedTransformer]
)

SwiftUI와 함께 사용

라이브러리는 WebImage—placeholder, 진행 표시기 및 오류 처리를 지원하는 SwiftUI용 View 컴포넌트를 제공합니다. 이 컴포넌트는 자동으로 View 생명 주기에 구독하고 사라질 때 로딩을 취소합니다.

struct CachedImageView: View {
    let url: URL

    var body: some View {
        WebImage(url: url) { phase in
            if let image = phase.image {
                image.resizable()
            } else if phase.error {
                Color.red
            } else {
                ProgressView()
            }
        }
    }
}

SDWebImage에서 이미지 변환

SDWebImage는 SDImageTransformer 프로토콜을 통해 유연한 변환 시스템을 제공합니다. 변환은 디코딩 후에서 캐시링 전에 적용됩니다 — 변환 결과는 새로운 키로 디스크에 저장되어 후속 요청 시 재적용을 방지합니다.

내장 변환에는 다음이 있습니다: SDImageResizingTransformer(mode로 크기 변경), SDImageRoundCornerTransformer(선택적 테두리가 있는 동그래기 모서리), SDImageFlipTransformer(반사) 및 SDImageFilterTransformer(CoreImage 필터). && 연산자를 통해 결합하여 처리 체인을 만듭니다.

사용자 정의 변환에는 transformedImageWithImage:forKey: 메서드를 사용하여 SDImageTransformer 프로토콜을 구현하기만 하면 됩니다. 변환 키는 자동으로 캐시 키에 추가되어 동일한 이미지의 다른 버전 간 충돌을 방지합니다.

SDWebImage vs Kingfisher 비교

iOS 플랫폼에서 SDWebImage의 주요 경쟁자는 Kingfisher(순수 Swift) 및 Nuke입니다. SDWebImage와 Kingfisher 사이에서의 선택은 프로젝트 언어와 필요한 기능에 따라 결정되는 경우가 많습니다.

SDWebImage는 Objective-C 프로젝트 또는 하이브리드 프로젝트에서 선호되는 선택입니다. Kingfisher는 타임 안전성과 고유한 Swift 구문으로 순수 Swift 프로젝트에 더 적합합니다. 두 라이브러리 모두 비슷한 캐시링 아키텍처와 성능을 가집니다.

iOS 프로젝트에 SDWebImage 설치

SDWebImage는 Swift Package Manager, CocoaPods 또는 Carthage를 통해 통합할 수 있습니다. 라이브러리는 모듈로 나뉘어 있습니다: 코여 (SDWebImage), Coder(추가 포맷) 및 MapKit(MKAnnotationView용).

// Swift 패키지 매니저 (Package.swift)
dependencies: [
    .package(
        url: "https://github.com/SDWebImage/SDWebImage.git",
        from: "5.19.0"
    )
]

// CocoaPods (Podfile)
pod 'SDWebImage', '~> 5.19.0'
// WebP 및 SVG 플러그인:
pod 'SDWebImageWebPCoder'
pod 'SDWebImageSVGCoder'

설치 후 라이브러리는 추가 구성 없이 사용할 수 있습니다. 캐시 커스터마이징을 위해 고유한 네임스페이스를 가진 SDImageCache의 인스턴스를 생성하고 초기화 시 SDWebImageManager에 전달합니다. 전역 구성은 SDWebImageManager.shared를 통해 수행됩니다.

// 캐시 커스터마이징
let config = SDImageCacheConfig()
config.maxDiskAge = 14 * 86400 // 7일 대신 14일
config.maxDiskSize = 500 * 1024 * 1024 // 500 MB
config.shouldCacheImagesInMemory = .true

let cache = SDImageCache(
    namespace: "custom",
    diskCacheDirectory: FileManager.default.urls(
        for: .cachesDirectory,
        in: .userDomainMask
    ).first?.appendingPathComponent("custom_cache"),
    config: config
)
SDWebImageManager.sharedImageCache = cache