레벨업! 지식 사냥꾼 - 아이들을 위한 학습 퀴즈 앱 개발기

프로젝트 소개

"레벨업! 지식 사냥꾼"은 초등학생부터 중학생까지 재미있게 학습할 수 있는 퀴즈 웹앱입니다. 게이미피케이션 요소를 적용하여 아이들이 게임하듯 공부할 수 있도록 만들었습니다.

기술 스택

• 프론트엔드: React 20 + TypeScript + Vite
• 스타일링: Tailwind CSS
• 백엔드/인증: Firebase (Authentication, Firestore, Cloud Functions)
• AI 문제 생성: Google Gemini API
• 배포: Netlify (프론트엔드), Firebase (백엔드)
• PWA: 오프라인 지원 및 앱 설치 가능

주요 기능

1. 과목별 퀴즈

• 과학, 역사, 사회, 영어 4개 과목 지원
• 학년별 난이도: 초등 저학년, 초등 고학년, 중학생
• 각 퀴즈는 5문제로 구성

2. AI 맞춤 문제 생성

Google Gemini API를 활용하여 실시간으로 새로운 문제를 생성합니다. 캐시 시스템을 통해 생성된 문제를 저장하여 빠른 응답 속도를 유지합니다.

3. 게이미피케이션 시스템

• 레벨 시스템: 경험치를 쌓아 레벨업
• 연속 학습 스트릭: 매일 학습하면 스트릭 유지
• 일일 목표: 하루 목표 문제 수 설정
• 업적 시스템: 다양한 조건 달성 시 업적 획득
• 북마크: 중요한 문제 저장

4. 학습 관리

• 오답 노트: 틀린 문제 자동 저장 및 복습
• 통계 대시보드: 과목별 정답률, 학습 현황 확인
• 복습 모드: 틀린 문제만 다시 풀기

5. 사용자 경험

• 다크 모드: 눈의 피로 감소
• 효과음: 정답/오답 시 피드백
• 타이머: 시간 제한 모드 지원
• 키보드 단축키: 1-4로 답 선택, Enter로 다음 문제
• 문제 공유: SNS로 문제 공유 가능
• 문제 신고: 오류 문제 신고 기능

6. PWA 지원

• 홈 화면에 앱 설치 가능
• 오프라인에서도 기본 기능 사용 가능

개발 과정에서의 도전

1. AI 문제 생성 최적화

처음에는 매번 AI로 문제를 생성했지만, 응답 시간이 길어 사용자 경험이 좋지 않았습니다. 이를 해결하기 위해:

• Firestore에 문제 캐시 시스템 구축
• 백그라운드에서 문제 미리 생성
• 캐시된 문제 우선 사용, 부족 시 실시간 생성

2. 모바일 반응형 디자인

다양한 화면 크기에서 깨지지 않도록 Tailwind CSS의 반응형 클래스를 활용했습니다:

• sm: 접두사로 모바일/데스크톱 분기
• 플렉스 레이아웃으로 유연한 배치
• 터치 친화적인 버튼 크기

3. 상태 관리

React Context를 활용하여 전역 상태를 관리했습니다:

• ThemeContext: 다크/라이트 모드, 테마 색상
• SettingsContext: 효과음, 타이머 설정
• GameContext: 레벨, 경험치, 스트릭, 업적

향후 계획

• 리더보드 기능
• 친구와 대결 모드
• 더 많은 과목 추가
• 학부모 대시보드

마무리

"레벨업! 지식 사냥꾼"은 아이들이 즐겁게 공부할 수 있도록 만든 프로젝트입니다. 게임처럼 레벨업하고, 업적을 달성하며, 매일 스트릭을 유지하는 재미를 통해 학습 동기를 부여합니다.

직접 사용해보시고 피드백 주시면 감사하겠습니다!