한글 놀이 가나다
Project Case Study
한글 놀이 가나다
3~8세 아이를 위한 한글 학습 게임입니다. 자음과 모음을 놀이 아홉 가지로 익히고, 획순을 따라 써 볼 수 있습니다. 4,400개가 넘는 음성 클립을 미리 만들어 넣고 음성 합성을 예비로 두었으며, 화면 시간을 보호자가 정하도록 잠금을 넣었습니다.
라이브 프로젝트 보기 →Overview
한글 놀이 가나다는 아이들을 위한 한글 학습 게임이고, 홈 화면에 걸어 둔 약속 한 줄 위에 서 있습니다. "자음과 모음을 재미있게 배워요!"
schema.org 마크업에 대상을 정확히 적어 두었습니다. 무료이고, 가족이 함께 쓰기에 적합하며, 3세에서 8세를 위한 것입니다. 설계에서 내린 모든 판단이 이 나이대에서 출발합니다.
사용자가 둘인 제품
아이들 앱에는 원하는 것이 정반대인 사용자가 둘 있습니다. 아이는 계속 놀고 싶어 하고, 보호자는 약속한 시간에 끝나기를 바랍니다. 대부분의 키즈 앱은 앞의 한 명만 챙기고, 그 결과 매번 부모가 이겨야 하는 실랑이가 됩니다.
이 앱은 구조적으로 보호자 편에 섭니다.
보호자 잠금
설정과 설치 버튼, 후원 링크는 두 자리 덧셈 문제 뒤에 두었습니다. 어른에게는 아무것도 아니지만 다섯 살에게는 닿지 않는 난이도입니다. 진짜는 세부에 있습니다.
문제를 900밀리초 동안 흐리게 가렸다가 보여 주고, 15초 안에 풀도록 합니다. 부모에게는 넉넉하고, 찍어서 맞히기에는 짧은 시간입니다
시간이 지나면 다시 풀게 하는 대신 문제를 새로 냅니다
통과하면 보호자가 놀 시간을 정합니다. 5분, 10분, 30분, 60분 중에 고르거나 10분 단위로 최대 180분까지 직접 설정할 수 있습니다
남은 시간이 배지로 계속 보이고, 시간이 다 되면 알아서 잠깁니다
탭을 10초 넘게 다른 곳에 두면 다시 잠기고, 뒤로 가기로 돌아와도 잠깁니다
아무것도 저장하지 않습니다. 새로고침하면 언제나 잠긴 상태로 시작하기 때문에 "그냥 새로고침하면 되지"가 통하지 않습니다
게임
아이가 자음이나 모음을 고르면, 두 갈래에 걸쳐 아홉 가지 놀이가 열립니다.
| 모드 | 이름 | 익히는 것 |
|---|---|---|
| trace | 글자쓰기 | 획순에 맞춰 쓰기 |
| word | 단어쓰기 | 단어 전체 써 보기 |
| fill | 빈칸쓰기 | 빠진 자모 채우기 |
| listen | 소리듣기 | 소리 알아듣기 |
| read | 단어맞히기 | 단어 읽기 |
| match | 짝맞추기 | 글자와 소리 짝 짓기 |
| find | 글자찾기 | 글자 찾아내기 |
| build | 글자만들기 | 음절 만들기 |
| syllable | 글자담기 | 음절 모으기 |
모음에서는 복합모음 만들기가 더 열리고, 게임 카드 옆에 동화 읽기를 함께 두었습니다. 진행도는 자모마다, 게임마다 가장 잘한 기록을 별로 남깁니다.
자모마다 글자와 이름(기역), 로마자 표기, 그리고 이모지가 붙은 예시 단어를 함께 담았습니다. 획순 데이터는 글자별로 직접 만들었고, 따라 쓰는 부분은 직접 만든 획 추적 컴포넌트가 처리합니다.
Technical Implementation
오디오는 클립이 먼저, 합성은 예비입니다
가장 눈에 띄지 않으면서 가장 중요한 작업이었습니다. 파이썬 스크립트로 만들어 매니페스트로 정리한 MP3 클립 4,400개 정도를 앱에 함께 싣습니다. 음성 합성은 예비일 뿐입니다. 주석에 갤럭시탭 크롬에서 synthesis-failed가 돌아오는 사례를 근거로 적어 두었는데, 한국 가정에서 아이에게 쥐여 줄 가능성이 가장 높은 기기가 바로 그것이기 때문입니다.
클립은 AudioBuffer로 풀어 Web Audio로 재생합니다. 자모마다 목소리 성별을 다르게 두어서(ㄱ은 여성, ㄴ은 남성) 발음 말고 다른 단서로도 글자가 구분되게 했습니다.
배경음은 직접 합성해서 만듭니다. 개구리 소리와 봄 분위기를 얹은 행진곡이고, 연필 사각거리는 소리나 튕기는 소리 같은 효과음도 마찬가지입니다. 오디오 라이브러리도 쓰지 않았고 음원을 사 오지도 않았습니다.
구조
페이지는 하나뿐입니다. 홈과 자모 선택, 게임 메뉴, 글자 그리드, 게임, 동화 화면 사이를 오가는 일은 라우팅이 아니라 Redux 상태로 처리합니다. 웹사이트가 아니라 게임처럼 움직여야 하기 때문입니다. 딥링크로 ?mode=consonant|vowel을 받긴 하지만, 한 번 읽고 나면 주소에서 지웁니다.
설정은 localStorage에 남깁니다. 배경음과 효과음 크기, 자음을 소리로 읽을지 이름으로 읽을지, 복합 자모를 나눠 보여 줄지가 여기에 들어갑니다.
아이 손에 들린 태블릿을 기준으로
output: "export"로 정적 빌드를 만들어 Cloudflare Pages에 올립니다. 화면은 전체화면으로 띄우고, 자음이나 모음으로 바로 가는 바로가기를 넣었습니다. 손가락으로 확대하는 동작은 아예 막았고, 화면에 맞춰 배치하는 규칙을 문서로 정해 두고 따릅니다. 아이 손바닥이 화면에 닿았다고 게임이 흐트러져서는 안 되기 때문입니다.
What This Case Study Shows
원하는 것이 서로 부딪히는 보호자와 아이를 각각의 사용자로 놓고 설계한 경험
보호자 잠금을 진짜 보안 문제로 다룬 방식. 시간 제한과 재잠금을 넣고, 저장된 우회로를 남기지 않았습니다
실제 사용자가 가진 기기에서 살아남는 오디오 구조를 만든 사례
라우터와 싸우지 않고 Next.js 위에 게임 형태의 앱을 올린 경험
자모와 획순, 단어, 동화까지 촘촘한 한글 학습 콘텐츠를 구조화된 데이터로 만든 작업
Live: https://ganada.servith.com/
Role: 1인 개발 (게임 설계 → 획순·오디오 데이터 → 보호자 잠금 → PWA)
