받아쓰기 공책

초등 저학년을 위한 받아쓰기·맞춤법 학습 웹앱.

학교에서 받아온 받아쓰기 문제지를 부모가 넣어 두면, 아이가 혼자 듣고 쓰고 채점받습니다. 단순한 O/X가 아니라 받침·모음·자음·띄어쓰기·문장부호 중 무엇이 어떻게 틀렸는지 글자 단위로 짚어 줍니다.

이 앱이 다르게 하는 것

틀린 곳을 정확히 보여줍니다. 내가 쓴 글자와 정답 글자를 같은 세로줄에 놓아 비교합니다. 띄어쓰기를 빠뜨린 자리에는 ∨, 불필요하게 띄운 자리에는 ✕를 표시합니다. 받침만 틀렸다면 같 = ㄱ+ㅏ+ㅌ → 갔 = ㄱ+ㅏ+ㅆ 처럼 자모를 나란히 보여 줍니다.

같은 날 몰아서 외우는 걸 막습니다. 오답노트는 별 두 개를 모아야 졸업하는데, 반드시 서로 다른 날에 맞혀야 별을 줍니다. 하루에 두 번 맞히는 건 단기기억이라 실제로 외워지지 않기 때문입니다.

보상은 끝까지 마쳤을 때만. 문제를 푸는 도중에는 축하 연출이 없습니다. 시험을 끝까지 마치고 90점을 넘겨야 배지를, 100점이면 카드를 받습니다. 중간에 나가면 기록이 남지 않습니다.

시작하기

npm install
cp .env.example .env.local   # 값을 채워 주세요
npm run dev

Supabase 프로젝트를 만든 뒤 supabase/migrations/0001_init.sql을 실행하세요.

구조

src/
├── lib/
│   ├── hangul.ts       한글 자모 분해·조합
│   ├── grading.ts      채점 엔진 (핵심)
│   ├── review.ts       오답노트 별·졸업 규칙
│   ├── tts.ts          음성 읽기 (공급자 교체 가능)
│   └── sfx.ts          효과음 (Web Audio 생성)
├── components/
│   ├── GradeSheet.tsx      채점 결과 — 원고지 격자 비교
│   └── DictationSession.tsx 받아쓰기 세션 전체 흐름
├── data/
│   └── spelling-bank.ts    맞춤법 문제은행
└── app/                    화면

테스트

채점 정확도가 이 앱의 신뢰 그 자체라 검증을 두텁게 했습니다.

npm test

• 한글 11,172자 전체 분해·조합 왕복 검증
• 무작위 2,500회 속성 기반 교차 검증
• 별·졸업 규칙 시나리오 검증
• 문제은행 무결성 검증

채점 로직을 수정했다면 반드시 테스트를 돌리세요.

개발 지침

CLAUDE.md에 설계 원칙과 남은 작업이 정리되어 있습니다.