🚨 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

그린아프로

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

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

왜 이렇게까지 힘들었나?

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

진짜 정답 위치와 코드

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

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

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

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

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

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

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

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

인기 글

댓글 쓰기

갤럭시Z폴드7, S펜 미지원 사태! 그럼 어떤 펜을 써야 할까? 호환 스타일러스펜 완전 가이드

문의하기 양식

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

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

왜 이렇게까지 힘들었나?

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

진짜 정답 위치와 코드

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

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

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

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

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

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

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

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

인기 글

댓글 쓰기

문의하기 양식

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