Little Hacker's Quest (LHQ) - Voice Edition

48개월(만 4세) 아이를 위한 웹 기반 CLI 놀이 게임입니다. 텍스트를 아직 읽지 못해도, 한국어 TTS 안내를 들으며 알파벳을 찾아 입력할 수 있습니다.

플레이: https://the-first-contact.vercel.app

실행 방법

정적 사이트입니다. 빌드도 의존성 설치도 필요 없습니다.

1. index.html을 브라우저에서 엽니다.
2. 또는 로컬 서버로 엽니다.

npm start

브라우저에서 http://127.0.0.1:4173 을 엽니다. npm start는 python3 -m http.server 4173 입니다.

3. 시작 화면의 [ START MISSION ] 버튼을 누르면 음성 안내가 시작됩니다.

Vercel에는 이 저장소의 정적 파일을 그대로 배포합니다. package.json에는 실행 스크립트만 있고, 빌드 명령은 없습니다.

구현된 기능

• 레벨 진입 시 상황 설명 + 철자 가이드 TTS 자동 재생
• 정답 입력 시 칭찬/상황 변화 TTS 재생
• 알파벳 장에서 다른 글자는 실패가 아니라 그 글자의 뜻을 들려줍니다. 명령 챕터의 오답 안내는 그대로입니다.
• 키 입력 알파벳 읽기 토글 제공
• [ F1 ] 또는 REPEAT VOICE 버튼으로 안내 음성 다시 듣기
• 부모용 챕터 이동: Ctrl+Shift+→ 다음 챕터, Ctrl+Shift+← 이전 챕터. Mac에서는 Cmd+Shift+→ / Cmd+Shift+← 도 같습니다. Ctrl+Shift+N(시크릿 창)이나 Alt+←(뒤로 가기)는 쓰지 않습니다. 네 살이 실수로 누르기 어려운 조합이고, 알파벳 한 글자 미션과 생일 초 끄기에서도 동작합니다.
• 한 줄을 치는 미션, 챕터를 깬 뒤, 챕터 메뉴에서는 next 또는 다음 하고 엔터. ch 5, chapter 5, 챕터 5 로 번호 이동도 됩니다. 이전은 prev 또는 이전. 알파벳 한 글자 미션은 글자가 바로 먹히므로 단축키를 씁니다.
• 건너뛴 챕터는 클리어로 저장하지 않습니다. 마지막 챕터에서는 "여기가 마지막 챕터야."라고 말하고 그 챕터에 남습니다.
• 시작 화면에서 챕터 선택, 클리어한 챕터는 ✓ 표시 (브라우저에 저장)
• 12개 챕터 / 62개 미션. 알파벳은 AZ 순서 대신 짧은 이야기(35개)로 나뉘고, 글자마다 장면이 바뀝니다. 글자와 단어가 묶인 미션은 "사과는 영어로 애플! 애플은 에이로 시작해. 그래서 에이야!"처럼, 왜 그 글자인지 말합니다. 화면에는 A처럼 알파벳도 보여 줍니다.

챕터	내용	예시
CH1 재윤이 정류장	J 문 열림, C 초코 탑승, B 2층버스 출발	J, C, B
CH2 신호등	R 빨강, Y 노랑, G 초록	R, Y, G
CH3 초코 밥	그릇이 차는 먹이기	A, E, O, F
CH4 이름 부르기	jae, 모자 H, choco	jae, H, choco
CH5 초코랑 놀기	점프, 아이스크림, 연, 재채기	D, I, K, N
CH6 밤하늘	별, 달, 우산, 왕관	S, M, U, Q
CH7 자동차	트럭, 바퀴, 밴	T, W, V
CH8 동물 친구	돼지, 사자, 얼룩말, 실로폰	P, L, Z, X
CH9 첫 명령어	2~3글자 명령으로 장면 바꾸기	on, hi, go, eat, pop
CH10 영어 단어	세 글자 영어 단어 만들기	cat, dog, bus
CH11 대시 하나 -	한 글자 옵션 (단어의 첫 글자)	on -r, go -f
CH12 대시 두 개 --	같은 옵션을 단어로	on --red, go --fast

알파벳을 이야기로 바꾼 뒤의 첫 실행에서는 abc1~abc3 클리어 기록만 지워집니다. cmd, words, dash1, dash2 기록은 남습니다. 챕터 id는 그대로입니다.

• -r 과 --red 처럼 짧은/긴 옵션이 같은 뜻이라는 실제 CLI 규칙을 그대로 연습해요.
• 입력은 대소문자, 대시 앞뒤 띄어쓰기, iOS가 -- 를 — 로 바꾸는 경우까지 너그럽게 받아줘요.

생일 (매년 10월 31일)

재윤이 생일인 10월 31일에만, 브라우저의 현지 날짜로 짧은 생일 놀이가 나옵니다. 다른 날에는 화면, 조작, 저장이 평소와 같습니다.

• 페이지를 열면 시작 화면의 부팅 글 안에 케이크가 깜빡입니다.
• [ START MISSION ] 이나 챕터를 누르면 한국어로 "생일 축하해 재윤아! 오늘 재윤이 네 살 됐네!"처럼 인사합니다. 나이는 2022년 10월 31일생 기준으로, 그해 10월 31일에 되는 나이입니다. 2026년은 네 살, 2027년은 다섯 살입니다.
• 이어서 기존 미션 화면에서 키를 한 번 누를 때마다 초가 하나씩 꺼지고 "후!" 하고 말합니다. 초는 나이만큼이고, 많으면 5개에서 멈춥니다.
• 초를 다 끄면 "초코가 노래해!" 안내가 끝난 뒤에, 초코가 파티 모자를 쓴 채로 짧은 16비트 생일 멜로디가 나와요. 브라우저의 Web Audio로 직접 만들고, 한 절(약 13초)이라 크지 않아요. 노래 도중 키를 눌러도 끊기지 않습니다. 초를 끌 때는 작은 효과음만 납니다.
• 같은 날 미션을 깨면 결과 장면 위에 짧은 색종이 장식이 붙습니다.
• 클리어 기록(lhq_cleared_chapters)은 읽기만 하고 바꾸지 않습니다. 생일 놀이는 페이지를 열 때마다 처음 시작할 때 한 번 나옵니다. 메뉴로 나갔다가 다시 시작해도 같은 화면에서는 반복하지 않고, 다시 보려면 새로고침하면 됩니다.

다른 날 미리 보려면 주소 뒤에 ?birthday=1 을 붙입니다.

https://the-first-contact.vercel.app/?birthday=1

브라우저 참고

• 안내는 미리 녹음한 한국어 음성(SunHi) MP3가 먼저 재생됩니다. 녹음이 없을 때만 브라우저 음성합성으로 이어 말합니다.
• 브라우저 정책 때문에 첫 음성 재생은 사용자 클릭(시작 버튼) 이후 동작하도록 구성되어 있습니다.
• 글자 소리는 미리 읽어 둔 MP3라, 안내가 끝나기를 기다리지 않고 바로 들립니다. 안내를 다시 들으려면 F1을 누릅니다. 다음 챕터는 Ctrl+Shift+→(Mac Cmd+Shift+→)이고, 입력창에서는 next 또는 다음입니다.

iPad / Safari

• iPad 측면 무음 스위치가 켜져 있으면 Web Speech API 소리가 나지 않을 수 있습니다. 무음을 끄고 미디어 볼륨을 올려 주세요.
• 한국어 음성이 없으면 iPadOS 설정 > 손쉬운 사용 > 읽어주기 및 말하기 > 음성에서 한국어를 받을 수 있습니다. 음성이 없어도 화면 안내로 플레이할 수 있습니다.
• 첫 마디는 시작 버튼을 누른 뒤에만 나옵니다. 페이지를 열자마자 소리가 없는 것은 정상입니다.
• Safari는 -- 를 긴 대시 — 로 바꾸기도 합니다. 그대로 엔터를 눌러도 정답으로 받습니다.
• 말이 중간에 끊기거나 늦으면 F1(또는 REPEAT VOICE)로 그 레벨 안내를 다시 듣습니다.
• 키보드가 올라와도 명령 입력창이 가려지지 않도록 맞춰 두었습니다.

카카오톡 인앱 브라우저

카카오톡 안에서는 소리가 잘 안 들릴 수 있어 외부 브라우저를 권합니다. 인앱에서 바로 하려면 그냥 여기서 하기를 누르면 되고, 그 선택은 다시 외부 브라우저로 보내지 않습니다.

분석과 개인정보

아이 사이트라 입력 내용은 분석 도구로 보내지 않습니다.

• Google Analytics 4는 챕터, 레벨, 정답 여부처럼 놀이 진행만 기록합니다. 아이가 친 글자는 이벤트에 넣지 않습니다.
• Google 신호, 광고 개인화, 광고 저장은 꺼 두었습니다.
• Vercel Web Analytics(/_vercel/insights/script.js)는 페이지 조회용으로 그대로 둡니다. 입력한 명령은 이 경로로도 보내지 않습니다.