제작물 링크: https://speaking-master.vercel.app/
하려던 것 📝
AI를 활용하여 비즈니스 영어 스피킹 연습 웹앱(Speaking Master)을 개발 및 배포한 사례.
실리콘밸리/월스트릿에서 실제로 쓰이는 비즈니스 영어 표현을 연습할 수 있는 웹앱을 개발하고 배포하고자 함. 단순 암기가 아닌, 네이티브 표현과 기초적인 표현을 비교하며 음성 인식 기반으로 실제 발화 연습을 할 수 있는 앱을 만들고자 함. 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 시나리오들이
각각 8개 문장밖에 없어서, 다른 파일들처럼 50개로 확장해줘.얻은 결과나 피드백: VC & Investment 5개 시나리오(Deal Sourcing, Due Diligence, Term Sheet, Portfolio Board Meeting, LP Updates)와 Business Situations 5개 시나리오(Negotiation, Project Updates, Giving Feedback, Networking, Small Talk)에 걸쳐 총 420개 문장이 생성됨. 각 문장에 네이티브 표현(text), 클리셰 버전(cliche), 한국어 컨텍스트 설명(context), 난이도(difficulty), 태그(tags)가 모두 포함됨.
2️⃣ 녹음 재생 기능 구현
시도한 방법과 접근 방식: 기존 앱은 Web Speech API로 음성을 텍스트로만 변환하고, 실제 녹음된 오디오는 저장하지 않았음. 사용자가 본인 발음을 직접 들어볼 수 있도록 MediaRecorder API를 병행하여 녹음 → 재생 기능을 추가하고자 함.
사용한 프롬프트나 코드:
녹음을 누르고 완료하면 본인 녹음한 거를 재생해볼 수 있는
버튼을 옆에 만들 수 없을까?얻은 결과나 피드백: 마이크 버튼 좌측에 ▶ 재생 버튼이 나타나는 UI가 구현됨. useSpeechRecognition 훅에 MediaRecorder를 통합하여 녹음과 음성 인식이 동시에 동작하며, 녹음 완료 후 본인 음성을 즉시 재생할 수 있게 됨.
3️⃣ 녹음 재생 버그 디버깅 및 해결
시도한 방법과 접근 방식: 초기 구현에서 재생 버튼은 나타나지만 소리가 나지 않는 문제가 발생함. 브라우저 네이티브 <audio controls>를 노출시켜 문제를 분리하고, 콘솔 로그로 blob 데이터를 확인하는 방식으로 디버깅함.
사용한 프롬프트나 코드:
녹음 후 버튼은 생기는데 플레이되는 음성이 없어 한번 기능
제대로 작동하는지 확인할 수 있어?얻은 결과나 피드백: 세 가지 핵심 문제를 발견하고 해결함:
레이스 컨디션:
getUserMedia()가 async인데recognition.start()가 먼저 끝나는 타이밍 문제 → MediaRecorder를 먼저 await한 후 SpeechRecognition 시작하도록 순서 변경데이터 수집 누락:
recorder.start()에 timeslice 없이 호출하면 stop 시점에만 데이터가 들어옴 →recorder.start(100)으로 100ms마다 주기적 수집재생 방식:
new Audio(blobURL)이 일부 브라우저에서 조용히 실패 → DOM<audio>엘리먼트에 직접 src를 설정하는 방식으로 변경
시행착오 ⚠️
백그라운드 에이전트 실패: 10개 시나리오 확장을 3개 병렬 에이전트로 위임했으나, 모두 사용량 제한으로 실패함. 이후 직접 하나씩 순차적으로 작업하여 완료함. 대량 콘텐츠 생성 시 에이전트 위임보다 직접 처리가 더 안정적임을 확인함.
MediaRecorder와 SpeechRecognition 동시 사용 충돌: 두 API가 동시에 마이크를 점유할 때 발생하는 타이밍 문제를 해결하기 위해 세 번의 반복 수정이 필요했음. 최종적으로 ①MediaRecorder await 후 시작 → ②SpeechRecognition 시작 → ③onend에서 500ms 딜레이 후 MediaRecorder 정지하는 순서로 해결함.
new Audio() vs DOM <audio> 엘리먼트: 프로그래밍적으로 생성한 Audio 객체가 blob URL 재생 시 일부 브라우저에서 실패하는 문제를 발견함. React ref를 통해 DOM에 렌더링된 <audio> 엘리먼트를 직접 제어하는 방식으로 전환하여 해결함. 디버깅 시 <audio controls>를 임시로 노출시키는 것이 문제 분리에 효과적이었음.
배운 점 📚
AI로 도메인 전문 콘텐츠를 대량 생성할 수 있음: VC 텀시트 협상, LP 펀드레이징, 실사(Due Diligence) 등 고도로 전문적인 비즈니스 영어 표현 420개를 일관된 구조(text/cliche/context/difficulty/tags)로 생성할 수 있었음. 기존 8개 문장의 패턴과 톤을 학습시킨 뒤 확장하는 방식이 품질 유지에 효과적이었음.
브라우저 API 간 충돌은 순서(sequencing)로 해결함: Web Speech API와 MediaRecorder를 동시에 사용할 때, 비동기 초기화 순서와 종료 타이밍이 핵심이었음. "먼저 시작한 것을 나중에 끝내는" 원칙으로 안정적인 동작을 확보함.
디버깅 시 시각화가 가장 빠른 해결책임: 숨겨진 오디오 엘리먼트를 <audio controls>로 노출시키자 문제의 원인(blob은 정상, 재생 방식이 문제)을 즉시 파악할 수 있었음. 복잡한 로그보다 UI로 상태를 보여주는 것이 디버깅에 효과적임을 체감함.
향후 계획 🧭
시나리 오를 더 다양하게 확장하고자 함 (스타트업 피칭, 채용 면접, 위기 커뮤니케이션 등).
영어 외에 다양한 언어(일본어 비즈니스, 중국어 비즈니스 등)로도 콘텐츠를 만들어보고자 함.
난이도별 학습 경로를 구성하여 Beginner → Intermediate → Advanced 단계별로 진행할 수 있도록 개선하고자 함.
도움이 필요한 점 🤝
실제 비즈니스 영어 학습자들의 사용성 피드백을 받아보고 싶음 — 문장의 난이도 적절성, UI 흐름, 녹음 재생 기능의 유용성 등에 대한 의견이 필요함.
