티스토리 블로그에 글을 읽어주는 음성 합성 기능 추가로 체류시간 늘리기

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

웹사이트에서 텍스트를 음성으로 읽어주는 기능은 사용자 경험을 크게 향상시킬 수 있습니다. 특히, 시각 장애가 있는 사용자에게 매우 유용하며, 멀티태스킹을 원하는 사용자에게도 편리합니다. 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> 버튼을 추가하여, 사용자들이 쉽게 음성을 제어할 수 있도록 합니다.

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

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

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