Storage 설정과 첫 이미지 업로드 ✦ Storage 셋업 #1

안녕하세요! ARCOA 지안입니다. 👋 

Firestore 셋업을 완료했다면, 서비스에 사용할 데이터는 준비되었을 거예요. 하지만 아직 한 가지가 남았죠.

 

이미지는 Firestore에 못 넣네?

 

Firestore에 정보(이름, 수수료, 혜택)를 넣었다면, 이제는 이미지 파일을 저장할 차례입니다.

Firestore와 Storage, 뭐가 다를까요?

구분	Firestore	Storage
저장	텍스트, 숫자 (데이터)	이미지, 동영상, PDF (파일)
예시	카드명:MyLife, 카드사:신한	card_mylife.webp
용도	앱 로직, 검색, 필터링	화면에 표시할 비주얼 콘텐츠

 

아래와 같이 비교할 수 있어요:

• Firestore = 엑셀 (데이터)
• Storage = 구글 드라이브 (파일)

이번 글에서는 Firebase Storage를 셋업한 후, 첫 이미지를 업로드하고 최적화 방법까지 배워봅니다.

소요 시간: 15분 ⏱️

 

 

 

Step 1. Storage 생성하기

1-1. Firebase Console 접속

• https://console.firebase.google.com 접속
• (그림 1) ✦① 빌드의 Storage 선택
• (그림 1) ✦② 시작하기 버튼 클릭

그림 1. Storage 시작하기

 

1-2. 버킷 옵션

• (그림 2) ✦③ 모든 위치를 선택
• Firestore Database와 같은 지역인 “ASIA-NORTHEAST3과 표준” 선택

 ⚠️ 중요: 위치(리전)은 생성 후 변경 불가능!

그림 2. 기본 버킷 설정의 버킷 옵션

TIP 왜 DB와 같은 지역의 Storage를 추천할까?

① 속도 - 같은 데이터센터면 전송 속도가 빠름
② 비용 - 같은 지역 내 데이터 전송은 무료거나 저렴
③ 안정성 - 네트워크 경로가 짧아서 에러 확률 낮음

 

1-3. 보안 규칙

• (그림 3) ✦④ 프로덕션 모드에서 시작(기본값) 선택
  • 프로덕션 모드는 안전하고 30일 제한도 없음
  • 다음 편인 #2에서 앱 접근 규칙에 대해 실습 예정
• (그림 3) ✦⑤ 만들기 버튼 클릭

그림 3. 기본 버킷 설정의 보안 규칙

 

1-4. Storage 생성 완료

• (그림 4) Storage 대시보드가 나타나면 성공! 🎉

그림 4. Storage 대시보드

 

 

 

Step 2. 첫 이미지 업로드

2-1. 폴더 만들기

💡 폴더를 구조화하면 보안 규칙 작성이 편하고, 파일 정리도 쉬워져요!

• (그림 5) ✦⑦ 아이콘 클릭 → "images" 입력 → 폴더 추가 버튼 → "images" 폴더 생성
• 생성된 images 폴더를 클릭해서 열기
• 다시 (그림 5) ✦⑦ 폴더 만들기 → "cards" 입력 → 폴더 추가 버튼 → ✦⑧ cards 폴더 완성

/images
  /cards

그림 5. images/cards 폴더 완성

 

2-2. 이미지 업로드

• cards 폴더에서 (그림 6) ✦⑨ 파일 업로드 버튼 클릭
• 컴퓨터에서 카드 이미지 선택 (Ctrl(Cmd)를 누르고 여러 개 선택 가능) 및 업로드
• 파일명, 크기, 업로드 시간 등 확인

그림 6. 생성된 폴더에 이미지 파일 업로드

 

2-3. 이미지 URL 확인

• (그림 7) ✦⑩ 업로된 파일을 클릭하면, 오른쪽 패널에 상세 정보 표시
• (그림 7) ✦⑪ 저장소 위치와 ✦⑫ 액세스 토큰

구분	✦⑪ 저장소 위치	✦⑫ 액세스 토큰
명칭	스토리지 내부 경로	외부 엑세스 토큰
용도	파일 관리, 삭제, 서버 코드 작업	화면에 이미지 띄우기 *URL/Path 주소
특징	브라우저에거 안 열림	브라우저/앱에서 바로 확인 가능

그림 7. 이미지 경로

 

 

 

Step 3. 이미지 최적화

3-1. 최적화가 왜 필요할까?

• Firebase Storage는 용량 기반 요금제로, 이미지 최적화로 바용 절감이 필요해요.

 

3-2. 적정 용량 가이드

용도	해상도	용량	포맷
썸네일	300×200px	20~50KB	WebP
리스트	600×400px	50~100KB	WebP
상세	1200×800px	100~200KB	WebP

 

 

3-3. 포맷 선택: WebP vs JPG vs PNG

포맷	용량	화질	투명도	추천 용도
WebP	가장 작음	좋음	지원	상품 이미지 (용량 30~50% 절감) ⭐
JPG	중간	좋음	불가	사진
PNG	큰 편	최고	지원	아이콘, 로고 (투명 배경 필요)

 

3-4. 파일명 규칙

• ✅ 영문 소문자, 숫자, 언더스코어(_) 사용
• ✅ 의미 있는 이름
• ❌ 한글, 띄어쓰기, 특수문자 금지

 

3-5. 이미지 최적화 도구

• TinyPNG - PNG/JPG 압축
• Squoosh - WebP 변환 (Google)
• Figma - Export → WebP 선택

 

 

 

✅ 완료 체크리스트

[  ] Firebase Storage 생성 완료

[  ] 위치(리전) 선택 (Seoul 권장)

[  ] images/cards/ 폴더 생성

[  ] 첫 이미지 업로드 완료

[  ] 이미지 URL 확인

[  ] 최적화 방법 이해 (WebP, 적정 용량)

 

 

 

디자이너를 위한 요약

Storage는 앱의 앨범이다. 
Firestore가 카드의 정보를 기억한다면, Storage는 카드의 얼굴을 간직한다. 

 

 

 

다음 글

✦ 디자이너(비개발자)를 위한 Storage 셋업

├ 1 ✦  Storage 설정과 첫 이미지 업로드 완료

└ 2 ✦  파일의 문지기, Storage 보안 규칙

 

다음 편에서 안전한 보안 규칙 작성과 읽기/쓰기 권한 제어 및 Gemini AI 활용에 대해 살펴보겠습니다 ✦