[아빠표 연산 어플] STEP 3. 폭죽 팡팡! 아이가 열광하는 '정답 채점 & 점수 시스템' 장착하기

안녕하세요! 全자동입니다.

지난 [STEP 2]에서는 AI와 함께 자바스크립트(JS)를 활용하여 엑셀 없이 수학 문제를 만드는 '문제 공장'을 앱 안에 장착했습니다.

하지만 문제가 나오기만 하고 내가 맞았는지 틀렸는지 모른다면 아무 소용이 없겠죠?

오늘은 아이들의 학습 의욕을 200% 끌어올릴 핵심 기능, 바로 '채점과 점수 보상 시스템'을 만들어 보겠습니다.

1. 💯 아이들을 춤추게 하는 즉각적인 피드백의 힘

초등학생 아이들에게 공부는 게임처럼 즉각적인 반응(피드백)이 올 때 가장 재미있게 다가옵니다.

• 정답일 때: 단순히 "정답"이라는 글씨만 나오는 게 아니라, 화려한 폭죽 애니메이션이 팡팡 터지고 점수가 올라가는 효과가 필요합니다.
• 오답일 때: "틀렸어!"라고 기죽이는 대신, "아쉽지만 다시 해보자!"라며 입력했던 답만 살짝 지워주는 다정한 시스템이 필요합니다.

우리는 이 모든 기획을 다시 한번 AI(챗GPT, 제미나이)에게 프롬프트로 전달하여 코드를 뚝딱 받아낼 것입니다.

2. 🗣️ AI에게 '채점 선생님' 역할 지시하기 (프롬프트)

이전 STEP에서 사용했던 AI 채팅창을 계속 이어서 사용합니다.

아래의 마법의 프롬프트를 그대로 복사해서 AI에게 지시해 보세요.

[복사해서 사용하세요: 채점 및 점수 로직 추가 프롬프트]

지금까지 짠 코드 정말 완벽해! 이제 아이가 문제를 풀었을 때 정답을 확인하고 점수를 매겨주는 '채점 선생님 로직'을 자바스크립트로 추가해 줘.

[상세 기획 요구사항]
1. 점수판(Score Board): 문제 풀이 화면 상단 모서리에 현재 내 점수(기본 0점)를 보여주는 예쁜 점수판을 만들어 줘.
2. 정답 처리 (정답 버튼을 눌렀을 때 아이가 쓴 답이 맞다면):
- 화면 전체에 화려한 색종이 조각(Confetti)이 팡팡 터지는 애니메이션 효과를 넣어 줘. (외부 라이브러리 사용 없이 순수 CSS/JS로 가볍게 구현해 줘)
- "와, 정답이야! 최고!"라는 칭찬 메시지를 화면 중앙에 잠깐 띄워줘.
- 내 점수에 +10점을 올려 줘.
- 1초 뒤에 자동으로 다음 랜덤 문제로 넘어가게 해줘.
3. 오답 처리 (아이가 쓴 답이 틀렸다면):
- 점수는 깎지 마.
- "아차차! 다시 한번 생각해 볼까?"라는 다정한 메시지를 띄워줘.
- 아이가 썼던 숫자만 지우고 커서를 다시 입력창에 깜빡이게 해서(Focus) 바로 재도전할 수 있게 해줘.
4. 이번에도 기존 코드에 이 새로운 기능들을 모두 합친 '완성된 전체 HTML 파일 코드' 하나로 줘. 내가 복붙만 해서 바로 실행할 수 있게!

3. 🛠️ 단 1분 만에 장착 완료! 결과 확인하기

AI가 코드를 짜주는 동안 커피 한 모금 마시고, 코드가 완성되면 역시나 index.html 파일에 전체 내용을 덮어쓰기(붙여넣기) 해줍니다.

🎉 폭죽이 터지는지 직접 테스트해 보세요!

파일을 저장하고 브라우저를 새로고침 한 뒤, 일부러 틀린 답도 넣어보고 정답도 맞춰보세요! 정답을 맞추는 순간 화면을 수놓는 화려한 색종이 조각(Confetti) 효과와 함께 쭉쭉 올라가는 점수를 보면 아빠인 저도 모르게 신이 난답니다.

우리 아이는 얼마나 좋아할까요?

4. 🚀 다음 단계 예고: "내 이름이 나왔어!" 프로필 기능과 깃허브 배포

자, 이제 앱의 뼈대와 내장(기능)은 완벽하게 완성되었습니다! 무한 문제도 잘 나오고, 채점도 기가 막히게 잘 됩니다.

대망의 마지막 [STEP 4]에서는 이 모든 여정의 마침표이자 아이에게 감동을 선사할 핵심 기능!

바로 첫 화면에 "ㅇㅇㅇ의 숫자놀이"라고 아이가 직접 자기 이름을 박아 넣을 수 있는 '프로필 기능'을 추가해 보겠습니다.

그리고 완성된 이 소중한 앱을 아이 스마트폰 바탕화면에 진짜 앱처럼 깔아주기 위한 '깃허브(GitHub) 배포' 과정까지 시원하게 마무리 짓겠습니다.

마지막까지 함께해 주세요!