비개발자를 위한 바이브코딩 앱 DB 연결과 배포 가이드 (Supabase · Vercel)

바이브코딩으로 To-Do 앱을 만들었습니다. 버튼도 예쁘고 기능도 잘 동작합니다. 그런데 새로고침하면 데이터가 사라집니다. 친구한테 보여주고 싶어도 앱은 내 컴퓨터에서만 열립니다.

데이터베이스, 배포, 보안 같은 용어부터 막막하게 느껴질 수 있습니다. 이 글은 GitHub 계정 없이 프롬프트 몇 줄로 데이터베이스 연결과 배포까지 끝내는 방법을 알려드립니다.

바이브코딩, 왜 여기서 막히는 걸까?

바이브코딩(Vibe Coding)은 AI에게 "이런 앱 만들어줘"라고 말하면 AI가 코드를 생성해 주는 개발 방식입니다. Claude Code, Cursor, AntiGravity 같은 도구에 프롬프트만 잘 쓰면 그럴듯한 앱이 금방 나옵니다.

막히는 건 그다음입니다.

• 만든 앱에 데이터를 저장하고 싶다 → 데이터베이스 연결 필요
• 다른 사람도 쓸 수 있게 하고 싶다 → 배포 필요
• 하지만 서버 설정, 환경변수, CLI 명령어... 복잡해 보인다

"코드는 AI가 써주는데, 배포는 왜 아직도 복잡하지?"

지금은 AI 코딩 도구가 터미널 명령도 직접 실행합니다. Supabase와 Vercel은 둘 다 CLI를 제공합니다. 로그인만 해 두면 DB 연결과 배포 명령은 AI가 대신 실행합니다.

Supabase로 저장하고 Vercel로 공개합니다

Supabase는 앱의 데이터를 저장하고, Vercel은 앱을 인터넷 주소로 공개합니다. 두 서비스를 함께 쓰면 DB 연결부터 배포까지 끝낼 수 있습니다.

Supabase는 오픈소스 데이터베이스 서비스입니다. PostgreSQL 기반이라 SQL 표준을 따르고, 나중에 다른 서비스로 옮기기 쉽습니다. 이메일로 가입할 수 있고, SQL을 몰라도 시각적 에디터로 테이블을 만들 수 있습니다. Vercel은 GitHub 없이도 배포할 수 있습니다.

시작하기 전에 알아 둘 점이 두 가지 있습니다.

• Supabase 무료 플랜의 저장 용량은 500MB입니다.
• 무료 프로젝트는 7일 동안 쓰지 않으면 일시정지됩니다.

CLI로 AI가 DB 연결과 배포를 직접 합니다

CLI(Command Line Interface) 는 마우스로 클릭하는 대신 글자로 명령을 입력해 프로그램을 다루는 방식입니다. Supabase CLI와 Vercel CLI를 쓰면 대시보드를 돌아다니며 클릭하지 않아도 됩니다.

명령어를 외울 필요는 없습니다. Claude Code, AntiGravity, Cursor 같은 AI 코딩 도구는 터미널 명령을 직접 실행할 수 있습니다. 내가 할 일은 원하는 결과를 말하는 것입니다.

나: "Supabase CLI로 todos 테이블 만들어줘"
AI: (supabase migration new 로 SQL 파일을 만들고 supabase db push 로 반영)
AI: "todos 테이블을 만들었습니다"

나: "Vercel CLI로 이 앱 배포해줘"
AI: (npx vercel --prod 실행)
AI: "배포가 끝났습니다. 아래 주소에서 확인하세요"

사람이 직접 해야 하는 일은 처음 한 번 하는 로그인뿐입니다. 로그인 창이 브라우저에 뜨면 승인만 하면 됩니다.

Supabase + Vercel로 DB 연결하고 배포하기

Step 1: Supabase 프로젝트 생성

Supabase 홈페이지에서 시작하기를 클릭하세요

1. supabase.com 접속
2. "Start your project" 클릭
3. GitHub 또는 이메일로 가입 (GitHub 없어도 이메일로 가능)
4. "New Project" 클릭
5. 프로젝트 이름과 데이터베이스 비밀번호 입력
6. Region은 가장 가까운 Northeast Asia (Seoul) 선택
7. "Create new project" 클릭

Step 2: 테이블 만들기 (시각적 에디터)

Supabase에서는 SQL을 몰라도 시각적 에디터로 테이블을 만들 수 있습니다.

1. 왼쪽 메뉴에서 Table Editor 클릭
2. "New Table" 클릭
3. 테이블 이름 입력 (예: todos)
4. 컬럼 추가:
   • id (자동 생성됨)
   • title - text 타입
   • completed - bool 타입
   • created_at - timestamptz 타입 (기본값: now())
5. "Save" 클릭

Step 3: API 키 확인

1. 왼쪽 메뉴에서 Project Settings → API 클릭
2. 아래 두 가지 정보를 메모장에 복사
   • Project URL · https://xxxxxxxx.supabase.co
   • anon public key · eyJhbGci... (매우 긴 문자열)

Step 4: 앱에 Supabase 연결하기

AI 코딩 도구에 아래 프롬프트를 입력합니다.

Supabase를 연결해줘.
URL: https://xxxxxxxx.supabase.co
anon key: eyJhbGci...

todos 테이블에서 데이터를 읽고 쓸 수 있게 해줘

그러면 AI가 순서대로 처리합니다.

1. Supabase 패키지 설치
2. 연결 코드 작성
3. 데이터 읽기/쓰기 기능 구현

Step 5: Supabase CLI 로그인하고 프로젝트 연결하기

이 단계를 해 두면 테이블 추가나 수정 같은 DB 작업도 AI에게 맡길 수 있습니다. AI 코딩 도구에 이렇게 입력합니다.

Supabase CLI로 로그인하고 내 프로젝트에 연결해줘

AI는 아래 명령을 차례로 실행합니다.

npx supabase login
npx supabase link --project-ref xxxxxxxx

xxxxxxxx 자리에는 Step 3에서 복사한 Project URL의 앞부분이 들어갑니다. 로그인 창이 브라우저에 뜨면 승인하세요. Step 2에서 시각적 에디터로 만든 테이블도 이제 "Supabase CLI로 todos 테이블에 due_date 컬럼 추가해줘"처럼 요청할 수 있습니다.

Step 6: Vercel CLI로 배포하기 (GitHub 없이)

Vercel은 무료로 웹앱을 배포할 수 있는 플랫폼입니다

Vercel은 Next.js를 만든 회사의 배포 플랫폼이고, GitHub 없이도 배포할 수 있습니다.

vercel.com에서 가입한 뒤 AI 코딩 도구에 이렇게 입력합니다.

Vercel CLI로 이 앱을 배포해줘. Supabase URL과 anon key는 환경 변수로 넣어줘

AI는 아래 순서로 명령을 실행합니다.

npx vercel login
npx vercel link
npx vercel env add NEXT_PUBLIC_SUPABASE_URL
npx vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY
npx vercel --prod

1. vercel login 으로 로그인합니다. 브라우저에 로그인 창이 뜨면 승인합니다.
2. vercel link 로 이 폴더를 Vercel 프로젝트와 연결합니다. 프로젝트 설정을 물으면 기본값을 그대로 쓰면 됩니다.
3. vercel env add 로 Supabase URL과 anon key를 환경 변수로 등록합니다. 값을 물으면 Step 3에서 복사한 값을 넣고, 적용할 환경을 물으면 Production을 고릅니다.
4. vercel --prod 로 앱을 실제 서비스 주소에 배포합니다.

배포가 끝나면 https://프로젝트이름.vercel.app 형태의 주소가 나옵니다. 이 주소를 공유하면 누구나 앱을 쓸 수 있습니다.

실제 프롬프트 예시 모음

테이블에서 데이터 읽기:

Supabase의 todos 테이블에서 모든 할 일 목록을 가져와서 화면에 보여줘

데이터 추가:

새로운 할 일을 입력하면 Supabase todos 테이블에 저장되게 해줘

완료 상태 토글:

할 일을 클릭하면 completed 값이 true/false로 토글되게 해줘

배포 시 환경 변수 오류:

Vercel에 환경 변수를 추가해야 해.
NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY를 설정하는 방법 알려줘

반드시 알아야 할 보안 3가지

바이브코딩으로 만든 앱을 공개하기 전에 아래 세 가지는 꼭 챙겨야 합니다.

1. 환경 변수로 API 키 분리하기

API 키를 코드에 직접 적어 두면 코드를 보는 누구나 그 키를 복사할 수 있습니다.

잘못된 방법:

// 절대 이렇게 하지 마세요!
const apiKey = "sk-1234567890abcdef"

올바른 방법:

// 환경 변수에서 가져오기
const apiKey = process.env.API_KEY

환경 변수는 .env 파일에 저장합니다.

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

프롬프트 예시:

API 키를 환경 변수로 분리해줘. .env.local 파일을 만들고 거기에 저장해

2. .gitignore로 민감한 파일 보호하기

.env 파일이 인터넷에 올라가면 그 안의 키가 그대로 공개됩니다. .gitignore 파일에 추가해서 올라가지 않게 막으세요.

# .gitignore에 이 내용이 있는지 확인
.env
.env.local
.env*.local

프롬프트 예시:

.gitignore에 .env 파일이 포함되어 있는지 확인하고, 없으면 추가해줘

3. 개발/프로덕션 환경 분리

2025년 7월, 한 개발자가 바이브코딩을 하던 중 AI가 전체 데이터베이스를 삭제하는 사고가 있었습니다. 개발 환경과 프로덕션 환경을 분리하지 않은 것이 원인이었습니다.

반드시 지켜야 할 것:

• 개발용 프로젝트와 실제 서비스용 프로젝트를 분리
• AI에게 프로덕션 DB 직접 접근 권한 주지 않기
• 중요한 작업 전 백업

프롬프트 예시:

이 프로젝트를 개발용과 프로덕션용으로 분리하고 싶어. 어떻게 설정하면 될까?

마치며

1. Supabase CLI와 Vercel CLI에 로그인해 두면 AI가 DB 작업과 배포 명령을 대신 실행합니다
2. Supabase로 데이터를 저장하고, Vercel로 앱을 공개합니다
3. 보안은 환경 변수, .gitignore, 환경 분리 세 가지를 꼭 지키세요

지금 바로 해보세요

1. supabase.com에서 프로젝트 하나 만들기
2. Table Editor에서 todos 테이블 만들기
3. AI 코딩 도구에 "Supabase CLI로 로그인하고 내 프로젝트에 연결해줘"와 "Vercel CLI로 이 앱을 배포해줘" 입력

배포에 성공했다면 그 경험을 댓글로 공유해 주세요.

부록 1. 자주 쓰는 프롬프트 모음

부록 2. 비개발자를 위한 개발 용어 가이드

처음 접하면 어려운 개발 용어를 쉬운 설명과 비유로 정리했습니다.

기본 개념

데이터베이스 관련

배포 관련

인증/보안 관련

개발 도구 관련

참고 자료

• Supabase 공식 문서
• Vercel 배포 가이드