블로그 댓글은 단순한 인사를 나누는 곳 그 이상의 가치를 지닙니다. 하지만 티스토리 댓글 시스템은 보안을 위해 댓글 내 HTML 태그 사용을 엄격히 제한하고 있죠. 이 때문에 이미지나 하이퍼링크를 공유하고 싶어도 텍스트로만 남겨야 하는 답답함이 있었습니다.
하지만 운영자가 조금만 손을 본다면 이 한계를 멋지게 극복할 수 있습니다. 댓글에 남겨진 코드나 링크를 안전하게 복원하여 댓글란을 블로그 콘텐츠의 연장선으로 만드는 방법이 있거든요. 방문자와 더 깊게 소통하고 콘텐츠를 풍성하게 만드는 댓글 HTML 복원 스크립트 적용법을 지금 바로 공개합니다.
왜 티스토리 댓글에서는 HTML 태그가 작동하지 않을까?
본격적인 해결책에 앞서, 왜 티스토리가 댓글 태그를 막아두었는지 그 이유를 알면 더 안전하게 관리할 수 있습니다.
- XSS 보안 위협 방지: 악성 사용자가 스크립트를 삽입해 방문자의 정보를 가로채는 것을 막기 위함입니다.
- 스팸 및 광고 도배 차단: 무분별한 링크 삽입을 통한 불법 홍보나 피싱 사이트 유도를 방지합니다.
- 블로그 디자인 보호: 잘못된 태그 삽입으로 블로그 전체 레이아웃이 깨지는 것을 막아줍니다.
댓글 콘텐츠를 깨우는 HTML 태그 복원 스크립트
운영자가 직접 관리하는 블로그라면, 댓글을 더 활발한 소통 도구로 활용하는 것이 유리합니다. 아래 소개할 스크립트는 댓글에 입력된 <img>나 <a> 태그 등이 문자로 변환되어 있을 때, 이를 다시 실제 작동하는 태그로 복원해주는 마법 같은 코드입니다.
스크립트의 주요 특징과 장점
| 기능 | 상세 설명 |
|---|---|
| HTML 디코딩 | 문자열로 굳어버린 코드를 실제 작동하는 태그로 변환합니다. |
| 이미지 최적화 | 이미지에 lazy-loading을 적용해 페이지 속도 저하를 막습니다. |
| 오류 방지 | 잘못된 이미지 링크는 자동으로 숨겨 지저분함을 방지합니다. |
| 실시간 대응 | 새로운 댓글이 달릴 때마다 즉시 태그를 복원합니다. |
실전 적용 스크립트
티스토리 스킨 편집 시 가독성과 성능을 위해 최적화된 한 줄 형태의 코드입니다.
<script>
(function(){
const d=s=>{const t=document.createElement("textarea");t.innerHTML=s;return t.value;};
const p=()=>{
const c=document.querySelector('[data-tistory-react-app="Comment"]');
if(!c)return;
c.querySelectorAll('.tt_desc:not([data-processed])').forEach(el=>{
const dec=d(el.innerHTML);
if(/[a-z]/i.test(dec)){
el.innerHTML=dec;
el.querySelectorAll('img').forEach(img=>{
img.loading='lazy';
img.onerror=function(){this.remove();};
});
}
el.dataset.processed='true';
});
};
if(document.readyState!=='loading'){p();}else{document.addEventListener('DOMContentLoaded',p);}
new MutationObserver(m=>{if(m.some(n=>n.addedNodes.length))p();}).observe(document.body,{childList:true,subtree:true});
const f=document.querySelector('.tt-area-write form');
if(f)f.addEventListener('submit',()=>setTimeout(p,1000));
})();
</script>스킨에 적용하는 아주 쉬운 방법
HTML을 잘 모르시는 분들도 아래 순서대로만 따라 하시면 금방 적용할 수 있습니다.
- 티스토리 관리자 페이지에 접속합니다.
- ‘꾸미기’ > ‘스킨 편집’ 메뉴를 클릭한 뒤 ‘html 편집’ 버튼을 누릅니다.
- HTML 소스 창에서 가장 하단으로 내려가 </body> 태그를 찾습니다.
- 찾은 </body> 태그 바로 윗줄에 위에서 복사한 스크립트를 붙여넣습니다.
- ‘저장’을 누르면 끝! 이제 댓글에 이미지 링크나 HTML 코드를 남겨보세요.
댓글을 활용한 새로운 소통 전략
이 기능을 활용하면 여러분의 블로그는 훨씬 더 사용자 참여형으로 변모하게 됩니다.
- 이미지 링크 공유: 방문자가 자신의 결과물이나 참고 이미지를 댓글로 직접 보여줄 수 있습니다.
- 내비게이션 기능: 운영자가 댓글로 관련 포스팅 링크를 이미지와 함께 남겨 추가 유입을 유도합니다.
- 풍성한 보조 자료: 텍스트만으로 설명하기 힘든 자료들을 <a> 태그로 연결해 정보의 깊이를 더합니다.
운영 시 주의할 점
이 스크립트는 문자열을 복원해주는 기능일 뿐, 시스템 자체의 필터링을 무력화하지는 않습니다. <script> 태그 같은 위험한 코드는 여전히 실행되지 않으니 안심하세요. 다만, 이미지 링크 등이 너무 많아지면 지저분해 보일 수 있으니 관리자의 주기적인 모니터링은 필수입니다.
