Flutter의 이미지 캐싱(Image Caching) 사용법

이미지 캐싱은 앱에서 이미지 로딩 속도를 향상시키고, 네트워크 사용량을 줄이기 위해 필수적인 기능입니다. Flutter는 기본적으로 이미지 캐싱을 지원하지만, 이를 더욱 효율적으로 관리할 수 있는 다양한 방법이 존재합니다. 이번 글에서는 Flutter에서 이미지 캐싱을 사용하는 방법과 성능 최적화를 위한 전략을 단계별로 설명하겠습니다.

1. Flutter의 기본 이미지 캐싱

Flutter에서 Image.network() 위젯을 사용하면 네트워크에서 이미지를 불러와 화면에 표시할 수 있습니다. Flutter는 자동으로 이미지를 캐싱하며, 동일한 URL의 이미지를 다시 요청할 경우, 캐시된 이미지를 불러옵니다. 이는 네트워크 트래픽을 줄이고 이미지 로딩 속도를 높여줍니다.

 

1.1 기본 이미지 로딩 예제

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Caching Example'),
        ),
        body: Center(
          child: Image.network(
            'https://via.placeholder.com/150',  // 네트워크 이미지 URL
          ),
        ),
      ),
    );
  }
}

 

위 예제에서 Image.network()는 이미지를 불러올 때 자동으로 캐싱합니다. 따라서 동일한 이미지 URL에 대한 요청이 있을 경우 캐시된 이미지를 사용하여 성능을 최적화합니다.

2. CachedNetworkImage 패키지 사용

Flutter에서 더 강력한 이미지 캐싱을 원할 경우, cached_network_image 패키지를 사용할 수 있습니다. 이 패키지는 캐싱된 이미지를 효율적으로 관리하며, 로딩 상태나 에러 상태에 대한 처리를 제공합니다.

 

2.1 cached_network_image 패키지 설치

pubspec.yaml 파일에 cached_network_image 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

 

2.2 CachedNetworkImage 사용 예제

CachedNetworkImage 위젯을 사용하여 이미지를 캐싱하는 예제를 살펴보겠습니다.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://via.placeholder.com/150',  // 이미지 URL
            placeholder: (context, url) => CircularProgressIndicator(),  // 로딩 중 표시할 위젯
            errorWidget: (context, url, error) => Icon(Icons.error),  // 에러 시 표시할 위젯
          ),
        ),
      ),
    );
  }
}

 

위 코드에서 CachedNetworkImage는 네트워크에서 이미지를 불러오고, 이를 캐싱하여 동일한 URL로 요청이 들어올 경우 캐시된 이미지를 사용합니다. 또한, 이미지를 불러오는 동안 로딩 스피너를 표시하고, 에러가 발생할 경우 에러 아이콘을 표시합니다.

 

반응형

 

3. 로컬 파일 캐싱

이미지가 네트워크에서 불러오지 않고, 로컬 파일에 저장된 경우에도 캐싱을 사용할 수 있습니다. 로컬 파일에서 이미지를 불러오는 방법도 cached_network_image를 사용하여 간편하게 구현할 수 있습니다.

 

3.1 로컬 파일에서 이미지 캐싱

로컬 파일에 저장된 이미지를 사용하려면 imageFile 메서드를 사용합니다.

 

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String localFilePath = '/path/to/local/image.jpg';  // 로컬 파일 경로

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Local File Image Caching Example'),
        ),
        body: Center(
          child: Image.file(
            File(localFilePath),
          ),
        ),
      ),
    );
  }
}

 

위 코드에서는 로컬 파일에서 이미지를 불러오는 방법을 보여줍니다. 로컬 이미지도 Flutter의 기본 이미지 캐싱 메커니즘을 사용하여 캐싱됩니다.

 

 

728x90

 

4. 이미지 캐싱 성능 최적화

이미지 캐싱의 성능을 최적화하기 위해 몇 가지 전략을 사용할 수 있습니다. 특히, 캐시 크기 제한, 이미지 해상도 조절, 캐시된 이미지의 만료 관리 등이 있습니다.

 

4.1 캐시 크기 제한

cached_network_image 패키지는 캐시된 이미지의 크기를 제한할 수 있는 기능을 제공합니다. 이를 통해 메모리 사용량을 제어하고, 캐시된 이미지를 관리할 수 있습니다.

CachedNetworkImage(
  imageUrl: 'https://via.placeholder.com/150',
  cacheManager: CacheManager(
    Config(
      'customCacheKey',
      stalePeriod: const Duration(days: 7),  // 7일 동안 캐시 유지
      maxNrOfCacheObjects: 100,  // 캐시 이미지 최대 100개로 제한
    ),
  ),
)

 

위 코드에서는 CacheManager를 사용하여 캐시 크기를 최대 100개의 이미지로 제한하고, 7일 동안 캐시된 이미지를 유지하는 설정을 적용했습니다.

 

4.2 이미지 해상도 조절

이미지 해상도를 조절하여 불필요하게 큰 이미지를 로딩하지 않도록 할 수 있습니다. 특히, 작은 크기로 표시될 이미지를 높은 해상도로 불러올 경우 성능에 영향을 미칠 수 있습니다.

CachedNetworkImage(
  imageUrl: 'https://via.placeholder.com/150',
  width: 100,  // 이미지 크기를 미리 조정
  height: 100,
  fit: BoxFit.cover,  // 이미지가 위젯 크기에 맞게 조정됨
)

 

width와 height 속성을 설정하여 이미지를 적절한 크기로 불러올 수 있습니다. 또한, fit 속성을 사용하여 이미지가 위젯 크기에 맞춰 잘리거나 비율이 유지되도록 할 수 있습니다.

5. 네트워크 상태에 따른 이미지 로딩 제어

네트워크 상태가 좋지 않을 경우, 사용자가 캐시된 이미지만 보도록 하고, 새로운 이미지 로딩을 방지하는 것도 성능을 향상시킬 수 있는 방법 중 하나입니다.

 

5.1 네트워크 상태 체크

connectivity_plus 패키지를 사용하여 네트워크 연결 상태를 확인하고, 네트워크가 연결되지 않은 경우 캐시된 이미지만 로딩할 수 있습니다.

dependencies:
  connectivity_plus: ^2.0.0

 

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class MyApp extends StatelessWidget {
  Future<bool> _isConnected() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    return connectivityResult != ConnectivityResult.none;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Status Image Caching'),
        ),
        body: FutureBuilder<bool>(
          future: _isConnected(),
          builder: (context, snapshot) {
            if (snapshot.hasData && snapshot.data == true) {
              return CachedNetworkImage(
                imageUrl: 'https://via.placeholder.com/150',
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
              );
            } else {
              return Center(
                child: Text('No network connection.'),
              );
            }
          },
        ),
      ),
    );
  }
}

 

위 코드에서는 네트워크 상태를 확인한 후, 네트워크 연결이 되어 있을 때만 이미지를 로드하고, 그렇지 않은 경우 메시지를 표시하도록 했습니다.

결론

Flutter에서 이미지 캐싱을 적절히 활용하면 앱의 성능을 최적화하고, 사용자 경험을 개선할 수 있습니다. 기본적으로 제공되는 이미지 캐싱 기능 외에도 cached_network_image 패키지를 사용하여 더욱 효율적으로 이미지를 관리할 수 있으며, 캐시 크기 제한, 이미지 해상도 조절, 네트워크 상태에 따른 이미지 로딩 제어 등 다양한 최적화 방법을 적용할 수 있습니다. 이번 글에서 설명한 방법을 활용하여 Flutter 애플리케이션에서 이미지 캐싱을 최적화해보세요.