Supabase 가입부터 첫 테이블 만들기까지 — PostgreSQL을 GUI로 다루기

 

데이터베이스가 필요한데 서버 관리는 하기 싫을 때 쓰는 게 Supabase다. 가입부터 첫 테이블 만들고 Next.js에 연결하기까지 정리했다.

3줄 요약

• Supabase는 PostgreSQL DB + 인증 + 파일 저장소를 한 번에 제공하는 서비스다.
• 무료 플랜으로 프로젝트 2개, DB 500MB까지 쓸 수 있다.
• SQL 몰라도 GUI Table Editor로 테이블을 만들고 데이터를 넣을 수 있다.

언제 Supabase가 필요한가

단순한 정적 데이터(JSON 파일)로 충분한 프로젝트라면 굳이 DB가 필요 없다. 투자 대시보드처럼 종목 정보가 고정되어 있고 시세만 갱신되면 JSON으로 관리해도 된다.

그런데 사용자마다 다른 데이터를 저장하거나, 데이터가 자주 추가·수정·삭제되거나, 로그인 기능이 필요한 경우엔 DB가 있어야 한다. 업무 관리 대시보드처럼 거래처별로 미팅 기록을 쌓고 검색하는 용도라면 Supabase가 적합하다.

Firebase를 써본 적 있다면 비슷한 포지션이다. 차이는 Supabase가 PostgreSQL 기반이라 관계형 쿼리가 된다는 것이다. 복잡한 JOIN이나 집계 쿼리가 필요할 때 훨씬 유연하다.

가입 — GitHub 계정으로 바로

supabase.com 접속 → Start your project → Continue with GitHub

GitHub 계정이 있으면 별도 가입 없이 연동된다.

첫 프로젝트 만들기

로그인 후 New project 클릭. 아래 항목을 입력한다.

프로젝트 생성 설정

Name: 프로젝트 이름 (나중에 URL에 들어감)

Database Password: DB 접속 비밀번호
→ 복잡하게 설정하고 어딘가 저장해둘 것. 나중에 다시 볼 수 없다.

Region: Northeast Asia (Seoul) 선택
→ 한국에서 접속하면 서울이 가장 빠르다.

Create new project 클릭 후 1~2분 기다리면 프로젝트가 생성된다.

테이블 만들기 — SQL 없이 GUI로

좌측 메뉴에서 Table Editor 클릭 → New table

테이블 이름을 입력하고 컬럼을 추가한다. 기본으로 id(UUID)와 created_at(타임스탬프)이 자동으로 들어가 있다. 필요한 컬럼만 추가하면 된다.

컬럼 추가 예시 — 회사 목록 테이블

컬럼명	타입	설명
id	uuid	자동 생성 (기본값)
name	text	회사명, Not Null 체크
country	text	국가
created_at	timestamptz	자동 생성 (기본값)

Save 클릭하면 테이블이 만들어진다. Table Editor에서 바로 데이터를 추가하거나 볼 수도 있다.

연결 정보 확인 — 코드에서 쓸 키

좌측 메뉴 하단 Project Settings → API

여기서 두 가지를 복사한다.

Project URL:  https://[프로젝트ID].supabase.co
anon key:     eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

service_role key는 절대 클라이언트 코드에 넣지 말 것
같은 화면에 service_role key도 있는데, 이건 DB의 모든 권한을 가진 키다. 서버사이드 코드에서만 써야 한다. 브라우저에서 접근 가능한 코드에 넣으면 누구든 DB를 조작할 수 있다.

Next.js에서 연결하기

먼저 라이브러리를 설치한다.

npm install @supabase/supabase-js

.env.local 파일에 연결 정보를 넣는다.

NEXT_PUBLIC_SUPABASE_URL=https://[프로젝트ID].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

클라이언트 생성 코드다.

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

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

// 데이터 조회
const { data, error } = await supabase
  .from('companies')
  .select('*')
  .order('created_at', { ascending: false })

SQL 쿼리 없이 체인 방식으로 조회·삽입·수정·삭제가 된다.

RLS — 내 데이터를 남이 못 보게 하는 설정

Supabase는 기본적으로 RLS(Row Level Security)가 꺼져 있다. 이 상태면 anon key만 알면 누구든 테이블을 읽을 수 있다.

개인 프로젝트라도 테이블을 만든 후 RLS를 켜는 게 습관이 되어야 한다.

Table Editor → 테이블 선택 → RLS disabled 토글 클릭 → Enable RLS

RLS를 켜면 기본적으로 모든 접근이 차단된다. 허용할 접근은 Policy를 추가해서 설정한다. 로그인한 사용자 본인 데이터만 읽을 수 있게 하는 Policy 예시:

-- 본인 데이터만 조회 허용
CREATE POLICY "본인 데이터만"
ON companies
FOR SELECT
USING (auth.uid() = owner_id);

SQL이 익숙하지 않다면 Table Editor → Authentication → Policies에서 템플릿을 골라 클릭으로 추가할 수 있다. 화면 확인 후 적용하면 된다.

무료 플랜 주의사항

Supabase 무료 플랜은 7일 이상 접속이 없으면 프로젝트가 일시 중지된다. 이메일로 알림이 오고, 대시보드에서 다시 활성화할 수 있다. 데이터가 삭제되는 건 아니다.

자동으로 일시 중지를 막고 싶다면 GitHub Actions로 7일에 한 번씩 DB에 더미 쿼리를 보내는 방법도 있다. 아니면 Pro 플랜($25/월)으로 올리거나.

---

설계도 — Supabase 연결 구조

Supabase 프로젝트
  ├─ Database (PostgreSQL)
  │    └─ Table Editor로 GUI 관리
  ├─ Authentication (로그인/회원가입)
  ├─ Storage (파일 업로드)
  └─ Edge Functions (서버리스 함수)

연결 키 종류
  anon key      → 클라이언트(브라우저) 사용 가능
  service_role  → 서버사이드 전용, 절대 노출 금지

Next.js 연동 흐름
  .env.local
    SUPABASE_URL + ANON_KEY
        ↓
  createClient() → Supabase 클라이언트 생성
        ↓
  .from('table').select() → 데이터 조회
  .from('table').insert() → 데이터 추가

보안 레이어
  RLS 활성화 → 기본 전체 차단
  Policy 추가 → 허용할 접근만 명시
  auth.uid() → 로그인 사용자 본인 데이터만 허용