웹사이트용 TTS: 글마다 오디오 파일 하나 만들기
웹사이트에 TTS를 넣으려면 글마다 서버에서 오디오를 한 번 생성해 파일로 저장하고, 페이지에서는 HTML 오디오 플레이어로 재생하세요.

웹사이트에 텍스트 음성 변환(TTS)을 넣으려면 글을 발행하거나 수정할 때 서버에서 그 글의 오디오 파일을 생성해 저장하고, 페이지에서는 HTML <audio> 플레이어로 재생하세요. 그러면 모든 방문자가 같은 녹음을 듣고, 합성은 방문할 때마다가 아니라 텍스트 버전마다 한 번만 실행됩니다. Sume에서는 글 하나가 백엔드에서 호출하는 TTS 1.0 Job 하나(POST /v1/tts-1.0/generate)입니다.
Sume 관련 사실은 Sume API 레퍼런스의 TTS 1.0 스키마와 인증, 미디어 입력 문서에서 가져왔습니다. Sume API 레퍼런스는 API 레퍼런스 문서의 바탕이 되는 OpenAPI 문서입니다. 플레이어 동작은 MDN의 `<audio>` 요소 페이지를 따릅니다. 모두 2026-09-27에 확인했습니다. 요청 필드 전체는 텍스트 음성 변환 API에서 다룹니다.
글을 발행할 때 오디오는 어떻게 생성하나요?
CMS 웹훅, 빌드 단계, 백그라운드 작업처럼 이미 발행에 반응하고 있는 곳에서 실행하세요. 글마다 할 일은 다음과 같습니다.
- HTML 마크업을 뺀 글의 일반 텍스트를
transcript로 보내고, 음성은 사이트 전체에 하나만 쓰세요. Idempotency-Key는article-812-rev-5처럼 글 ID와 리비전으로 만드세요. 같은 키와 본문으로 재시도하면 두 번째 Job을 과금하는 대신 원래 Job이 반환됩니다.- Job이 끝날 때 콜백을 받으려면 공개 HTTPS
webhook_url을 넘기고, 아니면status_url을 폴링하세요. 콜백은 종료 상태(job.completed,job.failed,job.canceled)에서만 오고 서명되어 있으므로, 받은 콜백을 믿기 전에 서명을 검증하세요. GET /v1/jobs/{id}/result를 읽으세요. 현재 코드에서 여기의audio_url은 Sume 미디어 호스트에 있는 파일이며, Sume는 생성 결과를 이 호스트로 미러링합니다. 이 URL을 글과 함께 저장하거나 파일을 자체 스토리지로 복사하세요. Sume 결과 URL이 얼마나 유지되는지를 참고하세요.
| 필드 | 글 하나 기준 |
|---|---|
transcript | 글 텍스트, 1–20,000자. 공백과 문장 부호도 사용량에 포함. |
voice.id 또는 avatar_handle | 사이트 전체에 음성 하나. |
language | 영어가 아닌 페이지에 지정. 생략하면 영어. |
output_format | 기본값은 44,100 Hz, 128 kbps의 MP3. |
webhook_url | 공개 HTTPS만 가능. 종료 상태 콜백만. |
Idempotency-Key 헤더 | 글 ID와 리비전. 같은 페이로드에만 재사용. |
페이지에서 바로 TTS API를 호출하면 왜 안 되나요?
키가 모든 방문자에게 전달되기 때문입니다. Sume API 키는 크레딧을 소모하며 브라우저에서 안전하게 쓸 수 있는 변형이 없으므로, 클라이언트 JavaScript에 넣으면 안 됩니다. 브라우저와 모바일 클라이언트는 백엔드를 호출하고, 백엔드가 키를 붙여야 합니다. 이 프록시 패턴은 브라우저에서 Sume API 호출하기에서 보여 줍니다. 발행할 때 생성하면 페이지 조회가 유료 Job을 시작하는 일도 없습니다.
글에 오디오 플레이어는 어떻게 넣나요?
파일 URL을 넣은 <audio> 요소 하나면 충분합니다. MDN 문서에 따르면 controls는 듣는 사람에게 볼륨, 탐색, 일시정지와 재개 컨트롤을 제공하고, preload="metadata"는 길이 같은 오디오 메타데이터만 가져옵니다. preload의 기본값은 브라우저마다 다르고 명세는 metadata를 권장하며, 브라우저가 이 속성을 반드시 따라야 하는 것도 아닙니다. 이 속성은 힌트입니다.
재생 중에 단어를 하나씩 강조하려면 단어별 타이밍도 함께 요청하세요. 단어 하이라이트 TTS를 참고하세요.
<figure>
<figcaption>Listen to this article</figcaption>
<audio controls preload="metadata"
src="https://example.com/audio/article-812-rev-5.mp3"></audio>
</figure>긴 글과 수정은 어떻게 처리하나요?
- 요청 하나는 최대 20,000자까지 받으며, 합성된 오디오가 1,200초를 넘으면
tts_duration_exceeded로 실패하고 크레딧은 확정되지 않습니다. 더 긴 글은 문단 경계에서 나누고, 같은 음성을 유지한 채 긴 텍스트 TTS에서처럼 부분을 이어 붙이세요. - 텍스트가 바뀌면 새 리비전을 새 키로 생성하고 이전 파일을 교체하세요. 그래야 오디오가 항상 페이지와 일치합니다.
글 오디오의 비용은 얼마인가요?
TTS 1.0 요금은 1,000자당 $0.0475이며, 기본적으로 5.5% 에이전트 수수료가 더해집니다. 공백과 문장 부호를 포함해 대본의 모든 글자가 과금 대상입니다. 이 요율이면 10,000자짜리 글은 리비전마다 한 번, 수수료 전 $0.475입니다. 페이지를 조회할 때는 저장된 파일을 재생할 뿐 TTS API를 호출하지 않습니다.
출처
관련 글
활용 사례 카테고리의 다른 글
- 여러 목소리로 TTS 만들기: 대사마다 음성 하나씩
TTS 요청은 음성 하나로 말합니다. 대화라면 각 화자의 대사를 그 화자의 음성으로 합성한 뒤, 클립을 대본 순서대로 이어 붙이세요.
- 가상 착용(Virtual Try-On) 영상 API: 사람에게 옷 입히기
Sume API로 가상 착용 영상을 만들려면 사진을 담아 sume-virtual-try-on이나 sume-virtual-fitting을 호출하거나, 스틸을 만든 뒤 움직임을 입히세요.
- AI로 흰 배경 제품 사진 만드는 방법
배경 제거 도구로 제품을 오려 낸 PNG를 흰 바탕에 합치거나, 이미지 모델이 사진을 흰 배경으로 다시 렌더링하게 하세요. 두 방법 모두 Sume로 할 수 있습니다.
- AI 앨범 커버 생성기: 3000×3000 정사각형 아트
정사각형 앨범 아트를 생성한 뒤 업스케일하세요. Apple은 최소 3000×3000을 권장합니다. Sume에서 2400×2400으로 생성해 1.25배 업스케일하면 3000×3000이 됩니다.
작성자 Sume