티스토리 카테고리 최신 글 비동기 로딩 스크립트 소개

기본 관련글 플러그인 사용 시 발생하는 이미지 공백, 제목 축약, H태그 충돌 문제를 분석하고 실제로 티스토리에 바로 적용 가능한 최적화 코드와 적용 방법을 제공합니다.

이번글에는 티스토리 블로그에서 본문 하단에 동일카테고리의 최신 포스팅 5개를 동적으로 생성하는 자바스크립트 코드를 공유합니다.. 이 코드는 SEO에서 발생할수 있는 문제를 최소화 하고 브라우저의 메인 스레드를 방해하지 않으면서 데이터를 수집하는 간단한 방법입니다.

기존 최신글과 관련글의 문제점

기본적으로 티스토리 블로그에서는 관련 글과 자체 플러그인을 통해 카테고리의 다른 글을 글 본문 하단에 표시할 수 있는 기능을 제공합니다.
그러나 이 기능을 그대로 사용하면 몇 가지 문제가 발생할 수 있습니다. 저 역시 기존에는 관련 글 기능은 사용하지 않고, 카테고리의 다른 글 플러그인만 사용해 왔습니다.

하지만 최근에는 굳이 이러한 플러그인을 사용할 필요가 없다고 판단하여, 제가 직접 사용하려고 간단한 코드를 제작하게 되었습니다.
우선, 왜 티스토리에서 기본적으로 제공하는 쉽고 편리한 관련 글 및 카테고리의 다른 글 기능이 문제가 될 수 있는지부터 살펴보겠습니다.

1. 관련 글 기능의 문제점

콘텐츠 제작 시 이미지를 첨부하지 않으면, 이미지 누락으로 인해 전체 디자인이 보기 좋지 않게 깨집니다.또한 제목이 지나치게 짧게 노출되어, 방문자가 해당 글이 어떤 내용을 담고 있는지 전혀 파악할 수 없습니다.

2. 카테고리의 다른 글 기능의 문제점

카테고리 상단 제목에 H4 태그가 기본적으로 적용되어 있어, 본문 콘텐츠에서 H 태그를 함께 사용할 경우 헤딩 구조(Hierarchy)가 꼬이면서 SEO(코어 웹 바이탈 및 문서 구조)에 문제가 발생할 수 있습니다.

또한 기본 글자 색상 대비가 충분하지 않아, 접근성 점수(Accessibility Score)가 하락하는 원인이 됩니다..

카테고리 다른글 코드 작동 방식

1. 데이터 수집 및 파싱 로직: Fetch API와 DOMParser

스크립트는 사용자가 현재 보고 있는 글의 카테고리 정보를 바탕으로 네트워크 통신을 수행합니다.

비동기 통신 (Fetch API):fetch("/category/" + categoryPath)를 통해 해당 카테고리 목록 페이지의 전체 HTML 소스를 가져옵니다. 페이지 새로고침 없이 배경에서 데이터를 로드하는 방식입니다.
클라이언트 사이드 파싱 (DOMParser): 가져온 텍스트 형태의 HTML 데이터를 DOMParser().parseFromString을 통해 메모리상의 가상 DOM 문서로 변환합니다. 이를 통해 실제 화면에는 영향을 주지 않고 필요한 데이터만 추출할 수 있습니다.

2. 데이터 정제 및 보안 처리

수집된 데이터 중 유효한 콘텐츠만을 선별하여 리스트를 구성하는 과정입니다.

단계	적용 기술 및 로직	목적
중복 검사	`Set()` 자료구조 및 `currentPath` 비교	현재 읽고 있는 글이 목록에 중복 노출되는 것을 방지
데이터 추출	`querySelectorAll` 및 `querySelector`	제목, 링크, 요약문(excerpt) 등의 특정 클래스 요소 선별
텍스트 가공	`trim()` 및 정규표현식 `replace(/s+/g, " ")`	불필요한 공백 제거 및 텍스트 데이터 정규화
길이 제한	`slice(0, 120)`	레이아웃 깨짐 방지를 위한 요약문 길이 최적화

3. 동적 DOM 생성

최종적으로 가공된 데이터를 실제 웹 페이지에 삽입하고 메모리를 관리하는 단계입니다.

동적 노드 삽입:document.createElement("li")와 innerHTML을 조합하여 각 게시글의 링크와 제목을 포함한 HTML 구조를 생성한 뒤, appendChild로 기존 목록(ul)에 추가합니다.

4. 예외 처리 전략

네트워크 오류나 카테고리 정보 부재 시 발생할 수 있는 문제를 방지하기 위해 catch 구문과 조건문을 활용합니다. 만약 가져올 데이터가 하나도 없을 경우 sectionEl.style.display = "none" 처리를 통해 빈 영역이 노출되지 않도록 UI의 완성도를 유지합니다.

5. 글 하단 광고 노출 최적화

콘텐츠 하단에 광고를 배치하면 대부분 노출 성과가 좋지 않은 경우가 많습니다.
그 이유 중 하나는 광고 주변에 의미 있는 콘텐츠가 부족하여 광고 입찰(Ad Auction)에 불리하게 작용하기 때문입니다.

그래서 아래 코드는 단순히 카테고리의 다른 글을 제목만 나열하는 방식이 아니라,
해당 글과 관련된 요약 내용을 함께 표시하도록 구성하여,
광고 문맥 신호(Contextual Signal)를 강화하고 광고 노출이 보다 원활하게 이루어지도록 설계했습니다.

카테고리 최신 글 자동 출력 코드 설명및 설치 방법

이 코드는 현재 보고 있는 글이 속한 카테고리를 기준으로, 같은 카테고리의 최신 글 5개를 자동으로 불러와 글 하단에 출력하는 기능을 합니다.

페이지가 로드되면 현재 글의 카테고리명을 읽어 해당 카테고리 페이지를 직접 불러오고, 그 안에서 제목과 요약(excerpt) 정보를 추출해 목록 형태로 표시합니다. 이 과정에서 현재 보고 있는 글은 제외되며, 중복 글도 자동으로 필터링됩니다.

또한 요약 문장을 함께 출력하기 때문에, 단순한 제목 나열 방식보다 콘텐츠 문맥이 강화되어글 하단 광고(애드센스) 노출 및 입찰 환경에도 긍정적인 영향을 줄 수 있습니다.

별도의 플러그인을 사용하지 않으며, 티스토리 기본 구조를 그대로 활용하기 때문에 가볍고 안정적으로 동작하는 것이 특징입니다.

section id="category-latest" P이 카테고리 최신 글/P ul id="category-latest-list"/ul /section


script

(function () {

 "use strict";
 if (!/^/d+$/.test(location.pathname)) return;
 const categoryEl = document.querySelector(".category");

 const listEl = document.getElementById("category-latest-list");

 const sectionEl = document.getElementById("category-latest");

 if (!categoryEl || !listEl) return;
 const categoryPath = categoryEl.textContent.trim();

 if (!categoryPath) return;
 const currentPath = location.pathname;

 const used = new Set();
 fetch("/category/" + categoryPath)

 .then((r) = r.text())

 .then((html) = {

 const doc = new DOMParser().parseFromString(html, "text/html");

 const items = doc.querySelectorAll("ul.posts-container li");
 let count = 0;
 for (const item of items) {

 if (count = 5) break;
 const linkEl = item.querySelector(".post-item a[href^='/']");

 const titleEl = item.querySelector(".title");

 const descEl = item.querySelector(".excerpt");
 if (!linkEl || !titleEl) continue;
 const url = linkEl.getAttribute("href");

 if (!url || url === currentPath || used.has(url)) continue;

 used.add(url);
 const title = titleEl.textContent.trim();

 if (!title) continue;
 let desc = "";

 if (descEl) {

 desc = descEl.textContent.trim().replace(/s+/g, " ").slice(0, 120);

 }
 const li = document.createElement("li");

 li.innerHTML =

 'a href="' +

 url +

 '"' +

 'strong class="cat-title"' +

 title +

 "/strong" +

 (desc ? 'span class="cat-desc"' + desc + "/span" : "") +

 "/a";
 listEl.appendChild(li);

 count++;

 }

if (count === 0 && sectionEl) sectionEl.style.display = "none"; }) .catch(() = { if (sectionEl) sectionEl.style.display = "none"; }); })(); /script

티스토리 블로그 설치 방법

1. HTML 삽입 위치 선택

아래 위치 중 하나만 선택해 삽입하면 됩니다.

글쓰기 화면 HTML 모드 글 하단
스킨 편집 HTML /article 또는 /div!– article — 바로 위
스킨 편집 HTML /body 바로 위

2. 코드 삽입

아래 코드를 그대로 복사해 선택한 위치에 붙여 넣습니다.

모바일PC 공통으로 사용 가능
글 페이지(/숫자)에서만 실행되도록 조건이 이미 포함되어 있음
추가 수정 없이 바로 사용 가능

(사용 중인 스킨에서 .category, .posts-container, .title, .excerpt 구조가 유지되어야 정상 작동합니다. )

3. 기본 CSS

#category-latest { margin: 48px auto 0; padding-top: 28px; border-top: 1px solid #e6e6e6; max-width: 1200px; }


#category-latest p, .related-articles p {

 font-size: 1.15rem;

 font-weight: 700;

 margin-bottom: 20px;

 color: #111;

}
#category-latest ul {

 list-style: none;

 padding: 0;

 margin: 0;

}
#category-latest li {

 margin-bottom: 20px;

}
#category-latest a {

 display: block;

 padding: 14px 16px;

 border-radius: 10px;

 text-decoration: none;

 background: #fafafa;

 transition: background 0.2s ease;

}
#category-latest a:hover {

 background: #f0f0f0;

}
#category-latest strong {

 display: block;

 font-size: 1.2rem;

 font-weight: 600;

 line-height: 1.4;

 color: #111;

}
#category-latest span {

 display: block;

 margin-top: 6px;

 font-size: 0.85rem;

 line-height: 1.5;

 color: #666;

}
@media (max-width: 768px) {

 #category-latest {

 margin-top: 32px;

 padding-top: 20px;

 }
 #category-latest a {

 padding: 12px 14px;

 }

category-latest span { font-size: 0.8rem; } }

4. 적용 예제

아래는 기본 CSS를 적용한 예제 이미지입니다. 자신의 블로그 개성에 맞게 위 CSS를 수정하여 사용하시면 됩니다.

결론적으로 이 코드는 비동기 데이터 바인딩과 브라우저 최적화 API를 활용해,
티스토리 블로그의 내부 링크 구조를 개선하고 사용자 체류 시간을 자연스럽게 늘려주는 스크립트입니다.
관심 있으신 분들은 한 번 적용해 보셔도 좋겠습니다.