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

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

Part 6: GAS 관리자 기능 완성하기

📚 시리즈 안내

← 이전 글: [Part 5] 등급 시스템과 모바일 반응형 디자인

→ 다음 글: [Part 7] Python Flask로 전환하기

🔥 이번 편부터 Claude Pro (유료 버전) 사용!

🚀 들어가며: 관리자 기능의 필요성

5편까지 완성한 웹앱을 학원에서 실제로 사용하기 시작했습니다. 그런데 운영을 하다 보니 관리자 기능이 절실하게 필요해졌어요.

•      학생 비밀번호를 잊어버렸을 때 초기화해줘야 할 때

•      전체 랭킹을 리셋해야 할 때

•      전체 학생 현황을 한눈에 파악하고 싶을 때

•      게임 기록을 삭제해야 할 때

이전 편에서 관리자 버튼을 만들긴 했는데... 막상 admin 계정으로 로그인하니 버튼이 안 보이는 문제가 발생했습니다! 😱

이제부터는 추가되는 내용보다는 수정에 수정을 하는 내용이 전반적입니다. 저의 삽질을 확인하시고 비슷하게 만드실 때 

고생 안 하시길 빌어 드릴게요.🙏 이제부터는 수정 사항만 있어서 스크린샷이 대부분 없어요.

🔍 문제 발견: 관리자 버튼이 안 보여요!

Claude에게 관리자 기능을 추가해 달라고 요청해서 코드를 수정했는데, 막상 admin 계정으로 로그인하니 '게임 관리' 버튼이 보이지 않았습니다.

 

💬 Claude에게 보낸 메시지

"admin 계정으로 새로운 창을 만들어달라고 해서 수정을 했는데, admin 계정으로 로그인을 하니 새로운 창으로 가는 버튼이 없어"

🤖 Claude의 분석

코드를 확인해 보니 관리자 버튼을 표시하는 로직이 빠져있네요!

handleLoginSuccess 함수에서 관리자 권한을 확인하고

버튼을 표시하는 코드를 추가해야 합니다.

 

문제의 원인이 명확해졌습니다. 로그인 성공 후 관리자인지 확인하는 로직이 빠져있던 거예요!

 

⚙️ 1단계: 관리자 확인 로직 추가

Claude가 알려준 대로, handleLoginSuccess 함수에 관리자 확인 코드를 추가했습니다.

// 로그인 성공 후 실행되는 함수

function handleLoginSuccess(userData) {

  // 기존 코드: 사용자 정보 저장

  currentUser = userData;

 

  // ✅ 추가: 관리자 버튼 표시 로직

  if (userData.userId === 'admin') {

    document.getElementById('adminBtn').style.display = 'block';

  }

}

 

😅 2단계: 버튼은 보이는데 화면이 안 바뀌네?

코드를 추가하고 다시 테스트해 보니,이번엔 '⚙️ 게임 관리' 버튼은 보이는데 클릭해도 관리자 화면으로 안 넘어가는 문제가 발생했습니다!

 

💬 Claude에게 다시 질문

"게임 관리 버튼은 활성화되었지만 관리자 창으로 넘어가질 않아"

 

Claude가 확인해야 할 사항들을 알려줬습니다:

1.     HTML 파일 저장 후 웹앱 새로고침 (Ctrl+F5)

2.     admin 계정으로 다시 로그인

3.     브라우저 개발자 도구(F12)에서 에러 확인

 

Claude 말대로 F12를 눌러 개발자 도구를 열어보니, Console 탭에 빨간색 에러 메시지가 떠 있었습니다!

 

❌ 에러 메시지

Uncaught ReferenceError: showAdminScreen is not defined

 

🔎 3단계: 에러 원인 분석

에러 메시지의 의미를 Claude에게 물어봤습니다.

 

🤖 Claude의 설명

"showAdminScreen is not defined"는

showAdminScreen이라는 함수가 정의되지 않았다는 뜻입니다!

HTML 파일의 <script> 태그 안에 이 함수가 빠진 것 같습니다.

 

알고 보니, 관리자 버튼을 클릭하면 showAdminScreen() 함수가 실행되어야 하는데, 이 함수 자체가 코드에 없었던 겁니다! 버튼만 만들고 실제 동작하는 함수는 안 만든 거죠. 😅

 

✅ 4단계: 관리자 함수 추가

Claude가 필요한 관리자 함수들을 모두 작성해 주었습니다.

추가된 함수들

함수명	기능
showAdminScreen()	관리자 화면으로 전환
getAdminStats()	전체 통계 조회 (총 사용자 수, 게임 횟수 등)
getAllUsers()	전체 사용자 목록 조회
resetUserPassword()	특정 사용자 비밀번호 초기화
clearRankings()	전체 랭킹 초기화
clearRecords()	전체 게임 기록 삭제

 

💡 디버깅 팁: F12 개발자 도구 활용하기

버튼이나 기능이 작동하지 않을 때는 항상 F12를 눌러 Console 탭을 확인하세요!

빨간색 에러 메시지가 문제의 원인을 정확히 알려줍니다.

에러 메시지를 그대로 Claude에게 보여주면 해결책을 바로 알려줍니다!

 

⌨️ 보너스: Enter 키로 로그인하기

 

관리자 기능을 만들면서 하나 더 개선했습니다. 로그인할 때 매번 '로그인' 버튼을 클릭하는 게 번거로워서, Enter 키를 누르면 바로 로그인되도록 했습니다.

// 비밀번호 입력창에서 Enter 키 감지

document.getElementById('password')

  .addEventListener('keypress', function(e) {

    if (e.key === 'Enter') {

      login();  // 로그인 함수 실행

    }

  });

🎉 완성된 관리자 기능

이제 admin 계정으로 로그인하면 다음 기능들을 사용할 수 있습니다:

•      📊 전체 통계 보기: 총 사용자 수, 총 게임 횟수, 평균 점수 등

•      👥 사용자 목록: 전체 학생 목록과 정보 확인

•      🔑 비밀번호 초기화: 비밀번호를 잊은 학생의 비밀번호를 1234로 초기화

•      🗑️ 랭킹 초기화: 전체 랭킹 리셋

•      🗑️ 기록 초기화: 게임 기록 전체 삭제

💡 이번 편에서 배운 것

1.     에러 메시지 읽는 법: "is not defined"는 함수/변수가 없다는 뜻

2.     디버깅 습관: 문제가 생기면 F12 → Console 탭 확인

3.     Claude 활용법: 에러 메시지를 그대로 보여주면 해결책을 빠르게 얻을 수 있음

4.     단계별 접근: 한 번에 모든 걸 해결하려 하지 말고, 하나씩 확인하며 진행

📌 다음 편 예고

GAS 버전이 어느 정도 완성되었지만, 실사용하면서 한계를 느끼기 시작했습니다.

다음 편에서는 드디어 Python Flask로 전환하는 대장정이 시작됩니다!

➡️ 다음 글: [Part 7] Python Flask로 전환하기

📋 이번 편 요약

• 관리자 버튼이 안 보이는 문제 → 로그인 성공 시 권한 확인 로직 추가

• 버튼 클릭해도 반응 없는 문제 → showAdminScreen 함수가 없었음

• F12 개발자 도구로 에러 메시지 확인하는 방법 학습

• 관리자 기능 6가지 함수 추가 완료

• 보너스: Enter 키 로그인 기능 추가

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

에러 메시지가 두렵지 않아요. 오히려 해결의 실마리죠! 🔍

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