이미지 크기 조절하기: fast_image

Flutter

이미지 크기 조절하기: fast_image_resizer 사용법

Mr. Joo 2025. 2. 21. 13:52

728x90

Flutter 앱을 개발하다 보면 이미지를 다룰 일이 많다. 하지만 원본 이미지는 용량이 크고 해상도도 높아서 그대로 사용하면 앱 성능이 저하되거나, 업로드 시 많은 데이터가 소모될 수 있다. 이를 해결하기 위해 우리는 이미지 크기를 조절하는 리사이징(Resizing) 작업을 해야 한다.

오늘은 Flutter에서 빠르고 간편하게 이미지 크기를 조절할 수 있는 fast_image_resizer 패키지를 소개하려고 한다. 이 패키지를 사용하면 높은 성능과 간단한 코드만으로 이미지를 효율적으로 리사이징할 수 있다.

왜 이미지 리사이징이 필요할까?

이미지 크기를 줄이는 것은 앱 개발에서 중요한 역할을 한다. 특히 다음과 같은 상황에서 필수적이다.

1. 사용자가 사진을 업로드할 때

스마트폰에서 찍은 원본 사진은 보통 해상도가 높고 용량도 크다. 그대로 서버에 업로드하면 데이터 사용량이 많아지고, 업로드 속도도 느려진다. 이 문제를 해결하려면 사용자가 사진을 업로드하기 전에 적절한 크기로 줄여야 한다.

2. 앱에서 썸네일을 표시할 때

이미지를 리스트 형식으로 보여줘야 할 경우, 원본 이미지를 그대로 사용하면 성능이 저하될 수 있다. 예를 들어, 쇼핑몰 앱에서 상품 목록을 띄울 때 원본 이미지를 그대로 불러오면 앱이 버벅일 가능성이 높다. 썸네일 크기로 줄이면 로딩 속도가 빨라지고 앱이 더 쾌적해진다.

3. 메모리 사용을 줄이고 성능을 최적화할 때

고해상도 이미지는 많은 메모리를 차지한다. 앱에서 여러 개의 큰 이미지를 동시에 다루면 메모리 부족 문제가 발생할 수 있다. 리사이징을 통해 적절한 크기로 변환하면 메모리를 효율적으로 사용할 수 있다.

fast_image_resizer 패키지 소개

Flutter에서 이미지 리사이징을 위해 다양한 패키지가 존재하지만, fast_image_resizer는 성능과 사용 편의성을 동시에 제공하는 라이브러리다. 특히 빠른 속도로 이미지를 변환할 수 있어 많은 개발자들에게 인기가 많다.

! 주요 특징 !

빠른 속도로 이미지 리사이징 가능
File 형태의 이미지 파일을 직접 변환 가능
간단한 API 제공으로 쉽게 사용 가능
품질(quality) 조절 기능 지원

이제 실제로 어떻게 사용하는지 알아보자.

fast_image_resizer 사용법

1. 패키지 추가하기

먼저 pubspec.yaml 파일에 fast_image_resizer 패키지를 추가해야 한다.

dependencies:
  fast_image_resizer: latest_version

그리고 터미널에서 패키지를 설치해준다.

flutter pub get

2. 이미지 리사이징 코드 작성하기

패키지를 설치했으면 이제 실제로 이미지를 리사이징하는 코드를 작성해보자.

import 'package:fast_image_resizer/fast_image_resizer.dart';
import 'dart:io';

void resizeImageExample() async {
  // 원본 이미지 파일 불러오기
  File originalFile = File('path_to_your_image.jpg');

  // 리사이징 실행 (가로 800px, 세로 600px)
  File? resizedFile = await resizeAndSaveImage(
    originalFile,
    width: 800,
    height: 600,
    quality: 85, // 0~100 (높을수록 품질 유지)
  );

  if (resizedFile != null) {
    print('리사이징 완료! 새로운 이미지 경로: ${resizedFile.path}');
  } else {
    print('리사이징 실패!');
  }
}

3. 코드 설명

위 코드에서는 resizeAndSaveImage() 함수를 사용하여 이미지를 리사이징하고 있다.

originalFile: 변환할 원본 이미지 파일
width & height: 원하는 가로, 세로 크기 (픽셀 단위)
quality: 압축 품질 (100에 가까울수록 원본 품질 유지, 0이면 용량이 가장 작아짐)

이렇게 설정하면 원본 이미지가 지정한 크기와 품질로 변환된다.

fast_image_resizer 사용 예시

✅ 사용자가 사진을 업로드할 때

Future<File?> processUserPhoto(File photo) async {
  return await resizeAndSaveImage(photo, width: 1024, height: 768, quality: 80);
}

✅ 리스트에서 썸네일을 표시할 때

Future<File?> generateThumbnail(File image) async {
  return await resizeAndSaveImage(image, width: 200, height: 200, quality: 70);
}

이런 방식으로 앱의 다양한 곳에서 활용할 수 있다.

마무리

Flutter 앱에서 이미지를 그대로 사용하면 성능 문제나 데이터 사용량 증가 등의 문제가 발생할 수 있다. fast_image_resizer를 활용하면 간단한 코드만으로도 효과적으로 이미지 크기를 조절할 수 있다.

특히, 사용자가 업로드하는 이미지의 크기를 줄이거나, 리스트에서 썸네일을 만들 때 활용하면 큰 도움이 된다. 프로젝트에서 이미지 최적화가 필요하다면 fast_image_resizer 패키지를 적극 활용해보자!

728x90

LIST