티스토리 댓글 알림, 텔레그램으로 실시간 알림 받기 (GAS 중계 방식)

블로그를 운영하다 보면 독자와의 실시간 소통이 얼마나 중요한지 체감하게 됩니다. 특히 티스토리 댓글 알림은 기본 앱 알림이 늦게 오거나, 최신 스킨의 구조 문제로 알림이 누락되는 경험을 해보셨을 겁니다.

오늘은 구글 앱스 스크립트(GAS)를 중계 서버로 활용해 텔레그램 봇 알림을 실시간으로 받는 티스토리 댓글 알림 자동화 시스템 구축 방법을 소개합니다. 특히 봇 토큰 노출을 방지하는 보안 설정과 동적 렌더링 환경에서도 작동하는 자바스크립트 코드까지 다뤄보겠습니다.

1단계: 티스토리 댓글 알림을 위한 텔레그램 봇 생성 및 정보 수집

가장 먼저 블로그 댓글 알림을 보낼 봇이 필요합니다. 텔레그램 토큰과 채팅 아이디 생성 방법에 대한 자세한 내용은 이 링크를 참고하세요.

텔레그램에서 @BotFather를 검색해 대화를 시작합니다.
/newbot을 입력하고 봇 이름과 사용자명을 설정하여 HTTP API Token을 발급받습니다.
@userinfobot을 검색하여 본인의 Chat ID를 확인합니다.

2단계: 구글 앱스 스크립트(GAS) 설정 (중계 서버)

이 코드는 텔레그램 토큰을 안전하게 숨겨주는 역할을 합니다.

Google Apps Script에 접속하여 새 프로젝트를 만듭니다.
기존 코드를 모두 지우고 아래 코드를 복사해서 넣으세요.

function doGet(e) {
 // 수정 포인트] 아래 두 곳에 본인의 텔레그램 정보를 입력하세요.
 var TOKEN = "여기에_텔레그램_봇_토큰_입력"; 
 var CHAT_ID = "여기에_본인의_채팅_ID_입력"; 
 
 // 전달받은 파라미터 추출
 var site = e.parameter.site || "티스토리";
 var title = e.parameter.title || "새 댓글 알림";
 var url = e.parameter.url || "";
 
 // 텔레그램 메시지 구성
 var message = "" + site + "]\n" + title + "\n\n 확인하기: " + url;
 
 var telegramApi = "https://api.telegram.org/bot" + TOKEN + "/sendMessage";
 var payload = {
 "method": "post",
 "payload": {
 "chat_id": CHAT_ID,
 "text": message
 }
 };
 
 // 텔레그램 서버로 전송
 UrlFetchApp.fetch(telegramApi, payload);
 
 return ContentService.createTextOutput("Success");
}

[배포] > [새 배포]를 클릭합니다.
유형 선택에서 웹 앱을 선택하고, 액세스 권한을 모든 사용자(Anyone)로 설정한 뒤 배포합니다.
생성된 웹 앱 URL을 복사해 두세요.

3단계: 티스토리 스킨 편집 적용 (동적 렌더링 대응)

티스토리의 최신 스킨은 댓글 창이 나중에 그려지기 때문에, 일반적인 방식으로는 버튼을 찾지 못합니다. 이벤트 위임 기술을 적용한 최적화 코드를 사용해야 합니다.

티스토리 관리자 > 스킨 편집 >HTML 편집으로 이동합니다.
/body> 태그 바로 위에 아래 코드를 삽입합니다.

script
(function() {
 // 사용자가 페이지를 클릭할 때마다 감시 (이벤트 위임)
 document.addEventListener('click', function(e) {
 // 티스토리 기본 댓글 등록 버튼 클래스 확인
 const targetBtn = e.target.closest('.tt-btn_register');
 
 if (targetBtn) {
 // 1. 작성자 닉네임 추출
 const author = document.querySelector('.tt_txt_user')?.innerText || '익명 방문자';
 
 // 2. 댓글 내용 추출 (티스토리 동적 에디터 대응)
 const commentArea = document.querySelector('.tt-cmtcontenteditable="true"]');
 const content = commentArea ? commentArea.innerText : '';
 
 // 3. 현재 글 URL
 const postUrl = window.location.href;

 // 내용이 있을 때만 알림 전송
 if (content.trim() !== "") {
 // 수정 포인트] 아래 URL을 2단계에서 복사한 본인의 구글 웹 앱 URL로 교체하세요.
 const gasUrl = "https://script.google.com/macros/s/여기에_본인의_웹앱_ID_입력/exec";
 
 const finalUrl = gasUrl + 
 "?site=" + encodeURIComponent("데일리허브") + // 내 블로그 이름
 "&title=" + encodeURIComponent(" " + author + ": " + content.substring(0, 40)) + 
 "&url=" + encodeURIComponent(postUrl);

 // 데이터 전송 (no-cors 모드로 브라우저 거부 방지)
 fetch(finalUrl, { mode: 'no-cors' });
 }
 }
 }, true);
})();
/script

왜 이렇게 하나요? (보안 및 성능)

보안 문제: 티스토리 소스 코드에 텔레그램 토큰을 직접 넣으면 누구나 내 봇을 제어할 수 있게 됩니다. GAS를 중계 서버로 쓰면 토큰은 구글 서버 안에만 존재하므로 안전합니다.
동적 로딩 해결: 티스토리 댓글창이 0.5초 늦게 떠도 상관없습니다. 이 코드는 ‘클릭’이 발생하는 순간 실시간으로 버튼을 찾아내기 때문입니다.
통합 관리: 동일한 GAS URL을 여러 블로그(워드프레스, 티스토리 등)에 넣어서 한곳에서 알림을 모아볼 수 있습니다.

이제 댓글이 달릴 때마다 텔레그램으로 대화하듯 실시간 소통을 즐겨보세요!