한글 놀이 가나다
Project Case Study
한글 놀이 가나다
A Korean hangul learning game for children aged 3 to 8. Nine play modes across consonants and vowels, stroke-order tracing, roughly 4,400 prebuilt audio clips with speech synthesis fallback, and a guardian lock that puts screen time in a parent hands.
View Live Project →Overview
한글 놀이 가나다 is a hangul learning game for young children, built around one promise on the home screen: "자음과 모음을 재미있게 배워요!" — learn consonants and vowels, and have fun doing it.
The schema.org markup states the audience precisely: free, family-friendly, ages 3 to 8. Every design decision follows from that number.
Designing for Two Users
A children's app has two users with opposite interests. The child wants to keep playing. The guardian wants the session to end when they said it would. Most kids' apps serve only the first and quietly become a negotiation the parent has to win.
This app takes the guardian's side, structurally.
The guardian gate
Access to settings, the install button, and the support link is gated behind a two-digit addition problem — trivial for an adult, out of reach for a five-year-old. The details are where it becomes real:
The question is blurred for 900ms before revealing, then allows a 15-second solve window — long enough for a parent, too short to brute-force
On timeout it regenerates rather than allowing retries against a known question
On success, the guardian sets play time — 5, 10, 30, or 60 minute quick picks, or a custom value up to 180 minutes in 10-minute steps
A countdown badge stays visible, and the app auto-locks at expiry
It re-locks when the tab is hidden for 10 seconds, and on bfcache restore
Nothing is persisted. A reload always starts locked, so "just refresh the page" is not an escape hatch
The Game
Nine modes span both jamo types, selected after the child picks 자음 or 모음:
| Mode | Korean | What it practices |
|---|---|---|
| trace | 글자쓰기 | Stroke-order writing |
| word | 단어쓰기 | Writing whole words |
| fill | 빈칸쓰기 | Filling the missing jamo |
| listen | 소리듣기 | Sound recognition |
| read | 단어맞히기 | Reading words |
| match | 짝맞추기 | Pairing letter and sound |
| find | 글자찾기 | Locating a letter |
| build | 글자만들기 | Composing syllables |
| syllable | 글자담기 | Collecting syllables |
Vowels additionally unlock 복합모음 만들기 (compound vowel building), and a 동화 읽기 story-reading card sits alongside the games. Progress is tracked per jamo per game as a best-score star rating.
Each jamo carries its character, its Korean name (기역), romanization, and example words with emoji. Stroke data is authored per character, with tracing handled by a custom stroke tracer component.
Technical Implementation
Audio: clips first, synthesis as fallback
This is the least glamorous and most important part of the build. The app ships roughly 4,400 prebuilt MP3 clips, generated by a Python script and indexed by a manifest. Speech synthesis is only the fallback — a code comment cites Chrome on Galaxy Tab returning synthesis-failed, which is exactly the device a Korean family is likely to hand a child.
Clips are decoded to AudioBuffers and replayed through Web Audio. Each jamo has a voice gender variant (ㄱ female, ㄴ male), so the letters stay distinguishable by more than pronunciation alone.
BGM is procedurally synthesized — march music with frog and spring ambience — as are the sound effects (pencil scratch, boing). No audio library, no licensed tracks.
Architecture
A single route. Navigation between the home, jamo select, game menu, character grid, game, and story screens is Redux state, not routing — the app behaves like a game, not a website. Deep links accept ?mode=consonant|vowel, which is read once and then stripped from the URL.
Settings persist to localStorage: BGM and SFX volume, whether consonants are read by sound or by name, and compound-splitting behaviour.
Built for a tablet in a child's hands
output: "export" produces a static build for Cloudflare Pages. Display mode is fullscreen, with app shortcuts straight to 자음 or 모음. Pinch-zoom is blocked outright, and the layout follows documented fit-to-screen rules — a child's palm on the screen should never rearrange the game.
What This Case Study Demonstrates
Designing for a guardian and a child as distinct users with conflicting goals
Treating a parental lock as a real security surface — timing, re-locking, and no persisted bypass
Building an audio pipeline that survives the specific devices the audience owns
Shipping a game-shaped app on Next.js without fighting the router
Authoring dense Korean-language learning content (jamo, strokes, words, stories) as structured data
Live: https://ganada.servith.com/
Role: Solo delivery (game design → stroke/audio data → guardian gate → PWA)
