안녕하세요! 나만의 앱 만들기 시리즈, 벌써 4탄까지 달려왔네요! 🏃♂️💨
지난번엔 깃허브에 코드를 보관했다면, 오늘은 내 앱에서 사용하는 진짜 '데이터(이미지, 문서 등…)'를 어디에 어떻게 담아둘지 알아보겠습니다.
1. '데이터 관리'가 도대체 뭔가요? 🤔
만약 내가 'PDF 문서를 관리하는 앱'을 만들었다고 상상해 보세요! 📄
내가 올린 PDF 파일들, 그리고 그 PDF 문서들의 이름이나 날짜 같은 정보들은 어디에 저장해야 할까요?
내 폰? 내 컴퓨터? 아니죠! 🙅♂️
전 세계 어디서든 내 앱에 접속했을 때 그 파일을 똑같이 볼 수 있으려면, 인터넷 세상에 있는 '튼튼한 온라인 창고'가 필요합니다.
이런 이미지, 문서, 사용자 정보 등을 안전하게 보관하고 필요할 때 꺼내 쓰는 모든 과정을 '데이터 관리'라고 부릅니다.
💡 잠깐! GitHub에 올렸는데 Firebase가 왜 또 필요해?
지난 3편글에서 깃허브(GitHub)에 index.html 파일을 올렸는데, 왜 또 파이어베이스를 배워야 하는지 궁금해할 수 있습니다. 쉽게 정리하면...
• GitHub(깃허브): '코드 설계도(index.html)'를 보관하는 곳입니다. 용량이 작은 텍스트 위주로 보관 합니다.
• Firebase(파이어베이스): 내 앱이 실제로 사용하는 여러가지 파일들(PDF, 사진, 동영상)을 보관하는 곳입니다.
• "앱의 뼈대(코드)는 GitHub에! 앱이 다루는 알맹이(파일/데이터)는 Firebase에!" 보관하는 것이 정석입니다. ✨
2. 왜 Firebase(파이어베이스)인가요? 🔥
데이터 창고 서비스는 참 많죠, 그중에서 Firebase는 구글이 만든 '끝판왕' 서비스입니다.! 👑
✅ 초보자에게 친절합니다: 복잡한 서버 코딩 없이도 클릭 몇 번으로 데이터 창고를 만들 수 있습니다.
✅ 구글의 기술력: 보안이 철저하고 속도가 정말 빠릅니다.
💡잠깐! 중국에 계신다면? (Supabase)
중국 현지망에서는 구글 서비스인 Firebase가 가끔 느리거나 안 열릴 때가 있습니다. 🌏 그럴 때는 'Supabase(슈퍼베이스)'라는 멋진 대안이 있습니다! 기능은 거의 비슷한데 중국에서도 아주 쌩쌩 잘 돌아갑니다! Supabase 에 대해서는 다음 5탄 글에서 조금 더 자세하게 이야기 해보겠습니다.
Firebase 는 무료 용량을 얼마나 제공할까요?
📦 Cloud Storage (5GB) : 사진, 동영상, 문서, MP3 파일등 용량이 큰 자료 보관용 입니다.
📒 Cloud Firestore (1GB) : 텍스트로된 데이터 전용 보관용 입니다. (파일 이름, 아이디, 작성 날짜, 게시글 본문 등...)
3. 기본 세팅 방법 🛠️

1️⃣ Firebase 콘솔 접속!
2️⃣ '프로젝트 추가' 버튼을 누르고 이름을 지어주세요.
그러면 이제 나만의 저장 공간이 생기고, 이제 index.html 파일과 연결만 시켜 주면 됩니다.

3️⃣ 내가 만든 프로젝트에 들어간 후에 왼쪽에 "설정" 으로 들어갑니다.
그리고 화면 아래쪽으로 스크롤을 내려 보면 아래와 같은 부분이 나옵니다.
이 내용을 본인이 작성중인 index.html 파일 내에 firebase Config 부분에 붙여주면 됩니다.

이렇게 firebase 를 한번 연결 해주면,
이후에 내가 여러가지 앱을 만들더라도 그 앱 이름으로 폴더를 구분해서 파일을 차곡차곡 잘 구분해서 저장해줍니다.
아래 이미지는 저의 ccm 곡 관리하는 앱과 연결된 Firebase 의 Storage 모습입니다.
mp3 같은 미디어 파일을 5GB 까지 여유있게 보관할 수 있습니다.

아래 이미지는 저의 ccm 곡 관리하는 앱과 연결된 Firebase 의 Firestore 모습입니다.
설명글 같은 텍스트를 저장하는 공간이고 1GB 까지 여유있게 보관할 수 있습니다.

'인공지능(AI) & IT 트렌트 따라잡기' 카테고리의 다른 글
| 누구나 나만의 앱 만들기 시리즈 5탄 (중국에서도 빠른 데이터 저장 Supabase) (1) | 2026.04.19 |
|---|---|
| 윈도우 정품키 초저가로 구매하고 설정하기! (0) | 2026.04.18 |
| 누구나 나만의 앱 만들기 시리즈 3탄 (코딩 파일 저장소 GitHub) (1) | 2026.04.16 |
| 누구나 나만의 앱 만들기 시리즈 2탄 (코드 편집 및 저장) (0) | 2026.04.03 |
| 누구나 나만의 앱 만들기 시리즈 1탄 (기획 및 코딩) (0) | 2026.04.03 |