🎤 영A쌤의 수업 도우미

학생이 영어 문장을 소리 내어 읽으면, 어느 단어를 정확히 읽었고 어느 단어를 놓쳤는지 바로 보여주는 웹앱입니다. index.html 파일 하나로 동작하고, 서버와 로그인이 없으며 설치할 것도 없습니다.

주요 기능

기능	설명
📝 문장 붙여넣기	교사가 수업에 쓸 영어 문장을 입력칸에 붙여넣습니다. 입력한 내용은 브라우저에 자동으로 저장되어 새로고침해도 남아 있습니다.
🎤 소리 내어 읽기	[읽기 시작]을 누르고 문장을 읽습니다. 알아들은 문장이 화면에 실시간으로 표시됩니다.
✅ 단어별 결과와 정확도	맞게 읽은 단어는 🟩 초록, 놓치거나 다르게 읽은 단어는 🟥 빨강으로 표시하고, 정확도(%)를 보여줍니다.
🔍 원문과 인식 결과 비교	인식된 문장을 고치지 않고 그대로 보여주고, 원문과 다른 단어는 🟨 노랑으로 표시합니다.
🔊 원어민 발음 듣기	빨간 단어를 누르면 그 단어의 발음이 나오고, 짝이 되는 인식 단어가 함께 강조됩니다. 예: three → tree
🔁 다시 읽기	결과 화면에서 바로 다시 도전할 수 있습니다.

단어를 비교할 때는 대소문자와 문장부호를 무시합니다. 인식기가 3처럼 숫자로 받아 적어도 three와 같은 단어로 인정합니다(0~20까지).

사용법

1. index.html을 Chrome이나 Edge로 엽니다.
2. 영어 문장을 붙여넣습니다. [예시 문장 넣기]를 누르면 연습용 가상 문장이 들어갑니다.
3. [연습 시작 →]을 누릅니다.
4. 필요하면 [🔊 원어민 발음으로 전체 듣기]로 먼저 들어봅니다.
5. [🎤 읽기 시작]을 누르고, 마이크 권한 창이 뜨면 허용을 누릅니다. 문장을 읽고 나면 [⏹ 멈춤]을 누릅니다.
6. 결과 화면에서 빨간 단어나 노란 단어를 눌러 어디를 어떻게 읽었는지 확인합니다.

사용 환경

브라우저	지원 여부
Chrome, Edge (PC·노트북·크롬북)	✅ 권장
Android Chrome	✅
Safari (iPad·iPhone·Mac)	⚠️ 동작은 하지만 불안정할 수 있음
Firefox	❌ 음성 인식 미지원 (화면에 안내 문구가 뜸)

• 마이크와 인터넷 연결이 필요합니다.
• 브라우저 내장 기능만 씁니다.
  • 음성 인식: Web Speech API의 SpeechRecognition
  • 발음 재생: speechSynthesis
  • 문장 저장: localStorage

파일 구성

my app/
├── index.html   # 앱 전체 (HTML·CSS·JavaScript)
├── PRD.md       # 기획 문서
├── README.md    # 이 문서
└── .gitignore   # 업로드 제외 목록 (학생 자료·사진·녹음·비밀 키 등)

한계

• 정확도는 "음성 인식기가 그 단어로 알아들었는가"를 기준으로 한 연습용 지표입니다. 공식 발음 평가가 아닙니다.
• 음소, 억양, 강세는 채점하지 않습니다.
• 결과는 저장하거나 전송하지 않습니다. 입력한 문장만 그 기기의 브라우저에 저장됩니다.

배포 전 확인 사항

1. 반드시 HTTPS 주소로 배포하기 ⚠️

• 브라우저는 https:// 주소이거나 localhost일 때만 마이크를 쓸 수 있게 합니다. http:// 주소로 배포하면 마이크가 차단됩니다.
• GitHub Pages, Netlify 같은 정적 호스팅은 기본으로 HTTPS를 제공하므로 이 조건을 충족합니다.

2. 학생 음성이 외부 서버로 전송됨 (개인정보) ⚠️

• 앱 코드는 외부 API를 부르지 않습니다.
• 하지만 Chrome과 Edge는 내장 음성 인식을 처리하려고 학생의 음성을 Google 또는 Microsoft 서버로 보냅니다. 인터넷이 없으면 인식이 되지 않는 이유도 이것입니다.
• 학교에서 쓰기 전에 교내 개인정보 처리 지침을 확인하세요. 필요하면 학생과 보호자에게 안내하세요.
• 학생 이름 같은 개인정보는 입력받지 않습니다. 예시 문장도 가상 자료입니다.

3. 저장소 이름과 폴더 이름

• 현재 폴더 이름 my app에는 공백이 들어 있습니다.
• GitHub 저장소 이름은 공백 없이 english-reading-check처럼 정하는 것을 권장합니다. GitHub Pages 주소가 저장소 이름으로 만들어지기 때문입니다.
• 첫 화면 파일 이름은 index.html이어야 합니다. 현재 이름이 이미 index.html이라 그대로 두면 됩니다.

4. 공개 범위

• GitHub Pages로 배포하면 저장소와 사이트가 공개됩니다.
• PRD.md, README.md도 누구나 볼 수 있습니다. 두 파일에 민감한 내용은 없습니다.

5. 기기와 브라우저 차이

• 저장된 문장은 기기별, 브라우저별로 따로 남습니다. 교사가 입력한 문장이 학생 기기에 자동으로 옮겨가지 않습니다.
  • 학생이 문장을 직접 붙여넣도록 문장을 따로 나눠 주세요. 예: 학급 게시판에 올리기
• 학생 기기가 iPad라면 수업 전에 실제 기기로 꼭 테스트하세요.

6. 캐시

• 수정한 뒤 다시 배포해도 학생 브라우저가 이전 버전을 보여줄 수 있습니다.
• 이럴 때는 Ctrl + F5로 강력 새로고침을 하도록 안내하세요.