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

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

Firestore 셋업 시리즈를 완료하셨다면, 이제 카드(또는 본인의 주요 아이템) 데이터는 준비되었을 거예요. 그런데 한 가지 남았죠.

 

이미지는 어디에 저장하지?

 

Firestore는 데이터(텍스트, 숫자)를 저장하는 곳이고, 이미지, 동영상 같은 파일은 Firebase Storage에 저장해야 합니다.

 

ARCOA의 앱을 예로 들면:

• Firestore: 카드 이름, 수수료, 혜택 (데이터)
• Storage: 카드 이미지, 아이콘 (파일)

이 둘이 연결되어야 앱이 완성됩니다.

이번 시리즈는 단 2편으로 Firebase Storage를 빠르게 마스터합니다!

시작해 봅시다 ✦

 

 

 

1/ 이 시리즈로 얻을 수 있는 것

✅ Firebase Storage 설정과 구조 이해

• Storage가 무엇인지, Firestore와 어떻게 다른지
• 파일을 어떻게 구조화해야 하는지

✅ 이미지 업로드와 최적화

• 첫 이미지를 Storage에 올리는 방법
• 용량과 포맷 최적화로 비용 절감

✅ Storage 보안 규칙 작성

• 누가 파일을 읽고 쓸 수 있는지 제어
• Gemini AI로 규칙 쉽게 만들기

✅ FlutterFlow와 연동 준비

• Storage 이미지를 앱에서 사용하는 방법
• 다음 단계(UI 개발)로 자연스럽게 이어지는 준비

 

 

 

2/ Storage 셋업의 목차

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

Storage를 생성하고, 첫 이미지를 올리며, 용량과 포맷을 최적화합니다.

 

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

누가 파일에 접근할 수 있는지 제어하는 보안 규칙을 작성하고 테스트합니다.

 

총 2편, 각 15~20분 소요로, Firestore 5편보다 훨씬 가볍고 빠르게 완성할 수 있어요 🚀

 

 

 

3/ 이 시리즈가 특별한 이유

1️⃣ Firestore와 자연스러운 연결

Firestore 시리즈를 완료했다면, Storage는 그 다음 단계예요. 데이터 + 파일 = 완전한 앱 백엔드 완성!

 

2️⃣ 2편으로 끝나는 간결함

Storage는 Firestore보다 개념이 단순해요. 필요한 것만 콕콕 짚어서, 빠르게 완성합니다.

 

3️⃣ 비용 최적화 포함

파일 저장소는 용량이 커질수록 비용이 증가해요. 처음부터 최적화 방법을 배워서 불필요한 비용을 줄입니다.

 

4️⃣ 실전 보안 규칙

"테스트 모드"로 시작하면 30일 뒤 자동 차단! 처음부터 안전한 프로덕션 규칙을 배웁니다.

 

5️⃣ Gemini AI 활용

Firestore 보안 규칙처럼, Storage 규칙도 Gemini가 도와줘요. 코드 몰라도 자연어로 규칙 작성 가능! 🤖

 

 

 

4/ 준비물

필수:

• ✅ Firebase 프로젝트 (Firestore 시리즈에서 만든 프로젝트 사용)
• ✅ 업로드할 이미지 2~3개 (예: 카드 이미지, 아이콘 등)

권장:

• ✅ FlutterFlow 프로젝트 (Storage 이미지를 앱에서 사용하려면)
• ✅ Firestore 셋업 시리즈 완료 (개념 이해에 도움)

선택:

• 이미지 편집 툴 (Figma, Photoshop 등) - 최적화 용도
• 기본 Firebase 지식

 

 

5/ 함께 읽으면 좋은 글

🔥 필수 선행 시리즈

✦ 디자이너(비개발자)를 위한 Firestore 셋업 (5편)

- Firebase 프로젝트 생성, Database 설정, 보안 규칙을 배웠다면 Storage는 훨씬 쉬워요!

- 특히, #4 보안 규칙 작성 편을 읽었다면, Storage 보안 규칙도 쉽게 이해됩니다.

디자이너(비개발자)를 위한 Firestore 셋업 ✦ 총 5편

 

📚 관련 시리즈

✦ 디자이너(비개발자)를 위한 노코드 DB 설계 (5편)

- Firestore와 Storage의 데이터/파일 구조를 설계하는 기본 개념입니다.

- Static vs Dynamic 개념이 Storage 폴더 구조에도 적용돼요.

비개발자를 위한 노코드 DB 설계 ✦ 총 5편

 

✦ 디자이너(비개발자)를 위한 Firebase 셋업 (5편)

- Firebase 프로젝트 생성, 기본 설정, 요금제에 대한 이해를 돕습니다.

디자이너(비개발자)의 Firebase 셋업 ✦ 총 5편

 

 

 

💡 Storage 시리즈, 이렇게 활용하세요!

학습 순서:

• #1편 읽고 실습 → Storage 설정, 이미지 업로드, 최적화
• #2편 읽고 실습 → 보안 규칙 작성, 테스트
• FlutterFlow 연동 → UI에서 Storage 이미지 불러오기 (다음 시리즈)

 

실습 팁:

• 각 편당 15~20분 소요
• 실제 앱에 사용할 이미지로 실습하면 더 와닿아요
• #1과 #2를 하루에 연달아 해도 30~40분이면 완성!

 

막힐 때:

• Firebase 공식 문서보다 이 시리즈가 더 쉬워요
• Gemini AI를 적극 활용하세요 (규칙 작성 도우미)
• 댓글로 질문 남겨주시면 답변 드릴게요!

 

 

🎯 시리즈 목표

Before	After
"이미지는 어디에 저장하지?" "Storage 설정이 뭔지 모르겠어" "보안 규칙을 어떻게 쓰지?"	✅ Storage 구조 이해 완료 ✅ 이미지 업로드 + 최적화 완료 ✅ 보안 규칙 작성 완료 ✅ FlutterFlow 연동 준비 완료

 

 

 

다음 글

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

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

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

 

다음 글에서는 Storage를 설정하고, 첫 이미지를 업로드하며, 최적화 방법을 배워봅니다 ✦

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