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

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

Part 5: 등급 시스템과 모바일 반응형 디자인

📚 시리즈 안내

← 이전 글: [Part 4] 버그 수정과 기능 완성의 대장정

→ 다음 글: [Part 6] Claude Pro로 GAS 관리자 기능 완성하기

🏆 들어가며: 게임에 재미를 더하다

지난 4편까지 핵심 기능들을 모두 구현했습니다. 이제 사용자 경험을 한 단계 높여줄 등급 시스템을 추가할 차례입니다!

게임에서 등급은 단순한 장식이 아닙니다. 사용자에게 목표 의식을 부여하고, 성취감을 느끼게 해주는 중요한 요소죠. Champion을 향해 달려가는 학생들의 모습이 눈에 선합니다! 🔥

이번 편에서는 6단계 등급 시스템, 내 순위 표시 기능, 그리고 모바일 반응형 디자인까지 완성합니다.

이 편이 무료 버전 Claude로 진행하는 마지막 편이기도 합니다!

📸

→ 다양한 등급 배지가 표시된 랭킹 화면 캡처

🎖️ 1단계: 등급 시스템 설계

학원에서 실제로 사용할 것을 고려해서, 6단계 등급 체계를 설계했습니다. 각 등급은 순위 구간에 따라 자동으로 부여됩니다.

등급 체계

등급	순위 구간	배지 색상	의미
👑 Champion	1등	금색 그라데이션	최강자
⚔️ Master	2등 ~ 5등	실버 그라데이션	고수
💎 Diamond	6등 ~ 15등	청록색 그라데이션	상위권
🥇 Gold	16등 ~ 30등	골드 그라데이션	중상위권
🥈 Silver	31등 ~ 60등	은색 그라데이션	중위권
🥉 Bronze	61등 이하	청동색 그라데이션	도전자

 

이 등급 체계의 장점은:

•      명확한 목표: "나도 Diamond 가야지!" 같은 동기 부여

•      적절한 구간: 너무 좁지도, 너무 넓지도 않은 순위 구간

•      시각적 차별화: 각 등급마다 고유한 색상으로 한눈에 구분

⚙️ 2단계: 등급 계산 로직 구현

순위에 따라 등급을 자동으로 계산하는 함수를 구현합니다.

 

// 등급 계산 함수

function getGrade(rank) {

  const r = Number(rank);

  if (r === 1) return 'Champion';

  if (r <= 5) return 'Master';

  if (r <= 15) return 'Diamond';

  if (r <= 30) return 'Gold';

  if (r <= 60) return 'Silver';

  return 'Bronze';

}

 

⚠️ 주의: Number() 변환 필수!

순위 값이 문자열로 들어올 수 있어서, Number()로 변환하지 않으면 비교가 제대로 안 됩니다. 처음에 등급이 안 나오는 버그가 바로 이것 때문이었어요!

 

👤 3단계: 내 순위 강조 표시

랭킹 목록에서 내 순위를 바로 찾기 어렵다는 피드백이 있었습니다. 그래서 내 순위를 특별하게 강조하는 기능을 추가했어요!

구현 내용

1.     전체 랭킹 목록 위에 내 순위를 별도로 표시

2.     보라색 그라데이션 + 황금색 테두리로 시각적 차별화

3.     부드러운 발광 애니메이션 효과 적용

4.     아이디 옆에 "(나)" 표시로 본인 확인

내 순위 스타일 CSS

.my-rank {

  background: linear-gradient(135deg, #667eea, #764ba2);

  border: 3px solid #ffd700;

  animation: glow 2s ease-in-out infinite;

}

@keyframes glow {

  0%, 100% { box-shadow: 0 0 10px #ffd700; }

  50% { box-shadow: 0 0 20px #ffd700; }

}

 

📱 4단계: 모바일 반응형 디자인

학생들이 스마트폰으로도 게임을 하고 싶다는 요청이 많았습니다. PC에서 잘 보이던 화면이 모바일에서는 깨지거나 글씨가 너무 작아지는 문제가 있었거든요.

반응형 CSS 적용

CSS 미디어 쿼리(Media Query)를 사용해서 화면 크기에 따라 레이아웃이 자동으로 조정되도록 했습니다.

요소	PC (768px 이상)	모바일 (768px 미만)
타이머/점수	가로 배치	세로 배치
랭킹 아이템	한 줄 표시	여러 줄로 감싸짐
폰트 크기	기본 크기	자동 축소
버튼	고정 크기	화면 너비에 맞춤

 

/* 모바일 반응형 CSS */

@media (max-width: 768px) {

  .game-header {

    flex-direction: column;

  }

  .ranking-item {

    flex-wrap: wrap;

    font-size: 14px;

  }

}

 

✅ 웹앱 완성! 기능 총정리

5편에 걸쳐 완성한 영어 단어 퀴즈 웹앱의 전체 기능을 정리해 봅니다.

카테고리	구현 기능
🔐 계정	로그인, 비밀번호 변경, 입력 검증
🎮 게임	학년별 퀴즈 (초등/중등/고등), 5초 타이머, TTS 음성
📊 점수	학년별 차등 점수, 실시간 점수 표시, 누적 점수
🏆 랭킹	전체 랭킹, 내 순위 강조, 6단계 등급 시스템
👨‍💼 관리자	통계 대시보드, 사용자 목록, 데이터 초기화
📱 UI/UX	모바일 반응형, 등급 배지 디자인, 애니메이션 효과

 

💭 무료 버전 Claude로 여기까지!

여기서 한 가지 고백할 것이 있습니다. 지금까지 1편부터 5편까지, 모두 무료 버전 Claude로 진행했습니다!

✨ 무료 버전으로도 가능했던 것들

• Google Apps Script + HTML/CSS/JS 전체 코드 작성

• 구글 시트 연동 백엔드 구현

• 버그 디버깅 및 해결책 제안

• CSS 애니메이션 및 반응형 디자인

• 기능 설계 및 구조 제안

물론 무료 버전의 제한도 있었습니다. 하루 사용량 제한이 있어서 복잡한 기능을 추가할 때는 다음 날까지 기다려야 할 때도 있었고, 긴 코드를 한 번에 생성하기 어려울 때도 있었죠(대략 2주 정도 매일 작업한 거 같습니다.😭)

하지만 완전한 웹앱 하나를 처음부터 끝까지 만드는 데는 충분했습니다. AI 프로그래밍에 관심 있는 분들께 무료 버전부터 시작해 보시길 추천드려요!

📌 다음 편 예고: Claude Pro로 레벨업!

다음 6편부터는 Claude Pro (유료 버전)로 전환하여 프로젝트를 한 단계 더 발전시킵니다!

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

• 관리자 버튼이 안 보이는 문제

• 버튼 클릭해도 반응 없는 문제

• Claude Pro의 강력한 코딩 능력 체험기

➡️ 다음 글: [Part 6] Claude Pro로 GAS 관리자 기능 완성하기

📋 이번 편 요약

• 6단계 등급 시스템 구현 (Champion ~ Bronze)

• 내 순위 강조 표시 (보라색 배경 + 황금 테두리 + 발광 애니메이션)

• 모바일 반응형 CSS 적용

• 무료 버전 Claude로 웹앱 완성!

• 다음 편부터 Claude Pro로 사용의 확장성이 넓어짐.

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

무료로도 이만큼! Pro로는 얼마나 더? 🚀

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