구구단 아쿠아리움

---

아빠가 아들에게 만들어 준 게임 🐠

구구단 외우기를 유난히 힘들어하는 여덟 살 아들이 있어요. 아들은 물고기를 정말 좋아해요.

그래서 개발자가 아닌 아빠가 AI와 함께 바이브코딩으로 이 게임을 만들었어요. "외우기 싫은 구구단"이 "내 물고기를 키우는 시간"이 되면 좋겠다는 마음으로요.

• 구구단을 한 단씩 익힐 때마다 바다 친구의 알을 찾고, 부화시키고, 황금 물고기로 키워요.
• 친구들을 내 어항에 하나씩 모으고, 밥을 주고, 청소하고, 쓰다듬으며 함께 자라요.
• 시간에 쫓기지 않고, 틀려도 혼나지 않고, 하루 5~10분이면 충분하게 만들었어요.
• 부모님은 보호자 화면에서 아이가 구구단을 얼마나 외웠는지, 어느 단과 어떤 문제를 어려워하는지 한눈에 보며 아이의 학습 단계를 챙길 수 있어요.

재미있게 놀다 보면 어느새 구구단이 외워져 있기를, 그리고 이 게임을 할 때마다 아빠의 응원을 느끼기를 바라며 만들었어요.

아빠의 사랑이 담긴 게임이에요. 💙 세상 모든 아이들이 구구단을 쉽고 재미있게 배우길 바라요.

---

어떤 게임인가요?

2단부터 9단까지 섬이 하나씩 있고, 섬마다 그 단의 바다 친구가 살아요. 구구단을 익힐수록 친구가 알 → 아기 → 성장 → 황금으로 자라요. 친구들의 생김새에는 그 단의 숫자가 숨어 있어요. 8단 문어는 다리가 8개, 5단 불가사리는 팔이 5개인 식이에요.

단	친구	숫자 힌트
2단	투투 (쌍둥이 해마)	늘 둘이 붙어 다녀요
3단	삼삼이 (세 꼬리 금붕어)	꼬리가 세 갈래
4단	포포 (네 지느러미 거북)	지느러미 네 개
5단	오별이 (불가사리)	팔 다섯 개
6단	육각이 (눈꽃 해파리)	여섯 갈래 눈꽃 무늬
7단	칠색이 (무지개 물고기)	일곱 빛깔 비늘
8단	팔팔이 (문어)	다리 여덟 개
9단	구름이 (고래)	아홉 갈래 물줄기

섬은 쉬운 단부터 열려요. 2 → 5 → 3 → 4 → 6 → 9 → 7 → 8 순서예요.

구구단 익히기: 한 섬에 네 계단

계단	게임	하는 일	다음 계단으로
🥚 알 찾기	🎵 따라 하기 · 🌈 무지개 징검다리	구구단을 듣고 한 줄씩 세 번 따라 말한 뒤, ×1부터 ×9까지 순서대로 건너요	징검다리를 모두 건너면 알을 찾아요
🐣 부화	🫧 섞어 풀기	순서를 섞은 10문제를 보기에서 골라요	한 번에 7개 맞히면 알이 깨어나요
🐟 성장	🐚 조개 숫자판	보기 없이 숫자판으로 답을 직접 써요	한 번에 7개 맞히면 자라요
👑 황금	🦈 상어 보스전	맞힐 때마다 물대포로 상어 체력을 깎아요. 자주 틀린 문제가 더 자주 나와요	상어를 이기면 황금이 돼요

• 시간 제한이 없어요. 틀리면 묶음 그림 힌트(예: 7개씩 3묶음)가 나오고, 틀려도 별을 깎지 않아요.
• 정답을 맞히면 "칠삼, 이십일"처럼 구구단을 소리 내어 읽어 줘요.
• 📅 오늘의 복습: 자주 틀리거나 오래 걸린 문제 5개를 매일 모아서 풀어요. 연달아 세 번 빨리 맞히면 복습 목록에서 빠져요.

⛵ 두 번째 바다: 문장제

첫 번째 바다에서 황금 섬이 4개가 되면 두 번째 바다로 출항해요. 구구단을 이야기 문제에 써 보는 섬 9개가 쉬운 것부터 어려운 것 순서로 이어져요.

섬	난이도	문제
🍎 묶음 · 🐙 다리 세기 · 📅 달력	하	곱셈 한 번 (○개씩 ○묶음, 문어 다리, 일주일)
🔁 몇 배 · ➕ 더하기 · ➖ 빼기 · ❓ 빈칸	중	"○배", 곱하고 더하기/빼기, □ 구하기
⚖️ 비교 · 🏰 이야기	상	누가 더 많은지, 세 번 계산하는 긴 이야기

• 섬마다 알 찾기 → 부화 → 성장 → 해적 선장 보스전으로 새 친구를 키워요.
• 문제는 틀에 이름·물건·숫자를 바꿔 넣어 매번 새로 나오고, 황금이 된 단의 숫자만 써요.
• 숫자와 "씩·배·모두·남은" 같은 핵심 낱말을 색으로 표시하고, 틀리면 묶음 그림과 첫 계산을 힌트로 보여줘요.

어항에서 친구 돌보기

• 밥 주기, 청소, 약: 친구는 12시간이 지나면 배고파해요. 똥이 쌓이면 유리에 이끼가 끼고, 가끔 아프기도 해요. 절대 죽지는 않아요.
• 친밀도 💗: 밥 주기, 쓰다듬기, 공놀이, 부탁 들어주기로 친해져요. 친해질수록 재주넘기와 춤을 하고, 가장 친해지면 아이 이름을 불러 줘요.
• 📋 오늘의 부탁: 친구들이 매일 부탁 3개를 해요. 다 들어주면 도장을 받고, 도장 7개를 모으면 큰 선물이 있어요.
• 🎁 깜짝 선물: 친한 친구가 가끔 모래에서 보물을 찾아와요.
• 🦀 놀러 오는 손님 10명: 좋아하는 장식을 어항에 놓으면 손님이 놀러 와서 구구단 수수께끼를 내요.
• 🪸 꾸미기: 바닥 장식과 물속에 떠 있는 장식 30종, 배경 4종을 별로 사서 원하는 곳에 놓아요.
• 🌟 스페셜과 🐷 저금통: 별을 100~200개 모아서 사는 목표예요. 갖고 싶은 것을 찜하면 어항 위 저금통에 모인 별이 보여요. 어항 업그레이드 3단계(큰 수족관 → 산호초 → 바다 왕궁), 움직이는 대형 장식(해적선, 분수 성, 회전목마, 해저 기차), 새 배경음악, 황금 명판, 해파리 불꽃놀이, 그리고 모든 친구를 황금으로 키우면 만나는 전설의 무지개 잉어가 있어요.
• 🪪 네임카드: 친구마다 생일, 물고기 나이, 특징, 그 단의 실력이 담긴 카드가 있어요. 황금 친구는 반짝이는 홀로그램 카드예요.
• 🗺️ 모험 지도: 상어가 돌아다니고 돌고래가 뛰어오르는 바다를 배를 타고 건너요.
• 🐠 두 번째 어항: 스페셜에서 어항을 하나 더 사면 ◀ ▶로 넘겨 보고, 도감에서 친구를 나눠 살게 할 수 있어요. 두 번째 바다 친구들도 여기서 헤엄쳐요.
• 잔잔한 배경음악과 효과음이 있어요. 문제를 풀 때는 조용해져요.

보호자 화면: 아이의 학습 단계 한눈에 보기

아이가 모르게 부모님만 볼 수 있는 화면이에요. 어항 오른쪽 위 🔒 보호자를 누르고 곱셈 문제를 풀면 들어갈 수 있어요. 아이가 게임을 하는 동안 쌓인 기록으로 얼마나 외웠는지, 무엇을 어려워하는지 알 수 있어요.

• 얼마나 외웠나요?: 2~9단에서 새로 외울 곱셈 36개 중 몇 개를 익혔는지 보여줘요. 7×8과 8×7은 같은 문제로 세요.
• 어느 단을 어려워하나요?: 29단 × 19 구구단표를 문제마다 정답률 색(초록, 노랑, 빨강)으로 칠해서, 약한 단과 약한 줄이 한눈에 보여요.
• 어떤 문제를 자주 틀리나요?: 자주 틀리는 문제를 순서대로 보여줘요. 이 문제들은 오늘의 복습과 상어 보스전에 더 자주 나와서, 게임 안에서 자연스럽게 다시 연습해요.
• 어디까지 왔나요?: 섬(단)마다 알, 아기, 성장, 황금 중 어느 단계인지 보여줘요.
• 문장제는 어떤가요? (두 번째 바다): 섬별 정답률과 함께, 틀린 이유를 문장 이해 실수(곱하기만 하고 멈춤, 곱할 때 더함)와 계산 실수(구구단 실수)로 나눠 보여주고 어떤 연습이 도움이 되는지 알려줘요.
• 꾸준히 하고 있나요?: 오늘과 최근 7일 학습 시간, 푼 문제 수, 한 번에 맞힌 비율, 연속 출석, 오늘의 복습 여부를 보여줘요.
• 아이 이름, 효과음과 배경음악, 읽어 주는 목소리 설정
• 진행 기록 옮기기: 다른 기기나 다른 주소로 기록을 옮기는 코드를 만들고 가져와요.

태블릿에 앱으로 설치하기

1. 태블릿 브라우저에서 https://cookcho.github.io/gugudan-aquarium/ 을 열어요.
2. 갤럭시탭 (Chrome): ⋮ 메뉴 → "홈 화면에 추가" 또는 "앱 설치"
   아이패드 (Safari): 공유 버튼 → "홈 화면에 추가"
3. 홈 화면에 생긴 "아쿠아 구구단" 아이콘으로 열면 주소창 없이 전체 화면으로 열려요. 한 번 열어 두면 인터넷이 없어도 열려요.

가로 화면에 맞춰 만들었어요. 진행 기록은 그 기기의 브라우저에만 저장되고, 어디로도 보내지 않아요.

읽어 주는 소리가 안 나오면: 태블릿 설정에서 글자 읽어주기(텍스트 음성 변환) 엔진과 한국어 음성을 설치해 주세요. 보호자 화면에 자세한 방법이 있어요.

개발

Vite와 순수 JavaScript로 만들었어요. 프레임워크나 서버는 없어요.

npm install
npm run dev      # 개발 서버 (같은 와이파이의 태블릿에서 http://PC주소:5173 으로 접속)
npm run build    # dist/ 에 배포용 파일 만들기

• main 브랜치에 올리면 GitHub Actions가 자동으로 GitHub Pages에 배포해요.
• 캐릭터 그림: public/characters/단-단계.png (단계: 1 알 · 2 아기 · 3 성장 · 4 황금, 안내 캐릭터는 guide.png). 그림이 없는 칸은 코드로 그린 그림이 나와요. 이미지 AI로 만든 큰 그림을 넣고 npm run optimize-images(또는 npm run dev)를 실행하면 512px로 줄이고 가짜 배경을 지워요. 원본은 art-source/에 따로 보관해요(저장소에는 올리지 않아요).

src/
  scenes/     화면 (어항, 지도, 게임들, 결과, 보호자, 손님)
  core/       저장, 읽어 주기 음성, 문제 만들기, 헤엄 움직임
  data/       친구, 상점, 돌보기 규칙, 손님
  graphics/   코드로 그린 캐릭터와 장식
  audio/      효과음과 배경음악 (Web Audio로 직접 연주)