Vue.js + AI 마법 3강: 귀와 입이 생겼어요! 마법의 목소리 (Speech AI)

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 사진을 보는 ‘마법의 눈’을 배웠죠? 오늘은 우리 성의 AI 비서에게 예쁜 목소리와 밝은 귀를 선물할 거예요. 이제 AI가 동화책을 읽어주고, 우리가 말하는 대로 마법이 일어나는 소리 지능, Speech AI(음성 AI) 마법을 소개합니다!

Vue.js + AI 마법 3강: 귀와 입이 생겼어요! 마법의 목소리 (Speech AI)

1. TTS와 STT: 마법의 입과 귀

소리 마법은 크게 두 가지로 나뉘어요.

  • TTS (마법의 입): ‘Text-to-Speech’의 줄임말로, 우리가 쓴 글자를 AI가 예쁜 목소리로 읽어주는 기능이에요. 동화책 읽어주는 로봇처럼요!
  • STT (마법의 귀): ‘Speech-to-Text’의 줄임말로, 우리가 말하는 소리를 AI가 듣고 글자로 바꿔주는 기능이에요. “불 켜줘!”라고 말하면 알아듣는 비서처럼요.

2. 왜 이 마법이 필요한가요?

  • 눈이 편안해요: 화면을 계속 보지 않아도 AI 비서가 중요한 정보를 말로 들려주니 눈이 덜 피로해요.
  • 손이 자유로워요: 요리를 하거나 만들기를 할 때, 타자를 치지 않고 입으로만 명령을 내릴 수 있어 아주 편리하답니다.

3. 실전 마법: AI 비서에게 말 시키기

브라우저에 기본으로 들어있는 마법 도구(Web Speech API)를 사용해볼까요?

<script setup>
import { ref } from 'vue';

const textToRead = ref('안녕! 나는 너의 AI 비서야. 오늘 공부도 화이팅!');

// 1. 마법의 입(TTS) 사용하기
function speak() {
  const message = new SpeechSynthesisUtterance(textToRead.value);
  message.lang = 'ko-KR'; // 한국어 마법 주문!
  window.speechSynthesis.speak(message);
}

// 2. 마법의 귀(STT) 사용하기
function listen() {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();
  
  recognition.onresult = (event) => {
    const voiceText = event.results[0][0].transcript;
    alert(`네가 말한 게 "${voiceText}" 맞니?`);
  };
  
  recognition.start();
}
</script>

<template>
  <div class="voice-room">
    <input v-model="textToRead" />
    <button @click="speak">말하기 📢</button>
    <button @click="listen">내 목소리 듣기 👂</button>
  </div>
</template>
Vue.js + AI 마법 3강: 귀와 입이 생겼어요! 마법의 목소리 (Speech AI)

4. 스마트 라이프를 위한 가족 코딩 팁

아이들에게 ‘텔레파시’나 ‘무전기’에 비유해 보세요. 기계와 대화하는 것이 영화 속 이야기만이 아니라는 걸 알려주는 거죠. 아이와 함께 만든 ‘에듀패드’에 ‘받아쓰기 대장’ 기능을 넣어보세요. AI가 단어를 불러주면 아이가 화면에 적거나, 반대로 아이가 말한 문장을 AI가 화면에 정확히 적어주는 놀이를 하면 언어 학습이 훨씬 즐거워집니다.

마치며: 소리로 소통하는 다정한 마법사

이제 여러분의 성은 보고, 듣고, 말하기까지 하는 아주 다정한 공간이 되었습니다! 정말 놀라운 발전이죠? 다음 시간에는 **’마법사의 일기장(AI Chat History)’**이라는 주제로, AI 비서와 나눈 대화를 잊지 않고 모두 기억하는 기억력 마법을 배워볼게요! 내일 아침 9시에 만나요!