티스토리 블로그 글 읽어주는 기능(TTS) 추가하기, 복사해서 바로 쓰세요

블로그에 목소리를 담아보세요

블로그에 들어온 분들이 글을 눈으로만 읽는 게 아니라 귀로도 들을 수 있다면 어떨까요? 바쁜 출근길이나 다른 일을 하면서도 내 글을 편하게 소비할 수 있어서 사용자 경험이 확 달라질 거예요. 특히 작은 글씨를 보기 힘든 분들에게는 정말 고마운 기능이기도 하죠. HTML5에 있는 SpeechSynthesis API라는 걸 활용하면 복잡한 플러그인 없이도 티스토리에 이 기능을 아주 쉽게 넣을 수 있어요.

글 읽어주는 기능이 왜 필요할까요?

이 기능을 넣으면 단순히 ‘신기하다’에서 끝나는 게 아니에요. 방문자가 내 블로그에 머무는 시간이 자연스럽게 늘어나거든요. 글을 끝까지 듣게 되니까요. 이렇게 체류 시간이 길어지면 검색 엔진은 “아, 이 글은 유용한 정보가 담겨있구나”라고 판단해서 SEO 점수에도 좋은 영향을 줘요. 게다가 시각 장애가 있는 분들이나 눈이 피로한 분들에게도 친절한 블로그가 될 수 있죠.

접근성과 검색 최적화(SEO) 두 마리 토끼 잡기

검색 엔진은 누구나 쉽게 이용할 수 있는 웹사이트를 좋아해요. 텍스트를 음성으로 변환해 주는 기능(TTS)은 웹 접근성을 높여주는 대표적인 기능이라서, 장기적으로 블로그 지수에도 긍정적인 신호를 줄 수 있어요. 내가 쓴 글을 소리로 들으면서 오타나 어색한 문장을 찾아내기도 훨씬 수월해지니 운영자 입장에서도 꽤 유용한 도구랍니다.

1단계: 자바스크립트 코드 작성하기

먼저 글의 내용을 가져와서 읽어주는 기본 기능을 만들어볼게요. 아래 코드를 사용하면 본문 내용을 자동으로 인식해서 목소리로 들려줍니다. 새로고침을 하거나 버튼을 다시 누르면 멈추는 기능까지 포함되어 있어요.

let isSpeaking = false;

function speakText() {
    // 티스토리 본문 영역 선택 (스킨마다 클래스명이 다를 수 있으니 확인 필요)
    const textElements = document.querySelectorAll('.tt_article_useless_p_margin p'); 
    const utterance = new SpeechSynthesisUtterance();
    utterance.lang = 'ko-KR'; // 한국어 설정

    let textToRead = '';
    textElements.forEach(element => {
        textToRead += element.innerText.trim() + ' ';
    });

    if (isSpeaking) {
        // 이미 읽고 있다면 취소
        speechSynthesis.cancel();
        isSpeaking = false;
        return;
    }

    utterance.text = textToRead;
    
    // 읽기 시작
    speechSynthesis.speak(utterance);
    isSpeaking = true;

    // 읽기가 끝나면 상태 초기화
    utterance.onend = function() {
        isSpeaking = false;
    };
}

// 페이지를 떠나거나 새로고침하면 소리 끄기
window.onbeforeunload = function() {
    if (isSpeaking) {
        speechSynthesis.cancel();
    }
};

// 버튼 이벤트 리스너 연결 (HTML 버튼 추가 후 작동)
document.addEventListener("DOMContentLoaded", function() {
    const btn = document.getElementById("speakerButton");
    if(btn) {
        btn.addEventListener("click", speakText);
    }
});

이 코드는 웹 브라우저가 기본적으로 가지고 있는 음성 합성 기능을 불러오는 역할을 해요. utterance.lang = 'ko-KR' 부분 덕분에 한국어로 자연스럽게 읽어주죠.

2단계: 듣기 버튼 만들고 꾸미기

이제 방문자가 클릭할 수 있는 버튼이 필요하겠죠? 투박한 버튼보다는 깔끔한 아이콘 형태가 보기에도 좋고 누르고 싶어질 거예요. 아래 HTML과 CSS 코드를 참고해서 버튼을 만들어보세요.

🔊이 글을 음성으로 듣기

티스토리에 적용하는 위치

티스토리 관리자 페이지에서 [스킨 편집] > [HTML 편집]으로 들어가세요. HTML 탭에서 </body> 바로 위에 자바스크립트 코드를 <script> ... </script> 태그로 감싸서 넣어주면 됩니다. 버튼 HTML 코드는 본문 상단이나 하단 등 원하는 위치에 넣어주세요. 보통 <s_article_rep> 안쪽의 제목 아래나 본문 시작 부분에 넣으면 잘 어울려요.

3단계: 구글 음성으로 더 자연스럽게 듣기

기본 음성이 조금 딱딱하게 느껴진다면, 구글(Google)에서 제공하는 목소리를 우선적으로 사용하도록 업그레이드할 수 있어요. 크롬 브라우저를 사용하는 분들에게는 훨씬 부드러운 목소리로 들려줄 수 있답니다.

function speakWithGoogle() {
    const synth = window.speechSynthesis;
    
    // 읽고 있으면 멈춤
    if (synth.speaking) {
        synth.cancel();
        return;
    }

    // 본문 내용 가져오기
    const contentElement = document.querySelector('.tt_article_useless_p_margin');
    if (!contentElement) return;

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

    // 구글 한국어 음성 찾기
    const voices = synth.getVoices();
    const googleVoice = voices.find(voice => 
        voice.name.includes('Google') && voice.lang === 'ko-KR'
    );

    // 구글 음성이 있으면 적용, 없으면 기본 음성 사용
    if (googleVoice) {
        utterance.voice = googleVoice;
    }

    utterance.lang = 'ko-KR';
    utterance.rate = 1.0; // 속도 조절 (1.0이 기본)

    synth.speak(utterance);
}

// 목소리 목록을 비동기로 가져오기 위한 설정
window.speechSynthesis.onvoiceschanged = function() {
    window.speechSynthesis.getVoices();
};

작은 변화로 더 친절한 블로그 만들기

이렇게 간단한 코드 몇 줄만으로 내 블로그에 멋진 음성 안내 기능을 달 수 있어요. 방문자들은 편하게 내용을 들을 수 있어서 좋고, 운영자는 블로그 체류 시간을 늘릴 수 있어서 좋죠. 지금 바로 적용해서 내 블로그를 한 단계 업그레이드해보세요. 혹시 적용하다가 잘 안 되는 부분이 있으면 언제든 댓글로 남겨주세요!