📘 [3편] 음성으로 면접 답변하기 – STT(음성 인식) 기능 추가

📘 [3편] 음성으로 면접 답변하기 – STT(음성 인식) 기능 추가

---

이제 GPT 면접관이 질문을 던지면,
사용자는 “말”로 답변할 수 있어야 하죠.
이번 편에서는 브라우저나 앱에서 음성 인식(STT) 기능을 넣어
사용자가 실제로 말한 내용을 텍스트로 변환하는 기능을 구현합니다.

---

🎯 이번 목표

✅ Web에서는 Web Speech API로 음성 인식 구현
✅ React Native는 react-native-voice 설치 안내
✅ 실시간 음성 인식 결과 표시
✅ 인식된 답변을 GPT에 전달할 준비 완료

---

💬 웹 기준: Web Speech API (크롬 전용)

✅ 1. SpeechRecognition 초기화

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'ko-KR';
recognition.interimResults = false;

✅ 2. 음성 인식 실행 및 결과 콜백

recognition.start();

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  console.log('🗣 인식된 답변:', transcript);
};

recognition.onerror = (event) => {
  console.error('🎤 음성 인식 오류:', event.error);
};

---

🧪 실전 코드 예시

반응형

import React, { useState } from 'react';

function SpeechInput() {
  const [text, setText] = useState('');

  const handleStart = () => {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
      alert('브라우저가 음성 인식을 지원하지 않습니다');
      return;
    }

    const recognition = new SpeechRecognition();
    recognition.lang = 'ko-KR';
    recognition.interimResults = false;

    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      setText(transcript);
    };

    recognition.onerror = (event) => {
      console.error('음성 인식 에러:', event.error);
    };

    recognition.start();
  };

  return (
    <div>
      <button onClick={handleStart}>🎙️ 말하기 시작</button>
      <p>📝 인식 결과: {text}</p>
    </div>
  );
}

export default SpeechInput;

---

📱 모바일 기준: React Native (iOS/Android)

라이브러리: react-native-voice

✅ 설치

npm install @react-native-voice/voice
npx pod-install

✅ 사용 예

import Voice from '@react-native-voice/voice';

Voice.onSpeechResults = (event) => {
  console.log('음성 결과:', event.value[0]);
};

Voice.start('ko-KR');

👉 이 글에서는 웹 구현을 먼저 완성하고, 앱 버전은 보너스 편에서 따로 다룹니다.

---

✅ 이번 글 요약

항목 완료 여부

음성 인식 기능 브라우저에서 구현	✅
사용자가 말하면 텍스트로 전환	✅
실시간 결과 출력	✅
모바일 음성 입력 예고	🔜 (후속편 예정)

---

📘 다음 글 예고

4편에서는 이렇게 말한 답변을 GPT에 보내고,
GPT가 면접관처럼 평가하는 기능을 만듭니다.

• GPT 프롬프트 설계 (면접관 역할 시뮬레이션)
• 답변 구조 평가, 전달력, 어휘력 등 점수화
• 개선 포인트 도출

---

 

react 음성 인식,react speech api,web speech api 예제,react-native-voice 사용법,음성 인식 stt react,면접 답변 음성 인식,openai 면접 트레이너 stt,gpt react 음성 입력,react-native ai 앱,gpt 면접 앱 음성 기능