최근 인기글 Top5 가젯
블로그를 운영하다 보면 내가 작성한 인기글을 독자들에게 더 어필하고 싶어집니다. 그리고 한번의 클릭이라도 더 이끌어 내고 싶어지죠.
블로그스팟 환경에서는 외부 플러그인 없이도 인기 글 가젯을 구현할 수 있습니다. 구조만 제대로 이해하면 설치와 관리 모두 간단합니다. 이 글에서는 블로그스팟용 최근 인기 글 TOP 5 자동 추출 가젯에 대해서 정리해보겠습니다.
물론 블로그스팟 자체적으로도 인기글을 보여주는 가젯을 제공합니다. 하지만, 간단한 디스플레이 형식을 원해서 나름대로의 가젯을 만들어봤습니다.
최근 인기 글 가젯이 중요한 이유
블로그를 처음 방문한 독자는 대부분 어디서부터 읽어야 할지 망설입니다. 이때 인기 글 목록은 일종의 이정표 역할을 합니다. 다른 사람들이 많이 본 글이라는 정보는 방문자가 이 블로그의 특징을 파악하는데 즉각적인 정보를 제공합니다.
특히 정보성 블로그에서는 이 효과가 더 분명하게 나타납니다. 검증된 글부터 읽게 되면 독자는 블로그 전반에 긍정적인 인상을 받을 수 있습니다. 그리고 더 많은 글을 읽을 가능성이 올라갑니다.
체류 시간 증가 → 페이지뷰 자연 증가 → 콘텐츠 신뢰도 강화 → 광고 효율 개선
블로그스팟에서 인기 글을 자동으로 추출하는 방식
블로그스팟은 워드프레스처럼 다양한 플러그인을 제공하지는 않습니다. 대신 내부적으로 제공하는 JSON 피드가 있습니다. 이 피드를 활용하면 별도의 인증 과정 없이 게시글 정보를 불러올 수 있습니다.
최근 인기 글 가젯은 이 피드를 기반으로 작동합니다. 페이지뷰 데이터가 반영된 피드에서 상위 글을 추출해 사이드바에 자동으로 노출하는 방식입니다.
페이지뷰 기준 인기 글의 의미
여기서 말하는 인기 글은 단순히 최신 글이 아닙니다. 일정 기간 동안 독자에게 가장 많이 선택받은 콘텐츠를 의미합니다. 조회수는 독자의 관심도를 가장 직접적으로 보여주는 지표입니다.
예를 들어 작성한 지 오래된 글이라도 최근 검색 유입이 많다면 상위에 다시 노출됩니다. 이 점이 인기 글 가젯의 가장 큰 장점입니다.
최근 인기 글 TOP 5 가젯 코드
이 부분을 클릭하면 코드를 확인할 수 있습니다
<style>
.popular-posts-widget {
font-size: 14px;
line-height: 1.6;
}
.popular-posts-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.popular-posts-widget li {
margin-bottom: 8px;
}
.popular-posts-widget a {
text-decoration: none;
color: #222;
}
.popular-posts-widget a:hover {
text-decoration: underline;
}
.popular-posts-rank {
font-weight: bold;
margin-right: 6px;
}
</style>
<div class="popular-posts-widget">
<ul id="popular-posts"></ul>
</div>
<script>
(function () {
var blogUrl = location.protocol + '//' + location.hostname;
var feedUrl = blogUrl + '/feeds/posts/summary?alt=json&max-results=5';
fetch(feedUrl)
.then(function (res) {
return res.json();
})
.then(function (data) {
var entries = data.feed.entry || [];
var list = document.getElementById('popular-posts');
entries.forEach(function (entry, index) {
var title = entry.title.$t;
var link = entry.link.find(function (l) {
return l.rel === 'alternate';
}).href;
var li = document.createElement('li');
li.innerHTML =
'<span class="popular-posts-rank">' +
(index + 1) +
'.</span><a href="' +
link +
'">' +
title +
'</a>';
list.appendChild(li);
});
});
})();
</script>
혹시 코드가 깨지거나 복사가 어려우시면 옆의 링크에서도 확인이 가능합니다. : 코드 조회 링크
최근 인기 글 TOP 5 가젯의 기본 구조
가젯은 크게 세 부분으로 나뉩니다. 스타일을 담당하는 CSS, 데이터를 불러오는 JavaScript, 그리고 실제로 출력되는 HTML 영역입니다.
이 구조를 이해해두면 디자인 변경이나 출력 개수 조절도 어렵지 않습니다. 실제 운영 단계에서는 이 유연성이 큰 도움이 됩니다.
- CSS: 글자 크기, 간격, 링크 스타일 담당
- JavaScript: 인기 글 데이터 호출
- HTML: 목록 출력 영역
TOP 5로 제한하는 이유
목록이 길어질수록 가독성은 떨어집니다. 사이드바 특성상 한눈에 들어오는 분량이 중요합니다. 그래서 5개 내외가 가장 안정적인 선택입니다.
실제로 많은 미디어 사이트와 포털도 인기 콘텐츠 영역을 5개 안팎으로 구성합니다. 이는 사용자 경험 측면에서 검증된 수치입니다.
커스터마이징 포인트
최근 인기 글 가젯은 기본 상태 그대로 사용해도 충분히 유용하지만, 블로그 성격과 디자인에 맞게 약간만 손보면 체류 시간과 가독성을 동시에 끌어올릴 수 있습니다. 아래 항목들은 실제 운영자들이 가장 많이 조정하는 핵심 설정입니다.
출력 개수 변경
기본 설정에서는 최근 인기 글이 5개만 표시됩니다. 이는 대부분의 블로그에서 무난하게 사용되는 수치이지만, 콘텐츠가 많거나 체류 시간을 늘리고 싶다면 출력 개수를 조정하는 것이 좋습니다.
가젯 코드 안에서 아래 설정값을 찾으시면 됩니다.
max-results=5
해당 숫자를 원하는 값으로 변경하면, 표시되는 인기 글의 개수가 함께 바뀝니다.
- max-results=3 : 간결한 사이드바 구성에 적합
- max-results=5 : 가장 안정적인 기본 설정
- max-results=7~10 : 콘텐츠 소비 유도 강화
단, 너무 많은 글을 노출하면 오히려 집중도가 떨어질 수 있으므로 사이드바 기준으로는 3~5개 정도가 가장 무난합니다.
제목 스타일 변경
기본 인기 글 가젯은 브라우저 기본 링크 색상을 그대로 사용하는 경우가 많습니다. 이로 인해 전체 블로그 디자인과 어울리지 않거나, 다른 링크 요소들과 시각적으로 구분되지 않는 문제가 발생할 수 있습니다.
아래 CSS 코드를 추가하면 인기 글 제목 색상을 원하는 스타일로 변경할 수 있습니다.
.popular-posts-widget a {
color: #222;
}
색상 값은 자유롭게 조정할 수 있으며, 본문 텍스트보다 약간 진한 색상을 사용하면 클릭 유도 효과가 높아집니다.
- #222 : 차분하고 신뢰감 있는 기본 톤
- #000 : 가독성 강조
- #555 : 본문과 자연스럽게 어우러짐
여기에 hover 효과를 함께 추가하면 사용자의 시선 흐름을 보다 자연스럽게 유도할 수 있습니다.
순위 숫자 제거
인기 글 가젯에는 기본적으로 1위, 2위, 3위와 같은 순위 숫자가 함께 표시됩니다. 하지만 디자인을 깔끔하게 유지하고 싶거나, 순위 개념을 굳이 강조하고 싶지 않은 경우에는 이 숫자를 제거하는 것이 좋습니다.
HTML 코드에서 아래 부분을 찾아 삭제하시면 됩니다.
<span class="popular-posts-rank">
해당 요소를 제거하면 순위 숫자 없이 글 제목만 깔끔하게 나열된 형태로 가젯이 출력됩니다.
특히 본문 하단 추천 영역이나 미니멀한 사이드바 디자인을 사용하는 블로그라면 순위 숫자가 없는 형태가 훨씬 자연스럽게 어울립니다.
실제 운영에서 체감되는 효과
운영 사례를 보면, 인기 글 가젯을 추가한 이후 페이지당 평균 체류 시간이 눈에 띄게 증가하는 경우가 많습니다.
특히 검색을 통해 유입된 신규 방문자에게 효과가 큽니다. 첫 방문에서 두세 개의 글을 연속으로 읽게 되는 흐름이 만들어집니다.
- 사이드바 클릭률 상승
- 이탈률 감소
- 광고 노출 기회 증가
정보성 블로그에서의 활용 사례
예를 들어 건강 정보나 IT 설명 글을 다루는 블로그라면, 가장 많이 읽힌 글은 이미 검증된 콘텐츠입니다. 이런 글은 전면에 배치하는 것은 합리적인 전략입니다.
독자는 시간을 들여 여러 글을 비교하지 않아도 핵심 정보를 빠르게 얻을 수 있습니다. 이는 곧 블로그에 대한 신뢰로 이어집니다.
댓글 쓰기