Swift로 테이블 뷰 셀에서 이미지 지연 로딩(Lazy Loading) 구현하기

테이블 뷰(Table View)에서 이미지를 효율적으로 불러오려면 지연 로딩(Lazy Loading) 기법을 활용하는 것이 좋습니다. 스크롤 시점에 필요한 이미지만 다운로드하면 메모리 사용량을 줄이고 앱의 반응성을 크게 향상시킬 수 있습니다. 이번 글에서는 Swift를 이용해 테이블 뷰 셀에 이미지를 비동기 방식으로 로드하는 방법을 단계별로 살펴보겠습니다.

1. 기본 UI 구성하기

먼저 다음과 같은 순서로 기본 화면을 구성합니다.

테이블 뷰와 테이블 뷰 셀을 생성합니다.
셀 안에 이미지 뷰(UIImageView)를 추가합니다.
생성한 셀에 커스텀 클래스(CustomCell)를 연결(Assign)합니다.

그다음 cellForRowAt 메서드에 아래 코드를 작성해 재사용 가능한 셀을 반환합니다.

let cell = tblView.dequeueReusableCell(withIdentifier: "CustomCell") as! CustomCell
return cell

2. URL로 이미지를 다운로드하는 함수 만들기

이미지를 다운로드하기 위해 별도의 함수를 만들고, 재사용성을 높이기 위해 UIImageView 확장(Extension)에 포함시킵니다. URLSession의 데이터 태스크를 사용하면 네트워크 요청이 백그라운드에서 처리되고, 완료 후 메인 스레드에서 이미지가 적용됩니다.

func setImageFromUrl(ImageURL: String) {
    URLSession.shared.dataTask(with: NSURL(string: ImageURL)! as URL,
        completionHandler: { (data, response, error) -> Void in
            DispatchQueue.main.async {
                if let data = data {
                    self.image = UIImage(data: data)
                }
            }
    }).resume()
}

코드 핵심 포인트:

URLSession.shared.dataTask: 지정된 URL에서 데이터를 비동기적으로 가져옵니다.
DispatchQueue.main.async: UI 갱신은 반드시 메인 스레드에서 수행해야 하므로, 이미지 설정 코드를 메인 큐로 보냅니다.
.resume(): 생성된 데이터 태스크를 실제로 실행합니다.

3. UIImageView 확장으로 어디서든 사용하기

위 함수를 UIImageView의 익스텐션에 넣어두면 프로젝트 내 모든 이미지 뷰에서 손쉽게 호출할 수 있습니다.

이제 cellForRowAt 메서드에서 아래와 같이 함수를 호출합니다. 여기서 img는 커스텀 클래스에 연결된 이미지 뷰 아울렛(outlet)입니다.

cell.img.setImageFromUrl(ImageURL: url)

4. 실행 결과 확인

이 예제에서는 오픈 소스 이미지인 "https://homepages.cae.wisc.edu/~ece533/images/boat.png"를 사용했습니다.

iPhone 7+ 시뮬레이터에서 동일한 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다.

Swift로 테이블 뷰 셀에서 이미지 지연 로딩(Lazy Loading) 구현하기

마무리 및 추가 개선 팁

이처럼 URLSession과 UIImageView 확장만으로도 간단한 이미지 지연 로딩을 구현할 수 있습니다. 다만 실제 서비스에 적용할 때는 다음 사항을 함께 고려하면 좋습니다.

이미지 캐싱: 같은 URL을 반복해서 다운로드하지 않도록 NSCache 등을 활용해 캐싱을 적용하세요.
셀 재사용 문제: 스크롤이 빠를 때 이전 셀의 이미지가 잘못 표시될 수 있으므로, 다운로드 완료 시점에 해당 셀이 여전히 동일한 URL을 가리키는지 확인하는 것이 좋습니다.
라이브러리 활용: SDWebImage나 Kingfisher 같은 검증된 라이브러리를 사용하면 캐싱, 오류 처리, 자동 취소 등을 더욱 편리하게 처리할 수 있습니다.