🟦 Speakly

학생의 영어 자기주도학습을 돕는 웹 서비스

WHY?

• 단어 암기 시 발음 청취 기능 부재 → 철자만으로 외우기 비효율적인 문제 존재
• 정확한 미국식 발음 동시 제공 시 암기 용이 → 카드별 발음 재생 구현
• 본문 음독만으로도 학습 효과 발생. 단, "어디까지 읽었는지" 가시화 시 직관성·동기부여 향상 → 읽은 단어 실시간 색 변화 + 문장 완료 시 체크(✓) 구현
• 목표: 교사 부재 시에도 학생이 단어 청취·암기 + 본문 음독·자가 점검 수행 가능
• 전 음성 기능: 유료 AI API 미사용, 브라우저 기본 기능 + 무료 공개 API만으로 동작

---

기능

📚 Vocabulary — 듣고 외우는 단어장

• txt 파일 업로드 또는 직접 입력으로 단어장 생성
• 단어를 카드 한 장씩 표시 + 카드별 미국식 발음 재생
• 발음기호(IPA) 표시, 뜻 가리기/보기(셀프 테스트), 이전/다음, 섞기, 진행률 제공

🎤 Speech — 소리 내어 읽기 연습 및 읽어주기 기능

• 영어 본문 입력 시 문장 단위(1·2·3…)로 분해
• 🎤 버튼 후 음독 → 인식된 단어 하나씩 초록색 전환
• 다음 읽을 단어 밑줄 안내, 문장 완독 시 번호 ✓ 처리
• 본문 전체 완독 시 완료 표시 → 진행도 직관적 확인 가능

---

어떻게 구현했나

1. 단어장 파싱

• 단어장 형식 제각각 문제 → 한 줄에서 단어/뜻 자동 분리
• 구분자 우선순위: 탭 → -(대시) → 쉼표 → 콜론 → 2칸 이상 공백
• 구분자 부재 시 한글 시작 지점 기준 분리 (apple 사과, diligent부지런한 처리)

2. 발음

• 무료 Dictionary API(api.dictionaryapi.dev) 조회 → 실제 사람 녹음 mp3(미국식 -us 우선) + 발음기호 재생
• mp3 부재/오프라인 시 → 브라우저 Web Speech API(TTS) 로 즉시 합성
• mp3 별도 준비 불필요, 조회 결과 캐시로 재요청 감소

3. 읽기 인식

• 브라우저 음성 인식(SpeechRecognition) 으로 마이크 음성 → 텍스트 변환
• 본문 단어와 앞에서부터 순서 대조, 작은 윈도우 내 일치 시 "읽음" 처리 (오인식 일부 허용)
• 첫 불일치에서 중단 → 문장 1 → 2 → 3 순서 보장
• 정규화(소문자·구두점 제거)로 Apple, = apple 동일 처리
• 매 인식 이벤트마다 전체 재계산 → 실시간 하이라이트

---

기술 스택

• Vite + React + TypeScript + Tailwind CSS (정적 SPA, 산출물 dist/)
• 발음/음성: Dictionary API + Web Speech API(TTS · SpeechRecognition)

---

실행

npm install
npm run dev      
npm run build   
npm run preview

Speech(음성 인식): Chrome·Edge 권장(Firefox 미지원), 마이크 권한 필요, HTTPS에서 동작(Vercel 기본 HTTPS).

---

단어장 txt 형식

apple - 사과
diligent, 부지런한
ambiguous: 애매모호한
resilient	회복력 있는
gregarious 사교적인

# 시작 줄·빈 줄 무시. 예시: sample.txt

단축키 (Vocabulary 카드 화면)

키	동작
← / →	이전 / 다음 카드
Space	발음 다시 듣기
Enter / ↑ / ↓	뜻 보기 / 가리기

---