웹 개발텍스트 음성 변환

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

TTS2Go로 브라우저 TTS 폴백과 AI 오디오를 결합해, Svelte 앱에 비용 효율적이고 고품질인 텍스트 음성 변환을 추가하는 방법을 알아봅니다.

Anthony Morris·
Svelte에 텍스트 음성 변환 추가하기

Svelte는 단순함과 성능을 중심으로 설계되었으며, Svelte 앱에 텍스트 음성 변환(TTS)을 추가하는 일 역시 그만큼 간단할 수 있습니다.

콘텐츠의 접근성을 높이고 싶든, 오디오 읽기 경험을 만들고 싶든, 음성 피드백을 추가하고 싶든 TTS는 몇 분 만에 연동할 수 있습니다. 이 가이드에서는 브라우저 음성 합성의 작동 방식, 여러 TTS 접근 방식의 장단점, 그리고 Svelte 프로젝트에서 TTS2Go를 실행하는 방법을 설명합니다.

브라우저 음성 합성의 작동 방식

최신 브라우저에는 Web Speech API가 포함되어 있어, window.speechSynthesis.speak()를 호출하면서 SpeechSynthesisUtterance를 전달하면 텍스트를 소리 내어 읽을 수 있습니다.

주요 특징:

  • 의존성 없음: 모든 것이 브라우저에서 실행됩니다.
  • API 키나 서버 호출 불필요: 백엔드 연동이 필요 없습니다.
  • 비용 없음: 시스템에 내장된 음성을 사용합니다.

하지만 단점도 있습니다.

  • 기계적이고 일관성 없는 품질: 음성이 인공적으로 들리는 경우가 많습니다.
  • 플랫폼 의존적: Chrome과 Firefox, macOS와 Windows에서 음성이 다릅니다.
  • 제한적인 보이스 선택지: 최신 AI TTS에 비해 지원하는 언어와 스타일이 적습니다.

AI 생성 음성의 부상

신경망 텍스트 음성 변환 모델은 사실적인 억양과 속도로 자연스럽게 들리는 오디오를 만들어 냅니다. 다양한 언어, 억양, 보이스 스타일을 지원하므로 프로덕션 수준의 내레이션과 음성 경험에 이상적입니다.

장단점:

  • 장점:
  • 고품질의 자연스러운 오디오
  • 폭넓은 언어 및 보이스 지원
  • 기기와 브라우저에 관계없이 일관된 소리
  • 단점:
  • 비용: 생성된 오디오의 글자 수 또는 초 단위로 비용을 지불합니다.
  • API 호출: 서버 측 연동 또는 인증된 클라이언트 측 연동이 필요합니다.

여기서 설계상의 질문이 생깁니다. 오디오 품질과 생성 비용의 균형을 어떻게 맞추고, 오디오가 생성되는 시점을 어떻게 통제할까요?

오디오 사전 생성

한 가지 방법은 모든 콘텐츠의 오디오를 미리 생성해 CDN에 호스팅하는 것입니다.

작동 방식:

  • 모든 텍스트 콘텐츠를 미리 오디오 파일로 변환합니다.
  • 해당 파일을 업로드해 CDN에서 제공합니다.
  • 사용자는 생성 지연 없이 즉시 재생할 수 있습니다.

장점:

  • 모든 방문자가 즉시 재생 가능
  • 일관된 고품질 오디오
  • 단순한 런타임 동작(파일만 재생하면 됨)

단점:

  • 한 번도 재생되지 않을 수도 있는 콘텐츠의 오디오 생성 비용까지 지불해야 합니다.
  • 모든 콘텐츠를 미리 알고 있어야 합니다.
  • 콘텐츠가 바뀔 때마다 다시 생성해야 합니다.
  • 콘텐츠 양에 비례해 저장 및 CDN 비용이 늘어납니다.

동적이거나 자주 업데이트되는 콘텐츠라면 이 방식은 금세 비용이 많이 들고 운영 부담도 커집니다.

필요할 때 지연 생성

또 다른 전략은 온디맨드(지연) 생성으로, 사용자가 실제로 재생을 클릭했을 때만 오디오를 만드는 방식입니다.

작동 방식:

  • 사용자가 어떤 콘텐츠의 오디오를 요청하면 TTS API를 호출합니다.
  • 생성된 오디오를 캐시하거나 저장합니다.
  • 이후 요청에서는 캐시된 오디오를 재사용합니다.

장점:

  • 훨씬 비용 효율적입니다. 사용자가 실제로 듣는 콘텐츠에 대해서만 비용을 지불합니다.
  • 동적 콘텐츠와 사용자 생성 콘텐츠를 자연스럽게 지원합니다.
  • 사용되지 않는 콘텐츠에 대한 불필요한 생성을 줄입니다.

과제:

  • 통제 장치가 없으면 누구든 비용이 큰 생성 작업을 일으킬 수 있습니다.
  • 어떤 콘텐츠에 언제 오디오를 생성할지 관리할 방법이 필요합니다.
  • 사용자 경험(초기 지연)과 예산 관리 사이에서 균형을 맞춰야 합니다.

TTS2Go의 해결 방법

TTS2Go는 브라우저 TTS와 AI TTS를 결합해 품질, 비용, 단순함의 균형을 맞춥니다.

핵심 아이디어:

  1. 안전한 클라이언트 측 키
  • 프런트엔드 API 키로 사이트에 TTS2Go SDK를 추가합니다.

1단계: SDK 설치

TTS2Go Svelte 패키지를 설치합니다.


npm install @tts2go/svelte

이 패키지는 Svelte 5에서 작동하며 Svelte의 반응성 모델과 자연스럽게 어우러집니다.

2단계: 클라이언트 생성

프로젝트 자격 증명으로 TTS2Go 클라이언트를 초기화합니다. Svelte에서는 컴포넌트 안에서 직접 클라이언트를 만들거나 공유 모듈에서 만들 수 있습니다.



import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});
  • apiKey: 프런트엔드에서 사용해도 안전한 공개 TTS2Go 키입니다.
  • projectId: 생성, 승인, 분석에 사용할 TTS2Go 프로젝트를 식별합니다.

3단계: Svelte에 텍스트 음성 변환 추가

createTTS를 사용하면 재생 컨트롤과 상태를 갖춘 반응형 스토어를 얻을 수 있습니다.



import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

다음 단계

이제 다음을 해 볼 수 있습니다.

  • 브랜드나 콘텐츠 유형에 맞는 보이스 선택을 살펴보세요.
  • SSML로 발음, 쉼, 강세를 세밀하게 제어하세요.
  • 텍스트 하이라이트 API를 연동해 텍스트와 음성 오디오를 동기화하세요.

전체 Svelte 문서와 고급 예제는 다음에서 확인하세요.

  • https://tts2go.com/docs/svelte
전체 게시물로 돌아가기