Web Speech API 활용: 음성 지원 자바스크립트 영단어장 만들기

작성자:

안녕하세요!

어느덧 12번째 프로젝트에 도달했습니다. 그동안 우리는 우선순위 대시보드, 가계부 등 자바스크립트로 데이터를 가공하고 시각화하며 ‘보여주는 방식’에 집중해 왔습니다. 하지만 이번 프로젝트부터는 조금 다른 관점에서 접근해 보려 합니다. 바로 “우리가 매일 쓰는 웹 브라우저가 기본적으로 어떤 강력한 기능들을 이미 내장하고 있는가?”에 대한 탐구입니다.

오늘 만들어본 ‘자바스크립트 영단어장’은 단순히 텍스트를 저장하는 메모장에 그치지 않습니다. 외부 유료 API나 무거운 라이브러리 없이도 브라우저 자체의 음성 합성 엔진을 활용해 원어민 발음으로 단어를 읽어주는 기능을 탑재했습니다. 과연 어떤 마법 같은 내장 API가 사용되었는지, 그리고 효율적인 데이터 관리를 위해 어떤 로직을 설계했는지 코드 리뷰 형식으로 깊이 있게 살펴보겠습니다.

자바스크립트 영단어장 첫 번째 화면

목소리를 가진 브라우저, Web Speech API

이번 프로젝트의 기술적 핵심은 단연 Web Speech API입니다. 그중에서도 speechSynthesis 인터페이스는 텍스트를 음성으로 변환(TTS, Text-to-Speech)해 주는 놀라운 기능을 제공합니다. 우리가 흔히 접하는 ‘파파고’나 ‘구글 번역기’의 음성 기능을 브라우저 단에서 직접 제어할 수 있는 것이죠.

function speak(text) {
    // 1. 읽을 내용(객체) 생성 - SpeechSynthesisUtterance
    const utterance = new SpeechSynthesisUtterance(text);
    
    // 2. 언어 및 속성 설정
    utterance.lang = 'en-US'; // 미국식 영어 설정
    utterance.rate = 0.8;      // 학습을 위해 약간 느린 속도로 조절
    utterance.pitch = 1.0;     // 음성 높낮이 기본값 설정
    
    // 3. 브라우저 음성 엔진에 실행 명령
    window.speechSynthesis.speak(utterance);
}

많은 초보 개발자가 음성 기능을 구현할 때 서버 통신이 필요한 외부 API를 먼저 떠올리곤 합니다. 하지만 브라우저 내장 API를 사용하면 별도의 인증키(API Key)가 필요 없고, 오프라인 환경에서도 기본적인 작동이 가능하며 비용이 전혀 들지 않습니다.

- SpeechSynthesisUtterance 객체의 비밀

단순히 speak() 함수를 실행하는 것을 넘어, 우리가 생성한 utterance 객체가 어떤 과정을 거치는지 이해하는 것이 중요합니다. 이 객체는 브라우저의 **음성 합성 큐(Queue)**에 담기게 됩니다. 만약 사용자가 여러 단어를 연속으로 클릭하면, 브라우저는 이를 순차적으로 정렬하여 하나씩 읽어줍니다.

또한, utterance.onend나 utterance.onstart 같은 이벤트 리스너를 활용하면 음성이 시작될 때 단어의 색상을 바꾸거나, 읽기가 끝났을 때 다음 단어로 자동으로 넘어가게 하는 등의 고급 기능을 구현할 수도 있습니다.

브라우저 지원 여부 확인(Feature Detection)

if ('speechSynthesis' in window) {
    console.log("이 브라우저는 음성 합성을 지원합니다.");
} else {
    alert("죄송합니다. 현재 브라우저는 음성 기능을 지원하지 않습니다.");
}

모든 브라우저가 이 강력한 기능을 100% 지원하는 것은 아닙니다. 특히 구형 브라우저에서는 오류가 발생할 수 있죠. 이를 방지하기 위한 예외 처리 로직은 프로젝트의 완성도를 결정합니다.

자바스크립트 영단어장 실행 화면

자바스크립트 영단어장 play 화면

데이터 필터링의 정석, 실시간 검색

자바스크립트 영단어장에 데이터가 수백 개 쌓였을 때를 대비해 filter 메서드를 활용한 검색 로직을 심었습니다. 단순히 일치하는 단어를 찾는 것이 아니라, 사용자가 검색어를 입력할 때마다 실시간으로 화면을 갱신합니다.

function filterWords() {
    const query = document.getElementById('searchInput').value.toLowerCase();
    
    // 원본 데이터(vocabulary)는 보존하고, 필터링된 결과만 렌더링
    const filtered = vocabulary.filter(item => 
        item.word.toLowerCase().includes(query) || item.mean.includes(query)
    );
    render(filtered);
}

여기서 중요한 것은 ‘대소문자 구분 없이’ 검색이 가능하도록 toLowerCase()를 적용했다는 점입니다. 사용자가 Apple을 검색하든 apple을 검색하든 동일한 결과를 보여주는 것, 이것이 작지만 큰 사용자 경험(UX)의 차이를 만듭니다.

고유 ID 생성을 위한 Date.now()

단어를 삭제할 때 데이터가 꼬이지 않도록 각 항목에 고유한 id를 부여했습니다. 배열의 인덱스(index)를 삭제 기준으로 잡을 경우, 필터링이나 정렬 시 인덱스가 바뀌어 엉뚱한 데이터가 삭제되는 버그가 생길 수 있기 때문입니다.

// 새로운 단어를 추가할 때 타임스탬프를 고유 ID로 할당
vocabulary.push({ word, mean, id: Date.now() });

Date.now()를 활용해 생성 시점의 밀리초를 ID로 부여하면, 중복될 확률이 거의 없는 고유한 키값을 얻을 수 있습니다. 이는 나중에 데이터베이스를 연동할 때도 유용하게 쓰이는 습관입니다.

단어 데이터를 영구적으로 보존하는 원리는 [자바스크립트 할 일 목록]에서 다룬 LocalStorage 방식과 동일하니 참고해 보세요.

보완점 및 발전 방향

  • 오답 노트 기능: 단어 옆에 ‘중요’ 체크박스를 만들어, 암기가 안 된 단어만 따로 필터링해서 보는 기능.
  • 음성 선택 옵션: 미국식 발음뿐만 아니라 영국식, 호주식 목소리를 선택할 수 있는 셀렉트 박스 추가.
  • 플래시 카드 모드: 단어만 보여주고 뜻은 클릭 시에만 나타나게 하여 자가 테스트 기능 구현.
  • CSV 내보내기/불러오기: 내가 정리한 단어장을 엑셀 파일로 백업하거나 친구와 공유하는 기능.

단어를 저장하는 기능을 넘어 Web Speech API를 활용해 원어민 발음을 들려주는 기능을 추가했습니다. 처음에는 브라우저마다 지원하는 음성 엔진이 달라 소리가 나오지 않는 문제가 있었는데, 이를 getVoices() 메서드로 해결하며 크로스 브라우징의 중요성을 실감했습니다. 실용적인 웹 앱 제작에 관심 있는 분들께 큰 도움이 될 것입니다.

12번째 프로젝트 자바스크립트 영단어장을 통해 우리는 브라우저가 생각보다 훨씬 강력한 잠재력을 가지고 있음을 확인했습니다. 단순히 화면을 출력하는 도구를 넘어, 소리를 내고 데이터를 영구 저장하며 복잡한 연산을 수행하는 플랫폼으로서의 브라우저를 재발견한 시간이었습니다.

새로운 라이브러리를 찾아 헤매기 전에, 우리가 가진 기본 도구(Native API)를 얼마나 깊이 있게 이해하고 있는지 돌아보는 태도가 진정한 실력을 만듭니다. 이번 자바스크립트 영단어장 프로젝트가 여러분의 코딩 탐험에 또 하나의 즐거운 이정표가 되길 바랍니다.

궁금한 점이나 본인만의 API 활용 팁이 있다면 언제든 댓글로 남겨주세요. 긴 글 읽어주셔서 감사합니다!

댓글 남기기