TeachTouch : 디지털 약자를 위한 키오스크 학습 가이드 서비스📚

Github: 2025_SEASONTHON_TEAM_77_FE

2025.09

---

TTS

본선 진출 후 리팩토링 과정에서 못다한 tts 기능을 넣기로 했다.

이미 api는 만들어졌고 text를 서버에 보낸 후 응답값으로 나온 audioContent인 base64를 MP3 변환해서 재생하면 된다.

React Context

일단 TTS on/off 상태를 한 컴포넌트 내에서만 아니라 전역적으로 관리하고 싶어서 React Context를 사용했다.

(isTTSEnabled라는 true/false만 전역으로 관리하면 되기 때문에 이것만을 위해서 redux같은 라이브러리는 헤비하다고 생각했다)

useTTSPlayer 훅

여러 컴포넌트에서 동일한 TTS 재생 로직을 사용할 수 있도록 TTS 기능을 useTTSPlayer 훅으로 분리했다

base64 오디오 처리

• 서버에서 base64로 인코딩된 MP3 데이터를 받음
• atob()로 base64 -> 바이너리 문자열로 변환
• Uint8Array로 실제 바이너리 데이터로 변환하여 Blob 객체를 생성
• URL.createObjectURL()로 브라우저에서 재생 가능한 URL을 만들어 Audio 객체로 재생
• Audio 객체 사용 후 URL.revokeObjectURL()로 메모리 해제해서 메모리 누수 방지

응답값이 base64라 오디오로 재생할 수 있도록 MP3 타입의 Blob으로 만들어야 했다.

---

이렇게 하고나니 중간에 TTS를 끄더라도 재생 중인 Audio 객체는 멈추지 않는다는 문제가 있었다. 사용자가 TTS 기능을 끄거나 화면을 이동했을 때 즉시 재생이 중단되지 않는 것이다.

• TTS 시작 전에 무조건 이전 TTS를 stop 시키고 나서 재생을 시작하거나
• isTTSEnabled 값이 false로 바뀌는 순간 자동으로 재생 중인 음성을 끄는 useEffect를 추가하거나
• 페이지 이동 시 stopTTS()를 호출하거나

등으로 발전시켜야 할 것 같다…