2026년 Supabase 실전 활용법: 실시간 앱 개발부터 인증까지
Supabase란? 현대 개발자를 위한 백엔드
Supabase는 Firebase의 오픈소스 대안으로, PostgreSQL 기반의 완전한 백엔드 솔루션입니다. 2026년 현재 월 활성 사용자 150만 명을 돌파했으며, 특히 실시간 데이터 동기화가 필요한 협업 도구, 채팅 앱, 대시보드 개발에서 개발자들의 신뢰를 받고 있습니다.
기존의 무료 Supabase 무료 티어로 프로덕션 서비스를 운영하는 방법에 대해서는 별도로 다뤘으니, 이번 글에서는 실제 프로젝트에서 바로 쓸 수 있는 4가지 핵심 활용 패턴에 집중하겠습니다.
더 자세한 내용은 Supabase 무료 티어로 프로덕션 서비스 운영하기 완전 가이드을 참고하세요.
핵심 1: 실시간 데이터베이스 동기화
구독 기반 변경 감지
Supabase의 가장 강력한 기능은 Realtime Subscriptions입니다. WebSocket을 통해 데이터베이스 변경사항을 즉시 클라이언트에 전송합니다.
const { data, error } = await supabase
.from('messages')
.on('*', payload => {
console.log('새 메시지:', payload.new);
setMessages(prev => [...prev, payload.new]);
})
.subscribe();위 코드는 messages 테이블의 모든 변경사항을 실시간으로 감지합니다. INSERT, UPDATE, DELETE 이벤트 모두에 반응하며, 필터링도 가능합니다:
supabase
.from('tasks')
.on('UPDATE', payload => {
if (payload.new.status === 'completed') {
showNotification('작업 완료!');
}
})
.subscribe();이 방식은 협업 도구나 멀티유저 게임에서 데이터 동기화 비용을 대폭 줄입니다. 기존 REST API 폴링과 달리 서버 부하가 적고, 지연시간도 평균 100ms 이내입니다.
핵심 2: 선언적 Row-Level Security (RLS)
데이터베이스 수준의 인증 제어
Supabase RLS는 PostgreSQL의 기본 기능을 활용하여 데이터베이스 쿼리 단계에서 접근 제어를 수행합니다. 클라이언트나 서버에서 검증하지 않아도 됩니다.
CREATE POLICY "사용자는 자신의 게시물만 조회"
ON posts
FOR SELECT
USING (auth.uid() = user_id);
CREATE POLICY "사용자는 자신의 게시물만 수정"
ON posts
FOR UPDATE
USING (auth.uid() = user_id);이렇게 정의하면, 클라이언트에서 아무리 다른 사용자의 ID를 입력해도 자신의 게시물만 조회·수정됩니다. 보안 구멍이 생길 여지가 없습니다.
실무에서 자주 쓰이는 패턴:
| 시나리오 | 정책 예시 | 보안 수준 |
|---|---|---|
| 개인 메모 | auth.uid() = user_id | 매우 높음 |
| 팀 문서 | team_id IN (SELECT team_id FROM members WHERE user_id = auth.uid()) | 높음 |
| 공개 게시물 | is_public = true OR user_id = auth.uid() | 중간 |
| 관리자만 접근 | user_id IN (SELECT user_id FROM admins) | 매우 높음 |
RLS를 제대로 설정하면 백엔드 인증 로직을 거의 작성하지 않아도 됩니다.
핵심 3: 함수 기반 비즈니스 로직
PostgreSQL 함수로 복잡한 로직 처리
클라이언트에서 직접 데이터를 수정하는 것 외에, PostgreSQL 함수를 호출하여 서버 측 로직을 처리할 수 있습니다.
CREATE OR REPLACE FUNCTION transfer_points(
from_user_id UUID,
to_user_id UUID,
amount INT
) RETURNS JSON AS $$
DECLARE
from_balance INT;
result JSON;
BEGIN
SELECT points INTO from_balance FROM users WHERE id = from_user_id FOR UPDATE;
IF from_balance < amount THEN
RETURN json_build_object('success', false, 'error', '포인트 부족');
END IF;
UPDATE users SET points = points - amount WHERE id = from_user_id;
UPDATE users SET points = points + amount WHERE id = to_user_id;
INSERT INTO transactions (from_user_id, to_user_id, amount) VALUES (from_user_id, to_user_id, amount);
RETURN json_build_object('success', true, 'new_balance', from_balance - amount);
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;JS 클라이언트에서 호출:
const { data, error } = await supabase.rpc('transfer_points', {
from_user_id: user.id,
to_user_id: recipient.id,
amount: 100
});이 방식의 장점:
- 원자성 보장: 트랜잭션이 모두 성공하거나 모두 실패
- 성능 최적화: 네트워크 왕복 횟수 감소
- 보안: RLS와 함께 사용하면 견고한 권한 제어 가능
핵심 4: 벡터 검색으로 AI 기능 통합
pgvector로 의미 기반 검색 구현
2026년 현재 Supabase는 pgvector 확장을 기본으로 지원하므로, 임베딩 벡터를 저장하고 유사도 검색을 할 수 있습니다.
CREATE TABLE documents (
id BIGSERIAL PRIMARY KEY,
title TEXT,
content TEXT,
embedding vector(1536),
created_at TIMESTAMP DEFAULT NOW()
);
CREATE INDEX ON documents USING ivfflat (embedding vector_cosine_ops);OpenAI API로 임베딩을 생성하고 저장:
const embedding = await openai.embeddings.create({
model: 'text-embedding-3-small',
input: 'AI 개발자 채용 공고'
});
await supabase.from('documents').insert({
title: '채용 공고',
content: '...',
embedding: embedding.data[0].embedding
});유사한 문서 검색:
const queryEmbedding = await getEmbedding('개발자 구인');
const { data } = await supabase.rpc('search_documents', {
query_embedding: queryEmbedding,
match_count: 5
});이것은 AI 검색 엔진, 추천 시스템, 챗봇을 만드는 데 핵심입니다.
실전 예제: 협업 투두 앱 구축
다음은 실시간 동기화 + RLS + 함수를 모두 활용한 투두 앱입니다.
1단계: 데이터베이스 스키마
CREATE TABLE todos (
id BIGSERIAL PRIMARY KEY,
user_id UUID REFERENCES auth.users(id),
title TEXT NOT NULL,
completed BOOLEAN DEFAULT FALSE,
created_at TIMESTAMP DEFAULT NOW()
);
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;
CREATE POLICY "사용자는 자신의 투두만 조회"
ON todos FOR SELECT
USING (auth.uid() = user_id);2단계: 리액트 컴포넌트
import { useEffect, useState } from 'react';
import { supabase } from './supabaseClient';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
useEffect(() => {
const subscription = supabase
.from('todos')
.on('*', payload => {
if (payload.eventType === 'INSERT') {
setTodos(prev => [...prev, payload.new]);
} else if (payload.eventType === 'UPDATE') {
setTodos(prev =>
prev.map(t => t.id === payload.new.id ? payload.new : t)
);
} else if (payload.eventType === 'DELETE') {
setTodos(prev => prev.filter(t => t.id !== payload.old.id));
}
})
.subscribe();
return () => subscription.unsubscribe();
}, []);
const addTodo = async () => {
const { data: { user } } = await supabase.auth.getUser();
await supabase.from('todos').insert({
user_id: user.id,
title: input
});
setInput('');
};
return (
<div>
<input value={input} onChange={e => setInput(e.target.value)} />
<button onClick={addTodo}>추가</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</div>
);
}이 간단한 코드로 실시간 동기화, 인증, 권한 관리가 모두 구현됩니다.
2026년 Supabase 성능 지표
위 벤치마크는 평균 1000개 행 데이터셋 기준입니다. Supabase의 PostgreSQL 백엔드는 Firebase의 NoSQL과 달리 복잡한 쿼리에서 더 유리합니다.
주의할 점: 비용과 한계
비용 구조 (2026년 현재)
- 무료 티어: 월 50,000 행 쓰기, 500MB 저장소
- Pro: $25/월 (무제한 API 호출, 100GB 저장소)
- 실시간 데이터: 추가 비용 발생 가능
대규모 실시간 앱(초당 1000+ 이벤트)은 관리형 서버 또는 자체 호스팅 PostgreSQL을 검토해야 합니다.
피해야 할 패턴
불필요한 구독: 전체 테이블을 구독한 후 클라이언트에서 필터링하면 대역폭 낭비. 항상 필터링된 구독을 사용하세요.
과도한 RLS 정책: 중첩된 서브쿼리가 많으면 쿼리 성능이 저하됩니다. 복잡한 권한 로직은 함수로 처리하는 것이 낫습니다.
마치며
Supabase는 2026년 기준으로 가장 완성도 높은 오픈소스 백엔드 플랫폼입니다. 특히 실시간 협업 앱, AI 통합 서비스, 중소 규모 스타트업에 최적화되어 있습니다.
더 자세한 내용은 REST API 설계 베스트 프랙티스: 2026년 실무 가이드도 함께 참고하면, 전체적인 백엔드 아키텍처 설계에 도움이 될 것입니다.
참고 자료
자주 묻는 질문
Supabase 무료 티어로 충분한가요?
프로토타입이나 소규모 개인 프로젝트(월 10만 행 이하)라면 충분합니다. 하지만 실시간 기능을 많이 사용하거나 1만 명 이상의 활성 사용자가 있다면 Pro 플랜 이상을 권장합니다.
Firebase와 비교했을 때 Supabase가 나은 점은?
PostgreSQL 기반이라 복잡한 쿼리와 조인이 강력하고, RLS로 보안을 데이터베이스 수준에서 관리할 수 있습니다. 또한 오픈소스이므로 자체 호스팅도 가능합니다. 다만 에코시스템은 Firebase가 더 큽니다.
Supabase 실시간 기능의 지연시간은?
평균 50~200ms이며, 네트워크 상태와 데이터 크기에 따라 달라집니다. 게임처럼 초저지연이 필요한 경우는 WebSocket을 직접 구현하는 것이 낫습니다.
댓글