티스토리 블로그를 운영하게 되면, 기본적으로 최신글과 인기글을 사이드바에 노출할 수 있습니다. 그러나 블로그 운영자가 특정 카테고리의 글을 선별적으로 노출해야 하는 경우도 있습니다. 그래서 이번에는 간단한 방법으로 나만의 카테고리 최신글을 사이드바에 노출하는 방법을 알아보겠습니다.
자바스크립트(JavaScript)를 활용하여 특정 카테고리의 글을 자동으로 불러오는 방법과, 이를 통해 관련된 글의 광고를 노출함으로써 광고 수익을 조금이라도 더 확보하는 차원에서 적용해보았습니다.
블로그 운영자에게 가장 큰 고민은 과거의 양질의 글이 묻히는 것과, 방문자가 한 개의 글만 읽고 이탈하는 점입니다. 이를 해결하기 위해 연관 콘텐츠의 자동 노출은 선택이 아닌 필수라고 할 수 있습니다. 특히, 블로그 운영자의 의도를 최대한 잘 반영하여 사이드바에 노출하는 것은 필수적이라고 할 수 있습니다.
- 방문자 체류 시간(Duration Time) 증가: 관련 카테고리의 최신글을 보여줌으로써 클릭을 유도합니다.
- 크롤링 빈도 최적화: 페이지 내 링크 구조가 최신글 위주로 계속 갱신되면 검색 엔진 봇이 더 자주 방문합니다.
- 사용자 경험(UX) 개선: 경제 정보처럼 시의성이 중요한 콘텐츠는 최신 정보를 즉시 노출하는 것이 신뢰도를 높입니다.
자바스크립트를 활용한 특정 카테고리 추출 (PC 최적화)
티스토리의 내부 구조를 활용하여 특정 경로(category/money-insight/economy)의 데이터를 비동기(Async) 방식으로 호출할 것입니다. 이 방식은 페이지 전체를 새로고침하지 않고 데이터만 쏙 뽑아오기 때문에 매우 빠릅니다.
특히, 모바일 환경에서는 데이터 소모와 로딩 속도를 고려해 선택적으로 노출하고, PC 환경에서는 화려하고 정보력 있는 레이아웃을 제공하는 전략을 취할 수 있습니다.
1. 노출 적용 코드 (HTML 편집 모드용)
아래 코드를 적용하시면 됩니다. 사이드바 또는 원하는 노출 위치에 다음 코드를 삽입해 주세요:
div id="economy-posts-container" class="seo-optimized-list"
div class="loading-spinner"
p최신 경제 통찰력을 불러오는 중입니다.../p
/div
/div
저는 경제 관련 카테고리를 노출하기 때문에 id 속성을 economy-posts-container로 설정했습니다. 필요에 따라 변경해서 사용하시면 됩니다.
2. CSS 적용하기
타이틀(제목)은 상단에 노출하고, 이미지는 그 아래에, 그리고 글의 일부 내용은 하단에 배치한 CSS입니다. 이와 같은 구성을 자신의 블로그 스킨에 맞게 수정하여 사용하시면 됩니다.
style
/* 검색 엔진과 사용자 모두를 만족시키는 디자인 */
#economy-posts-container {
display: flex;
flex-direction: column;
gap: 20px;
margin: 30px 0;
}
.eco-post-item {
display: flex;
gap: 18px;
padding: 15px;
border: 1px solid #f0f0f0;
border-radius: 12px;
text-decoration: none !important;
color: #333 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #fff;
}
.eco-post-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
border-color: #3498db;
}
.eco-post-thumb {
flex-shrink: 0;
}
.eco-post-thumb img {
width: 150px;
height: 100px;
object-fit: cover;
border-radius: 8px;
background-color: #eee;
}
.eco-post-info {
flex: 1;
min-width: 0;
}
.eco-post-title {
margin: 0 0 8px 0 !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #222 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eco-post-date {
font-size: 12px;
color: #999;
margin-bottom: 8px;
}
.eco-post-excerpt {
margin: 0 !important;
font-size: 14px !important;
color: #666 !important;
line-height: 1.6 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
3. 자바스크립트 코드
아래 코드는 HTML 하단, 즉 /html 태그 위에 적당한 위치에 적용하세요. 모바일 환경에서는 로딩 속도에 영향을 줄 수 있기 때문에, 모바일에서는 노출되지 않도록 설정하였습니다. 필요에 따라 적용하실 수 있지만, 모바일에서는 리소스 소모가 많으므로 권장하지는 않습니다.
const targetUrl = '/category/특정-카테고리-명';
style
/* 모바일 대응: 화면이 작을 경우 썸네일 숨기기 선택 가능 */
@media (max-width: 768px) {
.eco-post-thumb img { width: 100px; height: 70px; }
.eco-post-title { font-size: 16px !important; }
}
/style
script
(async function() {
const container = document.getElementById(‘economy-posts-container’);
const maxPosts = 5;
// 대상 카테고리 URL 경로
const targetUrl = ‘/category/특정-카테고리-명’;
try {
const res = await fetch(targetUrl);
if (!res.ok) throw new Error(‘Network response was not ok’);
const text = await res.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, ‘text/html’);
// 티스토리 스킨별 선택자(Selector) 조정 필요 (예: .post-item, .article-content 등)
// 아래는 일반적인 티스토리 목록 구조를 타겟팅합니다.
const items = Array.from(doc.querySelectorAll(‘.post-item, .list-row, .article-content’)).slice(0, maxPosts);
if(items.length === 0) {
container.innerHTML = ‘p style=”text-align:center; color:#999; padding:20px;”현재 해당 카테고리에 최신글이 없습니다./p’;
return;
}
let html = ”;
items.forEach(item = {
const linkEl = item.querySelector(‘a’)?.href || ‘#’;
const titleEl = item.querySelector(‘.title, .link_post, dt’)?.textContent?.trim() || ‘제목 없음’;
const thumbEl = item.querySelector(‘img’)?.src || ‘https://t1.daumcdn.net/tistory_admin/static/top/pc/img_common_tistory_empty.png’;
const dateEl = item.querySelector(‘.date, .post-date’)?.textContent?.trim() || ”;
const excerptEl = item.querySelector(‘.excerpt, .desc, dd’)?.textContent?.trim() || ‘본문 요약 정보를 불러올 수 없습니다.’;
html += `
article class=”eco-article-card”
a href=”$linkEl}” class=”eco-post-item”
div class=”eco-post-thumb”
img src=”$thumbUrlFix(thumbEl)}” alt=”$titleEl}” loading=”lazy”
/div
div class=”eco-post-info”
h3 class=”eco-post-title”$titleEl}/h3
div class=”eco-post-date”$dateEl}/div
p class=”eco-post-excerpt”$excerptEl.substring(0, 120)}…/p
/div
/a
/article
`;
});
container.innerHTML = html;
} catch(e) {
console.error(‘Fetch error:’, e);
container.innerHTML = ‘p style=”text-align:center; padding:20px;”콘텐츠를 불러오는 중 오류가 발생했습니다./p’;
}
// 티스토리 이미지 경로 최적화 함수
function thumbUrlFix(url) {
if(url.includes(’tistory.com/image’)) return url;
if(url.includes(’tistory.com/fname’)) return url;
return url;
}
})();
/script
4. 실전 적용 및 주의사항
1) HTML 편집 모드 활용 티스토리 관리자 화면의 [스킨 편집] [html 편집]으로 들어가 원하는 위치에 코드를 삽입하세요.
2) 모바일 로딩 속도 자바스크립트 호출은 브라우저 자원을 소모합니다. async와 defer 속성을 적절히 활용하고, 이미지는 반드시 loading=”lazy” 속성을 부여하여 초기 로딩 속도를 방해하지 않도록 해야 합니다.
3) 카테고리 경로 확인 티스토리 스킨마다 카테고리 주소 체계가 다를 수 있습니다. 본인의 블로그에서 특정 카테고리를 클릭했을 때 주소창에 뜨는 경로(예: /category/example)를 targetUrl 상수에 정확히 입력해야 합니다.