구글 파이어베이스 스토리지에서 이미지 관리(1)

React Native를 이용한 앱 개발작업을 진행하면서 사용자가 업로드하는 이미지를 어떻게 하면 관리를 잘 할 수 있을까에 대한 고민에서 시작하게 되었습니다.

가장 쉽게 접할 수 있는 구글 파이어베이스(Firebase)를 이용하여 앱 개발을 진행하고 있어서 구글 솔루션중 하나인 스토리지(Storage)를 활용하는 방법으로 설명하고자 합니다.

 

기본적으로 파이어베이스에서 프로젝트 생성부터 스토지리 사용 등록에 대한 절차는 생략하고, 활용적인 측면에서 고민사항과 해결방안에 대해 예시로 만들어 보았습니다.

 

1.  이미지 저장 방법에 대한 고민

• 요즘 핸드폰 카메라 성능이 좋아서 사진 파일 사이즈가 기본적으로 큼
• 스토리지 사용은 돈 인데 효율적인 사진 크기는 얼마일까?
• 그럼 이미지를 서버에 올릴 때부터 사이즈를 조정해서 올릴까?
• 아니면 저장된 이미지를 일괄로 사이즈 조정할까?

2.  우선 이미지 사용 목적에 의한 결정 필요

• 이미지 보관이 목적인가?
• 서비스 활용이 목적인가?

3.  이미지 보관 경우

• 원본 이미지 업로드 및 저장 기본
• 하지만 이미지를 앱에서 조회할 때는 이미지 로딩 속도 고려 필요
• 결국, 조회용 썸네일 이미지를 별도로 저장 관리하는 것이 필요

4.  서비스 활용 목적 경우

• 요즘 일상의 서비스인 인스타그램, 페이스북 등 소셜커머스에서 높은 해상도 사진이 필요하지는 않음
• 따라서 서버에 사진 등록할 때 원하는 용량 크기로 사이즈를 조정하여 올리는 것이 효율적임

반응형

5.  이미지 사이즈 조정통한 사진 등록하는 방법 (리액트 네이티브)

• react-native-image-resizer 패키지 사용
  설치 : npm install @bam.tech/react-native-image-resizer

https://github.com/bamlab/react-native-image-resizer

GitHub - bamlab/react-native-image-resizer: 🗻 Resize local images with React Native

• 이미지 사이즈 조정하는 컴포넌트 (typescript)
  • 이미지 최대 너비, 높이, 포맷, 품질 등을 지정하면됨
  • 사진의 메타데이터 필요 여부에 따라 false, true 선택 사용

import ImageResizer from '@bam.tech/react-native-image-resizer';

export const resizeImage = async (imageUri: string): Promise<string> => {
  try {
    const response = await ImageResizer.createResizedImage(
      imageUri,
      1024, // 최대 너비
      1024, // 최대 높이
      'JPEG', // 포맷
      80, // 품질 (0-100)
      0, // 회전
      undefined, // 저장 경로 (undefined = 임시 디렉토리)
      false // keepMeta
    );
    
    return response.uri;
  } catch (error) {
    console.error('이미지 리사이징 실패:', error);
    throw error;
  }
};

 

• 파이어베이스에 업로드 컴포넌트

import storage from '@react-native-firebase/storage';
import { resizeImage } from '../utils/imageResizer';

export const uploadImage = async (originalUri: string, path: string): Promise<string> => {
  try {
    // 이미지 리사이징
    const resizedUri = await resizeImage(originalUri);
    
    // Firebase Storage 레퍼런스 생성
    const reference = storage().ref(path);
    
    // 리사이즈된 이미지 업로드
    await reference.putFile(resizedUri);
    
    // 업로드된 이미지의 URL 반환
    const url = await reference.getDownloadURL();
    return url;
    
  } catch (error) {
    console.error('이미지 업로드 실패:', error);
    throw error;
  }
};

 

• 서비스 적용 예시

const handleImageUpload = async (imageUri: string) => {
  try {
    const fileName = `images/${Date.now()}.jpg`;
    const downloadUrl = await uploadImage(imageUri, fileName);
    console.log('업로드된 이미지 URL:', downloadUrl);
  } catch (error) {
    console.error('업로드 실패:', error);
  }
};

 

👉  주요 팁

• 이미지 크기를 1024 x 1024 로 제한하면 대부분의 경우 1M 이하로 유지
• JPEG 품질을 80 으로 설정시 눈에 띄는 품질저하 없이 파일크기를 크게 줄일 수 있음
• 서비스 필요에 따라 너비, 높이, 품질을 조정 (많은 시행착오 필요 😅)
• 이미지 메타데이터 제거시 추가로 용량 줄일 수 있음

 

지금까지 파이어베이스 storage 통한 이미지 저장에 대해 간단한 사용예제를 알아 보았습니다.

다음 포스트에서 다른 활용 예시를 보여드리겠습니다.

 

Firebase Storage 사용 요금 - 5G 무료, 이후 추가용량 1G당 $0.026 (1M 용량 이미지이면 5천장 무료 저장 가능)