첫 번째 프로젝트 만들기

이 레슨에서는 Supabase 계정을 만들고, 무료 티어에서 첫 번째 프로젝트를 시작하고, 모든 앱에서 필요한 두 가지 값인 프로젝트 URL과 publishable key(또는 anon key)를 가져올 거예요. 레슨이 끝나면 .env 파일에 설정이 완료되어 다음 레슨을 바로 시작할 수 있어요.

계정 및 프로젝트 만들기

브라우저에서 database.new를 열어요. 이 URL은 Supabase 대시보드의 프로젝트 생성 화면으로 바로 연결돼요.

계정이 없다면 GitHub, Google, 또는 이메일로 가입할 수 있어요. 무료이고 무료 티어에서는 신용카드가 필요 없어요.

로그인하면 다음 항목을 입력하라는 화면이 나타나요:

• Organization: 기본 생성된 조직을 유지하거나 새로 만들어요.
• Name: 프로젝트 이름을 입력해요 (예: my-first-project).
• Database Password: 강력한 비밀번호를 생성하고 어딘가에 저장해 두세요. PostgreSQL에 직접 연결할 때 필요해요.
• Region: 사용자와 가장 가까운 리전을 선택해요. 유럽에 있다면 West EU (Ireland) 또는 EU West (Frankfurt)가 잘 작동해요.
• Plan: Free를 선택해요.

Create new project를 클릭해요. 프로비저닝에 약 1분이 걸려요. Supabase가 프로젝트를 위한 전용 PostgreSQL 인스턴스를 생성해요.

URL과 API 키 가져오기

이 레슨에서 가장 중요한 부분이에요. 코드가 Supabase에 연결하려면 두 가지 값이 필요해요:

• Project URL: 프로젝트 주소예요 (https://xyzabc.supabase.co 형태).
• Publishable key (또는 anon key): 클라이언트 측에 노출해도 안전한 공개 키예요. PostgreSQL의 anon 역할 권한으로 데이터베이스에 접근할 수 있는 키인데, 이는 RLS 정책이 허용한 것만 접근 가능하다는 의미예요.

대시보드에서 Settings > API Keys로 이동해요. 여기서 찾을 수 있어요:

• "Project URL" 섹션에 프로젝트 URL.
• 해당 섹션에 publishable key (또는 레거시의 anon key).

secret key (또는 service_role)는 클라이언트 파일이나 공개 저장소에 절대 복사하지 마세요. 모든 보안 정책을 우회해요.

키를 .env에 넣기

프로젝트 루트에 .env.local 파일을 만들고 값을 붙여 넣어요:

NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxx

기존 anon key 방식으로 작업하는 경우, 일반적인 변수명은 다음과 같아요:

NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

NEXT_PUBLIC_ 접두사는 Next.js 전용이에요. 클라이언트 코드에서 변수를 접근 가능하게 만들어요. 다른 프레임워크(React + Vite, SvelteKit 등)에서는 접두사가 다르지만(VITE_, PUBLIC_ 등) 값 자체는 동일해요.

Supabase 클라이언트 설치하기

앱이 Supabase와 통신하려면 JavaScript SDK를 설치해요:

$pnpm add @supabase/supabase-js

선택 사항 - Supabase CLI

Supabase CLI를 사용하면 로컬에서 프로젝트를 관리할 수 있어요(마이그레이션, 스키마에서 TypeScript 타입 생성, Docker로 로컬 스택 실행). 지금은 선택 사항이에요. 이후 레슨에서 점진적으로 소개될 거예요. 지금 바로 설치하고 싶다면:

macOS / Linux (Homebrew):

$brew install supabase/tap/supabase

Windows (Scoop):

$scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

npm을 통해 (프로젝트 로컬 의존성으로):

$pnpm add -D supabase

전역 설치 없이 npx supabase <명령어>로 실행할 수도 있어요.