[MLP] Emproving — 선생님과 아이들을 위한 맞춤 영어도우미 플랫폼
기술 스택
개요
초등 3~6학년 영어 수업에서 단어 쓰기 연습을 디지털로 전환하기 위해 현직 초등학교 선생님의 자문을 구해 MLP(Minimum Lovable Product) 수준으로 만든 서비스입니다. 선생님이 그룹(예: 3학년 1반)과 단어 쓰기장을 생성하면 랜덤 URL이 발급되고, 학생들은 교육용 기기를 사용하여 앱 설치·회원가입 없이 인터넷에서 해당 URL로 접속해 선생님이 입력한 단어들을 펜으로 따라써보며 영어 단어 학습 및 글씨 연습을 수행하는 방식입니다. Tesseract.js(Google이 관리하는 오픈소스 OCR 엔진, LSTM 신경망 기반) 기술을 활용해 이미지를 인식·채점하며, 선생님은 학생들이 따라 쓴 글씨와 정답 여부를 선생님 단어장 대시보드에서 실시간으로 확인할 수 있습니다.
- 랜덤 URL + QR 코드 — 앱 설치 없이 어떤 기기에서도 즉시 참여
- 워크시트 4종 — 영어 따라쓰기 · 한글 뜻 보고 영어단어 쓰기 · 4지 선다 퀴즈 · 한글 뜻 영어 맞추기 퀴즈
- Tesseract.js Worker를 링크 접속 브라우저에서 직접 실행 — 채점 비용 무료
- Levenshtein 유사도 0.9 임계값으로 손글씨 정답률 미세 보정
- Google OAuth 교사 로그인 + 3초 폴링 제출 현황 모니터링
- role 기반 /admin 백오피스 — 계정 관리 · 노트 삭제 · 역할 변경 Server Action
- 6자리 초대 코드 + URL 이중 공유 — 학생이 코드 입력만으로 즉시 워크시트 진입
- /join 페이지 학생 이름 수집 — 쿠키 저장, 제출 현황에서 학생 이름 식별
문제
서울시의 경우 초등학교 내 디지털 수업 일환으로 노트북, 태블릿 PC와 같은 전자기기가 보급되었지만 영어 수업 중에 이를 활용할 방안이 마땅치 않았습니다. 학생들의 영어 손글씨 연습, 영어 퀴즈 등은 여전히 필기구를 사용하거나 오프라인으로 진행될 수밖에 없는 상황이었습니다. 이에 따라 교사들은 학생들이 쓴 단어들을 일일이 확인하고 채점하는 데 많은 시간을 할애할 수밖에 없었습니다. 이러한 선생님들의 고충을 해소하면서 아이들이 쉽고 재밌게 인터넷 환경에서 영어를 학습할 수 있는 플랫폼이 있으면 좋겠다는 니즈를 확인하게 되었습니다.
구현 기능
단어 쓰기장 생성 & URL/QR 발급
그룹 선택·단어 입력 → 워크시트 타입 선택(따라쓰기/한글 뜻 보고 영어단어 쓰기/퀴즈/한글 뜻 영어 맞추기 퀴즈) → 랜덤 URL + QR 코드 자동 생성. QR 코드를 칠판에 띄우면 학생이 카메라로 즉시 접속. 인쇄 불필요.
따라쓰기 OCR 채점 시스템
Tesseract.js Worker 브라우저 실행. devicePixelRatio 고해상도 Canvas → OCR 인식률 향상. Levenshtein 0.9로 흘려 쓴 글씨도 허용
Supabase 스키마 & RLS 설계
notes | note_words | note_sessions DB table 설계. anon INSERT RLS로 학생 무로그인 제출
누구나 동시에 참여 가능
localStorage UUID로 단어장 접속 유저 식별. /join 페이지에서 학생 이름 수집 후 쿠키로 저장. 6자리 초대 코드 또는 URL로 즉시 참여. Google 계정·앱 설치 불필요.
태블릿/모바일 환경 친화적인 대시보드 & 유저 그룹 관리
3초 폴링 완료 카운터. 그룹별 노트 관리. 총 참가/완료 지표 카드. 제출된 학생 손글씨 이미지와 정답 여부를 대시보드에서 열람 가능. GNB 탭 네비게이션. 학생 이름이 제출 현황과 함께 표시되어 누가 완료했는지 즉시 파악 가능.
관리자 백오피스
/admin 라우트에 role 기반 가드. 계정 목록 + 통계 카드. 역할 변경 · 노트 삭제 · 계정 삭제(cascade) Server Action. Supabase service role 기반 admin 클라이언트로 일반 RLS 우회.
성과
클라이언트 OCR + Vercel + Supabase Free Tier로 상용 서버 운영비 $0. 따라쓰기·한글 뜻 보고 영어단어 쓰기·퀴즈·한글 뜻 영어 맞추기 퀴즈 워크시트 4종 완성(Phase 1~7). 초등학교 교실 현장, 개인 교습 어디든 즉시 도입 가능한 구조.
- 클라이언트 OCR — 사용자 규모 무관하게 서버 비용 $0
- Vercel + Supabase Free Tier로 운영비 $0
- 앱 설치·회원가입 없이 초등 교실 즉시 도입 가능
- 워크시트 4종(따라쓰기·한글 뜻 보고 영어단어 쓰기·퀴즈·한글 뜻 영어 맞추기 퀴즈) — Phase 1~7 전체 완료
개발 타임라인
Canvas 워크시트 정적 데모
ResizeObserver 기반 5선지 레이아웃 + Pointer Events 드로잉 엔진 + Tesseract.js OCR 초기 통합. DB/Auth 없이 URL params만으로 동작. Vercel 프리뷰로 선생님 Canvas UX 검증.
Supabase 스키마 & Google OAuth
notes / note_words / note_sessions 3-table 설계. Google OAuth + proxy.ts 보호 라우트. 노트 생성 → URL 발급 및 참여 현황 실시간 대시보드 확인 플로우 완성.
학생 플로우 & MLP 완성
URL 입력 접속 → 워크시트 진입. LocalStorage UUID 익명 제출. 완료 화면. 실 Supabase 전체 루프 동작.
Post-MLP (그룹·대시보드·프로필)
groups 테이블 + notes.group_id 스키마 확장. 그룹별 노트 카드 리스트. 총 참가/완료 지표 대시보드. 프로필 관리 + GNB 탭 네비게이션.
관리자 백오피스 & 전체 완성
어드민 CRUD 완성: 선생님 상세 조회, 노트 삭제, 역할 변경, 계정 삭제(cascade). SECURITY DEFINER 함수 + service_role 기반 admin 클라이언트로 권한 분리. Phase 1~4 전체 26개 Tasks 완료.
퀴즈 워크시트 타입 추가
notes 스키마에 worksheet_type 컬럼 추가. 영어 단어 보고 한국어 뜻 4지 선다 퀴즈 구현. QuizCard 프로그레스바 + 60초 타이머 + 확인 플로우.
QR 코드 초대 & 프로필 리디자인
초대 대시보드에 QR 코드 표시 + SVG 다운로드 추가. 프로필 페이지 아바타 원형 + 인라인 닉네임 편집으로 리디자인.
한글 뜻 보고 영어단어 쓰기 워크시트 변형 추가
reverse_handwriting(한국어 뜻 보고 영어 손글씨)·reverse_quiz(한국어 뜻 보고 영어 4지 선다) 추가. WORKSHEET_TYPE_CONFIG 단일 SSoT로 타입별 설정 관리. 2단계 타입 선택 UI 도입.