8장: 핵심 기능 구현
데이터베이스 연결: Supabase로 데이터 저장하기
7장에서 만든 프로젝트는 아직 껍데기입니다. 화면은 있지만 데이터를 저장하거나 불러오는 기능이 없습니다. 브라우저를 닫으면 입력한 내용이 사라집니다.
데이터를 영구적으로 저장하려면 데이터베이스가 필요합니다. 이 가이드에서는 Supabase를 씁니다.
Supabase 계정 및 프로젝트 만들기
1단계: https://supabase.com (새 탭에서 열림) 에 접속해서 무료 계정을 만듭니다. GitHub 계정으로 가입하면 빠릅니다.
2단계: 로그인 후 "New Project"를 클릭합니다. 프로젝트 이름을 입력하고, Database Password를 설정합니다. 이 비밀번호는 나중에 필요하니 어딘가에 적어두세요. Region은 Northeast Asia (Seoul)을 선택합니다. 한국에서 접속할 때 속도가 빠릅니다.
프로젝트 생성에 1~2분 걸립니다.
3단계: 프로젝트 대시보드에서 두 가지 정보를 복사합니다.
- Project URL — Project Overview 화면에 있는
https://xxxxxxxx.supabase.co형태의 주소. 복사합니다. - Publishable key — 왼쪽 메뉴 하단 "Project Settings" > "API Keys" 페이지에서
sb_publishable_로 시작하는 긴 문자열을 복사합니다.
이 두 가지가 여러분의 프로젝트와 Supabase를 연결하는 열쇠입니다. Publishable key는 브라우저에서 볼 수 있어도 괜찮은 키입니다. sb_secret_으로 시작하는 Secret key는 절대 코드에 넣으면 안 됩니다.
4단계: Claude Code에게 연결을 시킵니다.
Supabase를 이 프로젝트에 연결해줘.
Project URL: [복사한 URL]
Publishable key: [복사한 키]
.env 파일에 저장하고, Supabase 클라이언트 초기화 코드를 만들어줘.
AI가 .env 파일에 키를 저장하고 연결 코드를 세팅합니다.
⚠️ RLS — 데이터베이스 보안 설정
Supabase를 연결하고 바로 쓰기 시작하면 큰 문제가 생길 수 있습니다.
Publishable key는 프론트엔드 코드에 포함되어 누구나 볼 수 있습니다. RLS(Row Level Security)가 없으면 이 키를 가진 사람이 다른 사용자의 데이터까지 읽고 수정할 수 있습니다. 즉 A 사용자가 B 사용자의 일감 데이터를 마음대로 읽고 수정할 수 있는 상황이 됩니다.
RLS는 "이 데이터는 이 사용자만 볼 수 있다"는 규칙을 데이터베이스 단에서 설정하는 기능입니다.
Claude Code에게 맡기면 됩니다.
Supabase 테이블에 RLS 정책을 만들어줘.
로그인한 사용자는 자기 데이터만 읽고, 수정하고, 삭제할 수 있게 해줘.
SQL 코드로 알려줘.
AI가 SQL 코드를 알려주면 Supabase 대시보드에서 적용합니다.
- Supabase 대시보드 왼쪽 메뉴에서 "SQL Editor"를 클릭합니다.
- AI가 준 SQL 코드를 붙여넣고 "Run"을 클릭합니다.
테이블을 새로 만들 때마다 RLS 설정을 잊지 마세요.
사용자 인증: 로그인/회원가입
대부분의 서비스는 로그인이 필요합니다. 누가 이 데이터의 주인인지 구분해야 하고, RLS도 로그인된 사용자를 기준으로 작동합니다.
Supabase에 인증 기능이 내장되어 있어서 따로 만들 필요 없습니다.
이메일/비밀번호로 회원가입하고 로그인하는 기능을 만들어줘.
- 회원가입 페이지: 이메일, 비밀번호 입력
- 로그인 페이지: 이메일, 비밀번호 입력
- 로그인하면 /dashboard로 이동
- 로그인하지 않은 사용자가 /dashboard에 접근하면 로그인 페이지로 보내줘
완성되면 개발 서버를 켜고 직접 회원가입, 로그인을 테스트합니다. Supabase 대시보드 왼쪽 메뉴 "Authentication" > "Users"에서 가입된 사용자 목록을 확인할 수 있습니다.
소셜 로그인(Google, Kakao 등)을 원하면 추가로 요청할 수 있습니다.
Google 소셜 로그인도 추가해줘.
Supabase 대시보드에서 Google OAuth 설정이 추가로 필요합니다. AI가 단계별로 안내해줄 겁니다.
테이블 만들기
데이터를 저장하려면 Supabase에 테이블을 만들어야 합니다. 스프레드시트의 시트와 비슷합니다. 일감 목록이면 일감 테이블, 게시글이면 게시글 테이블.
Claude Code에게 시키면 됩니다.
프리랜서 일감을 저장할 테이블을 Supabase에 만들어줘.
클라이언트 이름, 금액, 상태(진행중/완료/미수금)를 저장할 수 있어야 해.
필요한 필드는 네가 설계해줘.
SQL 코드로 알려줘. RLS 정책도 같이.
AI가 SQL 코드를 주면 Supabase SQL Editor에서 실행합니다.
CRUD — 생성, 읽기, 수정, 삭제
테이블이 만들어졌으면 이제 데이터를 다루는 기능을 붙입니다. 웹서비스는 결국 아래 네 가지 동작을 합니다.
Create(생성) — 새 데이터를 등록합니다. 일감 등록, 게시글 작성 등.
Read(읽기) — 저장된 데이터를 화면에 보여줍니다. 일감 목록, 게시글 목록 등.
Update(수정) — 기존 데이터를 수정합니다. 일감 상태 변경, 게시글 편집 등.
Delete(삭제) — 데이터를 삭제합니다.
이 네 가지를 합쳐서 CRUD라고 합니다. AI에게 기능을 시킬 때 이 네 가지를 빠짐없이 요청합니다.
일감 관리 기능을 만들어줘.
- 새 일감을 등록하는 폼 (클라이언트 이름, 금액, 상태)
- 등록된 일감을 목록으로 표시
- 목록에서 상태를 변경할 수 있는 드롭다운
- 각 항목에 삭제 버튼
모든 데이터는 Supabase에 저장하고, 페이지를 새로고침해도 유지되게 해줘.
바이브코딩 워크플로우: 계획 → 구현 → 확인 → 수정
기능 하나를 만들 때마다 이 흐름을 반복합니다.
계획: AI에게 뭘 만들지 구체적으로 설명합니다. 필요한 UI 요소, 동작 방식, 데이터 구조를 함께 말합니다.
구현: AI가 코드를 작성합니다. 작업 중에 허락을 요청하면 허용합니다.
확인: 브라우저에서 실제로 동작하는지 확인합니다. 버튼을 클릭하고, 폼을 제출하고, 데이터가 저장됐는지 Supabase 대시보드에서 확인합니다.
수정: 문제가 있으면 구체적으로 말합니다.
일감 등록 버튼을 눌렀는데 아무 반응이 없어.
브라우저 콘솔에는 이런 에러가 나와.
[에러 메시지 붙여넣기]
한 번에 완벽하게 되는 일은 드뭅니다. 2~3번 수정하는 게 정상입니다. 5번 이상 같은 문제를 반복하면 접근 방식을 바꾸거나 /clear 후 새로 시작합니다.
기능 하나가 완성되면 커밋하기 전에 AI에게 리뷰를 시키는 습관을 들이면 좋습니다.
방금 만든 코드를 리뷰해줘.
불필요한 코드, 빠뜨린 에러 처리, 개선할 점이 있으면 알려줘.
AI가 코드를 만들 때는 "동작하게 만드는 것"에 집중합니다. 리뷰를 따로 시키면 한 발 물러서서 전체를 다시 살펴봅니다. 이때 지금은 안 쓰는 코드, 빠뜨린 에러 처리, 보안 허점, 느려질 수 있는 부분, 여러 곳에 반복되는 중복 코드 같은 것들을 잡아냅니다. 문제를 발견하면 바로 고쳐달라고 하면 됩니다.
리뷰까지 끝나면 커밋합니다.
일감 CRUD 기능 완성됐어. 커밋하고 GitHub에 올려줘.
✏️ 실습: 핵심 기능 2~3개를 AI와 함께 구현하기
7장에서 만든 프로젝트에 기능을 추가합니다.
1단계: Supabase 계정을 만들고 프로젝트를 생성합니다. Project URL과 Publishable key를 복사합니다.
2단계: Claude Code에게 Supabase를 연결하도록 시킵니다.
Supabase를 연결해줘.
Project URL: [복사한 URL]
Publishable key: [복사한 키]
3단계: 데이터 테이블을 만들고 RLS를 설정합니다.
[프로젝트에 맞는 테이블]을 만들어줘.
필드는 [필드 목록]이야.
SQL 코드와 RLS 정책도 같이 줘.
Supabase SQL Editor에서 실행합니다.
4단계: 로그인/회원가입 기능을 만듭니다.
이메일/비밀번호로 회원가입하고 로그인하는 기능을 만들어줘.
직접 회원가입을 해보고, Supabase 대시보드 Authentication > Users에서 계정이 생성됐는지 확인합니다.
5단계: 핵심 기능(CRUD)을 요청합니다.
[핵심 기능]을 만들어줘.
데이터는 Supabase에 저장해줘.
브라우저에서 데이터를 입력하고, 새로고침 후에도 남아있는지 확인합니다.
6단계: 기능을 완성하면 커밋합니다.
기능이 2~3개 붙으면 벌써 꽤 쓸 만한 프로젝트가 됩니다. 다음 장에서는 외부 API를 연결해서 직접 만들기 어려운 기능을 가져다 쓰는 방법을 다룹니다.
참고자료