📍 시리즈 위치
3편: 배포 ✓
→
4편: 백업 ✓
→
5편: .env ✓
→
▶ 6편: Supabase (지금)
→
7편: OpenAI API
🔄 새로고침하면 사라지는 이유 — 지금까지 앱의 한계
💬 이 순간, 겪어봤나요?
브라우저를 새로고침했습니다.
열심히 입력했던 메모가 전부 사라졌습니다.
"아, 이건 아직 진짜 앱이 아니구나" 싶었습니다.
맞습니다.
지금까지 만든 앱은 브라우저 안에서만 잠깐 살아있는 상태였습니다.
서버가 꺼지거나 새로고침하면 초기화됩니다.
이번 편부터 달라집니다. 데이터를 "어딘가"에 저장하면 새로고침해도, 다른 기기에서 열어도 사라지지 않습니다. 그 "어딘가"가 데이터베이스입니다.
이번 편 목표는 단 하나입니다.
"새로고침해도 안 사라지는 경험"
"새로고침해도 안 사라지는 경험"
💡 지금까지 앱 vs 이번 편 이후 앱 — 무엇이 달라지나
❌ DB 없는 앱
새로고침하면 데이터 사라짐
브라우저 안에서만 존재
서버 재시작하면 초기화
다른 기기에서 열면 빈 화면
✅ DB 연결 후
새로고침해도 그대로 남음
데이터가 인터넷에 저장됨
서버 재시작해도 살아있음
스마트폰에서도 동일하게 보임
DB가 뭔지, SQL이 뭔지 알 필요 없습니다. AI에게 테이블을 만들어달라고 요청하고, 저장·불러오기 코드도 요청하면 됩니다. 이 편에서 중요한 건 지식이 아니라 경험입니다.
📊 DB를 비유로 이해하기 — 앱용 엑셀 파일
데이터베이스를 기술적으로 이해할 필요 없습니다. 아래 비유 하나만 기억하면 됩니다.
📊 엑셀로 이해하는 데이터베이스
데이터베이스
Database
엑셀 파일 전체
메모들이 저장되는 "파일" 자체. Supabase가 이걸 인터넷에 보관해줍니다.
테이블
Table
엑셀 시트 하나
메모 시트, 사용자 시트처럼 종류별로 나눠진 각각의 시트입니다.
행(Row)
Record
엑셀 한 행 = 메모 하나
메모를 추가할 때마다 새 행이 하나씩 생깁니다.
열(Column)
Field
엑셀 열 = 메모의 항목
제목, 내용, 작성일처럼 각 메모가 갖는 속성입니다.
핵심: 데이터베이스는 "앱용 엑셀 파일을 인터넷에 둔 것"입니다.
앱이 저장할 때마다 새 행이 추가되고, 불러올 때마다 행들을 읽어옵니다.
앱이 저장할 때마다 새 행이 추가되고, 불러올 때마다 행들을 읽어옵니다.
데이터베이스를 엑셀로 이해하는 비유 — Supabase 바이브 코딩 입문
🔐 Supabase 가입 — 최소화 버전
여기서 화면이 갑자기 복잡해 보여도 괜찮습니다
지금은 딱 세 가지만 하면 됩니다.
① 프로젝트 하나 만들기
→
② URL 복사
→
③ API 키 복사
가입 자체는 빠르게 끝냅니다. 3가지만 하면 됩니다.
1
Supabase 가입 — GitHub 계정으로 바로
supabase.com 접속 → "Start your project" → "Continue with GitHub" 클릭. 이미 GitHub 계정이 있으면 별도 가입 없이 바로 로그인됩니다.
✅ 확인: Supabase 대시보드가 열리면 완료
2
새 프로젝트 생성
대시보드에서 "New Project" 클릭. 아래 설정만 입력합니다.
입력할 것들
Project name: my-memo-app (영어, 공백 금지)
Database Password: 강력한 비밀번호 입력 (나중에 .env에 넣을 것)
Region: Northeast Asia (Seoul) 선택 ← 가장 빠름
→ "Create new project" 클릭 → 1~2분 대기
⚠️ Database Password는 반드시 기록해두세요. 나중에 연결에 필요합니다.
3
API 키 복사 — .env에 저장
프로젝트 생성 완료 후 설정 화면에서 API 키를 복사해서 .env 파일에 저장합니다.
5편에서 만들었던 .env 파일 기억나시나요?
그때는 OpenAI 키를 저장했습니다. 이번에는 같은 방식으로 Supabase 연결 정보를 저장합니다. 방법은 완전히 동일합니다.
그때는 OpenAI 키를 저장했습니다. 이번에는 같은 방식으로 Supabase 연결 정보를 저장합니다. 방법은 완전히 동일합니다.
Settings → Data API에서 URL(xx.supabase.co 까지만), API key에서 public key를 복사할 것
Project URL: https://xxxxx.supabase.co
anon public key: eyJhbGci... (긴 문자열)
.env 파일에 추가
SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGci...
✅ .env에 저장 완료 → 이제 AI에게 테이블을 만들어달라고 할 차례입니다
🤖 AI에게 테이블 만들어달라고 하기 — SQL 몰라도 됩니다
Supabase에는 SQL Editor가 있습니다. SQL이 뭔지 몰라도 됩니다. AI에게 아래처럼 요청하면 AI가 SQL 코드를 만들어주고, 그걸 그대로 붙여넣으면 됩니다.
✅ 복붙용 — AI에게 테이블 생성 요청
Supabase에서 메모 앱용 테이블을 만들려고 해.
아래 항목을 포함한 SQL 코드를 만들어줘.
- id: 자동 증가하는 고유번호
- title: 메모 제목 (텍스트)
- content: 메모 내용 (텍스트)
- created_at: 생성 시간 (자동 입력)
Supabase SQL Editor에 바로 붙여넣을 수 있는 형태로 줘.
※ SQL을 이해할 필요 없습니다. AI가 준 코드를 그대로 복사하면 됩니다.
1
AI가 준 SQL 코드 복사
AI가 CREATE TABLE ... 형태의 코드를 줍니다. 전체를 복사합니다. 내용을 이해하려 하지 않아도 됩니다.
2
Supabase SQL Editor에 붙여넣고 실행
Supabase 대시보드 → 왼쪽 메뉴 "SQL Editor" → 새 쿼리 → AI 코드 붙여넣기 → "Run" 버튼 클릭.
✅ 확인: 왼쪽 메뉴 "Table Editor"에서 방금 만든 테이블이 보이면 완료
💡Supabase가 RLS 관련 경고를 주면 Enable Row Level Security (RLS 비활성화) 선택, 에러가 났다면 → 에러 메시지 전체 복사 → AI에게 "이 에러 났어, 수정해줘" 전달
테이블을 잘못 만들어도 괜찮습니다
처음엔 테이블을 여러 번 지우고 다시 만드는 게 정상입니다.
실제 개발자도 DB 구조를 자주 수정합니다.
연습 단계에서 저장된 데이터는 지워도 아무 문제 없습니다. 언제든 다시 만들 수 있습니다.
실제 개발자도 DB 구조를 자주 수정합니다.
연습 단계에서 저장된 데이터는 지워도 아무 문제 없습니다. 언제든 다시 만들 수 있습니다.
Supabase SQL Editor에서 AI가 만든 코드로 테이블 생성하는 화면
🔗 앱과 Supabase 연결하기
테이블이 만들어졌습니다. 이제 앱 코드에 Supabase를 연결합니다. AI에게 요청하면 됩니다.
✅ 복붙용 — Supabase 연결 요청 프롬프트
내 Node.js + Express 앱에 Supabase를 연결해줘.
.env 파일에 아래 두 값이 있어:
SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyJhbGci...
npm install @supabase/supabase-js 포함해서
Supabase 클라이언트를 초기화하는 코드를 만들어줘.
supabase.js 파일로 분리해서 만들어줘.
※ 이 코드는 6편에서 한 번만 작성합니다. 이후 편에서 계속 재사용됩니다.
1
패키지 설치
터미널에서 실행
npm install @supabase/supabase-js
2
AI가 만들어준 supabase.js 파일 저장
AI가 supabase.js 파일 코드를 줍니다. VS Code에서 supabase.js 파일 생성 → 코드 붙여넣기 → Ctrl+S 저장.
supabase.js — AI가 만들어주는 코드 예시
// Supabase 클라이언트 초기화
const { createClient } = require('@supabase/supabase-js');
const supabase = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_ANON_KEY
);
module.exports = { supabase };
✅ 파일 저장 완료 → 이제 저장(insert)과 불러오기(select)만 남았습니다
💾 데이터 저장하기 — insert
메모 추가 버튼을 누르면 Supabase에 저장되도록 합니다. AI에게 요청합니다.
✅ 복붙용 — insert 요청 프롬프트
메모 추가 버튼을 클릭하면 입력된 내용을
Supabase memos 테이블에 저장하도록 server.js를 수정해줘.
저장할 항목: title (입력창 내용), content (빈 문자열로 시작)
저장 성공 시 브라우저에 "저장 완료" 표시
저장 실패 시 에러 메시지 콘솔 출력
supabase.js에서 supabase 클라이언트를 import해서 사용해줘.
insert 코드 — AI가 만들어주는 형태
// 메모 저장 함수 예시 (AI가 실제 코드로 만들어줍니다)
const { supabase } = require('./supabase');
async function saveMemo(title) {
const { data, error } = await supabase
.from('memos')
.insert([{ title, content: '' }]);
if (error) console.error('저장 실패:', error);
else console.log('저장 완료!', data);
}
코드를 이해하려 하지 않아도 됩니다
AI가 만들어준 코드를 붙여넣고 저장하면 됩니다. 중요한 건 저장 버튼을 눌렀을 때 Supabase Table Editor에서 새 행이 생기는 것을 확인하는 것입니다. 그게 성공입니다.
📌 저장이 진짜 됐는지 확인하는 순간
이 순서대로 해보세요 — "앱이 기억한다"는 감각이 처음 생깁니다
1
앱 화면에서 메모 입력창에 텍스트를 입력합니다2
"추가" 버튼을 클릭합니다3
Supabase 대시보드 → Table Editor → memos 테이블을 엽니다4
방금 입력한 내용이 새 행(Row)으로 생성된 것을 확인합니다새 행이 보인다면 — 앱이 처음으로 데이터를 "기억"하기 시작했습니다 🎉
📥 데이터 불러오기 — select
저장된 데이터를 화면에 표시합니다. 앱이 시작될 때 Supabase에서 메모 목록을 가져와서 화면에 보여주도록 합니다.
아래 코드는 AI가 실제로 만들어주는 형태입니다
직접 작성할 필요 없습니다. AI에게 프롬프트를 보내면 이런 구조의 코드가 생성됩니다. "내가 이걸 직접 짜야 하나?"라는 생각이 들었다면 — 아닙니다.
✅ 복붙용 — select 요청 프롬프트
앱 페이지가 열릴 때 Supabase memos 테이블에서
저장된 메모 전체를 불러와서 화면 리스트에 표시해줘.
- 최신순으로 정렬 (created_at 기준 내림차순)
- 각 메모에는 삭제 버튼도 함께 표시
- 로딩 중엔 "불러오는 중..." 텍스트 표시
기존 server.js와 public/index.html을 수정해줘.
select 코드 — AI가 만들어주는 형태
// 메모 불러오기 함수 예시
async function loadMemos() {
const { data, error } = await supabase
.from('memos')
.select('*')
.order('created_at', { ascending: false });
if (error) console.error('불러오기 실패:', error);
else displayMemos(data); // 화면에 표시
}
📖 삭제(delete) 기능도 추가하고 싶다면:
AI에게 "삭제 버튼 클릭 시 해당 id의 메모를 Supabase에서 삭제하고 화면을 새로고침하는 코드 추가해줘"라고 요청하면 됩니다.
AI에게 "삭제 버튼 클릭 시 해당 id의 메모를 Supabase에서 삭제하고 화면을 새로고침하는 코드 추가해줘"라고 요청하면 됩니다.
🔄 저장 + 불러오기가 완성됐다면 — 지금 당장 이걸 해보세요
새로고침 후 유지 확인 순서
메모 입력창에 "새로고침해도 남는다" 입력 → 추가 버튼 클릭
브라우저에서 F5 또는 새로고침 버튼 클릭
방금 입력한 메모가 그대로 남아있는지 확인
스마트폰으로 Vercel URL 접속 → 같은 메모가 보이는지 확인
VS Code 터미널에서 Ctrl+C로 서버 종료 후 다시 npm run dev → 메모가 아직 있는지 확인
새로고침 후에도 남아있고, 스마트폰에서도 보이고, 서버 재시작 후에도 살아있다면 — 앱이 진짜 앱이 됐습니다 🚀
바이브 코딩 앱과 Supabase 테이블 데이터 확인
🎉 새로고침 후 유지 확인 — 진짜 앱이 되는 순간
저장과 불러오기가 모두 연결됐습니다. 이제 가장 중요한 순간입니다.
이 순서대로 해보세요 — 지금 당장
메모 입력창에 "새로고침해도 남는다" 입력 → 추가 버튼 클릭
브라우저에서 F5 또는 새로고침 버튼 클릭
방금 입력한 메모가 그대로 남아있는지 확인
스마트폰으로 Vercel URL 접속 → 같은 메모가 보이는지 확인
데이터가 새로고침 후에도 남아있다면 —
당신의 앱은 지금 이 순간 "진짜 앱"이 됐습니다 🚀
당신의 앱은 지금 이 순간 "진짜 앱"이 됐습니다 🚀
스마트폰에서도 열어보세요
3편에서 만든 Vercel URL을 스마트폰으로 열면 지금 저장한 메모가 그대로 보입니다. 내 컴퓨터, 스마트폰, 친구 컴퓨터 — 어디서든 같은 데이터. 이게 데이터베이스가 있는 앱과 없는 앱의 차이입니다.
📌 핵심 요약
- 📊데이터베이스는 "앱용 엑셀 파일을 인터넷에 둔 것"입니다. 앱이 저장할 때마다 새 행이 추가되고, 불러올 때마다 행들을 읽어옵니다. SQL을 알 필요 없습니다.
- 🆓Supabase 무료 플랜으로 개인 프로젝트는 충분합니다. 프로젝트 2개, 500MB, 월 5GB 대역폭. 처음 DB를 연결하는 수준에서 비용은 전혀 없습니다.
- 🤖테이블 생성 SQL은 AI에게 "메모 앱용 Supabase 테이블 만들어줘"로 요청하면 됩니다. 코드를 SQL Editor에 붙여넣고 Run만 클릭하면 됩니다.
- 💾저장(insert)과 불러오기(select) 코드도 AI에게 요청합니다. 코드를 이해하지 않아도 됩니다. Supabase Table Editor에서 데이터가 생기면 성공입니다.
- 🎉새로고침해도 데이터가 남아있다면 — 앱이 "진짜 앱"이 된 것입니다. 스마트폰에서도 같은 데이터가 보이면 완전한 성공입니다.
❓ 자주 묻는 질문
Supabase가 뭔가요? 비개발자도 쓸 수 있나요?
Supabase는 복잡한 서버 설정 없이 데이터를 저장하고 불러올 수 있게 해주는 서비스입니다. 쉽게 말하면 앱용 엑셀 파일을 인터넷에 두고 여러 기기에서 공유하는 것과 비슷합니다. 무료 플랜으로 개인 프로젝트는 충분히 사용할 수 있고, SQL을 몰라도 AI에게 테이블 생성을 요청하면 됩니다.
Supabase에 SQL을 직접 써야 하나요? SQL을 모르면 못 쓰나요?
직접 쓸 필요 없습니다. AI에게 "메모 앱용 Supabase 테이블 만들어줘. 제목과 내용, 생성일 포함해줘"라고 요청하면 AI가 SQL 코드를 만들어줍니다. 그걸 Supabase SQL Editor에 붙여넣고 실행하면 됩니다. SQL이 뭔지 몰라도 됩니다.
Supabase 무료 플랜으로 충분한가요? 비용이 발생하는 시점은 언제인가요?
개인 연습과 소규모 프로젝트는 무료 플랜으로 충분합니다. 무료 플랜에서는 최대 2개 프로젝트, 500MB 데이터베이스 용량, 월 5GB 대역폭을 제공합니다. 비용이 발생하는 것은 대규모 트래픽이 필요한 상업 서비스를 운영할 때입니다. 처음 바이브 코딩 앱에 DB를 연결하는 수준에서는 무료로 충분합니다.
Supabase 테이블을 잘못 만들면 데이터가 날아가나요? 다시 만들 수 있나요?
테이블을 지우면 그 안에 있던 데이터는 삭제됩니다. 하지만 처음 연습 단계에서는 테이블을 여러 번 지우고 다시 만드는 것이 완전히 정상입니다. 실제 개발자도 DB 구조를 자주 수정합니다. 테이블 삭제가 무서운 건 중요한 데이터가 있을 때이고, 연습 중에는 언제든 삭제하고 다시 만들 수 있습니다.
앱에 데이터가 살아있습니다 — 이제 AI를 붙입니다 🤖
새로고침해도 안 사라지는 앱을 만들었습니다.
다음은 이 앱에 진짜 AI 기능을 붙이는 차례입니다.
7편에서는 OpenAI API를 처음 연결합니다.
"문장을 요약해줘"라고 입력하면 AI가 답하는 서비스가
내 앱 안에 생기는 순간입니다.
▶ 다음 편 — 7편
댓글 쓰기