🏆 AI스터디 21기 3주차 베스트 사례 큐레이션 - 개발&자동화

📚 21기 고마워클코

✍️ AI를 활용하여 비즈니스 영어 스피킹 연습 웹앱 제작

이경록 (Gary)

하려던 것 📝

• AI를 활용하여 비즈니스 영어 스피킹 웹앱을 개발 및 배포한 사례

• 실리콘밸리/월스트릿에서 사용되는 비즈니스 영어 표현 연습 웹앱을 개발하고 배포하고자 함

• 단순 암기가 아닌, 네이티브 표현과 기초 표현을 비교하며 음성 인식 기반 실제 발화 연습을 제공하고자 함

• VC 투자, 비즈니스 협상 등 실무 시나리오별로 구성하여 한국어 컨텍스트 설명과 함께 학습 효과를 극대화하고자 함

활용한 툴 ⚒️

• Claude Code (CLI) : 앱 전체 아키텍처 설계, React/TypeScript 컴포넌트 개발, 10개 시나리오 × 50개 문장(총 420개) 대량 콘텐츠 생성, Web Speech API + MediaRecorder 연동, 녹음 재생 기능 구현 및 디버깅, Vercel 프로덕션 배포에 활용함

진행 세부 내용 🔍

#### 1️⃣ 시나리오별 연습 문장 대량 확장

• 시도한 방법과 접근 방식: 기존 8개뿐이던 연습 문장을 50개로 확장하여 학습 콘텐츠의 깊이를 강화함. 다른 완성된 파일(group-meetings.json 등)의 65개 문장 패턴을 분석한 뒤, 동일한 품질과 구조로 대량 생성을 요청함

• 사용한 프롬프트나 코드:

\`\`\` vc-investment.json과 business-situations.json의 practice 시나리오들이 \n각각 8개 문장밖에 없어서, 다른 파일들처럼 50개로 확장해줘. \`\`\`

• 얻은 결과나 피드백: VC & Investment 5개 시나리오와 Business Situations 5개 시나리오에 걸쳐 총 420개 문장이 생성됨. 각 문장에 네이티브 표현(text), 클리셰 버전(cliche), 한국어 컨텍스트 설명(context), 난이도(difficulty), 태그(tags)가 모두 포함됨

#### 2️⃣ 녹음 재생 기능 구현

• 시도한 방법과 접근 방식: 기존 앱은 Web Speech API로 음성을 텍스트로만 변환하였으나, 사용자가 본인 발음을 직접 들어볼 수 있도록 MediaRecorder API를 병행하여 녹음 → 재생 기능을 추가하고자 함

• 사용한 프롬프트나 코드:

\`\`\` 녹음을 누르고 완료하면 본인 녹음한 거를 재생해볼 수 있는 \n버튼을 옆에 만들 수 없을까? \`\`\`

• 얻은 결과나 피드백: 마이크 버튼 좌측에 ▶ 재생 버튼이 나타나는 UI가 구현됨. `useSpeechRecognition` 훅에 MediaRecorder를 통합하여 녹음과 음성 인식이 동시에 동작하며, 녹음 완료 후 본인 음성을 즉시 재생할 수 있게 됨

#### 3️⃣ 녹음 재생 버그 디버깅 및 해결

• 시도한 방법과 접근 방식: 초기 구현에서 재생 버튼은 나타나지만 소리가 나지 않는 문제가 발생함. 브라우저 네이티브 `

• 사용한 프롬프트나 코드:

\`\`\` 녹음 후 버튼은 생기는데 플레이되는 음성이 없어 한번 기능 \n제대로 작동하는지 확인할 수 있어? \`\`\`

• 얻은 결과나 피드백: 세 가지 핵심 문제를 발견하고 해결함

- 레이스 컨디션: `getUserMedia()`가 async인데 `recognition.start()`가 먼저 끝나는 타이밍 문제 발생 → MediaRecorder를 먼저 await한 후 SpeechRecognition 시작하도록 순서를 변경함 - 데이터 수집 누락: `recorder.start()`에 timeslice 없이 호출하면 stop 시점에만 데이터가 들어옴 → `recorder.start(100)`으로 100ms마다 주기적 수집하도록 변경함 - 재생 방식: `new Audio(blobURL)`이 일부 브라우저에서 조용히 실패 → DOM `