App Dev3분 읽기

Supabase로 백엔드 없이 풀스택 앱 만들기

Supabase 하나로 인증, 데이터베이스, 스토리지, 실시간 기능까지 구현하는 방법을 알아봅니다. 백엔드 서버 없이도 프로덕션 수준의 풀스택 앱을 만들 수 있습니다.

#Supabase#풀스택#백엔드리스#PostgreSQL#BaaS

Supabase로 백엔드 없이 풀스택 앱 만들기

"백엔드가 없으면 진짜 앱이 아니다"라는 말은 이제 옛말입니다. Supabase는 Firebase의 오픈소스 대안으로, PostgreSQL 기반의 강력한 BaaS(Backend as a Service) 플랫폼입니다. 인증, DB, 스토리지, 실시간 구독까지 하나의 서비스로 해결하면서도 벤더 종속 없이 운영할 수 있다는 점이 핵심입니다.

Supabase가 특별한 이유

Firebase와 달리 Supabase는 PostgreSQL을 그대로 사용합니다. 관계형 데이터 모델링이 가능하고, SQL 쿼리를 직접 작성할 수 있으며, Row Level Security(RLS)를 통해 데이터베이스 수준에서 보안을 제어합니다. 즉, Express나 NestJS 같은 API 서버를 따로 두지 않아도 클라이언트에서 안전하게 DB에 접근할 수 있습니다.

또한 완전한 오픈소스이기 때문에 자체 서버에 셀프 호스팅도 가능합니다. 스타트업에도, 사이드 프로젝트에도 부담 없이 시작할 수 있는 구조입니다.

프로젝트 셋업: 5분이면 충분합니다

npm install @supabase/supabase-js

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

Supabase 대시보드에서 프로젝트를 생성하면 URL과 API Key를 즉시 발급받을 수 있습니다. .env 파일에 두 값을 넣는 것만으로 모든 기능의 문이 열립니다.

인증: 이메일부터 소셜 로그인까지

별도의 JWT 구현 없이도 완성된 인증 시스템을 사용할 수 있습니다.

// 회원가입
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'securepassword'
})

// 소셜 로그인 (Google, GitHub, Kakao 등)
await supabase.auth.signInWithOAuth({ provider: 'google' })

// 현재 세션 확인
const { data: { session } } = await supabase.auth.getSession()

세션은 자동으로 로컬스토리지에 저장되고, 토큰 갱신도 SDK가 처리합니다. 별도의 미들웨어나 쿠키 로직을 구현할 필요가 없습니다.

데이터베이스: SQL의 힘을 그대로

테이블 생성과 데이터 CRUD는 JavaScript SDK로 직접 처리합니다. 복잡한 조인도 가능합니다.

// 데이터 조회 (JOIN 포함)
const { data } = await supabase
  .from('posts')
  .select('*, profiles(username, avatar_url)')
  .eq('published', true)
  .order('created_at', { ascending: false })

// 데이터 삽입
await supabase.from('posts').insert({
  title: '첫 번째 글',
  content: '내용...',
  user_id: session.user.id
})

RLS 정책을 설정하면 user_id가 현재 로그인한 사용자와 일치하는 행만 반환하도록 DB 레벨에서 강제할 수 있습니다. 백엔드 없이도 보안이 완성됩니다.

실시간 구독: 채팅 앱도 거뜬히

const channel = supabase
  .channel('public:messages')
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'messages'
  }, (payload) => {
    setMessages(prev => [...prev, payload.new])
  })
  .subscribe()

WebSocket 연결을 직접 관리할 필요 없이, DB 변경 사항이 실시간으로 클라이언트에 푸시됩니다. 채팅, 협업 툴, 대시보드 업데이트 등에 즉시 활용 가능합니다.

언제 Supabase만으로 충분할까?

Supabase 단독 구성이 잘 맞는 경우가 있습니다:

  • SaaS MVP 빠른 런칭: 인증과 CRUD 중심의 앱
  • 인디 해커 프로젝트: 운영 비용을 최소화해야 할 때
  • Next.js / Nuxt 앱: 서버리지 환경과 찰떡궁합

반면 복잡한 비즈니스 로직, 외부 API 오케스트레이션, 배치 작업이 많다면 Supabase Edge Functions를 함께 사용하는 것이 현실적입니다. Deno 기반의 서버리스 함수로 커스텀 로직을 처리하면, 여전히 별도의 Express 서버 없이 운영할 수 있습니다.

마치며

Supabase는 단순한 Firebase 대체제가 아닙니다. PostgreSQL의 신뢰성과 현대적인 개발자 경험을 동시에 제공하는, 진지하게 고려할 만한 풀스택 솔루션입니다. 다음 사이드 프로젝트를 시작할 때, 백엔드 셋업에 시간을 쓰는 대신 Supabase 하나로 프로덕트에만 집중해 보세요. 생각보다 훨씬 멀리 갈 수 있습니다.

공유하기Twitter / X