소개
중학생 영어 과외를 하면서 매주 같은 일을 반복하고 있었어요.
단어장 단어의 경우 출판사에서 제공해주는 기본 단어 시험지가 있긴 하지만,
독해 책 단어와 오답 단어가 정리된 엑셀을 보며 시험지를 직접 만들고,
수업 날 채점하고, 오답 단어를 따로 체크해두고, 다음 주에 또 시험지를 만들고.
기존 Classcard 서비스도 있지만, 유료 구독이 아니면 제한되는 기능들이 많았어요.
그래서 Claude Code 첫 프로젝트로 영어 과외 단어 학습 앱 만들기를 시도해보았습니다.
진행 방법
1) 사용 도구
Claude Code + Next.js(컴퓨터 내 java 활용) + Supabase (단어 DB) + Vercel (웹 배포)
2) 서비스 기획
만들기를 시작하기 전에, 2시간 넘게 claude와 충분히 대화했어요.
스터디장님이 공유해주신 /gpters-thinking-partner 기능을 활용했습니다.
수업 흐름을 설명하고, 어떤 기능이 필요한지 같이 정했어요.
Tip) 초기에 너무 비대한 프로젝트를 만들지 않기 위해, 로그인이나 대시 보드 기능 등은 우선 계획에서 삭제했어요. (당장 과외 학생이 1명이기에..)
Tip) 크로스 체크를 위해, Gemini에게 "너는 에듀테크 전문가인 10년차 개발자다. 이 계획에서 문제가 있는 부분 검토하고 피드백해라"라고 이야기하고, 다시 claude에게 검토하고 반영하라는 지시도 3-4번 했어요.
3) 만든 기능들:
엑셀 업로드 — 단어장·독해책 단어 정리된 엑셀을 DB에 저장
시험 3종 자동 생성
- 시험 ① 단어장 (과제 범위 자동 적용)
- 시험 ② 독해책 과제 범위 + 학생이 독해책을 풀며 사전 검색한 단어
- 시험 ③ 누적 오답 풀
오답 자동 관리 — 2번 연속 정답이면 자동 졸업
사전 검색 — 학생이 앱 내에서 모르는 단어 검색, 자동으로 다음 시험에 포함
복습 리스트 — 독해책 단어 + 오답 합본, 인쇄 가능
복습 퀴즈 — 혼자서 영→한 / 한→영 연습
성적 기록 — 시험별 점수 이력
Vercel 배포 — 스마트폰에서 URL로 접속
4) 수업 흐름 AS-IS vs TO-BE:
단계
As-Is
To-be
외워야 할 독해책 & 오답 단어
따로 캡처해서 전달
앱에서 바로 확인
모르는 단어
넘어가거나 네이버 검색
앱 검색 => 자동으로 다음 시험 포함
시험지 준비
수동 제작 및 인쇄
노트북 내 자동 생성, 프린트 가능
채점
직접 채점
자동 채점 가능
오답 관리
엑셀 수기 체크
자동 체크, 누적, 졸업 처리
성적 기록
수기 기록
자동 이력 저장
결과와 배운 점
서비스 링크: https://vocab-app-azure-delta.vercel.app/
배운 점:
claude code만 있다면, 구현은 정말 쉽다.
어떤 게 가장 효과적인 프로세스인지 고민해서 계획을 잘 짜는 것이 중요하다!
시행착오:
- Supabase가 한 번에 1000개 이상 데이터를 못 가져오는 문제
→ 페이지 나눠서 가져오는 로직으로 claude가 자동 해결
- 채점이 너무 엄격해서 동의어를 오답 처리하는 문제
→ 기쁜, 기뻐하는 등을 정답 처리하는 유사 채점 로직 추가
→ 불완전하기에 교사가 보면서 채점 화면에서 정답 여부 변경 가능하게 제작
- 사전 검색 API 문제
→ 영어 사전 API는 영영만 지원해서 삭제, MyMemory 번역 API로 대체 (무료, API 키 불필요)
→번역 API는 단어의 뜻이 여러개가 있는 경우에 하나의 뜻 밖에 말해주지 않는다는 문제가 있었어요. Gemini 무료 API 사용에 자꾸 오류가 떠서 후속 조치가 필요합니다.
앞으로의 계획:
- 단기: 사전 검색 API 문제 해결, 자잘한 사용성 문제, 퀴즈 형식, 시험 결과 삭제 등 기능 수정
- 장기:
인쇄한 단어 시험지 사진 인식 후 채점 기능 추가
로그인 기능 + 여러 학생 관리 기능 + 단어장 DB 업로드 기능 추가 → 외부에서 사용 가능한 퀄리티로 배포?
