Claude AI로 영어 단어 퀴즈 웹 앱 만들기 [13편]-최종완성

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

Part 13: 최종 완성 - 마지막 버그 수정과 시리즈 마무리

📚 시리즈 안내

← 이전 글: [Part 12] Windows EXE 배포

🏁 시리즈의 마지막 편입니다!

🎉 이번 편: 최종 버그 수정 + 전체 시리즈 회고 + 앞으로의 발전 방향

 

 

 

🏁 들어가며: 마지막 점검

12편에서 Windows EXE 빌드까지 완료했습니다. 이제 정말 마지막 점검만 남았어요!

실제로 학원에서 학생들이 사용해 보니 몇 가지 버그가 더 발견되었습니다. 이번 편에서 모두 해결하고, 전체 시리즈를 마무리합니다!

 

🎯 이번 편의 목표

1. 영어/한글 모드 최종 버그 수정

2. 점수 감점 시스템 완성

3. 전체 시리즈 회고

4. 앞으로의 발전 방향 제시

📝 1단계: 난이도별 점수 텍스트 수정

12편에서 점수 알고리즘을 변경했지만, 화면에 표시되는 텍스트는 아직 옛날 값이었습니다.

 

💬 나의 요청

"영어 모드에서 난이도 선택 시 텍스트만 변경해 줘.중등(정답 +30점, 오답 -60점), 고등(정답 +50점, 오답 -100점). 그리고 한글 모드 선택을 해도 반응이 없어"

 

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

1.     텍스트 불일치: 실제 점수와 화면 표시가 다름

2.     한글 모드 무반응: API 엔드포인트가 잘못 연결됨

 

✅ 해결!

• 난이도별 점수 텍스트 변경 완료

• 한글 모드 API 호출 수정 완료

🐛 2단계: JavaScript 오류 해결

수정 후 테스트하는데 JavaScript 오류가 발생했습니다!

 

❌ 에러 메시지

Uncaught Error: Cannot set properties of null (setting 'onclick')

🤖 Claude의 분석

JavaScript에서 존재하지 않는 HTML 요소에

onclick을 설정하려고 해서 발생한 오류입니다!

 

12편에서 4가지 게임 모드(스피드, 서바이벌, 스펠링, 듣기)를 삭제했는데, JavaScript에서는 아직 그 버튼들에 이벤트를 연결하려고 하고 있었어요!

// 수정 전: 무조건 이벤트 연결 시도

document.getElementById('speedBtn').onclick = startSpeed;

 

// 수정 후: 요소 존재 여부 확인

const speedBtn = document.getElementById('speedBtn');

if (speedBtn) speedBtn.onclick = startSpeed;

🔄 3단계: 영어/한글 모드 혼동 해결

가장 복잡했던 버그입니다. 영어 모드와 한글 모드가 서로 바뀌어 동작하고 있었습니다!

 

💬 나의 보고

"영어 모드랑 한글 모드가 변경이 되어 있어"

문제 상황

모드	잘못된 동작	올바른 동작
영어 모드	한글 표시 → 영어 선택	영어 표시 → 한글 선택
한글 모드	영어 표시 → 한글 선택	한글 표시 → 영어 선택

 

🤖 Claude의 해결

API 호출을 서로 바꿔야 합니다!

• 영어 모드: generate-quiz → generate-reverse-quiz

• 한글 모드: generate-reverse-quiz → generate-quiz

최종 정의된 모드 동작

🎯 영어 모드 (English Mode)

• 화면 표시: 영어 단어 (예: 'apple')

• 음성: 영어 발음 🔊

• 선택지: 한글 뜻 (사과, 바나나, 포도, 오렌지)

• 학습 효과: 영어 → 한글 연상력 강화

🎯 한글 모드 (Korean Mode)

• 화면 표시: 한글 뜻 (예: '사과')

• 음성: 없음

• 선택지: 영어 단어 (apple, banana, grape, orange)

• 학습 효과: 한글 → 영어 연상력 강화

📊 4단계: 점수 감점 시스템 완성

모드 문제를 해결하고 나니 점수 감점이 제대로 안 되는 문제가 발견되었습니다.

문제 1: 결과 화면에 점수가 안 보임

💬 나의 보고

"게임 결과 화면에서 이전에는 점수에 +XX점 또는 -XX점으로 나왔는데, 변경이 되었는지 안 나와"

 

결과 화면의 점수 표시 UI가 사라져 있었습니다. Claude가 점수 표시 UI를 복원해 주었습니다.

문제 2: 오답 시 감점이 안 됨

💬 나의 보고

"틀렸을 때 점수 감소가 안 되고 있어. 화면에도 반영이 안 되고 있어"

 

checkAnswer 함수에서 오답 처리 로직이 누락되어 있었습니다. 정답일 때만 점수를 더하고, 오답일 때는 아무것도 안 하고 있었어요!

문제 3: 난이도별 감점이 적용 안 됨

💬 나의 보고

"난이도 맞는 점수 감점으로 반영이 안 되고 있어. 중등은 -60, 고등은 -100으로 되어야 해"

 

난이도별 감점이 하드코딩된 기본값 -10을 사용하고 있었습니다. 서버에서 받은 scoreConfig를 무시하고 있었던 거죠!

최종 해결: 서버 설정값 사용

// 수정 전: 하드코딩된 기본값

const wrongScore = -10;  // 항상 -10점

 

// 수정 후: 서버 설정값 사용

const wrongScore = scoreConfig.wrong;  // 난이도별 적용

 

🎉 최종 완성!

"이제 정상적으로 점수가 감소되고 있어!"

✅ 영어 모드: 정상 작동

✅ 한글 모드: 정상 작동

✅ 점수 감점: 난이도별 정상 적용

📚 전체 시리즈 회고

13편에 걸친 긴 여정이 끝났습니다! 처음 아무것도 없는 상태에서 완전한 영어 학습 앱을 만들었어요.

전체 개발 여정

편	주제	핵심 내용
1~5	GAS 웹앱 개발	무료 Claude로 기본 기능 구현
6	GAS 관리자 기능	관리자 페이지, 학생 관리
7	Python Flask 전환	GAS → Flask 마이그레이션
8	학습 모드와 UI	TTS, 이미지 라우트, EXE 빌드
9	5가지 게임 모드	스피드/서바이벌/영한글/스펠링/듣기
10	Supabase 마이그레이션	Google Sheets → Supabase
11	코드 검증과 UI 개선	버그 8가지 해결, 학습 모드 수정
12	Windows EXE 배포	PyInstaller, 점수 알고리즘 변경
13	최종 완성	마지막 버그 수정, 시리즈 마무리

 

완성된 앱의 주요 기능

•      📚 학습 모드: 4단계 사이클로 단어 학습 (영어+음성 → 한글 뜻)

•      🎮 게임 모드: 영어 모드, 한글 모드 2가지

•      🏆 랭킹 시스템: 실시간 순위, TOP 10 표시

•      📊 난이도별 점수: 초등/중등/고등 차등 점수

•      🔊 TTS 음성: 영어 단어 발음 재생

•      👤 사용자 관리: 로그인, 비밀번호 변경

•      ⚡ 고성능 DB: Supabase로 20배 빠른 응답

•      📦 EXE 배포: 더블클릭으로 바로 실행

💡 이 시리즈에서 배운 것

1.     AI와 협업: Claude에게 구체적으로 요청할수록 좋은 결과

2.     단계적 개발: 작은 기능부터 시작해서 점진적으로 확장

3.     버그 해결: 에러 메시지를 그대로 Claude에게 전달하면 해결

4.     코드 검증: 기능 완성 후 반드시 검증 단계 필요

5.     사용자 피드백: 실제 사용자 테스트가 가장 중요

6.     유연한 대응: 요구사항 변경에 빠르게 대응 (모드 삭제, 점수 변경 등)

🚀 앞으로의 발전 방향

이 앱은 기본 버전입니다. 앞으로 추가할 수 있는 기능들:

•      📱 모바일 앱: React Native로 iOS/Android 앱 개발

•      🌐 웹 배포: Vercel, Heroku 등으로 온라인 서비스

•      📈 학습 분석: 학생별 취약 단어 분석, 맞춤 학습

•      🎨 테마 기능: 다크 모드, 색상 커스터마이징

•      🏅 업적 시스템: 배지, 레벨업, 보상 기능

•      👥 멀티플레이: 친구와 실시간 대결 모드

🎉 마무리 인사

긴 시리즈를 끝까지 읽어주셔서 감사합니다! 🙏

이 시리즈가 보여주고 싶었던 것은 "프로그래밍을 몰라도 AI와 함께라면 앱을 만들 수 있다"는 것입니다.

물론 쉽지는 않았어요. 수많은 버그와 오류를 만났고, 몇 번이고 수정을 반복했습니다. 하지만 Claude가 항상 도와주었고, 결국 완성할 수 있었습니다!

 

💜 여러분도 할 수 있습니다!

작은 아이디어부터 시작해 보세요.

Claude에게 물어보고, 하나씩 만들어가다 보면

어느새 멋진 앱이 완성되어 있을 거예요! 🚀

📋 시리즈 전체 요약

• 총 13편에 걸친 영어 단어 퀴즈 앱 개발기

• 기술 스택: GAS → Python Flask → Supabase

• 주요 기능: 학습 모드, 게임 모드, 랭킹, TTS

• 배포: Windows EXE (PyInstaller)

• 핵심 교훈: AI와 협업, 단계적 개발, 사용자 피드백

• 결론: 누구나 AI와 함께라면 앱을 만들 수 있다!

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

🎉 시리즈 완결! 끝까지 함께해 주셔서 감사합니다! 🎉

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

궁금한 점이 있으면 댓글로 남겨주세요! 💬