Claude AI로 영어 단어 퀴즈 웹 앱 만들기 [10편]

Claude AI로 영어 단어 퀴즈 앱 만들기

Part 10: Supabase 마이그레이션 - 20배 빠른 데이터베이스로!

📚 시리즈 안내

← 이전 글: [Part 9] 5가지 게임 모드 구현

→ 다음 글: [Part 11] 코드 검증과 UI/UX 개선

🚀 이번 편: Google Sheets → Supabase 완전 전환!

🐢 들어가며: Google Sheets의 한계

9편에서 5가지 게임 모드를 완성하고, 학원에서 본격적으로 사용하기 시작했습니다. 그런데 학생 수가 늘어나면서 심각한 문제가 발생했어요.

체감되는 성능 문제들

•      🐢 느린 로딩: 로그인에 2~3초, 문제 로딩에 1~2초씩 걸림

•      ⏱️ 동시 접속 문제: 수업 시간에 30명이 동시에 접속하면 엄청 느려짐

•      📊 API 할당량: Google Sheets API는 분당 요청 수 제한이 있음

•      😤 학생 불만: "선생님, 왜 이렇게 느려요?" 라는 말을 자주 듣게 됨

결국 데이터베이스를 바꿔야겠다는 결심을 하게 되었습니다!

🔍 1단계: 대안 솔루션 비교

Claude에게 현재 상황을 설명하고 대안을 물어봤습니다.

 

💬 나의 질문

"지금 솔루션 각각에 데이터를 보관하고 500명 정도 매일 접근을 한다 가정하면 비용은 어떻게 나올까?"

Claude의 솔루션별 비용 분석

솔루션	월 비용	500명 대응	결론
Supabase	$0 (무료)	✅ 충분	⭐ 강력 추천!
DigitalOcean	$5	✅ 충분	좋은 대안
AWS RDS	$18~38	✅ 충분	오버스펙
Heroku	$59~80	✅ 충분	❌ 너무 비쌈

 

500명 규모라면 Supabase 무료 플랜으로 충분하다는 결론! 바로 Supabase로 결정했습니다.

🚀 2단계: Supabase 마이그레이션 가이드

Claude에게 구체적인 마이그레이션 방법을 물어봤습니다.

 

💬 나의 요청

"Supabase로 할 경우 어떻게 하면 좋을까? 구체적으로 설명해 줘"

7단계 마이그레이션 플랜

단계	작업 내용	예상 시간	난이도
1	Supabase 가입 & 프로젝트 생성	5분	⭐
2	테이블 생성 (계정, 랭킹, 기록, 단어)	10분	⭐⭐
3	Google Sheets → Supabase 데이터 이관	30분	⭐⭐⭐
4	Python 코드 수정 (API 변경)	15분	⭐⭐
5	로컬 테스트	10분	⭐
6	배포	15분	⭐
7	모니터링 설정	5분	⭐

 

총 예상 시간: 약 1.5시간 - 생각보다 빠르게 할 수 있다고 해서 바로 시작했습니다!

그러나 그것은 AI가 예상한 시간이고 저의 시간은 3~4배 더 들어갔죠.

😱 3단계: 첫 번째 오류 - 연결 실패!

Supabase 프로젝트를 만들고 연결 테스트를 하는데... 바로 오류가 발생했습니다!

 

❌ 에러 메시지

연결 실패: connection to server at 'localhost' port 5432 failed: Connection refused

🤖 Claude의 진단

문제가 명확합니다!

localhost로 연결하려고 하는데, Supabase는 클라우드 서버입니다.

실제 Supabase 호스트 주소로 변경해야 합니다!

해결 방법

1.     Supabase 대시보드 → Settings → Database에서 Host 확인

2.     .env 파일에서 SUPABASE_HOST를 실제 주소로 변경

3.     예: abcdefgh12345.supabase.co

 

# .env 파일 수정

SUPABASE_URL=https://abcdefgh12345.supabase.co

SUPABASE_KEY=your-anon-key-here

SUPABASE_HOST=db.abcdefgh12345.supabase.co

 

✅ 연결 성공!

"Supabase 연결 테스트 성공!" 🎉

📚 4단계: 단어 데이터베이스 이관

연결은 성공했는데, 중요한 게 빠졌습니다. 영어 단어 데이터!

 

💬 나의 보고

"SQL에 단어 DB가 없어"

 

기존에 Google Sheets에 저장된 7,722개의 영어 단어를 Supabase로 옮겨야 했습니다. Claude가 3단계 가이드를 만들어주었어요.

데이터 이관 3단계

1.     Google Cloud 설정 (10분): Sheets API 인증

2.     Supabase 테이블 생성 (2분): words 테이블 만들기

3.     마이그레이션 실행 (2분): Python 스크립트로 데이터 이관

두 번째 오류: duplicate key 오류

데이터 이관 중에 또 오류가 발생했습니다!

 

❌ 에러 메시지

⚠️ 고등 저장 실패: duplicate key value violates unique constraint

🤖 Claude의 분석

아! 데이터 구조가 다르네요!

Google Sheet의 구조에 맞게 테이블과 스크립트를 수정했습니다.

 

문제는 기본키(Primary Key) 설정이 잘못되어 있었던 거예요. 동일한 단어가 중복 저장되려고 하면서 오류가 난 것이죠.

이관 성공!

✅ 데이터 이관 완료!

• 7,722개 문제 → Supabase 저장 ✅

• 학년별 분류 (초/중/고) ✅

• 정답 + 3개 오답 포함 ✅

• 게임에 즉시 사용 가능! ✅

🔧 5단계: Python 코드 수정

데이터베이스 연결이 완료되었으니, 이제 Python 코드를 수정해서 Google Sheets 대신 Supabase를 사용하도록 바꿔야 합니다.

 

💬 나의 요청

"좋아, test.py에 있는 구글 시트를 Supabase SQL로 변경을 해줘"

코드 변경 전후 비교

# 변경 전: Google Sheets API

from googleapiclient.discovery import build

service = build('sheets', 'v4', credentials=creds)

result = service.spreadsheets().values().get(...)

 

# 변경 후: Supabase

from supabase import create_client

supabase = create_client(SUPABASE_URL, SUPABASE_KEY)

result = supabase.table('words').select('*').execute()

 

성능 개선 결과

항목	Google Sheets	Supabase
응답 속도	1~2초	50ms ⚡
동시 사용자	~10명	500명+ 🚀
안정성	수동 관리	99.9% 자동

 

🐛 6단계: 랭킹 업데이트 오류 해결

거의 다 됐는데... 랭킹 저장에서 또 오류가 발생했습니다!

 

❌ 에러 메시지

Supabase UPDATE 오류: duplicate key value violates unique constraint 'rankings_rank_key'

 

이 오류는 rank 컬럼에 UNIQUE 제약이 걸려있기 때문이었습니다. 랭킹은 점수에 따라 동적으로 계산되어야 하는데, UNIQUE로 설정해 버리면 같은 순위가 두 명 이상일 때 오류가 나죠.

 

🤖 Claude의 해결

rankings 테이블의 rank UNIQUE 제약을 삭제하고,

점수 기준으로 동적 순위를 계산하도록 수정했습니다!

🎉 마이그레이션 완료!

드디어 모든 오류를 해결하고 Supabase 마이그레이션이 완료되었습니다!

체감되는 변화

•      ⚡ 로그인 속도: 2~3초 → 0.1초 미만으로 즉시 로그인!

•      📊 문제 로딩: 1~2초 → 거의 즉시 문제 표시!

•      👥 동시 접속: 30명이 동시에 해도 전혀 느려지지 않음!

•      😊 학생 반응: "선생님, 오늘 엄청 빨라요!" 🎉

💡 이번 편에서 배운 것

1.     솔루션 비교: 규모에 맞는 데이터베이스 선택의 중요성

2.     Supabase 장점: 무료, 빠름, 쉬운 설정

3.     호스트 설정: localhost가 아닌 실제 클라우드 주소 사용

4.     데이터 이관: 기존 데이터 구조에 맞게 테이블 설계

5.     UNIQUE 제약: 동적으로 변하는 값에는 UNIQUE 설정하면 안 됨

6.     성능 차이: Google Sheets vs 실제 DB의 엄청난 속도 차이

📌 다음 편 예고

Supabase로 전환하면서 몇 가지 버그와 UI 문제들이 발견되었습니다. 다음 편에서는 코드를 검증하고 UI/UX를 개선합니다!

•      SQL 쿼리 오류 수정

•      학습 모드 음성/텍스트 버그 해결

•      UI 세부 조정

•      사용자 이름 표시 문제 해결

➡️ 다음 글: [Part 11] 코드 검증과 UI/UX 개선

📋 이번 편 요약

• Google Sheets 성능 한계로 데이터베이스 전환 결정

• 솔루션 비교 후 Supabase 무료 플랜 선택

• localhost 연결 오류 → 실제 Supabase 호스트로 변경

• 7,722개 영어 단어 데이터 이관 완료

• duplicate key 오류 → 테이블 구조 수정으로 해결

• Python 코드 Google Sheets → Supabase로 변경

• rankings UNIQUE 제약 오류 → 동적 순위 계산으로 변경

• 결과: 응답 속도 20배 향상! (1~2초 → 50ms)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

데이터베이스 바꿨더니 완전 다른 앱이 된 느낌! ⚡🚀

이 글이 도움이 되셨다면 공감과 댓글 부탁드립니다! 🙏