[Flutter] 이미지 로딩 최적화 – CachedNetworkImage 사용법

[Flutter] 이미지 로딩 최적화 – CachedNetworkImage 사용법

Flutter에서 Image.network()만 사용하면 이미지가 스크롤할 때마다 재요청되거나 깜빡거림(플리커링) 현상이 발생할 수 있습니다.

이럴 땐 CachedNetworkImage를 사용하면 이미지를 로컬에 캐싱해서 불필요한 재로딩을 줄일 수 있어 성능이 훨씬 좋아집니다.

---

✅ 1. CachedNetworkImage란?

cached_network_image는 이미지를 다운로드한 뒤 로컬에 캐싱해서 다음번에 같은 URL을 요청할 때 네트워크를 사용하지 않고 빠르게 표시해주는 라이브러리입니다.

---

✅ 2. 설치 방법

# pubspec.yaml
dependencies:
  cached_network_image: ^3.3.1

flutter pub get

→ 최신 버전은 pub.dev에서 확인하세요: https://pub.dev/packages/cached_network_image

---

✅ 3. 기본 사용법

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

• imageUrl: 불러올 이미지 주소
• placeholder: 로딩 중 보여줄 위젯
• errorWidget: 이미지 로드 실패 시 대체 위젯

---

✅ 4. BoxFit, height, width 등 커스텀 속성

CachedNetworkImage(
  imageUrl: 'https://example.com/profile.jpg',
  width: 120,
  height: 120,
  fit: BoxFit.cover,
  placeholder: (context, url) => Container(
    width: 120,
    height: 120,
    color: Colors.grey[200],
  ),
)

→ BoxFit.cover와 함께 사용하면 프로필 사진, 썸네일 등에 딱 맞게 표시할 수 있습니다.

---

✅ 5. ListView에서 사용 시 성능 이점

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CachedNetworkImage(
        imageUrl: 'https://picsum.photos/100?image=$index',
        width: 60,
        height: 60,
        fit: BoxFit.cover,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
      title: Text('Item $index'),
    );
  },
)

→ 일반 Image.network는 스크롤할 때마다 재요청하지만, CachedNetworkImage는 한 번 로딩된 이미지를 캐시에서 재사용합니다.

---

🧠 실무 팁

• GIF도 지원하지만 크기 제한이 있으니 주의
• 캐시 만료/초기화는 DefaultCacheManager().emptyCache() 등으로 가능
• shimmer 효과나 skeleton UI와 함께 쓰면 UX 향상

---

📌 마무리

Flutter 앱의 이미지 성능을 높이고 싶다면 CachedNetworkImage는 거의 필수적인 도구입니다.

로딩 시간 단축, UX 향상, 데이터 절약까지 가능하니 ListView, GridView, 프로필 화면 등에 적극 활용해보세요 😊

도움이 되셨다면 공감 / 댓글 부탁드립니다!