블로그 방문자 실시간 모바일 알림 설정 1편: 시스템 만들기

블로그를 운영하다 보면 지금 이 순간 누가 내 글을 읽고 있는지 궁금할 때가 많습니다. 단순히 통계 숫자로 보는 것이 아니라, 방문자가 들어오는 즉시 내 핸드폰으로 알림을 받을 수 있는 시스템을 구축해 보겠습니다.

특히 이번 방법은 보안까지 고려해 API 토큰 노출 걱정이 없는 ‘스크립트 속성’ 방식을 적용한 버전입니다.

스크립트 내부에 TOKEN을 직접 써두는 방식(Hard-coding)은 코드가 노출될 경우 보안에 취약할 수 있습니다. 이를 보완하기 위해 Google Apps Script의 ‘스크립트 속성(Script Properties)’ 기능을 사용해 보안을 강화하는 방법입니다.

스크립트 속성을 사용하면 코드 편집기에는 토큰이 보이지 않고, 구글 서버 내부 저장소에만 안전하게 보관할 수 있습니다.

준비 사항은 알림을 받을 메신저인 텔레그램, 구글 스크립트(보안용), 그리고 블로그에 적용할 자바스크립트입니다. 이 세 가지만 준비하면 간단하게 끝납니다.

1. 텔레그램 설정하기

텔레그램에서 필요한 것은 텔레그램 봇 토큰과 채팅방 아이디입니다. 자세한 방법은 이 링크를 참고하세요.

2. 구글 스크립트 코드 작성하기

이 링크를 통해 구글 스크립트로 이동한 뒤, 아래 방법대로 코드를 적용하세요.

👉웹앱 URL(Web App URL)

1. 보안 강화 코드 (PropertiesService 적용)

먼저 기존 코드를 아래와 같이 수정하세요. TOKEN과 CHAT_ID를 하드코딩하지 않고 시스템 설정값에서 불러오도록 합니다.

2. 스크립트 속성에 토큰 등록하는 방법

코드를 수정했다면, 이제 구글 스크립트 설정에서 실제 값을 넣어줘야 합니다.

1. 구글 앱스 스크립트 편집기 왼쪽 메뉴에서 톱니바퀴 아이콘(프로젝트 설정)을 클릭합니다.
2. 페이지 하단으로 내려가서 [스크립트 속성 편집] 버튼을 누릅니다.
3. [스크립트 속성 추가]를 눌러 다음 두 가지를 입력하고 저장합니다.
   • 속성: TELEGRAM_TOKEN / 값: 8aaaaaaaaaaaaaaaaaM
   • 속성: TELEGRAM_CHAT_ID / 값: 800000000

텔레그램 토큰 값과 채팅 아이디를 모르시겠다고요? 이 링크를 참고하세요

3. 스크립트에 코드 적용하기

구글 앱스 스크립트 편집창을 열어 기본으로 들어 있는 코드를 모두 삭제한 뒤, 아래 코드로 교체하면 됩니다.

function doGet(e) {
 // 스크립트 속성에서 보안 정보 불러오기 (코드에 직접 노출되지 않음)
 const scriptProperties = PropertiesService.getScriptProperties();
 const TOKEN = scriptProperties.getProperty('TELEGRAM_TOKEN');
 const CHAT_ID = scriptProperties.getProperty('TELEGRAM_CHAT_ID');
 
 // 브라우저에서 넘어오는 정보들
 var site = e.parameter.site || "알 수 없는 사이트";
 var title = e.parameter.title || "제목 없음";
 var url = e.parameter.url || "";
 
 // 메시지 구성
 var message = "[Visit Alert]\n" +
 "Site: " + site + "\n" +
 "Title: " + title + "\n" +
 "Link: " + 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);
 
 // 브라우저에 성공 응답 (no-cors 대응을 위해 빈 결과값 반환 가능)
 return ContentService.createTextOutput("success").setMimeType(ContentService.MimeType.TEXT);
}

이 방식의 장점

• 코드 유출 방지: 실제 토큰은 노출되지 않습니다.
• 유지보수 용이: 봇 토큰이 바뀌거나 채널 아이디를 변경해야 할 때, 코드를 수정하고 다시 배포할 필요 없이 설정값만 바꾸면 즉시 적용됩니다..

1. 주요 기능: 방문 정보 전송

• site: “Tistory(insight)” (어떤 블로그인지 식별 자신의 사이트 블로그명으로 변경하세요)
• title: 현재 접속한 글의 제목 (document.title)
• url: 현재 접속한 페이지의 전체 주소 (window.location.href)

2. 동작 방식: Google Apps Script (GAS) 연동

1. 데이터 조립: URLSearchParams를 사용하여 제목과 주소를 주소창 파라미터 형태로 만듭니다.
2. 전송: fetch 함수를 통해 구글 앱스 스크립트(AKfycb…)로 데이터를 쏩니다.
3. 알람 발생: 구글 앱스 스크립트 내부 설정에 따라, 이 데이터를 전달받은 구글 서버가 텔레그램, 카카오톡, 또는 이메일로 알람을 보냅니다.

구글 앱스에 코드를 저장하고 배포까지 진행하세요. 처음 하시면 배포 과정에서 약간 헷갈릴 수 있어요. 그때는 이 링크를 참고하세요. 그리고 웹 주소는 메모해 두세요. 아래 코드에 적용해서 블로그나 사이트에 넣어야 해서요.

<script>
(function () {

  const GAS_URL = "https://script.google.com/macros/s/구글 스크립트 주소/exec";

  const params = new URLSearchParams({
    site: "Tistory(insight)",
    title: document.title,
    url: window.location.href
  });

  fetch(`${GAS_URL}?${params.toString()}`, {
    mode: "no-cors"
  });

})();
</script>

“내 블로그 방문자 실시간 핸드폰 알람 받기”를 수행하는 핵심 스크립트입니다. 구체적으로는 다음과 같이 작동해요!

코드의 특징

• 비동기 즉시 실행: (function() { … })(); 구조로 되어 있어 페이지가 로딩되자마자 다른 요소의 방해 없이 바로 실행됩니다.
• no-cors 모드: mode: ‘no-cors’는 보안 정책(CORS)으로 인해 전송이 막히는 것을 방지하기 위해 사용되었습니다. 응답을 받지는 못해도 데이터 전달만은 확실하게 하겠다는 의도입니다.

⚠ 참고사항

티스토리 블로그 적용시와 업그레이드 버전 적용시는 이 링크를 참고하세요 업그레이드 버전입니다.

기존 버전

업그레이드 버전

이 코드를 블로그 또는 사이트 스킨 편집의 HTML 섹션 중 head와 /head 사이, 혹은 /body 직전에 넣으시면 작동합니다.

현재 GAS_URL에 연결된 구글 스크립트가 정상적으로 배포되어 있다면, 이제 누군가 내 블로그 글을 읽을 때마다 핸드폰으로 “어떤 글을 읽고 있는지” 실시간으로 알람이 뜰거에요

만약 알람이 오지 않는다면 PropertiesService에 입력한 속성 이름과 코드 내의 이름이 일치하는지 확인해 보세요!