Supabase란 무엇인가
Supabase는 오픈소스 기반의 Firebase 대안을 표방하는 Backend as a Service(BaaS)입니다. PostgreSQL 데이터베이스를 핵심으로, 인증, 스토리지, 실시간 데이터 등 서비스 개발에 필요한 백엔드 기능을 한 번에 제공합니다.
"Firebase의 대안"이라고 불리지만, 실제로는 철학이 다릅니다. Firebase는 NoSQL(Firestore) 기반이지만, Supabase는 표준 관계형 데이터베이스인 PostgreSQL 위에 구축되어 있습니다.
Supabase vs Firebase 상세 비교
| 항목 | Supabase | Firebase |
|---|---|---|
| 데이터베이스 | PostgreSQL (관계형) | Firestore (NoSQL, 문서형) |
| 쿼리 | SQL + PostgREST | Firebase SDK 전용 API |
| 실시간 | Realtime(WebSocket) | 내장 실시간 동기화 |
| 인증 | 소셜 로그인, 이메일, OTP | 동일 지원 |
| 스토리지 | S3 호환 파일 저장소 | Cloud Storage |
| 서버리스 함수 | Edge Functions (Deno 기반) | Cloud Functions (Node.js) |
| 오픈소스 | 완전 오픈소스, 자체 호스팅 가능 | 비공개 |
| 무료 플랜 | 2개 프로젝트, 500MB DB | Spark 플랜 |
| 유료 시작 | $25/월 | 사용량 기반 |
Supabase를 선택해야 하는 경우:
- 데이터 관계가 복잡하고 SQL 쿼리를 잘 알고 있을 때
- 오픈소스 기반이라 벤더 종속성을 피하고 싶을 때
- 향후 자체 서버로 마이그레이션 가능성을 열어두고 싶을 때
Firebase를 선택해야 하는 경우:
- 스키마 없이 유연하게 데이터를 저장하고 싶을 때
- Google 생태계와의 통합이 중요할 때
- 모바일 앱(iOS/Android) 개발이 메인일 때
Row Level Security(RLS) 이해하기
RLS는 Supabase의 핵심 보안 기능입니다. 데이터베이스 테이블에 정책(Policy)을 설정하여 어떤 사용자가 어떤 행을 읽고 쓸 수 있는지를 DB 레벨에서 제어합니다.
예를 들어, posts 테이블에 다음과 같은 정책을 설정할 수 있습니다.
-- 모든 사람이 공개된 게시글을 읽을 수 있음
CREATE POLICY "Public posts are viewable by everyone"
ON posts FOR SELECT
USING (is_public = true);
-- 작성자만 자신의 게시글을 수정할 수 있음
CREATE POLICY "Users can update their own posts"
ON posts FOR UPDATE
USING (auth.uid() = user_id);
RLS를 사용하면 API 레이어에서 권한 체크를 따로 하지 않아도 DB 자체에서 보안이 적용됩니다. 단, RLS를 활성화하고 정책을 설정하지 않으면 아무도 해당 테이블에 접근할 수 없으므로 주의해야 합니다.
Supabase 실제 설정 방법
프로젝트 생성
- supabase.com에서 계정을 만들고 새 프로젝트를 생성합니다.
- 프로젝트 이름, 데이터베이스 비밀번호, 리전(Seoul이 없으면 Tokyo)을 설정합니다.
- 프로젝트 URL과 anon key를 메모합니다. 이것이 프론트엔드에서 사용할 환경변수입니다.
테이블 설계
Supabase 대시보드의 Table Editor를 사용하거나, SQL Editor에서 직접 SQL을 작성합니다.
CREATE TABLE profiles (
id UUID REFERENCES auth.users ON DELETE CASCADE,
username TEXT UNIQUE,
avatar_url TEXT,
created_at TIMESTAMPTZ DEFAULT NOW(),
PRIMARY KEY (id)
);
-- RLS 활성화
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
Supabase Auth 사용 방법
소셜 로그인 설정
Supabase 대시보드에서 Authentication > Providers로 이동합니다. Google, GitHub, Kakao 등의 OAuth 설정을 활성화할 수 있습니다.
Google 로그인을 설정하려면 Google Cloud Console에서 OAuth 클라이언트를 만들고, Client ID와 Secret을 Supabase에 입력합니다. Redirect URL은 Supabase가 제공하는 URL을 Google Console에 등록합니다.
이메일 인증
별도 설정 없이 이메일 + 비밀번호 로그인이 기본으로 활성화됩니다. 가입 시 이메일 인증 메일을 발송하는 기능도 기본 제공됩니다.
Edge Functions 활용
Supabase Edge Functions는 Deno 기반의 서버리스 함수입니다. 결제 처리, 외부 API 호출, 웹훅 처리 등 클라이언트에서 직접 처리하기 어려운 로직을 서버에서 실행할 때 사용합니다.
// supabase/functions/send-email/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
serve(async (req) => {
const { email, message } = await req.json()
// 이메일 발송 로직
return new Response(JSON.stringify({ success: true }))
})
supabase functions deploy send-email 명령어로 배포합니다.
무료 플랜 한계와 유료 전환 시점
무료 플랜 제한:
- 활성 프로젝트 2개
- 데이터베이스 500MB
- 스토리지 1GB
- 월 50,000 MAU (월간 활성 사용자)
- 7일 이상 비활성 프로젝트 자동 일시정지 (주의!)
유료 전환($25/월) 시점:
- 사용자가 1,000명을 넘어가기 시작할 때
- 데이터베이스 용량이 400MB를 넘을 때
- 비활성 일시정지 없이 안정적인 운영이 필요할 때
Next.js와 Supabase 연동 기본 코드
npm install @supabase/supabase-js @supabase/ssr
// lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}
// 데이터 조회 예시
const supabase = createClient()
const { data, error } = await supabase
.from('posts')
.select('*')
.eq('is_public', true)
.order('created_at', { ascending: false })
.limit(10)
// 로그인 예시
const { error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: `${window.location.origin}/auth/callback`
}
})
환경변수는 .env.local에 저장합니다.
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
Supabase는 사이드 프로젝트에서 백엔드 개발 시간을 크게 줄여주는 강력한 도구입니다. PostgreSQL 기반이라 나중에 자체 서버로 마이그레이션할 때도 데이터를 그대로 가져갈 수 있다는 점이 큰 장점입니다.