DAY 04바이브코딩 · Database 연결하기
Supabase · SQL을 활용한 메뉴 데이터 관리
DAY 03에서 만든 MELLOW BEAN 웹사이트의 메뉴 데이터를 Supabase로 옮기고, AI에게 필요한 SQL을 요청하여 데이터를 추가·조회한 뒤 웹페이지에 자동으로 반영되는 과정을 경험합니다.
1.수업 구성
Database와 SQL을 처음 접하는 초급자 중심
서버 기본 개념 + Database 개념 + AI를 활용한 SQL 작성 + Supabase 연결 실습
전체 수업의 약 50% (1교시 앞부분은 개념 설명 중심)
서버가 하는 일을 이해하고, MELLOW BEAN의 메뉴 데이터를 Supabase로 옮겨 웹페이지에 자동으로 반영되는 과정 경험하기
2.오늘 수업의 핵심 방식
오늘 집중할 내용
SQL을 외워서 직접 작성하는 것이 이번 수업의 목표가 아닙니다.
Claude Code와 같은 AI에게 요청하면 필요한 SQL을 만들어줄 수 있습니다.
전체 실습 흐름
3.DAY 03 복습 & 오늘 바꿀 방식
DAY 03에서 만든 MELLOW BEAN Menu Section
현재 메뉴정보는 어디에 있을까요? index.html 안에 직접 작성되어 있습니다. 메뉴가 3개라면 직접 HTML을 수정해도 크게 어렵지 않지만, 메뉴가 5개 → 10개 → 30개 → 100개로 늘어난다면 새로운 메뉴가 생길 때마다 HTML을 열어 카드를 복사하고 이름·설명·가격·이미지를 수정하는 과정을 반복해야 합니다.
질문 — 메뉴를 하나 추가할 때마다 웹사이트 코드를 직접 수정해야 할까요?
오늘 바꿀 방식
HTML 안에 Cream Latte, Tiramisu, Mellow Ade를 직접 작성
HTML → Database에 "메뉴 데이터를 보여줘" 요청 → 웹페이지에 Menu Card 자동 생성. 새로운 메뉴가 추가되면 HTML 수정 없이 Database에만 새 메뉴를 추가하면 웹페이지 새로고침 시 새 Menu Card가 표시됨
4.서버 · 호스팅 · 배포 — 웹사이트는 어디에 있을까?
오늘부터 Supabase라는 "서버"를 사용합니다. 서버를 다루기 시작하면 서버, 트래픽, 스토리지 같은 단어가 계속 나옵니다. 코드를 몰라도 되지만, 이 단어들의 뜻은 알아야 AI에게 정확히 요청하고 요금표나 오류 메시지를 읽을 수 있습니다. 4~7번에서 하나씩 정리합니다.
서버 (Server)
요청을 받으면 필요한 것(웹페이지 파일, 데이터)을 보내 주는 컴퓨터입니다. 누가 언제 접속할지 모르기 때문에 하루 24시간 켜져 있고 인터넷에 연결되어 있습니다.
웹사이트가 내 화면에 보이기까지
지금 내 사이트는 누가 볼 수 있을까?
파일이 내 컴퓨터 안에만 있습니다. 브라우저 주소창이 file:///C:/...나 127.0.0.1로 시작하면 나만 볼 수 있는 상태입니다. 친구에게 주소를 보내도 열리지 않습니다.
파일이 서버에 올라가 있어서, https://...로 시작하는 주소만 알면 누구나 어디서든 볼 수 있습니다.
서버를 직접 사서 24시간 관리하는 대신, 업체의 서버 공간을 빌려 쓰는 것입니다. 가게를 지을 때 건물을 짓지 않고 상가를 임대하는 것과 같습니다.
내 컴퓨터에서 만든 파일을 서버에 올려서 다른 사람이 볼 수 있게 공개하는 일입니다. 임대한 상가에 물건을 채우고 문을 여는 "개업"에 해당합니다.
이 과정에서 만날 서버들
| 서비스 | 맡는 일 | 언제 |
|---|---|---|
| Supabase | 데이터(메뉴, 회원 정보)를 보관하고 꺼내 주는 서버 | DAY 04 · 05 · 최종 프로젝트 |
| 카페24 AI SPACE | AI에게 말로 요청해서 웹사이트를 서버에 올리는 호스팅 (14일 무료 체험) | DAY 05 ~ 07 |
| GitHub Pages | GitHub에 저장한 웹사이트를 무료로 공개해 주는 호스팅 | DAY 08 최종 제출 |
5.데이터베이스 · 스토리지 · 메모리 — 무엇을 어디에 둘까?
서버 요금표를 보면 "Database 500MB", "Storage 1GB", "메모리 256MB"처럼 저장 공간이 여러 종류로 나뉘어 있습니다. 모두 "저장"과 관련 있지만 하는 일이 다릅니다.
데이터베이스 (Database)
글자와 숫자를 표 형태로 정리해 두는 곳. 찾기·고치기·정렬하기가 빠릅니다.
비유 — 가게의 장부
예 — 메뉴 이름, 가격, 회원 이메일, 문의 내용
스토리지 (Storage)
사진·영상·PDF 같은 파일 자체를 보관하는 곳. "저장공간"이라고도 씁니다.
비유 — 가게의 창고
예 — 메뉴 사진 파일, 프로필 사진, 첨부 파일
메모리 (Memory)
서버가 지금 처리 중인 일을 잠깐 올려 두는 곳. 서버가 꺼지면 내용이 사라집니다.
비유 — 주방의 작업대
클수록 동시에 많은 요청을 처리할 수 있음
메뉴 하나는 어디에 저장될까?
| 정보 | 저장 위치 |
|---|---|
| Cream Latte, 6500, 설명 글 | 데이터베이스 (오늘 만들 menus 표) |
| cream-latte.jpg 사진 파일 | 스토리지 (오늘은 간단하게 프로젝트의 images 폴더 사용) |
| 그 사진이 있는 위치(주소) | 데이터베이스의 image_url 칸 |
장부(데이터베이스)에는 사진을 붙이지 않고 "창고 몇 번 선반에 있음"처럼 위치만 적습니다. 그래서 사진은 스토리지에, 사진 주소는 데이터베이스에 따로 저장됩니다.
용량 단위 감 잡기
KB(킬로바이트) < MB(메가바이트) < GB(기가바이트) — 각각 약 1,000배씩 커집니다.
- • 메뉴 한 줄(이름·가격·설명) — 1KB도 안 됨. 메뉴 1만 개도 데이터베이스에서는 몇 MB
- • 웹용으로 줄인 사진 한 장 — 약 0.2MB / 휴대폰 원본 사진 — 3~5MB
- • 그래서 용량을 차지하는 것은 대부분 사진과 영상입니다. 사이트에 올릴 사진은 줄여서 쓰는 습관이 중요합니다.
6.트래픽 · 동시접속 — 손님이 몰리면 어떻게 될까?
트래픽 (Traffic · 데이터 전송량)
서버와 방문자 사이에 오고 간 데이터의 양입니다. 누군가 내 사이트를 열 때마다 서버는 HTML·이미지 파일을 보내 주고, 그만큼 트래픽이 쌓입니다. 원래 뜻이 "도로 위 교통량"이듯, 서버로 드나드는 데이터의 통행량이라고 생각하면 됩니다. 요금표에서는 "전송량"이라고도 씁니다.
계산해 보기 — 하루 트래픽은 얼마나 될까?
한 번 열 때 약 15MB (사진 3장 × 5MB)
× 하루 방문 1,000번
= 하루 약 15GB
한 번 열 때 약 1MB (사진 3장 × 0.2MB + 기타)
× 하루 방문 1,000번
= 하루 약 1GB
같은 사이트라도 사진 크기에 따라 트래픽이 10배 넘게 차이 납니다. 사진을 줄이면 사이트도 빨리 열리고 서버 비용도 아낄 수 있습니다.
동시접속 (Concurrent Users)
같은 순간에 사이트를 쓰고 있는 사람 수입니다. 하루 방문자와는 다릅니다. 하루 1,000명이 와도 시간이 흩어져 있으면 동시접속은 10명 안팎일 수 있습니다. 식당으로 치면 하루 손님 수가 아니라 좌석 수에 해당합니다.
한도를 넘으면 어떻게 될까? — 서비스마다 다름
예를 들어 DAY 05에 사용할 카페24 AI SPACE 무료 체험은 동시접속 25명까지이고, 넘으면 대기열로 안내된다고 소개되어 있습니다. 수업에서 만드는 사이트는 한도에 걸릴 일이 거의 없지만, 서비스를 고를 때 "트래픽 · 동시접속 한도와 넘었을 때 어떻게 되는지"를 꼭 확인하세요.
7.API · API 키 — 서버에 요청하는 창구와 출입증
API (Application Programming Interface)
프로그램끼리 정해진 방식으로 요청하고 답을 받는 창구입니다. 은행 창구에서 정해진 서식에 맞춰 써 내면 직원이 처리해 주듯, 내 웹사이트의 JavaScript가 Supabase의 API에 "menus 표의 메뉴를 보여줘"라고 요청하면 Supabase가 데이터를 보내 줍니다.
API 키 (API Key)
창구에 요청할 때 함께 내미는 출입증입니다. 아무나 요청하지 못하게 하고, 누가 요청했는지 구분하는 데 씁니다. 긴 영문·숫자 문자열로 되어 있습니다.
손님용 출입증. 웹사이트 코드에 들어가므로 누구나 볼 수 있다는 전제로 만들어졌습니다.
대신 이 키로 할 수 있는 일은 RLS(접근 규칙)로 제한합니다 — 예: "메뉴 보기만 허용". 그래서 STEP 05에서 규칙을 먼저 정합니다.
사장님 마스터키. 모든 규칙을 무시하고 데이터를 읽고, 고치고, 지울 수 있습니다.
HTML·JavaScript 파일, GitHub, 채팅방, 캡처 화면 어디에도 절대 올리지 않습니다. 실수로 노출됐다면 Supabase에서 바로 새 키로 바꿉니다.
8.Database 기본 개념 · Supabase 프로젝트 만들기
Database란?
웹사이트에서 계속 사용해야 하는 정보를 저장하는 공간. 오늘은 메뉴 이름, 설명, 가격, 이미지 경로를 저장합니다.
Database의 기본 구조 — Table · Column · Row
| name | description | price | image_url |
|---|---|---|---|
| Cream Latte | 부드러운 크림과 에스프레소가 어우러진 시그니처 라떼 | 6500 | images/cream-latte.jpg |
| Classic Tiramisu | 진한 마스카포네 크림과 커피 향을 담은 수제 티라미수 | 7000 | images/tiramisu.jpg |
| Mellow Ade | 레몬과 허브를 사용한 상큼한 시그니처 에이드 | 6000 | images/mellow-ade.jpg |
같은 종류의 데이터를 저장하는 표. 오늘 만들 Table은 menus
쉽게 생각하면 — 메뉴판 전체
어떤 정보를 저장할지 정하는 항목 (name, description, price, image_url)
쉽게 생각하면 — 메뉴판에 필요한 항목
실제로 저장된 데이터 한 건 (Cream Latte 한 개 = 하나의 Row)
쉽게 생각하면 — 메뉴 하나
Supabase란?
웹사이트에서 사용할 데이터를 저장하고, 웹사이트가 해당 데이터를 가져올 수 있도록 연결해주는 Database·Backend 플랫폼입니다. 오늘은 여러 기능 중 Database 기능에 집중합니다.
Supabase 프로젝트 만들기
오늘 사용할 Supabase 영역
SQL을 입력하고 실행하는 공간
Database에 저장된 Table과 데이터를 직접 확인하는 공간
웹사이트와 Supabase를 연결하기 위한 정보 확인
오늘은 Supabase의 모든 기능이 아니라 SQL Editor + Table Editor + 연결정보 중심으로 사용합니다.
9.SQL이란? · AI에게 SQL 요청하는 방법
SQL (Structured Query Language, 구조화 질의 언어)
Database에 데이터를 만들고, 저장하고, 찾고, 수정하고, 삭제하도록 요청할 때 사용하는 언어. Database가 "창고"라면 SQL은 창고에 일을 시키기 위한 언어입니다.
사람의 말과 SQL 비교하기
"menus에 있는 모든 메뉴를 보여줘."
SQL에서는SELECT * FROM menus;
"Strawberry Latte라는 새로운 메뉴를 저장해줘."
SQL에서는INSERT INTO menus (name, price)
VALUES ('Strawberry Latte', 7000);
우리가 직접 SQL을 외워 작성하지 않아도, AI에게 "무엇을 하고 싶은지" 정확하게 알려주면 필요한 SQL을 작성하도록 요청할 수 있습니다.
SQL로 할 수 있는 기본 작업
데이터 가져오기
"보여줘."
새로운 데이터 추가하기
"추가해줘."
기존 데이터 수정하기
"바꿔줘."
기존 데이터 삭제하기
"지워줘."
오늘 실제로 사용할 것 — CREATE TABLE(Table 만들기), INSERT(메뉴 추가), SELECT(메뉴 확인), UPDATE(메뉴 수정). DELETE는 개념만 알아두고 오늘 핵심 실습에서는 사용하지 않습니다.
SQL 요청 프롬프트 공식
Supabase
어떤 Table?
어떤 항목?
조회/추가/수정
실제 값
"메뉴 SQL 만들어줘."
문제 — 어떤 Table? 어떤 Column? 어떤 작업? 어떤 메뉴? 알 수 없음
"Supabase에서 사용할 SQL을 만들어줘. menus Table에 새로운 메뉴 하나를 추가하고 싶어. Column은 name, description, price, image_url을 사용하고 있어. 추가할 메뉴는 Strawberry Latte이고 가격은 7,000원이야. 기존 데이터는 수정하거나 삭제하지 말고 새로운 Row 하나만 추가하는 SQL을 만들어줘. 실행하기 전에 어떤 작업을 하는 코드인지 설명해줘."
10.STEP 01~02. Table 생성 SQL 요청 & 실행하기
AI에게 menus Table 생성 SQL 요청하기
Claude Code에 아래 프롬프트를 함께 입력합니다.
SQL 전체를 이해할 필요는 없지만, 이 SQL이 Table을 만드는 코드인지 정도는 확인합니다.
Supabase에서 SQL 실행하기
오늘 수업의 핵심 방식 — AI에게 Database 작업을 자연어로 설명하고 SQL로 변환하기
11.STEP 03~04. 기존 메뉴 저장 & SELECT로 확인하기
기존 메뉴 3개를 Database에 넣기
DAY 03에서 사용했던 Cream Latte, Classic Tiramisu, Mellow Ade를 Database에 저장합니다.
확인할 단어 — INSERT INTO (새로운 데이터 추가). SQL Editor → Run → Table Editor에서 menus에 3개의 Row가 들어갔는지 확인합니다.
SELECT를 이용하여 데이터 확인하기
Database에 데이터가 들어갔다면 SQL로 직접 확인할 수 있습니다.
특히 DELETE, DROP이 보인다면 무엇을 삭제하는 SQL인지 반드시 확인하기 — AI가 만들어줬다고 바로 실행하지 않기
12.STEP 05. 웹사이트에서 메뉴를 읽을 수 있도록 권한 설정하기
RLS (Row Level Security · 접근 규칙)
Database에 저장된 데이터에 누가 어떤 작업을 할 수 있는지 제한하는 보안기능입니다. MELLOW BEAN 사이트를 방문한 사람은 메뉴를 보는 것은 가능하지만, 가격을 마음대로 바꾸거나 메뉴를 삭제하면 안 됩니다.
메뉴 관리(추가·수정)는 방문자가 아니라 Supabase Dashboard SQL Editor에서 관리자가 직접 진행합니다.
13.STEP 06~07. 웹사이트와 Supabase 연결하기
연결에 필요한 정보 확인하기
Supabase Dashboard의 Connect 또는 Settings → API Keys에서 Project URL과 Publishable Key를 확인합니다.
웹브라우저에서 Supabase 프로젝트에 연결할 때 사용하는 공개용 Key. 실제 접근 가능한 작업은 RLS(접근 규칙)로 제한됩니다.
높은 권한을 가진 서버용 Key. HTML, JavaScript 등 GitHub에 공개되는 Front-end 코드에는 절대 넣지 않습니다.
Claude Code에게 Supabase 연결 요청하기
├── index.html
├── style.css
├── script.js
├── supabase-client.js
└── images
14.STEP 08~09. 메뉴 불러오기 & Menu Card 자동 생성으로 전환하기
Database 메뉴 불러오기
연결이 완료되었다면 이번에는 Supabase의 menus 데이터를 웹사이트에서 가져옵니다. 아직 기존 HTML 메뉴는 그대로 두고, 먼저 데이터가 정상적으로 들어오는지 확인합니다.
확인 — 브라우저 개발자도구 Console에 Cream Latte, Classic Tiramisu, Mellow Ade 데이터가 보인다면 웹사이트 → Supabase → menus Table 연결 성공입니다. 연결과 데이터 조회, HTML 교체를 한 번에 진행하지 않는 이유 — Database 데이터가 정상적으로 들어오는지 먼저 확인하기 위해서입니다.
기존 Menu Card를 Database 방식으로 변경하기
이제 HTML에 직접 작성된 메뉴는 삭제하고, Database 데이터를 이용해 JavaScript가 Menu Card를 생성하도록 만듭니다.
화면에는 여전히 같은 카드 3개가 보이지만, DAY 03은 HTML에서, DAY 04는 Supabase Database에서 가져온 메뉴라는 중요한 차이가 있습니다.
15.STEP 10~11. 새로운 메뉴 추가하기 — 오늘의 핵심 실습
지금부터가 오늘 가장 중요한 실습입니다. 새로운 메뉴 Strawberry Latte를 추가하되, index.html, script.js, style.css는 전혀 수정하지 않습니다. 수정할 곳은 오직 Database입니다. (먼저 images 폴더에 strawberry-latte.jpg를 추가해두기)
AI에게 새로운 메뉴 추가 SQL 요청하기
확인할 단어 — INSERT. 추가되는 값이 Strawberry Latte, 7000, images/strawberry-latte.jpg인지 확인 후 SQL을 복사합니다.
새로운 메뉴 SQL 실행하고 확인하기
HTML에 카드 추가 X · JavaScript 수정 X · CSS 수정 X
Database에 새로운 Row 하나 추가 → 웹사이트에 새로운 Menu Card 자동 생성
핵심 — 화면의 구조와 데이터가 분리되었기 때문에 가능한 결과입니다.
16.SQL 사용 시 주의할 점 & 문제 해결하기
AI가 만들어준 SQL = 무조건 안전한 코드 X
실행 전에 최소한 무슨 작업인지 확인합니다. 특히 DELETE, DROP, UPDATE처럼 기존 데이터에 영향을 줄 수 있는 SQL은 어떤 데이터를 대상으로 하는지 더 주의해서 확인합니다.
Database에는 메뉴가 있는데 웹사이트에 안 나온다면?
한꺼번에 모든 코드를 다시 만들지 않고, 아래 순서대로 확인합니다.
17.STEP 12~13. 메뉴 가격 수정하기 & SQL 더 정확히 요청하기
확장 실습 · 시간이 되면
메뉴 가격 수정하기
이번에는 새로운 데이터 추가가 아니라 기존 데이터 수정입니다 — Cream Latte 가격을 6,500원에서 6,800원으로 변경합니다.
확인할 단어 — UPDATE + WHERE. WHERE는 "어떤 데이터에 작업할 것인지" 조건을 지정합니다 — 조건 없이 UPDATE하면 모든 데이터가 바뀔 수 있으니 항상 확인하는 습관을 들입니다.
SQL을 AI에게 더 정확하게 요청해보기
"가격 바꾸는 SQL 만들어줘."
"Supabase의 menus Table에서 Cream Latte의 price만 6800으로 변경하는 SQL을 만들어줘. 다른 Row는 수정하지 마. WHERE 조건을 사용해서 Cream Latte만 수정되도록 해줘. 실행 전에 어떤 데이터를 수정하는 코드인지 설명해줘."
핵심 — SQL을 잘 요청하려면 SQL 문법보다 현재 데이터 구조와 원하는 작업을 정확하게 설명하는 능력이 중요합니다.
18.STEP 14. 나만의 메뉴 하나 추가하기
확장 실습 · 시간이 되면
지금까지는 모두 Strawberry Latte를 추가했습니다. 이제 각자 메뉴 하나(이름·설명·가격·이미지 파일)를 결정합니다. 단, 직접 SQL을 작성하지 않고 AI에게 SQL을 요청합니다.
19.DAY 04 정리 & 다음 수업
DAY 03 → DAY 04 변화
다음 수업 예고 — DAY 05
회원가입 · 로그인 만들기 + AI 작업 환경(하네스) 꾸미기 · 첫 배포
오늘은 "누구나 메뉴를 볼 수 있게" 권한을 열었습니다. 다음 시간에는 Supabase로 회원가입·로그인을 만들고 "로그인한 사람만, 내 데이터만" 볼 수 있는 권한으로 한 단계 더 나아갑니다.
- • 인증과 권한, 도메인 · SSL 등 서버 개념 이어서 배우기
- • Supabase로 회원가입 · 로그인 · 로그아웃 만들기
- • CLAUDE.md · 스킬 · MCP로 Claude Code 작업 환경 꾸미기
- • 카페24 AI SPACE 무료 체험으로 카페 사이트를 인터넷에 올려 보기