📣 Web Speech API로 프론트엔드에서 TTS 구현하기

안녕하세요, 구독자 님!
뉴스레터를 구독해신 분들께 매번 감사드립니다. 🙇‍♂️

최근에 블로그에 새로운 기능을 하나 추가했습니다. 바로 음성으로 포스트를 읽어주는 TTS(Text to Speech) 기능입니다.

뜬금없이 웬 TTS냐고 생각하실 수도 있겠지만, 저는 사실 예전부터 TTS를 블로그에 추가하고 싶었습니다. 왜냐하면 저는 보통 작성한 포스트를 퇴고할 때, 눈으로만 읽는 게 아니라 직접 소리 내어 읽어 보기도 하고 TTS 도구를 이용해 음성으로 변환해 들어보기도 하거든요. 즉, TTS는 제가 블로그 포스트를 작성할 때 유용하게 사용하는 기능 이었습니다.

기존에는 안드로이드 기기에서 제공되는 구글 TTS를 사용했는데 불편한 점이 꽤 있었습니다. 그래서 TTS를 블로그에 직접 구현하고 싶다는 생각이 들었는데요, 마침 JavaScript에서 음성을 다룰 수 있는 Web Speech API를 알게 되어 이를 활용해 구현했습니다.

그래서 오늘은 Web Speech API를 활용해 프론트엔드에서 TTS를 구현한 후기 에 대해 소개하려고 합니다.