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

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

Part 11: 코드 검증과 UI/UX 개선 - 완성도 높이기

📚 시리즈 안내

← 이전 글: [Part 10] Supabase 마이그레이션

→ 다음 글: [Part 12] Windows EXE 배포 가이드

🔧 이번 편: SQL 오류 수정 + 학습 모드 버그 해결 + UI 다듬기

🔍 들어가며: 코드 검증의 중요성

10편에서 Supabase 마이그레이션을 완료하고 "이제 끝났다!"라고 생각했는데... 실제로 앱을 사용해 보니 여러 가지 문제들이 발견되었습니다. 😱

큰 기능은 잘 되는데, 세부적인 부분에서 버그가 있었어요. 이번 편에서는 Claude에게 코드 검증을 요청하고, 발견된 문제들을 하나씩 해결해 가는 과정을 다룹니다.

 

💡 핵심 교훈

기능 개발 후 반드시 '검증' 단계를 거치세요! Claude에게 코드 검증을 요청하면 놓친 부분을 찾아줍니다.

🔬 1단계: Claude에게 코드 검증 요청

마이그레이션 후 수정된 파일을 Claude에게 업로드하고 검증을 요청했습니다.

 

💬 나의 요청

"이전 대화의 마지막 수정된 파일이야. 검증해줘"

Claude의 검증 결과

✅ 잘된 부분

• Rankings 테이블 구조 개선

• 동적 순위 계산 로직

⚠️ 발견된 문제점

1. Trigger 로직 오류

2. Supabase Query 문법 오류

3. 코드 미완성 부분 존재

 

Claude가 655줄짜리 수정 완료된 Python 파일을 생성해 주었습니다.주요 수정 사항:

•      rank UNIQUE 오류 해결

•      Trigger 로직 오류 수정

•      Query 문법 수정

•      성능 70% 개선

🐛 2단계: SQL 문법 오류 해결

수정된 파일을 적용하고 Supabase SQL Editor에서 테스트하는데... 또 오류가 발생했습니다!

 

❌ 에러 메시지

ERROR: syntax error at or near '\' LINE 37: \d rankings

🤖 Claude의 설명

그 에러는 Supabase SQL Editor에서 PostgreSQL의

\d 명령어를 사용했기 때문입니다!

이 명령어는 psql CLI에서만 작동합니다.

psql vs SQL Editor 차이점

명령어	psql CLI	SQL Editor
\d 테이블명	✅ 작동	❌ 오류
\dt	✅ 작동	❌ 오류
SELECT * FROM	✅ 작동	✅ 작동

 

💡 기억하세요!

Supabase SQL Editor에서는 백슬래시(\)로 시작하는 명령어를 사용할 수 없습니다. 표준 SQL 문법만 사용하세요!

🎨 3단계: UI/UX 버그 8가지 해결

코드는 수정되었는데, 앱을 직접 사용해 보니 UI에서 여러 문제가 발견되었습니다.

 

💬 발견한 문제들

• 첫 화면에서 사람 아이콘 뒤에 내 이름이 안 나옴

• 영어단어학습에서 영어 음성이 안 나옴

• 게임 모드 선택 화면 글자가 잘못됨

• 기타 여러 UI 문제들...

8가지 버그 목록 및 해결

#	문제	해결
1	사용자 이름 안 보임	API 응답에서 name 필드 매핑 ✅
2	영어 음성/텍스트 안 나옴	API 필드명 수정 (word→correct) ✅
3	모드명 잘못됨	표시 텍스트 변경 ✅
4	기본 모드 표시 오류	'기본 모드' → '영어 모드' 변경 ✅
5	영→한글 표시 오류	'영→한글' → '한글 모드' 변경 ✅
6	스펠링 다음으로 안 넘어감	타이머/진행 로직 수정 ✅
7	듣기 모드 음성 안 나옴	TTS 호출 시점 수정 ✅
8	Supabase rank 오류	동적 순위 계산 로직 적용 ✅

 

📚 4단계: 학습 모드 완전 수정

8가지 버그 중에서 가장 복잡했던 건 학습 모드였습니다. 여러 번의 수정 과정을 거쳤어요.

첫 번째 시도: 문제 정의

💬 나의 설명

"학습 모드에서 영어가 나오고 정답 한글이 나오고, 영어가 나올 때 영어 음성이 나와야 해"

 

Claude가 학습 모드의 4단계 사이클을 다시 정의해 주었습니다:

단계	화면 표시	음성	시간
STEP 1	영어 단어	🔊 재생	1.5초
STEP 2	영어 + 한글 의미	-	2초
STEP 3	영어 단어 (복습)	🔊 재생	1.5초
STEP 4	영어 + 한글 의미	-	2초

 

두 번째 시도: 여전히 안 됨!

💬 나의 보고

"이제 영어 단어가 안 나오고 음성도 안 나옴. 한글도 좀 더 이쁘게 해 줘"

 

한 번의 수정으로 완벽하게 되지 않았어요. Claude가 API 응답 구조를 다시 확인해 보니 문제를 발견했습니다.

 

🤖 Claude의 분석

API 응답 구조를 확인했습니다!

generate-quiz API는 word 필드가 아닌

correct와 meaning을 반환합니다!

 

// 잘못된 코드

const englishWord = question.word;  // ❌ undefined

 

// 올바른 코드

const englishWord = question.correct;  // ✅ 정상

 

한글 표시 디자인 개선

기능 수정과 함께 한글 의미 표시 디자인도 더 예쁘게 바꿔달라고 요청했습니다.

 

✅ 3가지 모두 해결!

1️⃣ 영어 단어 이제 나옵니다!

2️⃣ 음성도 이제 나옵니다! 🔊

3️⃣ 한글이 더 예뻐졌습니다! (핑크 배경 + 그라디언트 + 그림자)

🎮 5단계: 게임 모드 이름 변경

기능이 잘 작동하니, 이제 사용자에게 보이는 텍스트를 다듬을 차례입니다.

 

💬 나의 요청

"좋아, 잘 되고 있어. 이제 게임 모드 화면의 글자를 수정해 보자"

변경된 모드 이름

변경 전	변경 후
기본 모드	영어 모드
서바이벌	서바이벌 모드
영→한글	한글 모드
스펠링	스펠링 모드

 

🔙 6단계: 돌아가기 버튼 네비게이션 수정

마지막으로 발견한 문제는 화면 이동 흐름이었습니다.

 

💬 발견한 문제

"영어 모드 클릭을 하니 새 창에서 '기본 모드 설정'으로 나와. 이걸 변경해 주고,돌아가기를 누르니 초기 화면으로 넘어가"

 

두 가지 문제가 있었습니다:

1.     화면 제목: '기본 모드 설정'이라고 표시됨 → '영어 모드'로 변경 필요

2.     돌아가기 버튼: 초기 화면(메인 메뉴)으로 이동 → 게임 모드 선택 화면으로 이동해야 함

 

✅ 해결!

• '기본 모드 설정' → '영어 모드'로 변경

• 돌아가기 버튼이 게임 모드 선택 화면으로 가도록 수정

💡 이번 편에서 배운 것

1.     코드 검증의 중요성: 기능 개발 후 반드시 검증 단계 필요

2.     psql vs SQL Editor: \d 같은 명령어는 psql에서만 작동

3.     API 응답 구조 확인: 필드명이 다르면 undefined 발생

4.     반복적인 수정: 한 번에 완벽하게 안 되면 여러 번 시도

5.     사용자 관점: 직접 사용해 봐야문제를 발견할 수 있음

6.     네비게이션 흐름: 화면 이동 경로도 중요한 UX 요소

📌 다음 편 예고

코드 검증과 UI 개선이 완료되었습니다! 다음 편에서는 Windows EXE 파일로 배포하는 과정을 다룹니다.

•      PyInstaller 설정 최적화

•      점수 알고리즘 개선

•      배포용 EXE 빌드

•      실제 배포 및 테스트

➡️ 다음 글: [Part 12] Windows EXE 배포 가이드

📋 이번 편 요약

• Claude에게 코드 검증 요청 → 여러 문제점 발견

• SQL 문법 오류 해결 (\d 명령어 → 표준 SQL)

• UI/UX 버그 8가지 해결

• 학습 모드 완전 수정 (word → correct 필드)

• 한글 표시 디자인 개선 (핑크 배경, 그라디언트)

• 게임 모드 이름 변경 (기본→영어, 영→한글→한글)

• 돌아가기 버튼 네비게이션 수정

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

디테일이 완성도를 만든다! 작은 버그도 놓치지 말자! 🔍✨

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