GCE Quiz App을 2.0 버전으로 업데이트 하였습니다.
1.0 버전에서 2.0 버전으로 진화하면서 적용된 게이미피케이션 요소와
학습 도구로서의 고도화를 진행하였습니다.
중간에 구글 스티치(https://stitch.withgoogle.com/)를 이용하여 디자인 적용을 시도하였지만,
만족스러운 결과를 얻지는 못했습니다.
그래서 일단 기능 위주의 고도화를 시도했습니다.
제미나이에게 1.0 버전의 상황과 수정을 원하는 부분을 설명한 다음
안티그라비티를 위한 프롬프트를 작성해달라고 하는 것부터 시작했습니다.
안티그라비티에서 교육앱을 개발해서 깃에 올렸어. https://gce-quiz-app.vercel.app/
디자인을 스티치에 연결해서 수정했는데 디자인이 만족스럽지 않아. 그래서 현재 수정본은 깃에 올리지 않고 로컬에 있어. 이 앱을 더 고도화 하고 내가 마음에 드는 디자인으로 수정하려면 어떻게 해야하지? 첨부 문서는 지난번 수정에 사용한 PRD야.## 소개
### 시도하고자 했던 것과 그 이유를 알려주세요.
기존의 1.0 버전이 단순히 문제를 풀고 결과를 확인하는 '정적인 퀴즈 앱'이었다면, 2.0 버전에서는 사용자가 지속적으로 학습하고 싶게 만드는 '게이미피케이션(Gamification)'을 도입하고자 했습니다. 단순히 지식을 테스트하는 것을 넘어, 성과(Combo), 긴박감(Time Attack), 그리고 보상(Dark Mode Theme)을 통해 학습 경험을 한 단계 끌어올리는 것이 목표였습니다. 또한, 틀린 문제를 그냥 지나치지 않게 하는 '데이터 기반 오답 노트'를 통해 실제 학습 효율을 극대화하고자 했습니다.
---
## 진행 방법
### 어떤 도구를 사용했고, 어떻게 활용하셨나요?
* Antigravity (AI Coding Assistant): 전체적인 코드 아키텍처 설계와 복잡한 React 상태 관리(History, LocalStorage sync)를 구현하는 데 활용했습니다.
* React & Vite: 빠르고 현대적인 웹 앱 환경을 구축했습니다.
* Canvas-confetti: 정답 및 콤보 달성 시 축하 효과를 주어 사용자에게 즉각적인 도파민 보상을 제공했습니다.
* LocalStorage API: 서버 없이도 사용자의 학습 이력과 닉네임, 최고 점수가 유지되도록 구현했습니다.
한국어가 포함된 한국어 웹사이트 스크린샷
GCE Quiz App v2.0 Dashboard & Trophy 수정전
### 핵심 프롬프트 예시
문제 출제를 랜덤하게 바꿔줘. 그리고 연달아 정답을 맞히면 콤보 숫자가 올라가고 화면에 폭죽이 터지는 게이미피케이션 요소를 추가해줘. 문제를 다 풀고 나면 내가 틀린 문제만 모아서 정답과 비교해주는 '오답 노트' 섹션을 결과창에 보여줘.### 핵심 코드 (Timer & Combo Logic)
// javascript: 연속 정답 콤보 및 타이머 로직 예시
const handleCheckAnswer = () => {
const isCorrect = selectedTool === currentQuestion.correctTool;
const newCombo = isCorrect ? combo + 1 : 0;
if (isCorrect) {
setScore(s => s + 1);
if (timeLeft > 0) setSpeedScore(ss => ss + 1); // 15초 내 정답 시 스피드 포인트
if (newCombo >= 2) triggerMiniConfetti(); // 2콤보부터 폭죽!
} else {
// 오답 기록 저장
setWrongAnswers(prev => [...prev, currentQuestion]);
}
setCombo(newCombo);
};
## 결과와 배운 점
### 배운 점과 나만의 꿀팁을 알려주세요.
* 수정을 계속하면서 최초의 기획이 가장 중요하다는 것을 배웠습니다.
* 보상의 시각화: 단순히 '정답입니다'라는 텍스트보다 작은 폭죽 하나, 콤보 뱃지 하나가 사용자의 집중력을 비약적으로 높여줄 수 있습니다.
* 언락(Unlock) 시스템의 묘미: 다크 모드를 처음부터 주는 것이 아니라 '만점 달성'이라는 조건부 보상으로 제공했을 때 사용자의 도전 의식이 더 강해집니다.
한국 앱 스크린샷
2.0 버전의 현재 모습
### 과정 중에 어떤 시행착오를 겪었나요?
* 레이아웃 붕괴: 한/영 이름을 병기하고 상단에 정보를 추가하면서
모바일 화면에서 스크롤이 생기는 문제가 있었습니다.
이를 해결하기 위해 데스크톱과 모바일의 폰트 크기 및 패딩을 다르게 적용하는
'반응형 미디어 쿼리'를 세밀하게 조정해야 했습니다.
* 데이터 정합성: 콤보 점수와 기록이 초기화되는 버그가 있었으나, useEffect와 localStorage의 동기화 순서를 재조정하여 해결했습니다.
### 앞으로의 계획이 있다면 들려주세요.
현재는 단일 세션 기반의 오답 노트이지만,
앞으로는 여러 회차의 데이터를 누적하여
'내가 자주 틀리는 취약한 구글 도구'를 분석해주는 대시보드 기능을 추가할 예정입니다.
2.1 버전은 다시 스티치와 연결을 시도해볼 예정이며,
문제은행을 자동으로 보강하는 기능을 넣고 싶습니다.
---
## 도움 받은 글 (옵션)
* 지피터스(GPTERS): 다양한 AI 앱 제작 사례와 게이미피케이션 기법에 관한 커뮤니티 글들을 참고하여 영감을 얻었습니다.
