누구나 나만의 앱 만들기 시리즈 5탄 (중국에서도 빠른 데이터 저장 Supabase)

지난 4탄에서는 앱에서 사용할 데이터들을 저장하는 방법으로 구글의 Firebase를 배웠죠? 하지만 중국에서 사용하려다 보니 구글에서 제공하는 Firebase 가 느려지는 경우가 종종 있어서 대안으로 'Supabase(슈퍼베이스)'를 소개합니다. 

 

1. 왜 중국에선 Supabase 일까요 ?

Firebase는 구글 서비스라 중국 현지 망에서는 접속이 불안정할 때가 많습니다. 반면, Supabase는 오픈 소스를 기반으로 하며 중국에서도 아주 안정적으로 접속됩니다.

✅ 현지 최적화: 특히 중국에서 VPN 없이도 데이터가 팍팍 들어오고 나갑니다.

✅ 관계형 데이터베이스: 데이터를 아주 체계적으로 관리할 수 있는 고급 기술(PostgreSQL)을 사용합니다. 하지만 이런 이유 때문에 Firebase 에서는 궂이 하지 않아도 되는 데이터를 저장할 공간에 테이블 설정을 해줘야 합니다.

 

 

2. Firebase와 솔직 비교 (장단점) ⚖️

📦 Storage(파일 창고) 용량: Firebase는 5GB를 주지만, Supabase 무료 플랜은 1GB를 제공합니다. 사진이나 문서를 아주 많이 저장할 앱이라면 용량 관리에 좀 더 신경을 써야 합니다.

📒 데이터 틀(Schema) 만들기: Firebase는 그냥 글자를 던져 넣으면 알아서 저장되는 방식이라 편하지만, Supabase는 미리 '표(Table)'의 형식을 만들어줘야 하는 번거로움이 살짝 있습니다. 하지만 이 불편함은 뒤에서 설명할 '꿀팁'으로 한 방에 해결됩니다! 😎

 

 

3. 테이블 만들기, 직접 하지 마세요! (Gemini & SQL Editor 활용) 🤖

Supabase에서 표(Table)를 만드는 게 어렵게 느껴지시나요? 걱정 마세요! 우리에겐 AI 비서 Gemini가 있잖아요.

내가 직접 코딩할 필요 없이 Gemini에게 부탁만 하면 됩니다.

Gemini에게 "내 앱에 필요한 테이블을 SQL로 만들어줘"라고 요청한 후, 그 코드를 Supabase의 SQL Editor에 붙여넣고 [Run] 만 눌러주면 끝!

 

 

4. Supabase 설치 및 연결 🛠️

방법은 4탄의 Firebase와 비슷해요!

1️⃣ Supabase.com 가입 후 프로젝트 생성

2️⃣ Project Settings 메뉴에서 API Key 와 Project URL 을 확인하세요.

3️⃣ 내 index.html에 이 주소록을 적어주면 우리 앱의 심장이 다시 뛰기 시작합니다!

 

위 세팅에서 확인한 API Key 와 Project URL 부분을 아래와 같이 코드에 붙여줍니다.

 

 

아래 화면은 Supabase 의 Storage 에 mp3 파일이 저장되어 있는 모습입니다.

 

 

아래 화면은 Supabase 의 Table 에 텍스트 정보가 저장되어 있는 모습입니다.