영어 단어 중에는 하나의 단어가 여러 가지 뜻을 가진 다의어가 많아요. 예를 들어 QUALIFY는 "자격을 얻다"는 뜻만 알고 있으면 시험에서 틀리기 쉬워요. "진술을 제한하다", "특성을 묘사하다"는 뜻도 있거든요. 이런 다의어를 단순 암기가 아니라 4단계 퀴즈 방식으로 학습하는 앱을 Claude와 함께 만들어봤습니다!
진행 방법
사용 도구: Claude (claude.ai) + Claude Code + GitHub CLI + Vercel
진행 순서:
claude.ai에서 앱 기획 및 설계
4단계 학습 구조 설계 (Odd One Out → Context Match → Synonym/Antonym → Invisible Clue)
500개 단어 데이터 JSON 형식으로 생성
React 퀴즈 앱 코드 완성
Claude Code에서 개발 환경 세팅
Vite + React 프로젝트 생성
JSON 데이터 파일 5개 (100개씩) public 폴더에 배치
App.jsx 파일 src 폴더에 배치
npm run dev로 로컬 실행 확인
GitHub CLI + Vercel CLI 설치 후 배포
winget install GitHub.clinpm install -g vercelgh auth login으로 GitHub 로그인GitHub 저장소 생성 및 push
Vercel 자동 배포 완료
앱 주요 기능:
Step 1: Odd One Out — 단어의 뜻이 아닌 것 고르기
Step 2: Context Match — 예문 3개와 뜻 매칭
Step 3: Synonym/Antonym — 동의어 + 반의어 확인
Step 4: Invisible Clue — 지문 속 핵심 신호 암기
+ 단어 클릭 시 발음 재생 (Web Speech API)
+ 틀린 단어 자동 수집 → Review Mode
+ 다크/라이트 모드
+ 이전 단어/스텝 이동결과와 배운 점
✅ 배운 점
claude.ai에서 기획/코드 생성 → Claude Code에서 실행/배포까지 역할 분리가 중요하다
JSON 데이터를
public/폴더에 넣으면fetch()로 바로 불러올 수 있다GitHub CLI + Vercel 연동하면 push만 해도 자동 배포된다
⚠️ 시행착오
claude.ai → Claude Code로 데이터 전달 시 붙여넣기가 안 됨 → 파일로 저장 후 폴더에 직접 복사하는 방식으로 해결
Vercel 웹 UI에서 폴더 직접 업로드를 찾으려 했지만 GitHub 연동 방식이 더 안정적
꿀팁: claude.ai 아티팩트의 ↓ 다운로드 버튼으로 파일 저장 → 폴더에 복사 → Claude Code에서 작업하면 가장 빠름!
📌 앞으로의 계획
단어 데이터 Merriam-Webster API와 연동해서 정확도 높이기
학습 기록 저장 및 통계 기능 추가
모바일 최적화
