5-3 바이브 코딩 프로젝트 ⏱ 약 15분

Codex로 방명록 만들기

Supabase 프로젝트를 만들고, Codex에게 내 사이트에 진짜 방명록을 붙여 달라고 해요. 친구가 남긴 글이 모두에게 보여요.

🎯 이번 레슨을 마치면
  • Supabase 프로젝트를 만들고 연결 정보를 찾을 수 있다
  • Codex에게 테이블, 보안 규칙(RLS), 화면을 만들게 할 수 있다
  • 공개해도 되는 키와 절대 숨겨야 하는 키를 구분할 수 있다

1단계: Supabase 프로젝트 만들기 (직접)

  1. supabase.com 에 가입하고 New project를 눌러요.
  2. 프로젝트 이름(예: my-site)과 데이터베이스 비밀번호를 정해요. 지역(Region)은 한국 사용자가 많다면 **서울(Seoul)**이나 가까운 곳으로 골라요.
  3. 만들어지면 프로젝트 설정의 API / API Keys 화면에서 두 가지를 찾아요.
이름공개해도 되나요?용도
Project URL✅ 괜찮아요내 데이터베이스의 주소
Publishable key (예전 이름: anon key)✅ 화면 코드에 넣어도 돼요 (단, RLS가 켜져 있어야 안전)방문자용 출입 카드
Secret key (예전 이름: service_role key)❌ 절대 안 돼요모든 권한을 가진 마스터키

2단계: Codex에게 계획 받기

AI 코딩 도구에게 이렇게 말해 보세요 
내 소개 사이트 맨 아래에 방명록을 붙이고 싶어. 데이터베이스는 Supabase를 쓸 거야.
- 누구나 이름과 한마디를 남길 수 있고, 모두가 최신 글부터 볼 수 있어야 해.
- 글 수정·삭제는 아무도 못 하게 해 줘. (나중에 관리자 페이지에서 할 거야)
- 이름은 20자, 내용은 200자까지만.
코드를 바꾸기 전에 1) 테이블 구조 2) RLS 보안 규칙 3) 바꿀 파일을 먼저 설명해 줘.
Supabase Project URL과 publishable key는 내가 따로 알려 줄게.

3단계: 만들기

계획이 괜찮으면 진행해요. 테이블을 만드는 SQL은 Codex가 써 주고, 여러분은 Supabase 화면의 SQL Editor에 붙여 넣고 실행하면 돼요. (Supabase 연결 도구를 설정해 두면 Codex가 직접 할 수도 있어요.)

AI 코딩 도구에게 이렇게 말해 보세요 
계획대로 진행해 줘. 테이블과 RLS를 만드는 SQL은 내가 Supabase SQL Editor에서 실행할게.
Project URL: https://xxxx.supabase.co
Publishable key: sb_publishable_xxxx
연결 정보는 코드에 흩어 두지 말고 한 곳(설정 파일)에 모아 줘.

👉 xxxx 자리에 실제 값을 넣어요. publishable(anon) 키만 알려 주고, secret 키는 알려 주지 않아요.

4단계: 직접 써 보고 확인하기

퀴즈

방명록 화면 코드(JavaScript)에 넣어도 되는 Supabase 키는?

📝 정리해 볼까요?

  • Supabase 프로젝트를 만들고 Project URL과 공개용 키(publishable/anon key)를 Codex에게 알려 줬어요.
  • 테이블 만들기, RLS 규칙, 화면 연결은 Codex가 했고, 나는 계획과 결과를 확인했어요.
  • service_role(secret) 키는 절대 화면 코드나 GitHub에 넣지 않아요.
  • 다음 레슨에서는 로그인을 붙여서 "로그인한 사람만 쓰기, 내 글은 내가 삭제"로 바꿔요.

📖 새로 나온 용어

Supabase
PostgreSQL 데이터베이스와 로그인, 파일 저장소 등을 한 번에 제공하는 서비스예요. 비유: 주방 설비가 다 갖춰진 임대 주방
테이블 Table
데이터베이스에서 데이터를 행(줄)과 열(칸)로 정리한 표예요. 비유: 엑셀 시트 한 장
RLS Row Level Security
데이터베이스의 한 줄 한 줄마다 "누가 보고 고칠 수 있는지" 정하는 보안 규칙이에요. 비유: 사물함마다 주인만 여는 자물쇠
환경 변수 Environment Variable
비밀 키처럼 코드에 직접 적으면 안 되는 값을 따로 보관해 두는 설정값이에요. 비유: 금고에 따로 보관한 열쇠
용어 사전 전체 보기 →