티스토리 블로그에 글 읽어주는 음성 합성 기능 추가하기

웹사이트에서 텍스트를 음성으로 읽어주는 기능은 사용자 경험을 크게 향상시킬 수 있습니다. 특히, 시각 장애가 있는 사용자에게 매우 유용하며, 멀티태스킹을 원하는 사용자에게도 편리합니다. HTML5의 SpeechSynthesis API를 사용하면 간단하게 음성 합성 기능을 웹사이트에 추가할 수 있습니다. 이번 글에서는 티스토리 블로그에 글 읽어주는 음성 합성 기능을 추가하는 방법을 소개합니다.

웹사이트 텍스트 음성 합성 기능 구현

웹사이트에서 텍스트를 음성으로 읽어주는 기능은 사용자 경험을 크게 향상시킬 수 있습니다. 특히, 시각적 장애가 있는 사용자에게 매우 유용하며, 멀티태스킹을 원하는 사용자에게도 편리합니다. HTML5의 SpeechSynthesis API를 사용하면 간단하게 음성 합성 기능을 웹사이트에 추가할 수 있습니다.

티스토리 블로그 음성 합성 기능 구현으로 접근성 향상시키는 법

“스피커 버튼을 클릭하여 음성을 읽기 시작하고, 다시 클릭하면 음성을 멈추는” 기능을 구현하는 방법을 소개하려고 합니다. 이 기능을 활용하면 사용자는 텍스트가 읽히는 동안 음성을 제어할 수 있어 더욱 직관적이고 유용한 경험을 제공할 수 있습니다.

SpeechSynthesis API란?

SpeechSynthesis API는 웹 브라우저에서 텍스트를 음성으로 변환할 수 있는 기능을 제공합니다. 이를 통해 사용자는 텍스트 기반의 콘텐츠를 듣는 것만으로도 정보를 얻을 수 있으며, 이는 특히 접근성 측면에서 중요한 역할을 합니다.

주요 특징:

• 다양한 언어와 음성을 지원합니다.
• 사용자 설정에 맞게 음성 속도, 피치, 볼륨을 조정할 수 있습니다.
• 음성 합성 기능을 쉽게 제어할 수 있는 API를 제공합니다.

글 읽어주는 기능의 장점

접근성 향상 (SEO 관점에서)

웹사이트에서 텍스트를 음성으로 읽어주는 기능은 시각장애가 있는 사용자에게 중요한 접근성 향상을 제공합니다. 이 기능을 통해 시각장애인도 콘텐츠를 편리하게 소비할 수 있으며, 검색 엔진에서도 이러한 접근성을 고려하여 웹사이트 순위가 상승할 수 있습니다. 접근성이 향상된 웹사이트는 검색엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

운영자의 편리한 콘텐츠 점검

웹사이트 운영자는 음성 합성 기능을 통해 자신이 작성한 콘텐츠를 음성으로 점검할 수 있습니다. 콘텐츠의 흐름이나 어투, 맞춤법 등을 쉽게 확인할 수 있으며, 이를 통해 텍스트의 가독성을 높이고 사용자 경험을 개선할 수 있습니다.

사용자 편의성 및 체류 시간 향상

사용자는 음성 합성 기능을 통해 다른 작업을 하면서도 콘텐츠를 쉽게 들을 수 있습니다. 이로 인해 글을 대강 읽는 것보다 더욱 효율적으로 정보에 접근할 수 있으며, 웹사이트에 대한 체류 시간이 늘어날 수 있습니다. 이는 사용자 경험 향상뿐만 아니라 SEO에도 긍정적인 영향을 미칩니다.

검색 최적화(SEO) 고려 사항

• 키워드 사용: 글 제목과 본문에 음성 합성, 웹 음성 합성, 스피커 버튼, SpeechSynthesis API 등 관련 키워드를 자연스럽게 배치합니다.
• 메타 태그 최적화: 웹 페이지의 메타 태그에 관련 키워드를 넣어 검색 엔진에서 잘 인식될 수 있도록 합니다.
• 헤더 태그 사용: 중요한 제목에는 태그를 사용해 구조적으로 글을 작성합니다.
• 내부 링크 활용: 관련된 다른 블로그 글이나 페이지로의 내부 링크를 추가하여 사이트의 다른 페이지로 유입을 유도합니다.

따라서 이 기능은 SEO, 접근성 향상, 사용자 편의성 모두에서 중요한 장점을 제공합니다.

티스토리 블로그에 글 읽어주는 음성 합성 기능 추가하기

티스토리 블로그에 적용하는 방법을 설명하겠습니다. 이제 실제로 텍스트를 읽어주는 음성 합성 기능을 구현하는 방법을 설명하겠습니다. 먼저 기본적인 음성 합성 기능을 만들어보겠습니다.

let isSpeaking = false;

function speakText() {
const textElements = document.querySelectorAll(‘.tt_article_useless_p_margin’);
const utterance = new SpeechSynthesisUtterance();
utterance.lang = ‘ko-KR’;
let isEndReached = false;

// 텍스트를 하나로 합쳐서 읽음
let textToRead = ”;
textElements.forEach(element = {
textToRead += element.innerText.trim() + ‘ ‘;
});

// 음성을 한 번만 읽도록 설정
function speakNextText() {
if (isSpeaking) {
utterance.text = textToRead;
speechSynthesis.speak(utterance);
utterance.onend = function() {
isSpeaking = false;
};
}
}

if (!isSpeaking) {
isSpeaking = true;
speakNextText(); // 텍스트 읽기 시작
}
}

// 새로 고침 시 음성을 멈추도록 설정
window.onbeforeunload = function() {
if (isSpeaking) {
speechSynthesis.cancel();
isSpeaking = false;
}
};

// 버튼 클릭 시 음성 읽기/중지
document.getElementById(“speakerButton”).addEventListener(“click”, function() {
if (isSpeaking) {
speechSynthesis.cancel(); // 음성을 멈춤
isSpeaking = false;
} else {
speakText(); // 음성 시작
}
});

코드 설명

SpeechSynthesisUtterance: 음성을 합성할 텍스트와 속성(언어 등)을 설정합니다.

• utterance.lang = ‘ko-KR’: 음성을 한국어로 설정합니다. 이 부분을 원하는 언어로 변경할 수 있습니다.
• utterance.text = textToRead: 텍스트를 음성으로 변환할 텍스트로 설정합니다.

speechSynthesis.speak(): 이 메서드를 호출하여 실제로 음성을 합성하고 시작합니다.

• speechSynthesis.cancel(): 음성을 즉시 멈추는 메서드입니다. 음성 읽기가 진행 중일 때 이 메서드를 호출하면 음성이 중지됩니다.
• isSpeaking: 음성 합성 기능이 실행 중인지를 추적하는 변수입니다. 버튼 클릭 시 이 변수의 값에 따라 음성을 시작하거나 중지합니다.

버튼 추가 및 음성 읽기 시작/중지 기능 구현

사용자가 텍스트 음성을 읽고 중지할 수 있도록, 스피커 버튼을 추가합니다. 이 버튼을 클릭하면 음성이 시작되고, 다시 클릭하면 음성을 멈추는 기능을 구현할 수 있습니다.

div class="speaker-container"
!-- 스피커 버튼 --
button id=speakerButton class="speaker-button"/button
!-- 안내 텍스트 --
span class="speaker-text"편리하게 글을 읽어 드립니다./span
/div
p class="end"

설명:

• div class=”speaker-container”: 스피커 버튼과 안내 텍스트를 포함하는 컨테이너입니다.
• button id=”speakerButton” class=”speaker-button”/button: 음성 합성 기능을 시작/중지하는 스피커 아이콘 버튼입니다.
• span class=”speaker-text”편리하게 글을 읽어 드립니다./span: 버튼 옆에 안내 텍스트가 위치합니다.
• p class=”end”: 페이지의 마지막 문단을 나타내며, 음성 합성과는 관계가 없습니다.

스타일 적용하기

style
.speaker-button {
font-size: 40px; /* 스피커 아이콘 크기 */
padding: 10px 15px; /* 버튼의 내부 여백 */
border: none; /* 버튼의 테두리 제거 */
background-color: transparent; /* 버튼 배경 투명 */
cursor: pointer; /* 마우스를 올리면 클릭 가능한 느낌 */
}

.speaker-button:hover {
color: white; /* 호버 시 아이콘 색상 변경 */
background-color: #007BFF; /* 호버 시 배경 색상 변경 */
}
/style

티스토리 블로그에 적용하기

티스토리 관리자 페이지로 이동:

• 티스토리 블로그에 로그인 후 관리자 페이지로 들어갑니다.

HTML/JS 코드 추가:

• [관리 HTML 편집] 메뉴로 이동합니다.
• /body 태그 앞에 위의 스크립트 코드와 버튼 코드를 추가합니다.

본문에 적용:

• 티스토리 블로그의 글을 작성할 때, 텍스트에 음성 합성 기능을 적용하고 싶은 부분을 작성합니다.
• 글에 .tt_article_useless_p_margin 클래스를 가진 요소가 텍스트로 포함되면, 해당 텍스트가 음성으로 읽힙니다.

글에 음성 버튼 삽입:

• 글에 button id=”speakerButton” 음성 읽기 시작/중지/button 버튼을 추가하여, 사용자들이 쉽게 음성을 제어할 수 있도록 합니다.

구글 음성 지원 사용하는 코드

button id="ttsBtn" 구글 음성으로 듣기/중단/button

script
let isSpeaking = false;

document.getElementById(‘ttsBtn’).addEventListener(‘click’, function () {
const synth = window.speechSynthesis;

// 1. 이미 재생 중이면 멈추기
if (synth.speaking) {
synth.cancel();
return;
}

const contentElement = document.querySelector(‘.tt_article_useless_p_margin.contents_style’);
if (!contentElement) return;

const text = contentElement.innerText;
const utterance = new SpeechSynthesisUtterance(text);

// 2. 구글 음성 찾기 설정
const voices = synth.getVoices();
// 목소리 목록 중 ‘Google’과 ‘ko-KR’이 포함된 것을 우선적으로 찾습니다.
const googleVoice = voices.find(voice =
voice.name.includes(‘Google’) && voice.lang === ‘ko-KR’
) || voices.find(voice = voice.lang === ‘ko-KR’); // 구글 없으면 기본 한국어라도 사용

if (googleVoice) {
utterance.voice = googleVoice;
}

utterance.lang = ‘ko-KR’;
utterance.rate = 1.0;
utterance.pitch = 1.0;

synth.speak(utterance);
});

window.speechSynthesis.getVoices();
/script

티스토리 블로그의 다양한 변화로 접근성을 향상해 보세요

티스토리 블로그에서 스피커 버튼을 이용하여 텍스트를 음성으로 읽고, 음성을 제어할 수 있는 기능은 매우 유용합니다. 이 기능을 통해 사용자 경험을 향상시킬 수 있으며, 접근성을 고려한 웹사이트 개발에 한 발 더 나아갈 수 있습니다. 또한, SpeechSynthesis API를 활용하면 쉽고 빠르게 음성 합성 기능을 추가할 수 있으므로, 다양한 웹 프로젝트에서 활용해 보세요.

음성 읽기 시작과 중지를 위한 버튼을 클릭하는 동작은 speechSynthesis.cancel()과 같은 API 메서드를 통해 간단히 구현할 수 있습니다. 이를 통해 더 많은 사람들이 웹 콘텐츠를 음성으로 손쉽게 들을 수 있게 됩니다.