포스팅의 빈 이미지 공간 자동 제거: 티스토리 썸네일 숨기기 및 요약

블로그의 메인이나 카테고리 페이지에서 이미지가 없는 게시글이 차지하는 빈 썸네일(빈 이미지 공간) 공간을 자동으로 숨기고, 그 자리에 글 요약(Excerpt) 영역을 확대하여 레이아웃을 깔끔하게 정리하는 방법을 소개합니다. 이 가이드는 자바스크립트를 활용해 사용자 경험(UX)을 개선하고, 페이지 로딩 속도를 최적화하여 결과적으로 검색 엔진 최적화(SEO)에 긍정적인 영향을 주는 구체적인 코드를 담고 있습니다.

블로그 운영에서 이미지는 시각적인 흥미를 유발하고 SEO에 도움을 주는 요소지만, 모든 글에 억지로 이미지를 넣을 필요는 없습니다. 오히려 주제에 맞지 않는 불필요한 이미지 삽입은 페이지 용량을 키워 로딩 속도를 늦출 뿐입니다. 하지만 이미지가 없는 글이 리스트에 노출될 때, 이미지가 들어갈 자리가 텅 빈 회색 박스나 공백으로 남는다면 사이트의 디자인 완성도가 크게 떨어져 보입니다.

빈 이미지 공간 제거로 콘텐츠 가독성 높이는 JS 적용법

디자인이 깨진 사이트는 방문자의 신뢰도를 떨어뜨리고 체류 시간을 감소시킵니다. 간단한 자바스크립트 코드 한 줄로 이 문제를 해결하고 레이아웃을 정돈할 수 있습니다.

1. 빈 공간을 감추는 기본 스크립트

아래 코드는 페이지 내의 이미지 컨테이너(span, 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>

동작 원리 및 기대 효과

• 레이아웃 정돈: 이미지가 없는 글도 마치 처음부터 텍스트 전용 레이아웃이었던 것처럼 자연스럽게 출력됩니다.
• UX 향상: 로딩되지 않은 듯한 회색 박스가 사라져 방문자에게 깔끔한 인상을 줍니다.
• SEO 간접 기여: 구글은 사용자 경험이 우수한 페이지를 높게 평가합니다. 가독성이 좋아지면 지표 개선에 도움이 됩니다.

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

티스토리 블로그를 운영하다 보면, 메인 화면이나 카테고리 페이지 등에서 썸네일 이미지가 비어 있는 포스트가 회색 박스로 남아 있는 것을 볼 수 있습니다. 이런 경우 디자인 완성도가 떨어지고 클릭 유도 효과도 줄어듭니다.

자바스크립트로 이미지가 없는 항목을 자동 감지하여 썸네일을 숨기고, 그만큼의 공간을 글 요약(excerpt)으로 채우는 방식을 적용해 보겠습니다. 적용 후에는 텍스트가 확장되어 훨씬 꽉 찬 느낌을 줍니다.

글 요약 확대 기능이 포함된 JavaScript 스크립트

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

<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'; 
                excerpt.style.maxHeight = 'none'; 
            }
        } else {
            el.classList.remove('no-img');
        }
    };

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

• 자동 숨김: .post-item 내부에 img 태그가 없는 경우 썸네일 영역을 자동으로 숨깁니다.
• 요약 확장: 이미지가 사라진 빈자리를 .excerpt 줄 수를 늘려 자연스럽게 채웁니다.
• 유연한 적용: 티스토리 Book Club 스킨뿐 아니라 클래스명만 수정하면 다양한 스킨에 활용 가능합니다.