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

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

Part 12: Windows EXE 배포 - 실행 파일로 만들기

📚 시리즈 안내

← 이전 글: [Part 11] 코드 검증과 UI/UX 개선

→ 다음 글: [Part 13] 최종 완성과 보안 설정

📦 이번 편: PyInstaller로 Windows EXE 배포 + 점수 알고리즘 개선 + 버그 수정

🚀 들어가며: 배포의 마지막 단계

11편까지 모든 기능 개발과 UI 개선이 완료되었습니다. 이제 학원 컴퓨터에 설치해서 사용할 수 있도록 실행 파일(.exe)로 만들어야 합니다!

Python 스크립트를 그냥 실행하려면 Python 설치가 필요하고, 명령어도 입력해야 하는데... 학원 컴퓨터마다 Python을 설치하고 학생들에게 명령어를 알려주는 건 현실적으로 불가능하죠. 😅

그래서 더블클릭만 하면 바로 실행되는 EXE 파일을 만들기로 했습니다!

⚙️ 1단계: 배포 전 추가 수정 사항

EXE로 빌드하기 전에, 사용자 피드백을 반영해서 몇 가지 추가 수정을 진행했습니다.

학습 모드 타이밍 조정

💬 나의 요청

"이전 대화에서 수정한 내용이야. 1.5초, 2초를 모두 1초로 변경해 줘"

 

학습 모드에서 단어가 너무 오래 표시되어 지루하다는 피드백이 있었습니다. 그래서 모든 타이밍을 1초로 단축했어요.

항목	변경 전	변경 후
단어당 시간	7초	4초 ⚡
10단어 학습	70초	40초 ⚡

 

43% 시간 단축! 학생들이 지루해하지 않고 빠르게 학습할 수 있게 되었습니다.

환영 메시지 버그 수정

로그인 후 "환영합니다, [이름]님!" 메시지를 추가하려고 했는데, 예상치 못한 문제가 발생했습니다.

 

❌ 발생한 버그들

1차 시도: "환영합니다, 님!" - 이름이 없음

2차 시도: "환영합니다, undefined님!님!" - 중복 + undefined

3차 시도: "환영합니다, undefined님!" - 여전히 undefined

 

원인을 분석해 보니,에서 사용자 이름(name)을 응답에 포함하지 않고 있었습니다!

# 수정된 login API 응답

return jsonify({

    'success': True,

    'userId': user['user_id'],

    'name': user['name'],      # 추가!

    'school': user['school']   # 추가!

})

비밀번호 변경 API 누락 발견

배포 전 테스트 중에 비밀번호 변경이 안 된다는 문제를 발견했습니다!

 

❌ 에러 메시지

"요청한 페이지를 찾을 수 없습니다" (404 Not Found)

🤖 Claude의 분석

API가 없네요! 비밀번호 변경 API를 만들겠습니다.

@app.route('/api/change-password', methods=['POST'])

 

프론트엔드에는 비밀번호 변경 버튼이 있었는데, 실제로 처리하는 백엔드 API가 없었던 것입니다. Claude가 바로 API를 추가해 주었습니다.

📦 2단계: Windows EXE 빌드

기능 수정이 완료되었으니, 이제 본격적으로 EXE 파일을 빌드합니다!

첫 번째 시도: Unix 명령어 오류

 

💬 나의 질문

"pkg 파일로 변경을 어떻게 할까?"

 

Claude가 빌드 가이드를 주었는데... 3단계부터 오류가 발생했습니다!

 

❌ 에러 원인

Windows PowerShell에서 Unix 명령어(ls -la 등)를 사용하려고 함!

Mac/Linux 명령어는 Windows에서 작동하지 않습니다.

올바른 Windows 빌드 명령어

Claude가 Windows 환경에 맞는 명령어로 다시 가이드해 주었습니다.

# Windows PowerShell에서 실행

pyinstaller --onefile --add-data "index.html;." ^

    --name "VocabApp" aaa.py

 

💡 Windows vs Mac/Linux 차이점

• 경로 구분자: Mac/Linux는 콜론(:), Windows는 세미콜론(;)

• ls → dir, rm → del, cat → type 등 명령어 차이

배포용 설정: 터미널 창 숨기기

💬 나의 요청

"아...미안, 배포용으로 만들어야 해. 그래서 프로그램을 실행하면 뒤에 터미널이 안 나와야 해"

🤖 Claude의 답변

--windowed 옵션을 추가하면 됩니다!

# 배포용 EXE 빌드 (터미널 창 없음)

pyinstaller --onefile --windowed ^

    --add-data "index.html;." ^

    --name "VocabApp" aaa.py

 

--windowed 옵션 하나만 추가하면 터미널 창 없이 브라우저에서 바로 앱이 실행됩니다! ✅

📊 3단계: 점수 알고리즘 대폭 변경

배포 테스트 중에 점수 시스템을 바꿔달라는 요청이 들어왔습니다.

 

💬 나의 요청

"모든 게임에서 초등 정답 +10 오답 -5 / 중등 정답 +30, 오답 -60 / 고등 정답 +50, 오답 -100 이렇게 알고리즘이랑 텍스트 모두 변경해 줘"

새로운 점수 시스템

난이도	정답	오답	특징
초등	+10점	-5점	쉬운 난이도
중등	+30점	-60점 ⬆️	감점 2배
고등	+50점	-100점 ⬆️	감점 2배

 

중등/고등에서 감점이 정답의 2배가 되어서, 찍어서 맞추는 게 아니라 확실히 아는 것만 선택해야 합니다!

점수 변경이 적용 안 되는 문제

💬 나의 보고

"아직 수정이 안 된 거 같아. 그대로 중등에서 틀릴 경우 -15점을 하고 있어"

🤖 Claude의 분석

JavaScript에서 초기 점수 설정이 하드코딩되어 있고,

서버에서 받은 scoreConfig를 제대로 사용하지 않고 있습니다!

 

서버에서 새 점수를 보내줘도 프론트엔드에 옛날 값이 하드코딩되어 있어서 무시되고 있었던 거예요!

consol의 내용이 삭제가 안되고 계속 메모리에 상주를 하고 있어서 그랬어요. 브라우저 캐시를 꼭 삭제해도 안될 경우 Cloude에 전체적으로 점검을 해달라고 요청을 하면 됩니다.

 

💡 해결 팁: 브라우저 캐시 삭제

• Ctrl + Shift + Delete → 캐시 삭제

• Ctrl + F5로 강제 새로고침

• Python/Flask 서버 완전히 재시작

🗑️ 4단계: 사용하지 않는 게임 모드 삭제

 

테스트 기간 동안 학생들의 사용 패턴을 분석해 보니,잘 안 쓰는 모드들이 있었습니다.

 

💬 나의 결정

"해보니 스피드 모드, 서바이벌 모드, 스펠링 모드, 듣기 모드가 게임을 잘 안 하게 되는 거 같아. 4가지 모드를 삭제해 줘"

❌ 삭제된 모드	✅ 남은 기능
스피드 모드	영어 모드
서바이벌 모드	한글 모드
스펠링 모드	랭킹 보기
듣기 모드	비밀번호 변경, 로그아웃

 

🐛 5단계: 영어 모드 최종 버그 수정

모드를 삭제하고 테스트하는데... 영어 모드가 이상하게 작동합니다!

 

❌ 발생한 문제들

1. 첫 화면에 "loading...loading...loading..." 에러

2. 제시 언어가 한글로 나오고 지문이 영어로 나옴

3. 완전히 반대로 동작!

🤖 Claude의 분석

원본 HTML 파일에서 startQuiz() 함수가

잘못된 API를 호출하고 있었습니다!

올바른 영어 모드 구성

🎯 영어 모드 정확한 동작:

• 제시: 영어 단어 (예: 'cat')

• 음성: 영어 발음 ✅

• 선택지: 한글 뜻 (고양이, 개, 책, 사과)

• 정답: 한글 뜻

💡 이번 편에서 배운 것

1.     API 응답 완성도: 프론트엔드에서 필요한 데이터는 모두 응답에 포함

2.     Windows vs Unix: OS에 맞는 명령어 사용 (세미콜론 vs 콜론)

3.     --windowed 옵션: 배포용 EXE는 터미널 창 숨기기

4.     캐시 문제: 변경 사항이 안 보이면 캐시 삭제 + 강제 새로고침

5.     하드코딩 주의: 서버 값을 받아도 프론트엔드 하드코딩이 우선될 수 있음

6.     기능 최적화: 안 쓰는 기능은 과감히 삭제하여 앱 단순화

📌 다음 편 예고

EXE 배포가 완료되었습니다! 마지막 편에서는 최종 완성과 보안 설정을 다룹니다.

•      보안 취약점 점검

•      최종 테스트 및 배포

•      전체 시리즈 회고

•      앞으로의 발전 방향

➡️ 다음 글: [Part 13] 최종 완성과 보안 설정

📋 이번 편 요약

• 학습 모드 타이밍 조정 (7초 → 4초, 43% 단축)

• 환영 메시지 버그 수정 (undefined → 이름 표시)

• 비밀번호 변경 API 추가

• Windows EXE 빌드 (--windowed 옵션)

• 점수 알고리즘 변경 (중등 -60, 고등 -100)

• 4가지 게임 모드 삭제 (스피드/서바이벌/스펠링/듣기)

• 영어 모드 버그 수정 (API 호출 + 표시 로직)

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

드디어 더블클릭 한 번으로 실행되는 앱 완성! 📦✨

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