수익형 블로그를 운영하다 보면 어느 순간 이런 고민이 생깁니다. “글은 꾸준히 쓰고 있는데, 뭔가 블로그가 조용해 보인다.” 조회수는 나오는데, 댓글은 뜸하고, 처음 들어온 방문자가 머무는 시간도 짧아 보일 때가 있죠.
이럴 때면 뭔가 댓글로 주고 받았던 상호작용들을 블로그 전면에 띄워보고 싶습니다.
특히 댓글이 자동으로 바뀌며 노출되는 최근 댓글 롤링 가젯을 달면, 사람들이 이용하는 공간으로서의 내 블로그를 더 돋보이게 할 수 있지 않을까? 라는 희망이 듭니다.
최근 댓글 롤링 가젯이 왜 중요한가
블로그를 처음 방문했을 때 독자는 아주 빠른 시간 안에 판단을 내립니다. “이 블로그는 지금도 운영 중일까?”, “정보가 살아 있을까?” 같은 질문이죠. 이 판단은 보통 3초 안에 끝납니다.
이때 사이드바에 최근 댓글이 자동으로 바뀌며 표시되는 모습은 말 없이도 많은 정보를 전달합니다. “아, 여긴 최근에도 사람들이 읽고, 반응하고 있구나.” 이 한 줄짜리 신뢰 신호가 체류시간에 영향을 줍니다.
수익형 블로그 관점에서의 장점도 있습니다.
- 블로그 활동성 신뢰도 상승 – 다수의 사람과 참여하는 댓글은 가장 직관적인 증거입니다.
- 사이드바 체류 시간 증가 – 롤링 효과로 시선이 머무르게 되어 체류시간이 증가합니다.
- 내부 이동 유도 – 댓글 클릭 → 해당 글로 이동하는 유인효과가 있습니다.
- 광고 노출 기회 증가 – 세션당 페이지 수와 체류시간 상승할 수 있습니다.
중요한 건, 이 가젯이 광고 클릭을 직접 유도하지 않는다는 점입니다. 애드센스 정책에 저촉되지 않으면서도, 결과적 긍적적인 지표들을 올려 줄 수 있습니다.
가젯 설치 후 화면 배치
가젯을 설치하면 아래 스크린 캡쳐처럼 디스플레이 됩니다. 오른쪽 중간쯤을 보세요. 최근 댓글 이라고 표시됩니다.
모바일에서도 화면의 하단에 동일하게 표시됩니다.
가젯 설치법
- 블로그스팟 관리자 → 레이아웃
- 사이드바 영역 → 가젯 추가
- HTML/JavaScript 가젯 선택
이 안에 HTML + CSS + JavaScript를 한 번에 넣는 방식입니다.
아래 스크린 캡쳐의 오른쪽 중간 부분을 봐주세요. "댓글 자동 롤링 가젯"이라고 이름을 달았습니다.
최근 댓글 롤링 가젯의 동작 원리
이 가젯은 외부 서비스를 쓰지 않습니다. Blogger 자체에서 제공하는 댓글 피드(JSON)를 불러와 최근 댓글을 자동으로 출력하는 구조입니다.
동작 흐름을 간단히 정리하면 다음과 같습니다.
- 최근 댓글을 최대 N개까지 불러옴
- 작성자, 날짜, 댓글 일부 내용 추출
- 카드 형태로 하나씩 표시
- 약 3~4초 간격으로 자동 전환
- 클릭 시 해당 댓글이 달린 글로 이동
이 가젯은 제가 사용하는 Igniel님의 Fiksioner v4에서도 잘 호환됩니다.
설치 코드
(클릭) 댓글 자동 롤링 코드 가젯 코드
<div id="rcw" class="rcw">
<div class="rcw-head">
<span class="rcw-title">최근 댓글</span>
</div>
<a class="rcw-item" id="rcwLink" href="#" rel="nofollow">
<div class="rcw-meta">
<span class="rcw-name" id="rcwName">불러오는 중…</span>
<span class="rcw-dot">·</span>
<span class="rcw-date" id="rcwDate"></span>
</div>
<div class="rcw-snippet" id="rcwSnippet"></div>
<div class="rcw-post" id="rcwPost"></div>
</a>
</div>
<style>
/* Fiksioner v4 사이드바에 무난한 카드 스타일 */
.rcw{border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.08);padding:14px;margin:14px 0}
.rcw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rcw-title{font-weight:700;font-size:15px}
.rcw-item{display:block;text-decoration:none;border-radius:12px;padding:12px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.rcw-meta{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.8;margin-bottom:6px}
.rcw-dot{opacity:.6}
.rcw-snippet{font-size:13px;line-height:1.5;margin:0 0 8px 0}
.rcw-post{font-size:12px;opacity:.8}
.rcw-item:hover{transform:translateY(-1px);transition:transform .12s ease}
@media (prefers-color-scheme: dark){
.rcw{background:#111;color:#fff}
.rcw-item{background:#1c1c1c;color:#fff}
}
@media (prefers-color-scheme: light){
.rcw{background:#fff;color:#111}
.rcw-item{background:#f7f7f7;color:#111}
}
</style>
<script>
/**
* 최근 댓글 롤링 가젯 (Blogger JSONP)
* - maxResults: 가져올 댓글 개수
* - rotateMs: 롤링 간격(ms)
* - minLen: 표시 최소 길이(짧으면 다음 댓글로 넘어감)
*/
(function(){
var cfg = {
maxResults: 15,
rotateMs: 3500,
minLen: 8
};
var linkEl = document.getElementById('rcwLink');
var nameEl = document.getElementById('rcwName');
var dateEl = document.getElementById('rcwDate');
var snipEl = document.getElementById('rcwSnippet');
var postEl = document.getElementById('rcwPost');
// 현재 블로그 도메인 사용(커스텀 도메인/블로그스팟 모두 대응)
var blogUrl = (location.origin || (location.protocol + '//' + location.host));
// 안전한 텍스트 변환
function stripHtml(s){
return String(s || '')
.replace(/<[^>]*>/g,' ')
.replace(/\s+/g,' ')
.trim();
}
function fmtDate(iso){
try{
var d = new Date(iso);
if (isNaN(d.getTime())) return '';
// 한국식 YYYY.MM.DD
var y=d.getFullYear(), m=('0'+(d.getMonth()+1)).slice(-2), dd=('0'+d.getDate()).slice(-2);
return y + '.' + m + '.' + dd;
}catch(e){ return ''; }
}
var items = [];
var idx = 0;
var timer = null;
function render(i){
if(!items.length) return;
var it = items[i];
linkEl.href = it.link || '#';
nameEl.textContent = it.author || '익명';
dateEl.textContent = it.date || '';
snipEl.textContent = it.snippet || '';
postEl.textContent = it.postTitle ? ('↳ ' + it.postTitle) : '';
// 너무 짧은 댓글이면 다음으로
if((it.snippet || '').length < cfg.minLen && items.length > 1){
idx = (idx + 1) % items.length;
render(idx);
}
}
function start(){
if(timer) clearInterval(timer);
render(idx);
timer = setInterval(function(){
idx = (idx + 1) % items.length;
render(idx);
}, cfg.rotateMs);
}
// JSONP 콜백(전역에 노출)
var cbName = 'rcw_cb_' + Math.random().toString(36).slice(2);
window[cbName] = function(data){
try{
var entries = (data && data.feed && data.feed.entry) ? data.feed.entry : [];
items = entries.map(function(e){
// 댓글 링크
var link = '';
if(e.link && e.link.length){
// 보통 alternate가 댓글 permalink
var alt = e.link.find(function(l){ return l.rel === 'alternate'; });
link = (alt && alt.href) ? alt.href : (e.link[0].href || '');
}
// 글 제목
var postTitle = '';
if(e['thr$in-reply-to'] && e['thr$in-reply-to'].title){
postTitle = e['thr$in-reply-to'].title;
}
// 작성자
var author = (e.author && e.author[0] && e.author[0].name && e.author[0].name.$t) ? e.author[0].name.$t : '익명';
// 내용
var content = '';
if(e.content && e.content.$t) content = e.content.$t;
else if(e.summary && e.summary.$t) content = e.summary.$t;
var snippet = stripHtml(content);
if(snippet.length > 80) snippet = snippet.slice(0, 80) + '…';
// 날짜
var iso = (e.published && e.published.$t) ? e.published.$t : '';
var date = fmtDate(iso);
return { link: link, postTitle: postTitle, author: author, snippet: snippet, date: date };
}).filter(function(it){ return it.link && it.snippet; });
if(!items.length){
nameEl.textContent = '댓글이 없습니다';
snipEl.textContent = '첫 댓글을 기다리고 있어요.';
postEl.textContent = '';
dateEl.textContent = '';
return;
}
idx = 0;
start();
} catch(err){
nameEl.textContent = '불러오기 실패';
snipEl.textContent = '잠시 후 다시 시도해주세요.';
postEl.textContent = '';
dateEl.textContent = '';
} finally {
// cleanup
try{ delete window[cbName]; }catch(e){ window[cbName]=undefined; }
}
};
// JSONP 스크립트 삽입
var s = document.createElement('script');
s.src = blogUrl + '/feeds/comments/default?alt=json-in-script&max-results='
+ encodeURIComponent(cfg.maxResults) + '&callback=' + encodeURIComponent(cbName);
s.onerror = function(){
nameEl.textContent = '불러오기 실패';
snipEl.textContent = '피드 접근이 차단되었거나 네트워크 문제입니다.';
postEl.textContent = '';
dateEl.textContent = '';
};
document.body.appendChild(s);
})();
</script>
만약 잘 작동하지 않으신다면
댓글 기능이 꺼져 있는 경우
의외로 가장 많이 놓치는 부분입니다. 설정 → 게시물, 댓글 → 댓글 사용이 꺼져 있으면 아무리 가젯을 잘 만들어도 표시될 댓글이 없습니다.
실제 댓글이 하나도 없는 경우
최근 댓글 가젯은 말 그대로 “최근 댓글”을 보여주는 기능입니다. 최소한 댓글이 1개 이상 있어야 정상 작동합니다.
모바일에서 안 보이는 경우
모바일에서 안 보인다면, 먼저 PC 화면에서 정상 표시되는지를 확인하세요. 원래 사용하시는 테마의 모바일 대응 방법에 따라 위치와 표시 방법이 달라질 수 있습니다.
제가 사용하는 Igniel님의 Fiksioner v4는 모바일 환경에서 사이드바가 아래로 위치됩니다.
정리하며
최근 댓글 롤링 가젯은 구현 난이도에 비해 얻는 효과가 꽤 큽니다. 블로그를 더 활발하게 보이게 만들고, 방문자의 체류 흐름을 자연스럽게 늘려줍니다.
댓글 쓰기