DAY 1 · 5교시 · 60분

브라우저 TTS 음성 합성 및 자막 낭독

➔
➔

📚1단계: 주요 개념 설명

이번 단원의 목표

Web Speech API를 사용하여 브라우저 환경에서 대본을 낭독하는 TTS 음성을 생성한다.

🗂️강의 슬라이드
슬라이드 1 / 10

대본이 목소리가 되는 순간

📝 자막 텍스트"안녕하세요..."🔊브라우저 내장 Web Speech API — 무료·무설치
  • 쇼츠에는 화면 자막뿐 아니라 들리는 내레이션도 필요합니다.
  • TTS는 글자를 목소리로 바꾸는 기술입니다.
  • 먼저 브라우저 기본 낭독 기능으로 글자가 소리로 바뀌는 경험을 해 봅니다.

🛠️2단계: 따라하기 실습

🛠 따라 만들기 · AI 바이브 코딩
대본을 소리로 읽어주기 (낭독 버튼)

만든 대본을 눈으로만 보지 말고 귀로도 듣게 만듭니다. 브라우저에 내장된 음성 기능(Web Speech API)으로, 설치·결제 없이 대본을 한국어로 낭독하는 버튼을 붙입니다.

🎯 완성 결과: '낭독 듣기' 버튼을 누르면 대본을 소리로 읽어주는 생성기
1낭독 버튼 추가하기

생성된 대본을 브라우저 음성으로 읽어줍니다.

🤖 AI에게 이렇게 시켜보세요

app/page.tsx에 '낭독 듣기' 버튼을 추가해줘. 누르면 생성된 대본(각 장면의 narration을 이어서)을 브라우저 내장 음성으로 한국어(ko-KR)로 읽어줘. Web Speech API를 사용해.

📄 app/page.tsx (핵심 부분)
function speak(text) {
  const u = new SpeechSynthesisUtterance(text);
  u.lang = "ko-KR";   // 한국어로 읽기
  window.speechSynthesis.speak(u);
}
💡 핵심 코드 설명
  • SpeechSynthesisUtterance에 읽을 문장을 담고, speechSynthesis.speak()로 소리를 냅니다. 별도 설치가 없습니다.
  • .lang을 'ko-KR'로 지정해야 한국어를 자연스럽게 읽습니다.
2말하기 속도 조절 (선택)

낭독 속도를 사용자가 조절하게 합니다.

🤖 AI에게 이렇게 시켜보세요

낭독 속도를 조절하는 슬라이더(0.5배~1.5배)를 추가하고, 낭독할 때 그 값을 speech의 rate로 반영해줘.

💡 핵심 코드 설명
  • u.rate 값을 바꾸면 말 빠르기가 달라집니다. 쇼츠는 리듬감이 중요하니 값을 바꿔가며 들어봅니다.
  • u.pitch로 음 높이도 조절할 수 있습니다.
3왜 버튼을 눌러야 소리가 날까

브라우저의 자동재생 제한을 이해합니다.

💡 핵심 코드 설명
  • 브라우저는 갑자기 나는 소리를 막기 위해, 사용자가 클릭·터치하기 전에는 소리를 재생하지 않습니다.
  • 그래서 페이지가 열리자마자가 아니라 '버튼 클릭 후'에만 낭독이 됩니다 — 이건 정상 동작입니다.
✓실습 미션 체크리스트
1개념 직관

대본은 글자일 뿐이라 영상으로 만들려면 소리가 필요합니다. 5교시에서는 브라우저가 기본으로 가진 낭독 기능을 써서 대사가 목소리로 바뀌는 경험을 해 봅니다.

2실습 미션

우측 낭독 실습기에서 대사 텍스트를 입력하고 말하기 속도(rate)와 음높이(pitch)를 조절한 뒤 '낭독 재생' 버튼을 눌러, 한국어(ko-KR) 음성이 브라우저에서 재생되는지 확인해 보세요. 페이지 로드 직후엔 소리가 나지 않고 버튼 클릭(사용자 제스처) 후에만 재생된다는 점도 함께 체감해 봅니다.

Web Speech API 스피치 함수
function speakText(text) {
  if (typeof window !== "undefined" && window.speechSynthesis) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = "ko-KR";
    utterance.pitch = 1.0;
    utterance.rate = 1.0; // 말 빠르기 속도 조율 가능
    window.speechSynthesis.speak(utterance);
  }
}

💡 코딩 중 막히나요? 모범 솔루션 코드

🧩3단계: 개념 검증 퀴즈

검증 챌린지 미션

자막 텍스트가 기계음 없이 브라우저를 통해 실시간 목소리 스피치 사운드로 재생되는지 청취 점검합니다.

📝 객관식 개념 확인 (2문항)

Q1. 브라우저 내장 TTS(Web Speech API)로 소리를 내려면 반드시 필요한 조건은?

Q2. SpeechSynthesisUtterance로 한국어를 낭독하려면 설정하는 속성은?

🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요

아래 대사를 입력하고 속도·음높이를 조절한 뒤 낭독 재생을 눌러 브라우저 내장 음성(ko-KR)으로 직접 들어 보세요.

대본 텍스트
→
들리는 목소리
⚠️ 브라우저 보안 정책상, 페이지가 열리자마자 소리가 나지 않습니다. 지금처럼 버튼 클릭(사용자 제스처) 이 있어야만 낭독이 시작됩니다.
다음 교시로 이동하기 (6교시: Vercel 원클릭 배포로 모바일 연동) ➡️