유아, 초등 저학년 아이가 혼자서도 소리 안내를 들으며 구구단과 알파벳을 익힐 수 있도록 직접 기획하고 만든 웹 학습 놀이터입니다. 설치나 회원가입 없이 PC, 태블릿, 휴대폰 브라우저에서 바로 실행됩니다. [주요 기능] - 캐릭터 설정: 남자 친구 3명, 여자 친구 3명 중 함께 공부할 친구를 고르면 모든 게임에 그 캐릭터가 나오고, 캐릭터별 목소리로 인사, 문제, 칭찬을 들려줍니다. 고른 캐릭터는 브라우저에 저장되어 다음에도 유지됩니다. - 구구단 놀이: 2~9단 중 하나를 고르면 캐릭터가 지금 풀 줄을 가리키며 문제를 읽어 주고, ?를 누르면 답을 보여 주며 소리로 읽어 줍니다. 한 단을 다 마치면 점수와 칭찬이 나옵니다. - 알파벳 놀이: 위에 나온 목표 글자와 같은 글자 공에 캐릭터를 움직여 닿으면 10점, 다른 글자에 3번 닿으면 끝납니다. 대문자는 "큰 에이", 소문자는 "작은 에이"처럼 읽어 주고, 맞힐수록 공이 빨라집니다. [작업 범위] 기획, 화면과 캐릭터 디자인, 개발, 음성 파일 제작, 배포까지 1인 진행 (반응형 웹) [기술 구성] - 프레임워크 없이 HTML, CSS, JavaScript로 만든 정적 사이트, Vercel 배포 - 캐릭터 6종은 이미지 파일 없이 SVG 코드로 그리고, 머리 모양, 옷 색, 소품 값만 바꿔 재사용 - 음성은 Python 스크립트로 캐릭터별 MP3 파일을 미리 만들어 재생하고, 재생이 안 되는 환경에서는 기기 음성으로 대신 읽음 [신경 쓴 점] - 구구단은 지금 풀 줄만 누를 수 있게 해서 아이가 헷갈리지 않도록 함 - 소문자 l, i는 대문자 I와 구별이 어려워 문제에서 빼고, C, O, S처럼 대소문자 모양이 같은 글자는 함께 정답 처리 - 큰 글씨, 파스텔 색, 큰 버튼으로 어린 아이도 쉽게 누를 수 있는 화면

캐릭터 설정: 남자 친구 3명, 여자 친구 3명 중 함께 공부할 캐릭터를 고릅니다.

구구단 단 고르기: 2단부터 9단까지 색이 다른 큰 버튼으로 나눴습니다.

구구단 진행: 캐릭터가 지금 풀 줄을 가리키며 문제를 읽고, ?를 누르면 답을 보여 주며 읽어 줍니다.

구구단 완료: 한 단을 다 마치면 점수와 칭찬을 캐릭터 목소리로 들려줍니다.

알파벳 놀이: 목표 글자와 같은 공에 닿으면 10점, 맞힐수록 공이 빨라집니다.