프레임워크 없이 구현한 실시간 다국어 Speech-to-Text 웹 앱

Context

실시간 음성 인식 기능을 구현하기 위한 복잡한 백엔드 인프라 구축 부담. 브라우저 환경에서 즉각적으로 작동하는 가벼운 STT 서비스 필요성.

Technical Solution

• HTML/CSS/Vanilla JavaScript 기반의 서버리스 프론트엔드 아키텍처 설계
• Browser API를 활용한 사용자 마이크로폰 권한 획득 및 오디오 캡처 로직 구현
• Google AI Studio API 연동을 통한 실시간 음성 데이터의 텍스트 변환 처리
• 20개 언어 선택 기능을 지원하는 동적 드롭다운 및 API 요청 파라미터 매핑
• Netlify 정적 호스팅을 이용한 배포 파이프라인 구축으로 인프라 관리 비용 제거
• Clipboard API와 Web Share API를 활용한 변환 텍스트의 복사 및 공유 기능 구현

Key Takeaway

외부 AI API와 표준 Browser API의 조합을 통해 백엔드 없이도 높은 기능성을 갖춘 유틸리티 앱 구현 가능.