React에 텍스트 음성 변환 추가하기

텍스트 음성 변환은 현대 웹에서 빠르게 필수 기능이 되어 가고 있습니다. 접근성이나 참여도를 높이기 위해서든, 단순히 사용자에게 콘텐츠를 소비하는 또 다른 방법을 제공하기 위해서든, React 프로젝트에 음성을 추가하는 일은 생각보다 쉽습니다. 이 가이드에서는 브라우저 음성 합성의 작동 방식, 여러 접근 방식의 장단점, 그리고 React 앱에 TTS2Go를 연동하는 방법을 단계별로 설명합니다.

모든 최신 브라우저에는 Web Speech API가 내장되어 있습니다. window.speechSynthesis.speak()를 호출하면서 SpeechSynthesisUtterance를 전달하면 외부 서비스 없이도 텍스트를 소리 내어 읽게 할 수 있습니다. 무료이고, API 키가 필요 없으며, 전적으로 클라이언트에서 실행됩니다.

문제는 품질입니다. 브라우저 음성은 기계적으로 들리고, 운영체제와 브라우저마다 다르며, 선택할 수 있는 보이스도 제한적입니다. 같은 텍스트라도 기기에 따라 완전히 다르게 들릴 수 있습니다.

AI 기반 텍스트 음성 변환은 판도를 바꿔 놓았습니다. 신경망 음성 모델은 자연스러운 억양, 속도, 감정을 갖춘, 놀라울 만큼 사람 같은 오디오를 만들어 냅니다. 이런 서비스는 수십 개 언어와 수백 가지 보이스를 지원합니다.

다만 이런 오디오를 생성하려면 비용이 들고 API가 필요합니다. 그래서 중요한 질문이 생깁니다. 언제, 어떻게 생성해야 할까요?

한 가지 방법은 모든 오디오를 미리 생성해 정적 파일로 제공하는 것입니다. 오디오가 이미 CDN에 있으므로 즉시 재생되고, 품질도 매번 일정하다는 장점이 있습니다.

단점은 비용입니다. 누가 듣든 말든 모든 콘텐츠의 오디오 생성 비용을 지불해야 합니다. 모든 콘텐츠를 미리 알고 있어야 하므로 동적 텍스트는 사용할 수 없습니다. 콘텐츠가 바뀔 때마다 생성 파이프라인을 새로 돌려야 하고, 라이브러리가 커질수록 저장 비용도 늘어납니다.

대안은 사용자가 요청할 때만 오디오를 생성하는 것입니다. 사람들이 실제로 듣고 싶어 하는 콘텐츠에 대해서만 비용을 지불하므로 더 저렴하고, 동적 콘텐츠에도 사용할 수 있습니다.

하지만 여전히 생성 예산을 보호해야 합니다. TTS API에 제한 없이 접근할 수 있다면 누구든 비용이 큰 생성 작업을 일으킬 수 있습니다. 누가 언제 AI 오디오를 받을지 통제할 방법이 필요합니다.

TTS2Go는 품질, 비용, 단순함의 균형을 맞춘 영리한 방식을 사용합니다.

프런트엔드 API 키로 사이트에 SDK를 추가합니다. 이 API 키는 요청 도메인 차단과 속도 제한을 사용하므로 클라이언트 측 코드에 안전하게 둘 수 있습니다. 비밀 값이 아니라 식별 수단입니다.

어떤 콘텐츠에서 처음으로 누군가 TTS 버튼을 클릭하면, 그 사람은 곧바로 브라우저 음성 합성으로 콘텐츠를 듣게 됩니다. 동시에 백그라운드에서 TTS2Go로 생성 요청이 전송됩니다.

TTS2Go 대시보드에 로그인해 해당 요청을 수동으로 승인하거나, 설정한 기준을 충족하는 요청을 자동 승인하도록 AI 승인 시스템을 구성할 수 있습니다. 실제로 원하는 오디오에 대해서만 비용을 지불하므로 생성 예산을 완전히 통제할 수 있습니다.

요청이 승인되어 생성되고 나면, 같은 콘텐츠에서 TTS를 클릭하는 이후의 모든 사용자는 선택한 보이스로 된 고품질 AI 오디오를 듣게 됩니다. 오디오는 TTS2Go의 CDN에 캐시되므로 즉시 재생됩니다.

즉, 첫 방문자는 브라우저 TTS로 충분히 쓸 만한 경험을 얻고, 생성 비용은 승인을 통해 관리되며, 그 이후의 모든 사람은 추가 비용 없이 프리미엄 AI 오디오를 듣게 됩니다.

프로젝트 디렉터리에 TTS2Go React 패키지를 설치합니다.

npm install @tts2go/react

이 패키지는 gzip 압축 시 15KB 미만으로 가볍고, React 외에는 peer 의존성이 전혀 없습니다.

컴포넌트 트리의 루트에서 애플리케이션을 TTS2GoProvider로 감쌉니다. API 키와 프로젝트 ID를 config로 전달합니다.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

어느 컴포넌트에서든 useTTS 훅을 사용하면 재생, 일시 정지, 정지 컨트롤을 얻을 수 있습니다. 미리 만들어진 TTSButton을 넣어 스피커 아이콘을 빠르게 추가할 수도 있습니다.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

처음 재생을 클릭한 사용자는 브라우저 TTS를 듣고, 그동안 생성 요청이 TTS2Go 대시보드로 전송됩니다. 승인되고 나면 이후의 모든 사용자는 AI 오디오를 듣게 됩니다.

보이스 선택, 발음을 세밀하게 조정하는 SSML 지원, 화면의 텍스트를 읽는 말과 동기화하는 하이라이트 API를 살펴보세요.

고급 패턴과 예제는 tts2go.com/docs/react의 전체 React 문서에서 확인하세요.