블로그 댓글란 활용 방법! 댓글을 콘텐츠 확장 도구로 활용하는 이미지·링크 표시 방법

티스토리 댓글란, 단순 소통 넘어서 콘텐츠 확장 영역으로 확장하는 방법

블로그 댓글은 단순히 방문자와 소통하는 창구 이상의 의미를 지닙니다. 하지만 블로그의 기본 시스템은 보안과 안정성을 위해 댓글 내에서 HTML 태그 사용을 제한하고 있어, 이미지나 하이퍼링크 등 다양한 콘텐츠를 자유롭게 표현하기 어렵습니다. 이로 인해 댓글란이 단순한 텍스트 교환 공간에 머무르는 경우가 많습니다.

그럼에도 불구하고, 운영자가 댓글을 체계적으로 관리할 수 있다면, 이 한계를 극복하고 댓글란을 블로그 콘텐츠의 확장 영역으로 활용할 수 있는 좋은 방법이 있습니다. 댓글에 이미지와 링크를 안전하게 복원해 표시함으로써, 댓글 자체가 방문자와의 적극적인 소통뿐 아니라 콘텐츠를 풍부하게 만드는 중요한 도구가 될 수 있습니다.

티스토리 댓글을 콘텐츠 확장 도구로! 이미지 링크와 HTML 태그 표시하기

이번 글에서는 티스토리 댓글에 숨겨진 HTML 태그를 안전하게 허용하고, 이미지 링크와 내비게이션 기능까지 구현할 수 있는 실용적인 스크립트와 적용 방법을 자세히 소개합니다. 댓글을 단순한 의견 교환이 아닌, 블로그 활성화를 위한 사용자 참여형 콘텐츠 공간으로 확장해 보세요!

왜 블로그에서는 댓글에 HTML 태그를 차단할까?

티스토리 및 블로그는 기본적으로 댓글에 script, img, iframe 등 HTML 태그를 사용할 수 없습니다. 그 이유는 다음과 같습니다:

1. XSS(크로스사이트스크립팅) 보안 위협 방지

• 악성 사용자가 댓글에 script나 img onerror=... 같은 스크립트를 삽입할 경우,
• 페이지를 방문한 다른 이용자에게 악성 코드가 실행될 수 있습니다.

2. 스팸 및 광고 링크 남발 방지

• a 링크, 외부 이미지, iframe 등을 삽입해 광고, 피싱, 불법 홍보가 가능해지므로 차단합니다.

3. 블로그 레이아웃 깨짐 방지

• div, table 같은 태그가 댓글에 들어가면 전체 페이지 구조가 무너질 수 있습니다.

4. 불법 콘텐츠 유포 차단

• 성인 콘텐츠, 불법 영상 링크 등을 HTML로 노출하는 문제를 방지합니다.

HTML 태그 복원 스크립트 소개 (이미지, 링크 자동 표시)

그러나 운영자가 댓글을 관리할 수 있다면 굳이 이러한 기능을 차단할 필요는 없어 보이기도 합니다. 댓글란을 활용해 블로그를 더욱 활성화할 수 있다면, 댓글란 역시 콘텐츠 영역으로 확장할 수 있기 때문입니다. 아래는 이미지와 링크를 허용하여 댓글란 기능을 확장할 수 있는 스크립트 코드입니다.

코드 기능 설명

아래 스크립트는 댓글에 img, a 등 HTML 태그가 이스케이프된 채 저장되어 있을 경우, 이를 실제 태그로 복원하고, 이미지를 lazy-loading 처리하며, 로딩 오류 시 숨김 처리까지 적용합니다.

적용 효과

• 댓글에 이미지, 링크 자동 표시
• 보안 위협 없이 HTML 태그 복원
• 댓글 UI 유지 및 레이아웃 안정성 보장
• React 기반 티스토리 스킨에서도 자동 적용

단. 코드는 한줄로 작성하세요!

구분	설명
1. HTML 디코딩	댓글 내에 , 등으로 표시된 HTML 코드를 실제 태그로 변환합니다.
2. 이미지 lazy-loading 처리	이미지에 loading="lazy" 속성을 추가해 페이지 로딩 속도를 개선합니다.
3. 이미지 오류 처리	이미지가 제대로 표시되지 않을 경우 해당 이미지를 숨깁니다.
4. 중복 처리 방지	이미 처리한 댓글에는 표시 처리 중복을 막기 위한 표시를 추가합니다.
5. 동적 댓글 대응	새로운 댓글이 추가되거나 변경될 때 자동으로 다시 처리해 줍니다.
6. 댓글 작성 후 재처리	댓글 작성 후 1초 뒤에 다시 한번 처리를 실행하여 정상 반영을 적용합니다.

적용 스크립트 코드

script
(function() {
 const decodeEntities = (str) = {
 const textarea = document.createElement("textarea");
 textarea.innerHTML = str;
 return textarea.value;
 };

 const processComments = () = {
 const commentContainer = document.querySelector('[data-tistory-react-app="Comment"]');
 if (!commentContainer) return;

 commentContainer.querySelectorAll('.tt_desc').forEach((el) = {
 if (!el.dataset.processed) {
 const decoded = decodeEntities(el.innerHTML);
 if (/[a-z][\s\S]*/i.test(decoded)) {
 el.innerHTML = decoded;
 el.querySelectorAll('img._LAZY_LOADING').forEach(img = {
 img.classList.remove('_LAZY_LOADING_INIT_HIDE');
 img.loading = 'lazy';
 img.onerror = function() {
 this.style.display = 'none';
 };
 });
 }
 el.dataset.processed = 'true';
 }
 });
 };

 if (document.readyState !== 'loading') {
 processComments();
 } else {
 document.addEventListener('DOMContentLoaded', processComments);
 }

 const observer = new MutationObserver((mutations) = {
 let shouldProcess = false;
 mutations.forEach((mutation) = {
 if (mutation.addedNodes.length) {
 shouldProcess = true;
 }
 });
 if (shouldProcess) {
 processComments();
 }
 });

 observer.observe(document.body, {
 childList: true,
 subtree: true
 });

 const commentForm = document.querySelector('.tt-area-write form');
 if (commentForm) {
 commentForm.addEventListener('submit', () = {
 setTimeout(processComments, 1000);
 });
 }
})();
/script

적용 방법

1. 티스토리 블로그 관리자 접속
2. 스킨 편집 HTML 편집
3. body 태그 바로 닫히기 직전 /body 위에 스크립트 삽입
4. 저장 후 블로그에서 댓글 영역 확인

댓글을 활용한 이미지 링크와 내비게이션 활

이 스크립트를 활용하면 블로그 댓글을 새로운 네비게이션 수단으로 만들 수 있습니다:

• 방문자,운영자가 댓글로 이미지 링크를 남기면 자동으로 보임
• a href="링크"설명/a 형태도 복원되므로 관련 페이지로 연결
• 댓글로 보조 콘텐츠, 참고 자료, 외부 이미지 등 공유 가능
• 댓글 기반 사용자 참여형 콘텐츠 공간 구성 가능

주의사항 및 보안 팁

• script 태그 삽입은 시스템에서 무조건 차단되므로 이 스크립트 사용을 불가능 합니다.
• 댓글 필터링은 그대로 유지되며, 단순히 문자열로 보이는 HTML을 실제로 복원해주는 기능입니다.
• 관리자는 악성 댓글 필터링을 병행해야 합니다.

댓글 기능을 블로그 콘텐츠로 확장

이 스크립트를 활용하면 댓글 기능이 단순한 소통을 넘어서 블로그 콘텐츠의 확장 시킬수 있습니다.이미지 링크, 콘텐츠 연결, 보조 정보 제공 등 다양한 기능이 가능해지며, 댓글을 통해 방문자와의 지속적인 소통도 유도할 수있는 장점도 있습니다.