7회 · 데이터베이스 첫걸음: Supabase
데이터베이스를 여러 사람이 함께 쓰는 똑똑한 엑셀로 이해하고, 화면에서 모임을 추가하면 저장되는 웹앱을 만듭니다.
“데이터베이스는 여러 사람이 동시에 쓰는 똑똑한 엑셀이다.”
학습 목표
- 테이블·행·열, 그리고 SQL의 기본 문장을 엑셀에 빗대어 읽는다
- Supabase 프로젝트를 만들고 모임 일정 테이블을 설계한다
- 웹앱이 가짜 데이터 대신 데이터베이스에서 읽고 쓰게 만든다
오늘 만드는 것: 화면에서 모임 일정을 추가하면 저장되는 웹앱
실습 진도
—
실습 단계를 체크하면 표시돼요
오늘의 흐름
| 시간 | 내용 | 방식 |
|---|---|---|
| 0:00–0:10 | 지난 시간 복습: 배포 주소 열어 보기 | 함께 |
| 0:10–0:40 | 데이터는 어디에 저장될까: 데이터베이스는 똑똑한 엑셀 | 설명 |
| 0:40–0:55 | SQL 읽기 연습, 요즘 업계에서는 | 설명 |
| 0:55–1:05 | 시연: 엑셀 표가 웹앱 화면이 되기까지 | 시연 |
| 1:05–1:15 | 쉬는 시간 | — |
| 1:15–1:35 | 실습 7-1, 7-2: Supabase 프로젝트와 테이블 만들기 | 실습 |
| 1:35–1:55 | 실습 7-3: 웹앱을 데이터베이스에 연결 | 실습 |
| 1:55–2:00 | 정리와 퀴즈 | 정리 |
지금 웹앱의 한계
6회까지 만든 웹앱에는 모임 일정이 코드 안에 적혀 있습니다. 그래서
- 새 모임을 추가하려면 Claude Code에게 코드를 고치게 하고, 커밋·푸시하고, 배포를 기다려야 합니다.
- 회원이 화면에서 무언가를 입력해도 어디에도 저장되지 않습니다. 새로 고치면 사라집니다.
- 내 휴대폰에서 입력한 것을 다른 사람이 볼 수 없습니다.
인쇄한 안내문 vs 함께 쓰는 공책
지금 웹앱은 인쇄해서 나눠 준 안내문과 같습니다. 내용을 바꾸려면 다시 인쇄해야 하지요. 오늘은 이것을 모두가 같이 펼쳐 보고 적을 수 있는 공책으로 바꿉니다. 그 공책이 데이터베이스입니다.
데이터베이스는 똑똑한 엑셀
는 데이터를 정리해 저장해 두는 곳입니다. 처음에는 여러 사람이 동시에 쓰는 엑셀 파일이라고 생각하면 충분합니다.
| 엑셀 | 데이터베이스 | 예시 |
|---|---|---|
| 파일 | 데이터베이스 | 우리 모임 데이터 전체 |
| 시트 | 모임 일정 시트, 회원 시트 | |
| 맨 윗줄 제목 | 제목, 날짜, 장소, 정원 | |
| 한 줄 | "10월 정기 모임, 10/18, 북카페 한모금, 12명" |
엑셀과 무엇이 다른가
엑셀로도 모임 일정을 관리할 수 있는데, 왜 데이터베이스를 쓸까요?
| 엑셀 | 데이터베이스 | |
|---|---|---|
| 동시에 쓰기 | 두 사람이 같이 고치면 꼬이기 쉬움 | 수천 명이 동시에 써도 안전 |
| 규칙 | 날짜 칸에 아무 글이나 들어감 | "날짜 칸에는 날짜만" 같은 규칙을 강제 |
| 크기 | 수십만 줄이면 느려짐 | 수백만 줄도 빠르게 찾음 |
| 웹앱과 연결 | 어려움 | 웹앱·휴대폰 앱이 바로 읽고 씀 |
| 누가 무엇을 볼지 | 파일을 공유하면 다 보임 | 줄마다 볼 수 있는 사람을 정할 수 있음 (8회) |
칸마다 "종류"가 정해져 있다
데이터베이스는 칸마다 어떤 종류의 값이 들어갈지 미리 정합니다. 덕분에 "정원" 칸에 "열두 명"이라고 쓰는 실수를 막아 줍니다.
| 칸 이름 | 종류 | 뜻 |
|---|---|---|
id | 자동 번호 | 줄마다 붙는 고유 번호. 주민번호처럼 겹치지 않음 |
title | 글자(text) | 모임 제목 |
starts_at | 날짜와 시간 | 모임 시작 시각 |
place | 글자 | 장소 |
capacity | 숫자(integer) | 정원 |
created_at | 날짜와 시간 | 줄이 만들어진 시각 (자동) |
칸 이름이 영어인 이유
화면에는 한글로 보여 주지만, 칸 이름은 보통 영어 소문자와 밑줄(starts_at)로 씁니다. 프로그램끼리 주고받을 때 탈이 적기 때문입니다. 이름을 정하는 것은 Claude가 알아서 해 줍니다.
SQL, 읽을 줄만 알면 됩니다
은 데이터베이스에 일을 시키는 말입니다. 직접 쓸 필요는 없지만, Claude가 만든 SQL을 실행하기 전에 무엇을 하는지 읽을 수 있으면 큰 사고를 막을 수 있습니다. 다행히 SQL은 영어 문장과 비슷합니다.
| SQL | 엑셀로 치면 | 위험도 |
|---|---|---|
select * from meetups | 모임 시트 전체 보기 | 안전 |
select title from meetups where capacity > 10 | 정원이 10명보다 많은 모임의 제목만 필터 | 안전 |
insert into meetups (title) values ('11월 모임') | 새 줄 추가 | 보통 |
update meetups set place = '구민회관' where id = 3 | 3번 줄의 장소 고치기 | 주의 |
delete from meetups where id = 3 | 3번 줄 지우기 | 위험 |
drop table meetups | 시트 통째로 삭제 | 매우 위험 |
이 단어가 보이면 멈추고 물어보세요
delete, drop, truncate, 그리고 where 없는 update. 실행하기 전에 "이 SQL이 무엇을 지우거나 바꾸는지 설명해줘"라고 꼭 물어보세요.
이 SQL을 한 줄씩 엑셀에 빗대어 설명해줘. 데이터를 지우거나 바꾸는 줄이 있으면 따로 표시해줘.
Supabase는 무엇인가
는 데이터베이스를 인터넷에서 빌려 쓰게 해 주는 서비스입니다. 6회의 Vercel이 웹앱을 올리는 곳이라면, Supabase는 데이터를 올리는 곳입니다.
- 데이터베이스(PostgreSQL이라는 오래되고 믿을 만한 종류)
- 회원가입·로그인 (8회)
- 사진 같은 파일 저장 (9회)
- 웹에서 엑셀처럼 표를 보고 고칠 수 있는 화면(Table Editor)
무료 요금제는 활성 프로젝트 2개, DB 500MB, 1주일 미사용 시 일시정지 (2026-10-06 확인). 실습에는 충분하지만, 1주일 동안 쓰지 않으면 프로젝트가 잠시 멈춥니다. 대시보드에서 다시 켜면 되니 놀라지 마세요.
Vercel은 식당 홀, Supabase는 창고와 장부
손님이 보는 화면은 Vercel에서, 손님이 주문한 기록과 재고는 Supabase에서. 웹앱은 둘을 이어 주는 직원입니다.
웹앱과 데이터베이스는 어떻게 대화할까
[휴대폰 브라우저] ──"모임 목록 줘"──▶ [웹앱 (Vercel)] ──"select …"──▶ [데이터베이스 (Supabase)]
◀──── 화면 ───── ◀──── 표 ────────웹앱이 데이터베이스에 접속하려면 주소와 열쇠(키) 가 필요합니다. 이 두 가지는 코드에 직접 적지 않고 파일(.env.local)에 따로 둡니다. 5회에 배운 .gitignore 덕분에 이 파일은 GitHub에 올라가지 않습니다.
자세히공개 키(anon key)는 정말 공개해도 되나요펼치기
Supabase가 주는 키에는 두 종류가 있습니다.
- 공개 키(anon / publishable): 웹앱 화면에 실려 누구나 볼 수 있다는 전제로 만든 키입니다. 대신 이 키로 할 수 있는 일은 보안 규칙(RLS) 이 정한 범위까지입니다.
- 비밀 키(service_role / secret): 모든 규칙을 무시하고 무엇이든 할 수 있는 만능 열쇠입니다. 절대 화면 코드에 넣으면 안 됩니다.
오늘은 공개 키만 씁니다. 그런데 공개 키는 누구나 볼 수 있으니, 보안 규칙이 없으면 누구나 우리 데이터를 읽고 지울 수 있습니다. 그래서 8회에 보안 규칙을 반드시 다룹니다. 오늘은 가상 데이터만 넣으니 괜찮습니다.
요즘 업계에서는
AI 앱 빌더의 단골 짝꿍, Supabase
요즘 말로 앱을 만들어 주는 서비스들은 데이터 저장소로 Supabase를 많이 씁니다. 예를 들어 Lovable은 내 Supabase 프로젝트를 연결해 데이터베이스, 로그인, 파일 저장을 맡기는 기능을 공식으로 제공합니다. (Lovable 문서 · Supabase 연동)
이유는 간단합니다. 표를 엑셀처럼 볼 수 있고, 로그인과 파일 저장이 한곳에 있고, 무료로 시작할 수 있기 때문입니다. 이 과정에서 Supabase를 고른 이유도 같습니다. 12–13회에 만드는 휴대폰 앱도 같은 Supabase를 씁니다.
"AI가 데이터베이스를 지웠다"
2025년 7월, 한 스타트업 창업자가 AI 코딩 도구(Replit)의 에이전트가 "아무것도 바꾸지 말라"는 지시에도 불구하고 데이터베이스를 지워 버렸다고 공개해 화제가 됐습니다. (위키백과 · Vibe coding)
이 사건이 주는 교훈은 세 가지입니다.
- 지우는 SQL은 사람이 읽고 승인한다. Claude Code가 명령을 실행하기 전에 묻는 것은 귀찮은 절차가 아니라 안전장치입니다.
- 연습용과 진짜를 분리한다. 실제 회원 데이터가 생기면 연습용 프로젝트를 따로 둡니다.
- 백업을 확인한다. 유료 요금제에는 자동 백업이 있고, 무료에서는 중요한 표를 가끔 내려받아 둡니다(Table Editor → Export).
시연
강사가 다음을 보여 줍니다.
- 엑셀 파일로 정리한 가상 모임 일정 표를 보여 주고, 같은 내용을 Supabase Table Editor에 만듭니다. "시트가 테이블이 됐다"는 것을 눈으로 확인합니다.
- Claude Code에게 기획서를 보여 주고 테이블 설계를 받습니다. 설계 표를 함께 읽으며 "정원 칸은 왜 숫자인가요?" 같은 질문을 던져 봅니다.
- 웹앱을 연결한 뒤 화면에서 모임을 추가하면, Supabase 표에 실시간으로 줄이 생기는 것을 나란히 띄워 보여 줍니다.
실습
오늘의 주제: "책 읽는 저녁" 웹앱의 모임 일정을 코드에서 꺼내 Supabase에 담고, 화면의 "모임 만들기"로 새 일정을 저장합니다. 모든 데이터는 지어낸 것으로 씁니다.
실습 7-1 · Supabase 프로젝트 만들기
약 10분- supabase.com에서 Start your project → GitHub 계정으로 가입해요.New project를 누르고 이름은
our-moim, 지역(Region)은 Northeast Asia (Seoul) 을 골라요.데이터베이스 비밀번호는 Generate a password로 만들고, 비밀번호 관리자나 안전한 곳에 적어 두세요. 채팅창에 붙여 넣지 않습니다.1–2분 기다리면 프로젝트 대시보드가 열려요.막혔을 때 왼쪽 메뉴에서 Table Editor(표 모양 아이콘)를 엽니다. 아직 비어 있습니다. 오늘 이곳에 모임 일정 시트가 생깁니다. SQL Editor(
>_모양)도 위치만 봐 두세요.
실습 7-2 · 테이블 설계하고 만들기
약 15분AI가 설계하고, 사람은 표로 읽고 질문합니다.
Claude Code에서 웹앱 프로젝트 폴더를 열고, 2회에 만든 기획서 파일을 함께 보여 줍니다.
PROMPT테이블 설계 받기 플랜 모드 권장@기획서.md 를 보고 필요한 데이터베이스 테이블을 설계해줘. 테이블마다 칸(컬럼)과 그 이유를 표로 보여주고, Supabase SQL Editor에 붙여 넣을 SQL도 만들어줘. 아직 실행하지는 마.
이렇게 되면 성공| 테이블 | 칸 | 종류 | 이유 || meetups | id | 자동 번호 | 모임마다 고유 번호 || | title | text | 모임 제목 || | starts_at | timestamptz | 날짜와 시간 || | place | text | 장소 || | capacity | integer | 정원 (1 이상) || | description | text | 소개 (비워도 됨) || | created_at | timestamptz | 만든 시각 (자동) |create table meetups ( … );설계 표를 보고 궁금한 점을 하나 이상 물어보세요. 예: "정원이 0이면 어떻게 돼?", "모임 회비 칸도 넣어야 할까?"
Claude가 준 SQL을 실행하기 전에 무엇을 하는지 먼저 확인합니다.
PROMPTSQL 한 줄씩 설명 듣기이 SQL을 한 줄씩 엑셀에 빗대어 설명해줘. 데이터를 지우거나 바꾸는 줄이 있으면 따로 표시해줘.
create table만 있고 지우는 문장이 없으면 Supabase SQL Editor에 붙여 넣고 Run을 누릅니다. Table Editor를 새로 고치면meetups표가 보입니다.막혔을 때- PROMPT가상 데이터 넣기
모임 테이블에 넣을 가상의 모임 일정 6개를 SQL로 만들어줘. 날짜는 앞으로 두 달 안, 장소는 지어낸 이름으로, 실제 사람 이름이나 연락처는 넣지 마.
SQL을 실행한 뒤 Table Editor에서 6줄이 들어갔는지 확인합니다. 엑셀처럼 칸을 눌러 직접 고쳐 볼 수도 있습니다.
실습 7-3 · 웹앱을 데이터베이스에 연결
약 20분- PROMPT웹앱을 데이터베이스에 연결
.env.local 파일을 만들어 두면 내가 Supabase 주소와 공개 키를 넣을게. 그다음 가짜 데이터 대신 Supabase에서 모임 목록을 읽어 오고, 모임 만들기 폼으로 저장되게 바꿔줘.
Claude Code가
.env.local파일을 만들면, Supabase 대시보드의 Project Settings → API Keys(또는 상단의 Connect 버튼)에서 Project URL과 공개 키(anon / publishable) 를 복사해 직접 붙여 넣습니다.키는 채팅창에 붙여 넣지 않아요
파일을 직접 열어 넣으세요.
service_role또는secret이라고 적힌 비밀 키는 오늘 쓰지 않습니다.Windows 기준파일 탐색기에서
.env.local이 안 보이면 보기 → 표시 → 숨긴 항목을 켜세요. 메모장으로 열어 고친 뒤 저장합니다. 개발 서버를 다시 켜고(
localhost:3000) 모임 목록을 봅니다. Supabase Table Editor에서 모임 제목 하나를 고친 뒤, 웹앱을 새로 고쳐 바뀐 제목이 보이면 성공입니다.이렇게 되면 성공✓ lib/supabase.ts 생성 (주소와 공개 키는 환경변수에서 읽음)✓ 모임 목록을 meetups 테이블에서 불러오도록 변경✓ /meetups/new: 모임 만들기 폼 추가● http://localhost:3000 에서 확인해 보세요.막혔을 때"모임 만들기" 화면에서 가상의 모임을 하나 추가합니다. Supabase Table Editor에 새 줄이 생겼는지 확인하세요. 무엇이 어떻게 이어지는지 궁금하면 물어보세요.
PROMPT방금 만든 것 설명 듣기방금 만든 것이 어떻게 동작하는지 처음 배우는 사람이 알아듣게 5줄로 설명해줘.
커밋·푸시하면 Vercel이 다시 배포합니다. 그런데 배포 주소에서는 목록이 비어 있을 수 있습니다.
.env.local은 내 컴퓨터에만 있기 때문입니다.PROMPTVercel에도 환경변수 넣기내 컴퓨터에서는 데이터가 잘 보이는데 배포 주소에서는 안 보여. Vercel에 어떤 환경변수를 어디에 넣어야 하는지 이름만 알려주고(값은 내가 직접 넣을게), 넣은 다음 다시 배포하는 방법도 알려줘.
Vercel 프로젝트 → Settings → Environment Variables에 같은 이름과 값을 넣고 Redeploy하면 배포 주소에서도 목록이 보입니다.
정리
핵심 정리
- 1데이터베이스는 여러 사람이 동시에 쓰는 똑똑한 엑셀이다. 시트는 테이블, 제목 줄은 열, 한 줄은 행.
- 2SQL은 읽을 줄만 알면 된다. delete, drop, where 없는 update가 보이면 실행 전에 꼭 묻는다.
- 3Supabase 주소와 공개 키는 .env.local에. 배포 서버(Vercel)에도 따로 넣어야 한다.
- 4공개 키는 누구나 볼 수 있다. 그래서 다음 시간의 보안 규칙(RLS)이 꼭 필요하다.
- 5연습은 언제나 가상 데이터로. 진짜 데이터가 생기면 백업과 분리를 먼저 챙긴다.
다음 시간 예고: 지금은 누구나 모임을 만들고 고칠 수 있습니다. 8회에는 회원가입·로그인을 붙이고, 내가 만든 모임은 나만 고칠 수 있게 자물쇠를 채웁니다.
복습
Q1.데이터베이스를 엑셀에 빗대면, "테이블"은 엑셀의 무엇에 해당할까요?
Q2.다음 SQL 중 실행 전에 가장 조심해야 할 것은?
Q3..env.local 파일에 넣은 값은 푸시하면 Vercel에도 자동으로 들어간다.
Q4.Supabase 공개 키(anon key)는 누구나 볼 수 있으므로, 보안 규칙(RLS)이 없으면 누구나 데이터를 읽고 지울 수 있다.
Q5.Supabase 무료 요금제에서 주의할 점은?
Q6.오늘 실습 순서를 맞춰 보세요.(순서대로 정렬)
- 1기획서로 테이블 설계 받기
- 2.env.local에 주소와 공개 키 넣고 웹앱 연결하기
- 3SQL을 읽고 실행하기
- 4Supabase 프로젝트 만들기
과제
과제 · 나만의 테이블 설계
"우리 모임" 말고 내가 만들고 싶은 서비스(예: 가족 장보기 목록, 독서 기록)를 하나 골라, Claude에게 테이블 설계를 받아 보세요. 설계 표를 읽고 이상하거나 궁금한 점을 하나 이상 적어 오세요.