3회차 가이드 | 고도화 & 데이터 다루기

수업 전에 읽어보세요

오늘은 앱을 '진짜'로 만듭니다

🎯 오늘의 목표

지난 시간 배포한 앱에 기능을 더 붙이고, 데이터를 브라우저가 아니라 서버에 저장하도록 바꿉니다. 오늘 끝나면 어디서 접속해도 내 데이터가 보이는 앱이 됩니다.

🗄️ Supabase는 오늘 전원 연결합니다

지금 앱은 데이터가 그 브라우저 안에만 저장돼요. 다른 PC에서 열면 텅 비어있습니다. 오늘 Supabase(무료 데이터베이스)를 전원 연결해서 이 문제를 해결합니다.

✅ 시작 전 확인

지난 시간에 만든 배포 URL과 프로젝트 폴더가 그대로 있는지 확인해주세요. 뭔가 잘못됐어도 걱정 마세요, 수업 시작할 때 같이 복구합니다.

💡 오늘이 기술적으로 가장 어려운 날입니다

Supabase 연결은 이번 과정에서 가장 복잡한 구간이에요. 그만큼 시간을 넉넉히(70분) 잡았습니다. 한 단계씩 같이 갑니다. 막히면 바로 손 들어주세요.

오늘 흐름

이렇게 진행됩니다

15:00 ~ 15:20

📋 오프닝 & 복구 세션

current_status.md 읽고 어디까지 했는지 복구, 서로 앱 URL 공유

📌 복구 방법 →

15:20 ~ 16:00

⚡ 기능 추가 개발

Phase 3~ 진행. 써보면서 부족한 부분 채우기

📌 기능 추가 →

16:00 ~ 16:10

☕ 쉬는 시간

16:10 ~ 17:20

🗄️ Supabase 연결 (전원)

가입 → 프로젝트 생성 → 테이블 만들기 → 앱 연결 → Vercel 설정

📌 Supabase 가이드 →

17:20 ~ 17:45

🔁 배포 확인 & 마무리 개발

커밋&푸시 → 배포된 앱에서 데이터 저장 확인

17:45 ~ 18:00

📌 마무리 & 중간 체크인 안내

current_status.md 갱신, 다음 일정 안내

🎯 오늘의 최소 목표

Supabase 연결 완료 + 배포된 앱에서 데이터 저장 확인. 기능 추가는 시간이 남는 만큼만 하면 됩니다. 데이터 연결이 오늘의 핵심이에요.

일주일 만에 다시 만나면 "내가 어디까지 했더라?"가 제일 먼저 옵니다. AI도 마찬가지예요. 그래서 current_status.md가 있습니다.

1

VS Code로 프로젝트 폴더 열기

VS Code → 파일 > 폴더 열기 → 바탕화면의 내 프로젝트 폴더

2

Claude Code 연결

터미널 → claude 입력 (또는 왼쪽 Claude 아이콘 클릭)

3

상황 복구 요청

AI에게 지난 상황을 읽히는 게 오늘의 첫 작업입니다.

복구 프롬프트 — 매 회차 시작할 때 이걸로 시작하세요

이 폴더의 CLAUDE.md, prd.md, current_status.md를 읽고 지금까지 뭘 만들었고 다음에 뭘 해야 하는지 정리해줘.

4

내 앱 직접 써보기

배포 URL을 열어서 모든 버튼을 눌러보세요. 빈 값도 넣어보고, 이상한 값도 넣어보세요.

"화면이 뜨니까 됐다"가 아니라 깨질 때까지 눌러보는 것이 진짜 테스트입니다.

💡 불편한 점을 메모하세요

지금 써보면서 발견한 불편함이 오늘 추가할 기능 목록입니다. 메모장에 적어두세요.

방금 메모한 불편함을 하나씩 해결합니다. PRD를 먼저 고치고 → 개발 요청하는 순서가 중요해요.

1

PRD를 먼저 수정

"고쳐줘"라고 바로 말하지 말고, PRD에 먼저 반영하세요. 그래야 나중에 PRD만 봐도 앱이 어떤 상태인지 알 수 있어요.

PRD 수정 프롬프트

prd.md에 아래 기능을 추가해줘. - [추가하고 싶은 기능 1] - [추가하고 싶은 기능 2] 기존 내용은 유지하고, 개발 단계(Phase)도 다시 정리해줘.

2

수정된 PRD로 개발

개발 요청 프롬프트

prd.md가 업데이트됐어. 다시 읽고 다음 Phase를 진행해줘. 기존 기능은 그대로 두고 자연스럽게 추가해줘.

3

한 단계 끝날 때마다 커밋 & 푸시

GitHub Desktop → Summary에 구체적으로 입력 (예: "검색 기능 추가") → Commit → Push origin

💡 커밋 메시지는 구체적으로! "수정함" ✕ → "삭제 버튼 추가" ○. 나중에 어디로 되돌릴지 알아볼 수 있어요.

AI에게 잘 시키는 법

❌ 이렇게 말고

"예쁘게 만들어줘"
"기록 기능 추가해줘"
"부정행위 방지해줘"

✅ 이렇게

"배경 흰색, 버튼 파란색 둥근 모서리"
"날짜·항목·수량 입력하면 목록에 저장"
"빈 값으로 제출하면 경고 문구 표시"

💡 에러가 났을 때

에러는 적이 아니라 가장 정확한 힌트예요. 메시지를 요약하지 말고 통째로 복사해서 "이런 에러가 났어. 고쳐줘."와 함께 보내세요. 그리고 한 번에 하나씩만 고치세요.

데이터베이스가 뭔가요? — 카톡으로 이해하기

데이터베이스(DB)는 앱이 만든 정보를 모아서 보관하는 창고입니다. 말이 어려우니 매일 쓰는 걸로 볼게요.

💬 카톡은 이렇게 작동합니다 내가 보낸 메시지가 상대방 휴대폰으로 직접 날아가는 게 아닙니다. 먼저 서버(DB)에 저장되고, 상대방이 앱을 열면 그 저장된 내용을 불러와서 보여주는 방식이에요.

그래서 상대가 접속해 있지 않아도 메시지가 남아 있고, 며칠 뒤에 열어도 대화가 그대로 있습니다. 이 "저장하고 불러오는 창고"가 바로 DB입니다.

⚠️ DB가 없으면 무슨 일이 생기나 DB가 없는 앱은 기억을 못 합니다. 입력한 내용이 그 순간 화면에만 있다가, 새로고침하거나 창을 닫으면 전부 사라져요.

게다가 내 화면에 입력한 건 나만 보입니다. 부대에서 여럿이 같이 쓰려면, 정보가 모이는 공용 창고가 반드시 필요합니다.

💡 왜 Supabase인가요?

DB를 제공하는 서비스는 여럿인데 우리는 Supabase를 씁니다. 초보자가 시작하기 쉽고, 무료로 충분히 쓸 수 있고, AI에게 시키면 알아서 연결해주기 때문이에요.

지금 내 앱은 어떤 상태인가요?

❌ 지금 상태 (localStorage)

브라우저 안에만 저장
다른 PC에서 열면 텅 빔
브라우저 지우면 데이터 사라짐
여러 사람이 같이 못 씀

✅ Supabase 연결 후

서버에 안전하게 저장
어느 기기에서 열어도 그대로
영구 보존
여러 사람이 함께 사용 가능

📌 오늘은 전원 필수로 진행합니다. 지금 당장은 혼자 쓰는 앱이어도, 부대에서 실제로 활용하려면 반드시 필요한 기능이에요.

1

접속 & GitHub 계정으로 가입

https://supabase.com

"Start your project" → "Continue with GitHub" → "Authorize supabase" 초록 버튼 → 자동 연결!

💡 별도 회원가입이 필요 없어요. 2회차에 만든 GitHub 계정이 그대로 쓰입니다.

1

"New project" 클릭 후 정보 입력

① Project name: 영문으로 (예: my-app-db)
② Database Password: 안전한 비밀번호 → 반드시 메모장에 저장!
③ Region: Northeast Asia (Seoul) 선택
④ Pricing Plan: Free 선택
⑤ "Create new project" → 1~2분 대기

⚠️ Database Password는 나중에 다시 볼 수 없어요! 반드시 따로 저장해두세요.

1

Settings → API로 이동

왼쪽 메뉴 하단 ⚙️ Settings → "API" 탭 클릭

2

두 가지를 복사해서 메모장에 저장

① Project URL
https://xxxxxxxxxxxxxx.supabase.co

② anon public 키 (Project API keys 섹션)
eyJhbGciOiJIUzI1NiIsInR5... (eyJ로 시작하는 긴 문자열)

🚨 "service_role" 키는 절대 복사하지 마세요! 외부에 노출되면 안 되는 비밀 키입니다. 반드시 "anon public"만 사용합니다.

anon public만 복사해서 씁니다(브라우저에 담겨도 되는 키). service_role은 관리자 키라 코드나 화면에 절대 노출하면 안 됩니다.

※ Project URL은 프로젝트 Overview 화면 상단에서도 확인할 수 있어요. URL과 anon 키는 앱이 작동하려면 브라우저에 담기는 값이라 그 자체로 비밀은 아니지만, 화면 공유·발표 자료에는 실제 값을 그대로 노출하지 않는 게 안전합니다.

✅ 메모장에 이렇게 저장해두세요

Project URL: https://xxxxxx.supabase.co
anon key: eyJhbGciOiJIUz...

데이터를 저장하려면 "테이블"(엑셀 시트 같은 것)이 필요해요. Claude가 내 앱에 맞게 설계해줍니다.

1

Claude에게 테이블 구조 요청

테이블 SQL 요청 프롬프트

내 앱(prd.md 참고)에 필요한 Supabase 테이블 구조를 설계해줘. Supabase SQL Editor에 바로 붙여넣을 수 있는 SQL 코드로 만들어줘. RLS(Row Level Security)는 일단 비활성화하거나 전체 허용으로 해줘.

2

SQL Editor에서 실행

Supabase 왼쪽 메뉴 → "SQL Editor" → "New query" → Claude가 만든 SQL 붙여넣기 → 오른쪽 위 "Run" (또는 Ctrl+Enter)

"Success" 표시가 나오면 성공!

⚠️ 오류가 나면 에러 메시지를 그대로 복사해서 Claude에게 "이 에러가 났어. 고쳐줘."

3

테이블 확인

왼쪽 메뉴 "Table editor" 클릭 → 내가 만든 테이블이 보이면 완료!

🚨 API 키를 코드에 직접 넣으면 절대 안 됩니다!
코드에 넣으면 GitHub에 올라가는 순간 전 세계에 공개됩니다. 반드시 .env.local 파일에 따로 보관하고, 코드에서는 변수명으로만 불러와야 해요.

1

.env.local 파일 만들기

.env.local 생성 프롬프트

프로젝트 루트에 .env.local 파일을 만들어줘. 아래 두 줄을 넣어줘. VITE_SUPABASE_URL=여기에_Project_URL_붙여넣기 VITE_SUPABASE_ANON_KEY=여기에_anon_key_붙여넣기 그리고 .gitignore에 .env.local이 포함되어 있는지 확인하고, 없으면 추가해줘.

파일이 만들어지면 VS Code에서 직접 열어서 "여기에_..._붙여넣기" 자리에 메모해둔 실제 값을 넣으세요.

2

앱 코드를 Supabase 방식으로 바꾸기

Supabase 연결 프롬프트

내 앱에 Supabase를 연결해줘. API 키는 .env.local에 이미 저장해뒀어. VITE_SUPABASE_URL과 VITE_SUPABASE_ANON_KEY 환경변수를 사용해서 기존 localStorage 코드를 Supabase 코드로 교체해줘. 키를 코드에 직접 넣지 말고, 환경변수로 불러와서 사용해줘.

3

내 컴퓨터에서 동작 확인

앱에서 데이터를 입력해보고 → Supabase Table editor에서 "Refresh" 클릭 → 내가 입력한 데이터가 테이블에 보이면 연결 성공!

4

🚨 푸시 전 반드시 확인

GitHub Desktop 변경 파일 목록을 보세요. .env.local이 목록에 없어야 정상입니다.

✅ .env.local이 목록에 없으면 → 안전하게 커밋 & 푸시
🚨 .env.local이 목록에 있으면 → 절대 커밋하지 마세요! 강사를 부르세요.

5

Vercel 환경변수 설정 (배포용 필수!)

.env.local은 내 컴퓨터에서만 작동해요. 배포된 앱도 Supabase에 연결하려면 Vercel에 같은 값을 등록해야 합니다.

① Vercel 대시보드 → 프로젝트 선택 → 상단 "Settings"
② 왼쪽 메뉴 "Environment Variables"
③ "Add New"로 두 개 추가:

  Key: VITE_SUPABASE_URL
  Value: [메모한 Project URL]

  Key: VITE_SUPABASE_ANON_KEY
  Value: [메모한 anon key]

④ 각각 "Save"
⑤ 왼쪽 "Deployments" → 최근 배포 → "Redeploy"

💡 환경변수 이름은 앱 코드에 따라 다를 수 있어요. Claude에게 "내 코드에서 환경변수 이름이 뭐야?"라고 확인하세요.

🎉 Supabase 연결 완료!

배포된 URL을 휴대폰으로 열어서 데이터를 입력해보세요. PC에서 새로고침했을 때 그 데이터가 보이면 완벽합니다! 이제 진짜 앱이에요.

문제 해결

막히면 확인하세요

프로젝트 폴더가 어디 있는지 모르겠어요

GitHub Desktop을 열고 Repository > Show in Explorer를 클릭하면 바로 폴더가 열립니다. 목록에서 내 저장소를 선택한 후에 하세요.

SQL 실행 시 오류가 나요

에러 메시지를 통째로 복사해서 Claude에게 "이 에러가 났어. 고쳐줘."라고 하세요. 가장 흔한 원인은 테이블 이름이 이미 존재하거나, 컬럼 타입이 안 맞는 경우입니다.

앱에서 데이터를 넣었는데 테이블에 안 들어가요

3가지를 순서대로 확인하세요.
① .env.local에 URL과 키가 정확히 들어갔는지 (공백·줄바꿈 주의)
② Supabase에서 RLS(Row Level Security)가 막고 있는지 → Table editor에서 해당 테이블의 RLS를 끄거나 전체 허용 정책 추가
③ 브라우저 개발자도구(F12) → Console 탭의 에러 메시지를 복사해서 Claude에게 보여주기

내 컴퓨터에선 되는데 배포된 앱에선 안 돼요

Vercel 환경변수를 설정하지 않았거나, 설정 후 Redeploy를 안 한 경우입니다. Settings → Environment Variables에서 두 개가 등록됐는지 확인하고, Deployments에서 Redeploy를 눌러주세요.

.env.local이 GitHub Desktop 목록에 보여요

절대 커밋하지 마세요! .gitignore 파일을 VS Code에서 열어 .env.local이 들어있는지 확인하세요. 없으면 Claude에게 "gitignore에 .env.local을 추가해줘"라고 요청하고, 그래도 목록에 남아있으면 강사를 부르세요.

Supabase 연결하다가 앱이 완전히 망가졌어요

그래서 커밋을 하는 거예요. GitHub Desktop의 History 탭에서 잘 작동하던 시점을 찾아 되돌릴 수 있습니다. 강사를 부르면 같이 복구해드릴게요. 겁내지 말고 시도하세요.

수업이 끝나면

마무리 & 다음 일정

📌 나가기 전에 꼭 — current_status.md 갱신

다음 수업까지 2주 공백이 있습니다. 이 파일이 없으면 4회차에 상황 복구에만 시간을 다 써요.

현황 갱신 프롬프트

current_status.md를 업데이트해줘. 아래 4개 항목으로 정리해줘. ## 지금 상태 ## 오늘 한 것 ## 다음에 할 것 ## 건드리면 안 되는 것 오늘은 [추가한 기능]을 개발했고, Supabase 연결을 완료했어. 배포 URL과 Supabase 프로젝트 이름도 기록해줘.

📌 갱신 후 커밋 + 푸시까지 해야 저장됩니다!

💬 중간 체크인 안내

4회차(10/23)까지 2주가 남습니다. 그 사이에 카톡으로 중간 점검 메시지를 드릴 거예요. 따로 모여서 하는 온라인 모임이 아닙니다.

5~10분이면 충분합니다. "어디까지 됐는지, 막힌 게 있는지" 짧게 답만 주시면 돼요. 막힌 게 있으면 그때 카톡으로 편하게 물어보셔도 됩니다. 다음 시간에 뭘 먼저 다룰지 정하는 데 쓰입니다.

오늘 배운 것 체크리스트

current_status.md로 지난 작업을 복구했다
내 앱을 직접 써보고 불편한 점을 찾았다
PRD를 수정하고 기능을 추가했다
Supabase에 가입하고 프로젝트를 만들었다
테이블을 만들었다 (SQL 실행)
.env.local에 키를 안전하게 넣었다
앱에서 입력한 데이터가 Supabase에 저장되는 걸 확인했다
Vercel 환경변수를 설정하고 Redeploy했다
current_status.md를 갱신하고 푸시했다

궁금한 것

자주 묻는 질문

Supabase는 유료인가요?

Free 플랜으로 충분합니다. 우리가 만드는 규모의 앱은 무료 범위를 넘지 않아요. 카드 등록도 필요 없습니다.

API 키가 노출되면 어떻게 되나요?

anon public 키는 브라우저에 노출되는 걸 전제로 만들어진 키라 그 자체로 치명적이진 않지만, 데이터를 마음대로 읽고 쓸 수 있게 됩니다. 그래서 .env.local로 분리하고 .gitignore에 넣는 습관이 중요해요. service_role 키는 절대 노출되면 안 됩니다.

아이디어를 바꾸고 싶어요

오늘이 마지막 기회입니다. 4회차부터는 본격 개발 구간이라 바꾸면 완성이 어려워져요. 바꾸기로 했다면 강사와 상의해서 범위를 줄여 다시 시작하세요.

Supabase까지 못 끝냈어요

괜찮습니다. 이 가이드에 전 과정이 상세히 있으니 차근차근 따라하시고, 막히면 카톡으로 편하게 물어보시거나 4회차에 강사에게 요청하세요. 가장 중요한 건 어디서 막혔는지 메모해두는 것입니다.

다음 시간에는 뭘 하나요?

4회차(10/23 금)와 5회차(10/24 토)는 연속 이틀 몰입 개발입니다. 김푸른 강사가 진행하며, 새로 배우는 것 없이 오로지 내 앱의 완성도를 높이는 데 집중해요. 오늘까지 배운 것만으로 충분합니다.

설문

오늘 수업, 어떠셨나요?

1분이면 끝나는 짧은 설문입니다. 여러분의 솔직한 피드백이 다음 수업을 더 좋게 만듭니다. 꼭 참여해 주세요!

📋 3주차 설문 참여하기 →

고도화 &데이터 다루기