빈 썸네일, 블로그 글 작성 시 이미지가 없는 요소의 빈 공간 문제와 해결법

빈 썸네일 숨기고 글 요약 확대! 블로그 레이아웃 자동 정리

블로그나 웹사이트의 메인/카테고리 페이지에서 이미지가 없는 게시글의 빈 썸네일 공간을 자동으로 숨기고 글 요약(Excerpt) 영역을 확대하여 레이아웃을 깔끔하게 정리하는 JavaScript 코드 적용 방법하기!

---

이 자동 정리 스크립트는 사용자 경험(UX)을 향상시키고 페이지 로딩 속도 최적화에 기여하여 궁극적으로 검색 엔진 최적화(SEO)에 긍정적인 영향을 미칩니다. 티스토리 블로그 운영자를 위한 맞춤형 팁을 포함합니다.

블로그나 웹사이트 운영에서 이미지는 검색 엔진 최적화(SEO)에 긍정적인 영향을 미칠 수 있는 중요한 요소 중 하나입니다. 실제로 적절한 이미지가 포함된 글은 검색 결과에서 더 눈에 띄고 방문자 관심을 끌기 쉽습니다. 그러나 모든 게시글에 반드시 이미지를 넣어야 하는 것은 아닙니다.
오히려 콘텐츠의 성격이나 주제에 따라 이미지는 때로 부정적인 영향을 줄 수도 있으며, 불필요한 이미지 삽입은 페이지 로딩 속도를 저하시켜 사용자 경험(UX)을 떨어뜨릴 수 있습니다.

특히 메인 페이지나 카테고리 리스트 등에서는 텍스트 중심의 글들이 이미지 없이 노출되는 경우가 빈번한데, 이때 HTML 구조상 이미지가 들어갈 자리(예: 썸네일 영역, figure 태그 등)에 이미지가 없으면 빈 공간이 그대로 남아 디자인이 깨지거나 페이지 레이아웃이 흐트러져 사용자 경험이 저하되는 문제가 발생할 수 있습니다.

따라서, 블로그 운영자는 이미지 유무에 따른 레이아웃 조절과 빈 썸네일 숨기기 같은 방법을 활용할수 있습니다. 이번 글에서 간단하게 해결 할수 있는 방법을 알아보겠습니다.

빈 이미지 공간을 제거하고 콘텐츠 가독성 높이는 JS 코드 적용법

이 빈 공간 문제는 방문자의 페이지 체류 시간 감소, 사이트 신뢰도 하락으로 이어져 결과적으로 검색 엔진 최적화(SEO)에도 부정적인 영향을 줄 수 있으므로 주의가 필요합니다.

이미지가 없을 때 빈 공간을 감추는 간단한 JavaScript 스크립트

아래 자바스크립트 코드는 HTML 내 특정 이미지 컨테이너 요소(span.thum, figure.card-img-container, 그리고 모든 figure)를 검사해서, 해당 영역에 이미지(img 태그)가 없으면 해당 요소를 아예 화면에서 숨겨 줍니다. 이를 통해 불필요한 빈 공간 노출을 방지할 수 있습니다.

script
document.addEventListener('DOMContentLoaded', () = {
document.querySelectorAll('span.thum, figure.card-img-container, figure').forEach(el = {
const img = el.querySelector('img');
if (!img) {
el.style.display = 'none';
}
});
});
/script

사용법 및 동작 원리

1. 위 스크립트를 블로그 메인 페이지, 카테고리 페이지 혹은 이미지 썸네일이 노출되는 모든 페이지에 삽입합니다. (일반적으로 HTML 편집의 /body 태그 직전에 삽입하는 것이 좋습니다.)
2. HTML 구조 내 span.thum, figure.card-img-container, 혹은 figure 태그가 이미지 컨테이너 역할을 한다면, 이 스크립트가 자동으로 내부에 이미지 유무를 판단합니다.
3. 이미지가 없는 경우 해당 컨테이너는 숨겨지므로, 빈 공간이 사라지고 레이아웃이 자연스럽게 정돈됩니다.

왜 이 스크립트가 필요한가요? (UX, SEO 관점)

• 사용자 경험(UX) 향상
  이미지가 없는데 빈 박스만 남아 있다면 방문자는 페이지가 어색하고 조잡하다고 느낄 수 있습니다. 빈 공간이 사라지면 디자인 완성도가 올라가고, 방문자 만족도가 높아집니다.
• 페이지 로딩 속도 최적화
  불필요한 빈 공간에 스타일이나 요소가 남아 있으면 렌더링 부담이 약간 증가할 수 있습니다. 이를 제거하면 간접적으로 속도 향상에 기여할 수 있습니다.
• 검색 엔진 최적화(SEO) 효과
  검색 엔진은 사용자 체험을 중요한 평가 요소로 삼습니다. 깔끔하고 의미 있는 콘텐츠 구조는 검색 랭킹에 긍정적인 영향을 미칩니다. 이미지가 없으면 해당 공간을 감추는 것은 콘텐츠 가독성과 구조 이해도 개선에 도움이 됩니다.

추가 팁: 티스토리 블로그 빈 썸네일 숨기기 및 글 요약 확대 자동화

티스토리 블로그를 운영하다 보면, 메인 화면이나 카테고리 페이지 등에서 썸네일(이미지)이 비어 있는 포스트가 아래처럼 회색 박스로 남아 있는 걸 볼 수 있습니다.

이런 경우엔 디자인 완성도도 떨어지고, 사용자 입장에서도 클릭 유도 효과가 줄어들게 됩니다.

이미지가 없는 항목의 빈공간

하지만 매번 이미지가 없는 글마다 썸네일 숨기기 처리를 수동으로 하기엔 번거롭습니다.
이를 위해 자바스크립트로 이미지가 없는 항목을 자동 감지하여 썸네일을 숨기고, 그만큼의 공간을 글 요약(excerpt)으로 채우는 방식이 매우 효과적입니다.

이미지 없는 쎔네임공간을 요약글로 채움

글 요약 확대 기능이 추가된 JavaScript 스크립트

아래 스크립트를 티스토리 블로그에 삽입해 주세요. 이 코드는 이미지 유무를 판단하여 레이아웃을 동적으로 정리하고 글 요약을 확장합니다.

삽입 위치:
티스토리 관리자 스킨 편집 HTML 편집에서 /body 태그 바로 위쪽에 붙여 넣기

아래 코드는 티스토리 Book Club 예시입니다. 스킨에 따라 선택자를 (.thum, .post-item 등) 변경해 주시고, 글 높이도 이미지 크기에 맞게 수정해 주세요.

script
document.addEventListener('DOMContentLoaded', () = {
const processElement = el = {
const thum = el.querySelector('.thum, span.thum');
const figure = el.querySelector('figure');
const hasImgInThum = thum?.querySelector('img');
const hasImgInFigure = figure?.querySelector('img');

const hasImage = hasImgInThum || hasImgInFigure;

if (!hasImage) {
if (thum) thum.style.display = 'none';
if (figure) figure.style.display = 'none';
el.classList.add('no-img');

const excerpt = el.querySelector('.excerpt');
if (excerpt) {
excerpt.style.webkitLineClamp = '9'; // CSS로 설정된 줄 제한을 풀어 요약글을 확대
excerpt.style.maxHeight = 'none'; // 최대 높이 제한 해제
}
} else {
el.classList.remove('no-img');
}
};

document.querySelectorAll('.post-item, li').forEach(processElement);
});
/script

• .post-item 또는 li 항목 내에서 썸네일 span class="thum", div class="thum", figure 등 내부에 img 태그가 없는 경우 자동으로 숨김 처리하여 빈 썸네일 숨기기 기능을 수행합니다.
• 이미지가 없는 경우, 대신 글 요약(excerpt)의 줄 수를 늘려서 레이아웃을 채움으로써 콘텐츠 가독성을 높입니다.
• 이미지가 있는 경우엔 기존 디자인 그대로 유지됩니다.
• 적용 대상: 티스토리 메인화면, 카테고리 리스트, 관련글 영역 등 블로그 레이아웃 자동 정리가 필요한 모든 영역

---

Q1: 블로그 글에 이미지는 꼭 넣어야 하나요? SEO에 악영향을 주진 않나요?

이미지는 검색 엔진 최적화(SEO)에 긍정적 영향을 줄 수 있지만, 모든 글에 반드시 필요하지는 않습니다. 오히려 콘텐츠 성격에 따라 불필요한 이미지 삽입은 페이지 로딩 속도 저하를 일으켜 사용자 경험(UX)을 떨어뜨리고, 이는 간접적으로 SEO에 부정적인 영향을 줄 수 있습니다. 텍스트 중심의 콘텐츠라면 이미지를 생략하고 레이아웃을 깔끔하게 정리하는 것이 더 효과적일 수 있습니다.

Q2: 이미지가 없을 때 빈 썸네일 공간 때문에 발생하는 근본적인 문제는 무엇이며, 왜 해결해야 하나요?

메인 페이지나 카테고리 리스트 등에서 이미지가 없는 글의 썸네일 자리에 빈 공간(예: 회색 박스)이 남아 디자인이 깨지고 레이아웃이 흐트러져 사용자 경험이 떨어집니다. 이 '빈 공간 문제'는 방문자가 사이트를 신뢰하지 못하게 만들고, 체류 시간 감소와 같은 UX 악영향을 통해 검색 랭킹 하락으로 이어질 수 있으므로, JavaScript 스크립트로 블로그 레이아웃을 자동 정리하여 해결해야 합니다.

Q3: 빈 썸네일 공간을 숨기고 글 요약(excerpt)을 확대하는 스크립트는 모든 블로그 플랫폼에 적용 가능한가요?

스크립트의 기본 논리(이미지 유무 판단 후 요소 숨김/확대)는 모든 웹사이트에 적용 가능합니다. 하지만 코드 내부에 사용된 선택자(.post-item, .thum, .excerpt 등)는 사용자가 사용하는 블로그 스킨(템플릿)이나 플랫폼(티스토리, 워드프레스 등)의 HTML 구조에 따라 달라질 수 있습니다. 따라서 해당 스크립트를 사용하기 전에 자신의 블로그 HTML 구조에 맞게 선택자를 수정하는 작업이 필수적입니다.

https://everydayhub.tistory.com/1184

https://everydayhub.tistory.com/627