Ad Billboard

Home » » 🚨 2025년 11월 기준, 블로그스팟에 실시간 구글 트렌드 경제 티커 완벽하게 넣는 전 과정(+Google Apps Script를 프록시 서버이해)

🚨 2025년 11월 기준, 블로그스팟에 실시간 구글 트렌드 경제 티커 완벽하게 넣는 전 과정(+Google Apps Script를 프록시 서버이해)

By 

🚨 2025년 11월 기준, 블로그스팟에 실시간 구글 트렌드 경제 티커 완벽하게 넣는 전 과정

안녕하세요, 가나투데이입니다.

오늘은 수많은 시행착오 끝에 진짜 완벽하게 작동하는 실시간 경제 트렌드 티커를 블로그스팟(Blogger)에 넣는 방법을 전부 공개합니다. 이 가이드만 따라 하시면 2025년 11월 28일 현재 100% 성공합니다.

왜 이렇게까지 힘들었나?

Blogger 환경에 실시간 데이터를 넣는 것이 까다로웠던 이유는 크게 두 가지입니다.

  • Blogger CSP 정책 강화: Blogger는 2024년 말부터 CSP(Content Security Policy) 정책을 강화하여 위젯 등에서 외부 API를 직접 호출하는 fetch() 명령을 대부분 차단했습니다. 이로 인해 구글 트렌드 RSS를 브라우저에서 직접 불러올 수 없게 되었습니다.

  • Apps Script 배포 복잡성: 따라서 Google Apps Script를 프록시 서버로 사용하여 데이터를 안전하게 가져와야 하는데, 이 배포 과정에서 "액세스 권한: 누구나(익명 포함)" 설정과 "검증되지 않음" 승인 과정을 누락하면 URL이 작동하지 않는 문제가 발생했습니다.

내가 겪은 모든 오류와 해결법

오류 유형 문제점 해결법
위젯 삽입 Blogger의 CSP 정책에 의해 fetch() 명령이 완전 차단됨. 위젯 대신 HTML 템플릿의 </body> 직전에 코드를 넣어야 함.
<head> 안에 삽입 HTML 표준 위반 오류 (div should not appear inside of head). CSS/JS 코드가 <body> 영역을 침범할 수 없습니다.
</header> 아래 삽입 HTML 로딩이 늦거나, 실시간 데이터가 아예 안 뜨는 문제가 발생. 안전한 실행 지점인 </body> 직전을 고수해야 합니다.
CSS 애니메이션 translateX(-66.7%) 등 정적인 값 사용 시 빈 공간이 생김. translateX(100vw)에서 translateX(-100%)로 이동하는 코드를 사용하여 빈 공간을 없앰.
Apps Script URL 오류 배포 설정을 잘못하여 /exec URL이 JSON을 반환하지 않음. 액세스 권한을 "누구나(익명 포함)"로 설정하고 권한 승인(고급→계속하기→허용) 과정을 반드시 거쳐야 합니다.

진짜 정답 위치와 코드

티커가 빈 공간 없이, 가장 빠르고 안전하게 뜨는 진짜 정답 위치는 </body> 직전입니다. (Blogger의 테마 편집 모드에서 찾아야 합니다.)

🎯 정답 위치: </body> 직전

📄 블로그스팟에 삽입할 최종 완성 코드 (HTML/CSS/JS)

XML 
<b:if cond='data:view.isHomepage or data:view.isArchive or data:view.isPost'>
  <div id="realtime-economy-ticker">
    <span class="ticker-label">경제 트렌드</span>
    <div class="ticker-wrap">
      <ul id="ticker-list"><li>로딩 중...</li></ul>
    </div>
  </div>
  <style scoped=''>
  #realtime-economy-ticker{background:#000;color:#fff;padding:16px 20px;margin:20px auto 30px;border-radius:18px;overflow:hidden;display:flex;align-items:center;box-shadow:0 6px 25px rgba(255,107,107,.4);max-width:96%;font-family:'Malgun Gothic',sans-serif;box-sizing:border-box}
  .ticker-label{font-weight:900;font-size:17px;background:linear-gradient(90deg,#ff4757,#ffa502);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-right:20px;flex-shrink:0}
  .ticker-wrap{overflow:hidden;flex:1}
  #ticker-list{display:inline-flex;animation:ticker-move 15s linear infinite;gap:60px;padding:0;margin:0;list-style:none;white-space:nowrap}
  #ticker-list a{color:#ff6b6b;font-weight:700;font-size:16.5px;text-decoration:none}
  #ticker-list a:hover{color:#fff;text-decoration:underline}
  #ticker-list span{color:#ffd93d;margin-left:7px;font-weight:900}
  @keyframes ticker-move{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}
  @media(max-width:768px){#realtime-economy-ticker{margin:15px 8px;padding:12px}}
  </style>
  <script type='text/javascript'>
  //<![CDATA[
    const MY_PROXY = '여기에-당신만의-/exec-URL-넣기';
    fetch(MY_PROXY+'?t='+Date.now())
      .then(r=>r.json())
      .then(d=>{
        const ul=document.getElementById('ticker-list');
        let h='';
        d.forEach((x,i)=>h+=`<li><a href="${x.link}" target="_blank">${x.keyword}</a><span>#${i+1}</span></li>`);
        ul.innerHTML=h;
      })
      .catch(()=>{document.getElementById('ticker-list').innerHTML='<li>코스피 · 환율 · 금리 · 부동산 · 비트코인</li>'});
  //]]>
  </script>
</b:if>

당신만 따라 하면 되는 4단계 체크리스트

1. 기존 티커 코드 제거 & 새 코드 붙여넣기

  • 기존 티커 코드 전부 삭제: 기존에 시도했던 econ-ticker, ticker-items 등의 코드를 테마 편집기에서 모두 검색하여 싹 지웁니다.

  • 새 코드 삽입: 위에서 제공된 최종 완성 코드를 통째로 복사하여, Blogger의 테마 편집 모드에서 </body> 태그 직전에 붙여넣습니다.

2. 당신만의 Google Apps Script 만들기

  • 프로젝트 생성: https://script.google.com 접속 → 새 프로젝트 클릭.

  • 코드 붙여넣기: Code.gs 내용을 지우고 아래 프록시 코드를 붙여넣은 후 저장합니다.

JavaScript 
function doGet(e) {
  return ContentService
    .createTextOutput(getKoreaEconomyTrends())
    .setMimeType(ContentService.MimeType.JSON);
}
//... (나머지 getKoreaEconomyTrends 함수 코드 전체) ...

3. Apps Script를 웹 앱으로 배포하기

이 과정에서 URL을 획득합니다. (가장 중요!)

  • 배포 시작: 상단 【배포】 → 【새 배포】 → 웹 앱 선택.

  • 설정 확인:

    • 실행 대상: 나

    • 액세스 권한: 누구나(익명 포함)

  • 배포 및 승인: 【배포】 클릭 → “검증되지 않음”이 뜨면:

    • 【고급】 → 【계속하기(안전하지 않음)】 → 【허용】 클릭.

  • URL 복사: 배포 완료 화면에서 /exec로 끝나는 URL 전체를 복사합니다.


이 포스팅은 쿠팡 파트너스 활동으로, 블로그제작에 도움을 제공합니다.

정상 예시: https://script.google.com/macros/s/당신이-복사한-긴-ID/exec

4. 블로그 코드에 URL 적용 및 저장

  • 블로그 테마 편집 모드로 돌아가서, MY_PROXY 부분을 3단계에서 복사한 URL로 정확히 교체하고 저장합니다.

JavaScript 
const MY_PROXY = 'https://script.google.com/macros/s/당신이-복사한-긴-ID/exec';

최종 확인용 임시 테스트 코드 (선택 사항)

Apps Script URL 배포를 기다리는 동안, 티커의 CSS/JS가 잘 작동하는지 확인하고 싶다면 fetch 코드 대신 잠시 이 테스트 코드를 넣어보세요.

document.getElementById('ticker-list').innerHTML = `
  • 코스피 2580#1
  • 환율 1482원#2
  • 금리 동결#3
  • 비트코인 1.1억#4
  • 서울 아파트 급등#5

    • 테스트 코드:: 
    document.getElementById('ticker-list').innerHTML = `<li><a href="#" target="_blank">코스피 2580</a><span>#1</span></li><li><a href="#" target="_blank">환율 1482원</a><span>#2</span></li><li><a href="#" target="_blank">금리 동결</a><span>#3</span></li><li><a href="#" target="_blank">비트코인 1.1억</a><span>#4</span></li><li><a href="#" target="_blank">서울 아파트 급등</a><span>#5</span></li>`;

    이 글만 차근차근 따라 하시면 오른쪽 끝에서 딱 나타나서 왼쪽으로 쭉쭉 사라지는, 빈 공간 없는 실시간 경제 티커가 당신 블로그에 영원히 자리 잡습니다.

    이제 당신도 진짜 프로 경제 블로거! 완성되면 꼭 댓글로 “성공했습니다!” 한 줄만 남겨 주세요. 제가 제일 먼저 박수 쳐드릴게요 🎉

    ── 가나투데이 드림. 2025.11.28

    #가나 투데이 #ganatoday

    그린아프로
    Share:  Facebook Twitter Google+