[Day 52] STT(Speech-To-Text) 적용기 - Part 2: UI랑 연결해보기

음성 인식을 UI에 연결해 보자!

전에는 SFSpeechRecognizer를 통해 기본적인 STT(Speech-To-Text) 기능을 구현해봤다.
오늘은 거기서 한 발 더 나아가서, 음성 인식 버튼을 누르면 인식이 시작되고, 말한 내용을 실시간으로 텍스트 필드에 띄우는 기능까지 구현!

🧠 STT 시스템 복습

음성 인식 기능을 위해 사용한 주요 구성 요소:

구성 요소	설명
SFSpeechRecognizer	사용자의 말을 텍스트로 바꿔주는 핵심 객체
AVAudioEngine	마이크에서 실시간으로 음성 데이터를 받아오는 오디오 엔진
SFSpeechAudioBufferRecognitionRequest	오디오 데이터를 전송하는 역할 (실시간 스트리밍 가능)
SFSpeechRecognitionTask	실제로 인식을 수행하는 객체 (실시간 결과를 콜백으로 반환)

🛠️ 실제 구현 흐름

recordButton.rx.tap
  .map { Reactor.Action.startSpeechRecognition }
  .bind(to: reactor.action)
  .disposed(by: disposeBag)

reactor.state.map { $0.transcribedText }
  .bind(to: textLabel.rx.text)
  .disposed(by: disposeBag)

사용자가 버튼을 누르면 Action발생 상태(State)의 변화는 텍스트 라벨에 자동으로 반영하게 바인딩!

enum Action {
  case startSpeechRecognition
}

enum Mutation {
  case setTranscribedText(String)
}

Reactor에는 위에 처럼 구현하고,

func mutate(action: Action) -> Observable<Mutation> {
  switch action {
  case .startSpeechRecognition:
    return speechService.startRecognition()
      .map { Mutation.setTranscribedText($0) }
  }
}

Action은 사용자의 입력, Mutation은 상태 변경 이벤트 State는 실제 뷰에 보여줄 상태야

비즈니스 로직은 Sevice에게 위임하고, 받은 결과로 Mutation을 발생시켜요

func startRecognition() -> Observable<String> {
  return Observable.create { observer in
    self.startRecording { result in
      observer.onNext(result)
    }
    return Disposables.create {
      self.audioEngine.stop()
      self.recognitionTask?.cancel()
    }
  }
}

맺으며: 춘식이와 함께하는 스마트한 개발

ReactorKit 구조 안에서 STT도 문제없다! 음성 인식도 Rx로 처리하면 깔끔 그 자체.

오늘도 오류 내며 자란 춘식이였습니다. 🐾 더 열심히 노력 해서 좋은 iOS Developer가 되자!

혹시 이 글을 보시는 분들 중 더 유용한 팁이 있다면 댓글로 많이 알려주세요!