[아빠표 연산 어플] STEP 2. 엑셀은 잊어라! AI로 '무한 랜덤 연산 문제 생성기' 장착하기

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

지난 시간 [STEP 1]에서는 AI에게 말만 걸어서(바이브코딩) 딸아이 취향을 저격하는 귀여운 '바다 테마' 메인 화면을 1분 만에 뚝딱 만들어냈습니다.

오늘은 이 예쁜 껍데기(UI)에 스스로 수학 문제를 끝없이 만들어내는 인공지능 두뇌를 달아줄 차례입니다.

1. 💡 왜 이번엔 엑셀(DB)을 쓰지 않을까?

시즌 1 '영단어 앱'을 만들 때는 구글 엑셀을 단어장(데이터베이스)으로 사용했습니다. 하지만 수학 연산은 성격이 완전히 다릅니다.

1+1, 1+2, 1+3 ... 99+99 ...

세상의 모든 연산 문제를 엑셀에 일일이 적어둘 수는 없겠죠?

그래서 우리는 엑셀 대신 스마트폰 브라우저 자체의 계산 능력인 '자바스크립트(JavaScript)'를 활용할 것입니다.

"덧셈 버튼을 누르면 1부터 50 사이의 숫자 2개를 아무거나 뽑아서 더하기 문제를 내줘!"라고 규칙만 정해주면,

앱이 알아서 무한대로 문제를 찍어내는 '문제 공장'이 되는 것이죠.

2. 🗣️ AI에게 '무한 문제 생성기' 지시하기 (마법의 프롬프트)

물론 우리가 자바스크립트 문법을 공부할 필요는 1도 없습니다. 우리는 그저 AI에게 명확한 규칙(기획안)만 말해주면 됩니다.

지난 STEP 1에서 코드를 짜준 AI(챗GPT 또는 제미나이) 채팅창을 그대로 열어둔 상태에서,

아래의 프롬프트를 복사하여 붙여넣어 보세요!

[복사해서 사용하세요: 무한 랜덤 문제 생성 프롬프트]

정말 멋진 화면이야! 이제 이 코드에 자바스크립트(JS) 기능을 추가해서 실제로 문제가 나오도록 업데이트해 줘.

[기능 요구사항]
1. 메인 화면의 4개 버튼(덧셈, 뺄셈, 곱셈, 나눗셈) 중 하나를 클릭하면, 메인 화면은 숨겨지고 '문제 풀이 화면'이 나타나야 해.
2. 문제 풀이 화면의 구성 요소:
- 상단: 뒤로 가기(홈으로) 버튼
- 중앙: 크게 표시된 랜덤 수학 문제 (예: 15 + 8 = )
- 하단: 정답을 입력할 수 있는 숫자 입력 칸과 '정답 확인' 버튼
3. [초등학생 맞춤 랜덤 문제 생성 규칙]
- 🌊 덧셈: 1부터 50 사이의 두 숫자를 랜덤으로 뽑아 더하기
- 🐚 뺄셈: 1부터 50 사이의 두 숫자를 뽑되, 반드시 큰 수에서 작은 수를 빼도록 처리 (음수 방지)
- 🦀 곱셈: 2단부터 9단 사이의 구구단 문제
- 🐳 나눗셈: 구구단 범위 내에서 나머지가 없이 딱 떨어지는 나눗셈 문제 (예: 24 ÷ 3)
4. 코드가 너무 길어지면 짤릴 수 있으니, 이전 UI 코드와 합친 '완성된 전체 HTML 코드'를 제공해 줘.

3. 🛠️ 코드 덮어쓰기 & 결과 확인

AI가 프롬프트를 찰떡같이 이해하고 새로운 HTML 코드를 뱉어낼 것입니다.

어려운 코드는 읽어볼 필요도 없습니다. 코드를 복사(Copy)한 뒤,

기존에 만들어둔 index.html 파일을 메모장으로 열어 전체 삭제 후 그대로 붙여넣기(덮어쓰기) 해주세요.

🎉 바이브코딩의 기적을 눈으로 확인하세요!

이제 파일을 저장하고 크롬 창에서 새로고침을 해보세요. 덧셈 버튼을 누르면 화면이 부드럽게 넘어가면서 "23 + 17 =" 같은 문제가 짠! 하고 나타납니다. '뒤로 가기'를 눌렀다 다시 들어가면 이번엔 "42 + 9 =" 처럼 완전히 새로운 문제가 기다리고 있죠.

4. 🚀 다음 단계 예고: 정답은 맞췄을까? 팡팡 터지는 채점 로직 추가하기

이제 우리 앱은 무한대로 문제를 내주는 든든한 수학 선생님이 되었습니다.

하지만 문제가 나오면 아이가 정답을 맞혔는지, 틀렸는지 알려줘야겠죠?

다음 [STEP 3]에서는 아이가 정답을 입력했을 때 정답이면 폭죽이 팡팡 터지고 점수가 올라가며,

틀리면 다시 풀어보라고 격려해 주는 '채점 및 점수 계산 로직'을 AI와 함께 추가해 보겠습니다.

점점 진짜 상용 어플의 모습을 갖춰가는 아빠표 AI 구몬!

다음 시간도 기대해 주세요.