피드로 돌아가기
Turn Your Phone Into Voice Input for Any React Text Field
Dev.toDev.to
Frontend

Client-side STT 기반의 Privacy-First 음성 입력 릴레이 아키텍처 구현

Turn Your Phone Into Voice Input for Any React Text Field

Gabor Tatar2026년 5월 25일4intermediate

Context

Web Speech API의 브라우저별 호환성 문제와 복잡한 연결 설정으로 인한 개발 공수 증가 발생. 기존 서버 중심 STT 구조는 오디오 데이터 전송 과정에서 심각한 개인정보 유출 및 보안 리스크를 내포함.

Technical Solution

  • Web Speech API를 활용한 Phone-side 로컬 STT 처리로 서버 내 오디오 데이터 저장 원천 차단
  • 256-bit Secret 및 384-bit Session Token 기반의 Cryptographic Pairing을 통한 기기 간 보안 연결
  • In-memory Session 저장소와 30-minute Sliding TTL 적용으로 DB 의존성 제거 및 리소스 최적화
  • Server-Sent Events(SSE)를 통한 Phone-to-Desktop 실시간 텍스트 스트리밍 구조 설계
  • Provider 추상화 레이어를 통해 Web Speech API 외 Soniox 등 외부 엔진으로의 확장성 확보
  • React Hook 기반의 Interface 설계로 Input Field 포커스 상태에 따른 동적 텍스트 매핑 구현

- 민감 데이터 처리 시 오디오 원본 대신 텍스트 결과물만 전송하는 Client-side Processing 검토 - Stateless 환경에서 빠른 기기 페어링을 위해 Cryptographic Pairing 및 In-memory TTL 세션 적용 - SSE를 활용한 단방향 실시간 데이터 스트리밍으로 HTTP 폴링 오버헤드 제거

원문 읽기