5교시의 브라우저 내장 음성은 간편하지만 다소 기계적입니다. 이번에는 서버에서 OpenAI TTS API를 호출해 사람에 가까운 음성 mp3 파일을 만듭니다.
DAY 1 · 6교시 · 60분
OpenAI Cloud TTS로 자연스러운 내레이션 만들기
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
OpenAI 음성 합성 API(gpt-4o-mini-tts, tts-1)로 대본 내레이션을 자연스러운 음성 파일로 생성한다.
🗂️강의 슬라이드
슬라이드 1 / 10
왜 클라우드 TTS로 올릴까
- 5교시 브라우저 음성은 무료·간편하지만 다소 기계적이고 브라우저마다 다릅니다.
- 클라우드 TTS(OpenAI)는 사람에 가까운 자연스러운 음성을 일관되게 만듭니다.
- 결과가 mp3 '파일'이라 이후 영상 합성 단계에서 그대로 쓸 수 있습니다.
🛠️2단계: 따라하기 실습
🛠 따라 만들기 · AI 바이브 코딩
브라우저 음성을 클라우드 음성으로 업그레이드5교시에서 붙인 브라우저 낭독 버튼을, 더 자연스러운 OpenAI 클라우드 음성으로 바꿉니다. 키는 서버에서만 다룹니다. 막히면 아래 '완성 코드 펼치기'를 붙여넣으세요.
🎯 완성 결과: '낭독 듣기'가 자연스러운 OpenAI 음성(mp3)으로 재생되는 생성기
1서버에 TTS 라우트 만들기
서버가 OpenAI 음성 API를 대신 호출하게 합니다.
🤖 AI에게 이렇게 시켜보세요
app/api/tts/route.ts를 만들어줘. POST로 text와 voice를 받아 OpenAI /v1/audio/speech에 gpt-4o-mini-tts로 요청해서 mp3를 만들고, base64 data URL 형태로 돌려줘. 키는 process.env.OPENAI_API_KEY를 써.
💡 핵심 코드 설명
- 5교시 브라우저 음성과 달리, 이번엔 서버가 OpenAI에 음성을 요청합니다.
- 키는 서버에서만 쓰고, 결과 mp3를 data URL로 화면에 돌려줍니다.
2화면에서 클라우드 음성 재생하기
낭독 버튼을 클라우드 음성으로 바꿉니다.
🤖 AI에게 이렇게 시켜보세요
app/page.tsx의 '낭독 듣기' 버튼을 고쳐줘. 브라우저 음성 대신 /api/tts에 대본 텍스트를 POST하고, 돌아온 오디오(data URL)를 new Audio로 재생하도록 바꿔줘.
💡 핵심 코드 설명
- 이제 버튼을 누르면 서버가 만든 자연스러운 음성이 재생됩니다.
- 브라우저 음성보다 훨씬 사람 같은 목소리를 확인해 보세요.
3음색(voice) 바꿔보기
목소리 분위기를 골라 봅니다.
🤖 AI에게 이렇게 시켜보세요
voice를 고르는 드롭다운(alloy, nova, shimmer 등)을 추가하고, 선택한 값을 /api/tts 요청에 함께 보내줘.
💡 핵심 코드 설명
- voice 값만 바꿔도 목소리 분위기가 달라집니다.
- 채널 톤에 맞는 음색을 골라 통일감을 줍니다.
✓실습 미션 체크리스트
우측 Cloud TTS 실습기에서 대사와 음색(voice)을 고르고 '음성 생성'을 눌러, 실제 OpenAI 음성이 mp3로 만들어져 재생되는지 확인해 보세요.
OpenAI TTS 호출 핵심
// 서버에서 OpenAI 음성 API 호출 (핵심)
await fetch("https://api.openai.com/v1/audio/speech", {
method: "POST",
headers: { Authorization: "Bearer " + process.env.OPENAI_API_KEY },
body: JSON.stringify({
model: "gpt-4o-mini-tts",
voice: "alloy",
input: "장면 내레이션 텍스트",
response_format: "mp3",
}),
});💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
브라우저 기본 음성보다 자연스러운 목소리가 mp3로 생성되어 재생되는지 청취 점검합니다.
📝 객관식 개념 확인 (2문항)
Q1. OpenAI TTS API 키는 어디에서 다뤄야 안전할까요?
Q2. 브라우저 TTS와 비교한 클라우드 TTS의 특징으로 옳은 것은?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
같은 화면에서 연결 대상만 바꿔 봅니다 — 클라우드(OpenAI)와 온프렘(내 로컬 서버). 코드는 그대로, 주소(base URL)만 달라집니다.