Command Palette

Search for a command to run...

hijero
프로젝트

[MLP] Elevelyn — 선생님과 아이들을 위한 맞춤 영어도우미 플랫폼

개발 기간: 2025.05 ~ 현재데모 보기

기술 스택

Next.jsReact 19SupabaseTypeScriptTesseract.jsCanvas APITailwind CSSshadcn/uiVercel

개요

초등 3~6학년 영어 수업에서 단어 쓰기 연습을 디지털로 전환하기 위해 MLP(Minimum Lovable Product) 수준으로 만든 서비스입니다. 선생님이 그룹(예: 3학년 1반)과 단어 쓰기장을 생성하면 랜덤 URL이 발급되고, 학생들은 교육용 기기를 사용하여 앱 설치·회원가입 없이 인터넷에서 해당 URL로 접속해 선생님이 입력한 단어들을 펜으로 따라써보며 영어 단어 학습 및 글씨 연습을 수행하는 방식입니다. Tesseract.js(Google이 관리하는 오픈소스 OCR 엔진, LSTM 신경망 기반) 기술을 활용해 이미지를 인식·채점하며, 선생님은 학생들이 따라 쓴 글씨와 정답 여부를 선생님 단어장 대시보드에서 실시간으로 확인할 수 있습니다.

  • 랜덤 URL — 앱 설치 없이 어떤 기기에서도 즉시 참여
  • Tesseract.js Worker를 링크 접속 브라우저에서 직접 실행 — 채점 비용 무료
  • Levenshtein 유사도 0.9 임계값으로 손글씨 정답률 미세 보정
  • Google OAuth 교사 로그인 + 3초 폴링 제출 현황 모니터링

문제

서울시의 경우 초등학교 내 디지털 수업 일환으로 노트북, 태블릿 PC 와 같은 전자기기가 보급 되었지만 영어 수업 중에 이를 활용할 방안이 마땅치 않았음. 학생들의 영어 손글씨 연습, 영어 퀴즈 등은 여전히 필기구를 사용하거나 오프라인으로 진행될 수 밖에 없는 상황. 이에 따라 교사들은 학생들이 쓴 단어들을 일일이 확인하고 채점하는 데 많은 시간을 할애할 수 밖에 없었음. 이러한 선생님들의 고충을 해소하면서 아이들이 쉽고 재밌게 인터넷 환경에서 영어를 학습할 수 있는 플랫폼이 있으면 좋겠다는 니즈를 확인하게 되었음.

구현 기능

  • 단어 쓰기장 생성 & URL 발급

    그룹 선택·단어 입력 → 랜덤 URL 자동 생성. 인쇄 불필요. 몇 번의 클릭으로 완료

  • 따라쓰기 OCR 채점 시스템

    Tesseract.js Worker 브라우저 실행. devicePixelRatio 고해상도 Canvas → OCR 인식률 향상. Levenshtein 0.9로 흘려 쓴 글씨도 허용

  • Supabase 스키마 & RLS 설계

    notes | note_words | note_sessions DB table 설계. anon INSERT RLS로 학생 무로그인 제출

  • 누구나 동시에 참여 가능

    localStorage UUID로 단어장 접속 유저 식별. Google 계정·앱 설치 불필요. URL 하나로 누구나 즉시 참여

  • 태블릿/모바일 환경 친화적인 대시보드 & 유저 그룹 관리

    3초 폴링 완료 카운터. 그룹별 노트 관리. 총 참가/완료 지표 카드. GNB 탭 네비게이션

성과

클라이언트 OCR + Vercel + Supabase Free Tier로 상용 서버 운영비 $0. 초등학교 교실 현장, 개인 교습 어디든 즉시 도입 가능한 구조로, 홍보·피드백 수렴 후 단어장 퀴즈·말하기 연습 등 콘텐츠 확장 예정.

  • 클라이언트 OCR — 사용자 규모 무관하게 서버 비용 $0
  • Vercel + Supabase Free Tier로 운영비 $0
  • 앱 설치·회원가입 없이 초등 교실 즉시 도입 가능
  • 홍보·피드백 수렴 후 단어장 퀴즈·말하기 연습 등 콘텐츠 확장 예정

개발 타임라인

  1. Canvas 워크시트 정적 데모

    ResizeObserver 기반 5선지 레이아웃 + Pointer Events 드로잉 엔진 + Tesseract.js OCR 초기 통합. DB/Auth 없이 URL params만으로 동작. Vercel 프리뷰로 선생님 Canvas UX 검증.

  2. Supabase 스키마 & Google OAuth

    notes / note_words / note_sessions 3-table 설계. Google OAuth + proxy.ts 보호 라우트. 노트 생성 → URL 발급 및 참여 현황 실시간 대시보드 확인 플로우 완성.

  3. 학생 플로우 & MLP 완성

    URL 입력 접속 → 워크시트 진입. LocalStorage UUID 익명 제출. 완료 화면. 실 Supabase 전체 루프 동작.

  4. Post-MLP (그룹·대시보드·프로필)

    groups 테이블 + notes.group_id 스키마 확장. 그룹별 노트 카드 리스트. 총 참가/완료 지표 대시보드. 프로필 관리 + GNB 탭 네비게이션.

  5. E2E 테스트 & 관리자 백오피스 개발 중

    MLP E2E 시나리오 검증 + /admin 백오피스(계정 목록·통계) 구현 예정.

갤러리