바이브코딩 결과물, 이제 세상에 공개하자: 비개발자를 위한 DB 연결 & 배포 완전 가이드

[바이브코딩 흐름도: Code → Database → Deploy]

"AI로 앱 만드는 건 했는데... 그 다음은요?"

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

데이터베이스? 배포? 보안? 용어부터 막막하시죠?

걱정 마세요. 이 글에서는 GitHub 계정 없이, 프롬프트 몇 줄로 데이터베이스 연결과 배포까지 끝내는 방법을 알려드립니다.

---

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

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

문제는 그 다음입니다.

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

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

2025년 MCP(Model Context Protocol) 가 등장하면서 상황이 바뀌었습니다. 이제 AI가 데이터베이스와 배포 서비스를 직접 제어할 수 있게 되었거든요.

---

두 가지 선택지: Firebase vs Supabase + Vercel

[바이브코딩 배포 옵션 비교 - Firebase vs Supabase+Vercel]

비개발자가 바이브코딩 결과물을 세상에 공개하는 가장 쉬운 방법은 두 가지입니다.

한눈에 비교

항목	Firebase (올인원)	Supabase + Vercel
데이터베이스 타입	NoSQL (문서형)	SQL (PostgreSQL)
SQL 지식 필요?	필요 없음	기초 필요
무료 저장 용량	1GB	500MB
비활성 제한	없음	7일 미사용 시 일시정지
Google 로그인 연동	매우 쉬움	가능하지만 설정 필요
장기 확장성	벤더 종속 있음	오픈소스, 이전 용이
MCP 지원	Firebase MCP	Supabase MCP

어떤 걸 선택해야 할까?

Firebase를 선택하세요:

• 무료로 써보고 싶다
• SQL이 뭔지 모르겠다
• 일단 빨리 만들어보고 싶다
• 가끔 쓰는 사이드 프로젝트다 (비활성 제한 없음)
• Google 로그인을 쉽게 붙이고 싶다

Supabase + Vercel을 선택하세요:

• 나중에 본격 서비스로 키울 수도 있다
• 데이터 이전 가능성을 열어두고 싶다

저의 추천: 비개발자라면 Firebase로 시작하세요. 비활성 제한 없이 무료로 쓸 수 있고, 설정이 가장 간단합니다.

---

MCP란? AI가 직접 DB와 배포를 다루는 마법

[MCP(Model Context Protocol)로 AI가 Firebase와 Supabase를 직접 제어하는 개념도]

MCP(Model Context Protocol) 는 AI가 외부 서비스를 직접 제어할 수 있게 해주는 표준입니다.

쉽게 말하면, 예전에는 이랬습니다:

나: "Firebase에 배포해줘"
AI: "firebase deploy 명령어를 터미널에 입력하세요" (방법만 알려줌)
나: (직접 타이핑, 오류 발생, 구글링...)

MCP가 있으면 이렇게 됩니다:

나: "Firebase MCP로 배포해줘"
AI: (직접 Firebase에 접속해서 배포 진행)
AI: "배포 완료! https://my-app.web.app 에서 확인하세요"

Claude Code, AntiGravity, Cursor 모두 MCP를 지원합니다. 한 번 설정해두면 프롬프트 한 줄로 DB 연결과 배포가 가능해집니다.

---

[튜토리얼 A] Firebase로 한 번에 끝내기

Firebase는 Google이 제공하는 올인원 백엔드 서비스입니다. 데이터베이스, 사용자 인증, 배포(호스팅)까지 한 곳에서 해결됩니다.

Step 1: Firebase 프로젝트 생성

[Firebase 홈페이지]
Firebase 홈페이지에서 시작하기를 클릭하세요

1. firebase.google.com 접속
2. Google 계정으로 로그인
3. "프로젝트 만들기" 클릭
4. 프로젝트 이름 입력 (예: my-first-app)
5. Google Analytics는 비활성화해도 됩니다 (간단하게 시작하려면)
6. "프로젝트 만들기" 완료

Step 2: Realtime Database 활성화

1. 왼쪽 메뉴에서 빌드 → Realtime Database 클릭
2. "데이터베이스 만들기" 클릭
3. 위치는 기본값 유지
4. "테스트 모드에서 시작" 선택 (30일 후 보안 규칙 설정 필요)
5. 완료!

이제 데이터베이스가 준비되었습니다.

Step 3: 코딩 에이전트에서 Firebase MCP 설치

AntiGravity를 사용한다면:

1. 상단 메뉴에서 Additional Options → MCP Server 클릭
2. 검색창에 "Firebase" 입력
3. "Firebase MCP" 설치
4. 설치 완료!

Claude Code를 사용한다면:

claude mcp add firebase -- npx -y firebase-mcp

Step 4: 프롬프트 한 줄로 연결 & 배포

이제 마법의 프롬프트를 입력합니다:

Firebase MCP를 사용해서 이 앱에 Realtime Database를 연결하고 배포해줘

AI가 자동으로 진행합니다:

1. Firebase 로그인 링크 제공 → 브라우저에서 로그인
2. 인증 코드가 나오면 → 복사해서 붙여넣기
3. 프로젝트 목록이 나오면 → 방금 만든 프로젝트 선택
4. 배포 진행 → 완료!

실제 프롬프트 예시 모음

데이터베이스 연결:

Firebase Realtime Database에 연결해서 메모 데이터가 저장되게 해줘

회원가입/로그인 추가:

Firebase Authentication을 이용해서 이메일/비밀번호 로그인 기능 만들어줘

배포:

Firebase Hosting으로 이 앱 배포해줘

오류 발생 시:

[오류 메시지 붙여넣기]
이 오류가 왜 발생하는지 알려주고 해결해줘

완료 후 확인

배포가 완료되면 이런 URL을 받게 됩니다:

https://my-first-app-12345.web.app

이 링크를 친구에게 공유하면, 누구나 여러분의 앱을 사용할 수 있습니다!

---

[튜토리얼 B] Supabase + Vercel로 확장 가능하게

Supabase는 Firebase의 오픈소스 대안입니다. PostgreSQL 기반이라 SQL 표준을 따르고, 나중에 다른 서비스로 이전하기 쉽습니다.

Step 1: Supabase 프로젝트 생성

[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: Vercel로 배포하기 (GitHub 없이)

[Vercel 홈페이지]
Vercel은 무료로 웹앱을 배포할 수 있는 플랫폼입니다

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

방법 1: Vercel CLI 사용

Vercel CLI로 이 앱을 배포해줘

AI가 안내하는 대로:

1. Vercel 로그인 (이메일 또는 GitHub)
2. 프로젝트 설정 (기본값 사용)
3. 환경 변수 입력:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. 배포 완료!

방법 2: 폴더 직접 업로드

1. vercel.com 접속 및 가입
2. "Add New → Project" 클릭
3. "Import from your computer" 옵션 찾기 (CLI 설치 안내가 나오면 npx vercel 사용)
4. 프로젝트 폴더 선택
5. 환경 변수 입력
6. Deploy 클릭

실제 프롬프트 예시 모음

테이블에서 데이터 읽기:

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

데이터 추가:

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

완료 상태 토글:

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

배포 시 환경 변수 오류:

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

---

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

바이브코딩으로 앱을 만들 때 꼭 알아야 할 보안 수칙이 있습니다.

1. 환경 변수: 열쇠를 금고에 보관하기

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. 바이브코딩 + MCP = 프롬프트 한 줄로 DB 연결과 배포 가능
2. 비개발자는 Firebase로 시작 추천 (비활성 제한 없음, 설정 간단)
3. 장기 프로젝트라면 Supabase + Vercel 고려 (확장성, 이전 용이)
4. 보안 3가지: 환경 변수, .gitignore, 환경 분리 꼭 지키기

지금 바로 해보세요

1. Firebase 콘솔에서 프로젝트 하나 만들기
2. AntiGravity나 Claude Code에서 Firebase MCP 설치
3. "Firebase MCP로 이 앱 배포해줘" 입력

"코드 다음 단계"는 더 이상 장벽이 아닙니다.

여러분이 만든 앱, 이제 세상에 공개할 차례예요.

---

이 글이 도움이 되셨다면, 실제로 배포에 성공한 경험을 댓글로 공유해주세요!

---

부록: 자주 쓰는 프롬프트 모음

Firebase

작업	프롬프트
DB 연결	Firebase Realtime Database 연결해서 데이터 저장되게 해줘
로그인 추가	Firebase Authentication으로 이메일 로그인 만들어줘
Google 로그인	Firebase로 Google 소셜 로그인 추가해줘
배포	Firebase Hosting으로 배포해줘
오류 해결	[오류 메시지] 이게 왜 발생하는지 알려주고 해결해줘

Supabase + Vercel

작업	프롬프트
연결	Supabase 연결해줘. URL: [URL], Key: [KEY]
테이블 읽기	[테이블명]에서 모든 데이터 가져와서 보여줘
데이터 추가	폼 제출하면 [테이블명]에 저장되게 해줘
배포	Vercel CLI로 배포해줘
환경 변수	Vercel에 환경 변수 설정하는 방법 알려줘

---

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

처음 접하면 어려운 개발 용어들, 쉬운 비유로 정리했습니다.

기본 개념

용어	쉬운 설명	비유
프론트엔드 (Frontend)	사용자가 보고 클릭하는 화면 부분	식당의 홀 (손님이 보는 곳)
백엔드 (Backend)	데이터 처리, 저장 등 보이지 않는 부분	식당의 주방 (손님이 안 보는 곳)
데이터베이스 (Database)	데이터를 저장하는 창고	엑셀 파일이 모여있는 폴더
서버 (Server)	앱을 실행하고 데이터를 주고받는 컴퓨터	24시간 켜져 있는 컴퓨터
API	프로그램끼리 대화하는 방법	식당 웨이터 (주문을 주방에 전달)

데이터베이스 관련

용어	쉬운 설명	비유
테이블 (Table)	데이터를 담는 표	엑셀 시트 하나
컬럼 (Column)	테이블의 열 (항목 이름)	엑셀의 열 (이름, 나이, 이메일 등)
로우/레코드 (Row/Record)	테이블의 행 (실제 데이터)	엑셀의 행 (홍길동, 30, hong@...)
스키마 (Schema)	데이터 구조를 정의한 설계도	엑셀 템플릿 (어떤 열이 있어야 하는지)
쿼리 (Query)	데이터베이스에 요청하는 질문	"30대 회원 목록 보여줘"
SQL	데이터베이스와 대화하는 언어	데이터베이스용 명령어
NoSQL	SQL이 아닌 방식의 데이터베이스	JSON 형태로 저장하는 방식

배포 관련

용어	쉬운 설명	비유
배포 (Deploy)	앱을 인터넷에 올려서 누구나 접근 가능하게 만드는 것	가게 오픈
호스팅 (Hosting)	앱을 올려두는 서버 공간	가게 임대 공간
도메인 (Domain)	웹사이트 주소 (예: google.com)	가게 간판/주소
빌드 (Build)	코드를 실행 가능한 형태로 변환	레시피를 실제 요리로 만들기
로컬 (Local)	내 컴퓨터에서만 실행	집에서 혼자 요리해 먹기
프로덕션 (Production)	실제 서비스되는 환경	실제 영업 중인 가게

인증/보안 관련

용어	쉬운 설명	비유
인증 (Authentication)	"당신이 누구인지" 확인	신분증 검사
API 키 (API Key)	서비스 이용 권한을 증명하는 비밀 열쇠	출입증, 열쇠
환경 변수 (Environment Variable)	비밀 정보를 코드 외부에 저장하는 방법	금고에 열쇠 보관
.env 파일	환경 변수를 저장하는 파일	비밀번호 메모장 (절대 공개 금지)
.gitignore	공유하지 않을 파일 목록	"이건 올리지 마" 리스트

개발 도구 관련

용어	쉬운 설명	비유
CLI	글자로 명령을 입력하는 방식	터미널, 검은 화면에 타이핑
GUI	마우스로 클릭하는 방식	일반적인 윈도우 프로그램
패키지 (Package)	다른 사람이 만든 코드 묶음	레고 블록 (가져다 조립)
npm	JavaScript 패키지 관리자	레고 블록 가게
MCP	AI가 외부 서비스를 제어하는 표준	AI용 리모컨
SDK	특정 서비스를 쉽게 쓰게 해주는 도구 모음	설명서 + 도구 세트

---

참고 자료

• Firebase 공식 문서
• Supabase 공식 문서
• Vercel 배포 가이드
• MCP 공식 사이트