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

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

Part 9: 5가지 게임 모드 구현 - 다양한 학습 경험 제공하기

📚 시리즈 안내

← 이전 글: [Part 8] 학습 모드와 UI 개선

→ 다음 글: [Part 10] Supabase 마이그레이션

🎮 이번 편: 스피드/서바이벌/영한글/스펠링/듣기 5가지 게임 모드 완성!

🚀 들어가며: 더 다양한 학습 방법이 필요해!

8편까지 완성한 앱에는 '기본 퀴즈 모드'와 '학습 모드'가 있었습니다. 하지만 학원에서 학생들이 사용하는 것을 지켜보니, 금방 지루해하더라고요. 😅

그래서 생각했습니다. "다양한 게임 모드를 만들어서 학생들이 지루하지 않게 하자!"

Claude에게 어떤 모드를 추가하면 좋을지 물어보니, 여러 가지 아이디어를 제안해 주었습니다. 그중에서 5가지를 선택해서 구현하기로 했습니다.

🎮 추가할 5가지 게임 모드

모드	규칙	학습 효과
⚡ 스피드 모드	60초 내 최대한 많이 풀기	빠른 단어 인식력 향상
💀 서바이벌 모드	한 번 틀리면 게임 종료	집중력, 정확도 향상
🔄 영→한글 모드	한글 뜻 보고 영어 선택	역방향 연상력 강화
✍️ 스펠링 모드	한글 보고 영어 직접 입력	철자 암기력 향상
🎧 듣기 모드	음성만 듣고 단어 맞추기	리스닝 능력 향상

 

⚡ 1단계: 스피드 모드 구현

가장 먼저 스피드 모드를 구현했습니다. 제한 시간 내에 최대한 많은 문제를 푸는 방식이에요.

스피드 모드 특징

•      ⏱️ 60초 타이머: 시간이 다 되면 자동 종료

•      ♾️ 무한 문제: 시간 내에 계속 새로운 문제 출제

•      📊 실시간 점수: 화면 상단에 현재 점수 표시

•      🏃 빠른 진행: 정답/오답 즉시 다음 문제로 이동

 

// 스피드 모드 타이머 로직

let speedTimer = 60;  // 60초

const speedInterval = setInterval(() => {

  speedTimer--;

  if (speedTimer <= 0) {

    clearInterval(speedInterval);

    endSpeedGame();  // 게임 종료

  }

}, 1000);

 

💀 2단계: 서바이벌 모드 구현

서바이벌 모드는 긴장감 넘치는 모드입니다. 단 한 번이라도 틀리면 게임이 끝나요!

서바이벌 모드 특징

•      💀 원 스트라이크 아웃: 틀리면 즉시 게임 오버

•      🔥 연속 정답 카운트: 몇 문제 연속으로 맞췄는지 표시

•      🏆 최고 기록 도전: 자신의 연속 정답 기록 경신

•      😰 심리적 압박: 고득점일수록 긴장감 상승!

🔄 3단계: 영→한글 모드 구현

기본 모드는 '영어 보고 한글 맞추기'였는데, 반대로 '한글 보고 영어 맞추기' 모드를 추가했습니다.

오답 선택지 문제 발생!

처음에 Claude가 구현한 버전은 오답 선택지를 미리 정해둔 셀에서 가져오는 방식이었습니다. 그런데 이렇게 하니까 항상 같은 오답이 나와서 학생들이 금방 패턴을 외워버렸어요. 😅

 

💬 나의 수정 요청

"영어→한글 모드 - 오답을 셀에서 가져오는 게 아니라 시트 내에 정답이 아닌 영어단어 3개를 무작위로 보여줘"

🤖 Claude의 수정

시트에서 정답을 제외한 다른 단어들 중 무작위로 3개를 선택하도록 변경했습니다!

 

✍️ 4단계: 스펠링 모드 구현

스펠링 모드는 가장 어려운 모드입니다. 선택지 없이 직접 영어 단어를 입력해야 하거든요!

스펠링 모드 특징

•      📝 직접 입력: 한글 뜻을 보고 영어 단어 타이핑

•      🔤 대소문자 무시: 대소문자 상관없이 정답 인정

•      🔊 음성 피드백: 정답/오답 후 정확한 발음 재생

•      💡 힌트 기능: 첫 글자 힌트 제공 (선택)

 

💬 추가 요청

"스펠링 모드 - 단어를 다 적고 난 후 정답이든 오답이든 음성으로 나오게 해 줘"

 

정답을 맞히면 "Correct!" 하고 TTS 음성이 나오고, 틀리면 정확한 발음을 들려줘서 올바른 단어를 학습할 수 있게 했습니다.

🎧 5단계: 듣기 모드 구현

듣기 모드는 리스닝 연습을 위한 모드입니다. 화면에 단어가 표시되지 않고, 오직 음성만 들립니다!

듣기 모드 특징

•      👂 음성만 재생: 영어 단어 발음만 들려줌

•      🔁 다시 듣기: 버튼 클릭으로 음성 반복 재생

•      📝 한글 선택지: 4개의 한글 뜻 중 선택

•      🎯 리스닝 집중: 청각에만 의존해서 단어 인식

듣기 모드 버그 발생!

듣기 모드를 테스트하다가 심각한 버그를 발견했습니다.

 

❌ 발견된 버그

"듣기 모드 - 정답을 맞혔는데도 틀렸다고 나오고 점수도 안 나와"

🤖 Claude의 분석

문제를 찾았습니다!

정답을 비교하는 코드가 q.word로 되어 있었는데,

듣기 모드에서는 q.correct 필드를 사용해야 합니다!

// 수정 전 (버그)

if (selected === q.word) { ... }

 

// 수정 후 (정상)

if (selected === q.correct) { ... }

📊 6단계: 점수 시스템 통합

5가지 모드를 모두 만들었는데, 점수가 랭킹에 반영되지 않는 문제가 발생했습니다!

 

💬 발견한 문제

"최종 랭킹에는 누적점수가 보여지지만, 각각 게임이 끝난 후 최종 결과 화면에서 내 랭킹의 총점과 TOP10의 점수는 변함이 없어"

 

알고 보니 기본 모드만 결과 화면에서 랭킹 갱신 API를 호출하고 있었고, 새로 추가한 5가지 모드는 이 부분이 빠져있었습니다.

모든 모드에 랭킹 갱신 추가

🤖 Claude의 수정 작업

모든 end 함수에 랭킹 갱신 API 호출을 추가했습니다:

• 스피드 모드 ✅

• 서바이벌 모드 ✅

• 영→한글 모드 ✅

• 스펠링 모드 ✅

• 듣기 모드 ✅

🔄 7단계: 게임 흐름 개선

사용성 테스트 중에 불편한 점을 하나 더 발견했습니다.

 

💬 사용성 개선 요청

"모든 게임 모드가 끝나면 메인 메뉴가 아니라 게임 모드 선택으로 가게 해줘"

 

게임이 끝날 때마다 메인 메뉴로 돌아가면 다시 '영어단어게임' 버튼을 눌러야 해서 번거로웠거든요. 바로 게임 모드 선택 화면으로 가도록 수정했습니다.

변경된 흐름

변경 전 ❌	변경 후 ✅
게임 종료 → 결과 화면 → 메인 메뉴	게임 종료 → 결과 화면 → 게임 모드 선택

 

🐢 8단계: 성능 문제 인식 - 다음 과제

5가지 게임 모드가 완성되고 v1.1 버전이 안정화되자, 새로운 고민이 생겼습니다.

 

💬 나의 질문

"좋아, 모든 게 잘 되고 있어. 수정 사항은 아니고 문의할 게 있어. 지금 구글 시트를 사용 중인데, 사용자가 많으니 너무 딜레이가 심해. 혹시 다른 걸 쓰면 될까?"

 

학생 수가 늘어나면서 Google Sheets의 응답 속도가 점점 느려지는 것을 느꼈습니다. 특히 많은 학생이 동시에 접속할 때 딜레이가 심했어요.

Claude가 제안한 대안들

솔루션	월 비용	성능 향상	추천도
Supabase	$0 (무료)	20배 빠름	⭐⭐⭐⭐⭐
DigitalOcean	$5	25배 빠름	⭐⭐⭐⭐
AWS RDS	$18~38	30배 빠름	⭐⭐⭐

 

500명 정도의 학생이 매일 접속한다면 Supabase 무료 플랜으로 충분하다는 결론을 얻었습니다. 다음 편에서 본격적으로 마이그레이션을 진행합니다!

💡 이번 편에서 배운 것

1.     다양한 게임 모드: 학습 효과를 높이려면 다양한 방식의 학습법 제공이 중요

2.     무작위 오답 생성: 고정 오답보다 시트에서 무작위 선택이 더 효과적

3.     필드명 주의: q.word vs q.correct 같은 작은 차이가 버그의 원인

4.     기능 통합: 새 기능 추가 시 기존 시스템(랭킹 등)과의 연동 확인 필수

5.     사용자 흐름: 게임 종료 후 어디로 가는지도 UX의 중요한 부분

6.     성능 문제 인식: 사용자가 늘면 Google Sheets는 한계가 있음

📌 다음 편 예고

Google Sheets의 성능 한계를 느끼고, Supabase로 데이터베이스를 마이그레이션 하기로 결정했습니다!

다음 편에서는:

•      Supabase 계정 생성 및 프로젝트 설정

•      테이블 구조 설계 및 생성

•      Google Sheets → Supabase 데이터 이관

•      Python 코드 수정 (API 연결)

➡️ 다음 글: [Part 10] Supabase 마이그레이션

📋 이번 편 요약

• 5가지 게임 모드 설계 및 구현

  - ⚡ 스피드: 60초 타임어택

  - 💀 서바이벌: 원 스트라이크 아웃

  - 🔄 영→한글: 역방향 학습

  - ✍️ 스펠링: 직접 타이핑

  - 🎧 듣기: 음성만 듣고 맞추기

• 오답 선택지 무작위 생성으로 변경

• 듣기 모드 정답 인식 버그 수정 (q.word → q.correct)

• 모든 모드 랭킹 점수 누적 기능 추가

• 게임 종료 후 게임 모드 선택 화면으로 이동

• DB 성능 문제 인식 → Supabase 마이그레이션 결정

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

이제 진짜 게임 같은 영어 학습 앱이 되었어요! 🎮✨

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