티스토리에서 글을 쓰다 보면 내가 넣지도 않은 HTML 태그들이 덕지덕지 붙어있는 경우가 많아요. 이걸 자바스크립트 스크립트 하나로 자동으로 싹 정리해서, 코드도 보기 좋게 만들고 로딩 속도까지 챙기는 방법을 알려드릴게요. 나중에 CSS 오류가 나는 것도 막을 수 있고, 무엇보다 검색 엔진이 우리 글을 더 좋아하게 만드는 꿀팁이에요.
지저분한 태그 자동 삭제, 왜 필요할까요?
이 스크립트를 쓰면 글 쓸 때 알게 모르게 들어간 불필요한 태그들이 자동으로 정리돼요. HTML 코드가 깔끔해지니까 오류도 줄어들고, 나중에 디자인을 바꿔도 글 모양이 망가지지 않게 도와준답니다.
블로그에 글을 쓸 때, 특히 웹 에디터를 쓰면 우리가 의도하지 않은 잡다한 HTML 태그나 속성들(예: `data-ke-size`, `nbsp;`, 빈 공백 태그)이 엄청 많이 들어가요. 이런 것들이 쌓이면 코드가 지저분해지고 웹 표준에도 맞지 않게 되거든요.
당장은 눈에 보이는 화면에 문제가 없어 보일 수 있어요. 하지만 길게 보면 꽤 골치 아픈 일이 생길 수 있답니다. 예를 들어, 새로운 스킨으로 바꿀 때 스타일이 뒤틀리거나, 불필요한 코드가 많아서 페이지가 뜨는 속도가 느려질 수도 있죠. 저도 예전엔 일일이 편집기로 지웠는데, 매번 그러려니 너무 번거롭더라고요.
그래서 이렇게 문제가 될 수 있는 태그들은 시스템이 알아서 정리하게 만드는 게 블로그 운영할 때 정말 마음 편해요. 글 쓸 때마다 일일이 신경 쓸 수는 없으니까, 자동 삭제 스크립트를 딱 적용해 두면 훨씬 효율적으로 블로그를 관리할 수 있어요.
자동 태그 정리 스크립트 뜯어보기
티스토리에서 자주 보이는 불필요한 태그들
글을 쓰고 나면 보통 아래 표에 있는 것들이 몰래 끼어들어 있어요. 이 스크립트는 이런 녀석들을 찾아서 없애거나, 아주 기본적인 태그로 바꿔서 코드를 읽기 쉽게 만들어줍니다.
| 지워야 할 태그 유형 | 어떤 모습인가요? | 어떻게 정리하나요? |
|---|---|---|
| 스타일링 속성 | p data-ke-size=”size16″ | `data-ke-size` 같은 속성만 쏙 뺍니다 |
| 비어있는 공백 | p /p | ` `를 지우거나 줄 바꿈(br)으로 바꿔요 |
| 중간에 낀 공백 문자 | 글 내용 중 | ` ` 문자를 일반 공백으로 바꾸거나 지워요 |
자동 태그 정리 스크립트 (JavaScript) 코드
이 코드는 웹페이지가 화면에 다 그려진 다음(DOM 조작)에 작동해서 쓸데없는 태그를 찾아 고쳐줘요. 페이지 로딩이 다 끝난 뒤에 실행되니까 글을 읽는 데는 지장이 없답니다.
document.addEventListener('DOMContentLoaded', function() {
// 1. 내용 없이 공백만 있는 p 태그 찾기
var paragraphs = document.querySelectorAll('.tt_article_useless_p_margin.contents_style p[data-ke-size="size16"]');
paragraphs.forEach(function(paragraph) {
// 만 덩그러니 있는 p 태그는 내용을 지우고 줄 바꿈(br) 태그로 바꿔줍니다
if (paragraph.innerHTML === ' ') {
var brElement = document.createElement('br');
paragraph.innerHTML = '';
paragraph.appendChild(brElement);
}
});
// 2. 모든 문단에서 문자 없애기
var allParagraphs = document.querySelectorAll('.tt_article_useless_p_margin.contents_style p');
allParagraphs.forEach(function(paragraph) {
// 정규식을 써서 를 일반 띄어쓰기로 바꾸거나 아예 지워버립니다
paragraph.innerHTML = paragraph.innerHTML.replace(/ /g, ' ');
});
});
// jQuery로 data-ke-size 속성 한 방에 날리기
$(document).ready(function() {
// 제목이나 본문에 붙은 data-ke-size 속성을 전부 제거해요
$('.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content p').removeAttr('data-ke-size');
});
기술적으로 주의할 점
이 스크립트는 화면이 뜬 다음에 작동해요. 글 내용이 엄청나게 많으면 정리하는 과정에서 잠깐 멈칫할 수도 있어요. 그래서 스크립트가 엉뚱한 곳을 건드리지 않고, 딱 필요한 부분(본문 영역)만 찾아서 고치도록 범위를 잘 지정해 주는 게 중요해요.
깔끔한 HTML이 검색 순위에도 도움이 될까요?
검색 엔진이 좋아하는 코드 만들기
태그를 정리하는 건 단순히 보기 좋으라고 하는 게 아니에요. 검색 엔진 최적화(SEO)에도 꽤 긍정적인 영향을 준답니다. 구글 같은 검색 엔진 로봇이 내 글을 읽으러 왔을 때, 코드가 복잡하고 쓸데없는 속성이 덕지덕지 붙어 있으면 내용을 파악하는 데 시간이 더 걸리거든요.
반대로 코드가 깔끔하고 웹 표준에 맞게 잘 정리되어 있으면, 로봇이 “아, 여기가 제목이고 여기가 본문이구나” 하고 훨씬 빨리 이해해요. 그럼 내 글이 검색 결과에 반영되는 속도도 빨라질 수 있고, 전체적인 블로그 점수도 좋아지겠죠. 불필요한 코드가 줄어드니까 페이지 로딩 속도도 미세하게나마 빨라지는데, 이것도 구글이 중요하게 보는 요소 중 하나랍니다.
접근성과 관리의 편리함
불필요한 태그가 없으면 시각 장애인을 위한 스크린 리더 같은 프로그램이 글을 읽을 때도 훨씬 정확하게 정보를 전달할 수 있어요. 또, 나중에 내가 스킨을 수정하거나 디자인을 손볼 때도 코드가 깔끔하니까 어디를 고쳐야 할지 한눈에 보여서 작업하기가 훨씬 수월해져요.
스크립트 적용 후 꼭 챙겨야 할 CSS 설정
스크립트로 `data-ke-size` 같은 속성을 지워버리면, 원래 티스토리 스킨에서 잡아주던 글자 크기나 간격이 풀려버릴 수 있어요. 그래서 스크립트를 적용한 다음에는 아래처럼 CSS에 본문 스타일을 직접 지정해 주는 게 좋아요. 그래야 글이 예쁘게 나온답니다.
/* data-ke-size가 없어도 본문 p 태그가 예쁘게 보이도록 설정 */
#article-view p {
line-height: 1.7em; /* 줄 간격 */
font-size: 1em; /* 글자 크기 */
font-weight: 400;
letter-spacing: 0.045em; /* 자간 */
color: #222;
font-family: 'Noto Sans KR', sans-serif;
}
/* 문단과 문단 사이의 간격도 잊지 마세요 */
#article-view p+p {
margin-top: 15px;
}이렇게 자동 태그 삭제 스크립트를 활용하면 HTML 코드를 항상 깔끔하게 유지할 수 있어요. 물론 이건 코드 정리만 해주는 거니까, 더 확실한 최적화를 원한다면 이미지 용량을 줄이거나 서버 설정을 만지는 등 여러 가지 방법을 같이 쓰면 더 좋답니다.
자주 묻는 질문 (FAQ)
Q: 이 스크립트 쓰면 블로그가 처음 뜰 때 느려지지 않나요?
A: 이 스크립트는 화면이 다 로딩된 다음에(DOMContentLoaded) 실행되기 때문에, 처음에 흰 화면이 뜨는 속도에는 영향을 주지 않아요. 다만 글 내용이 너무 길면 정리하는 순간 아주 잠깐 멈칫할 수는 있어요. 그래서 가능하면 jQuery보다는 가벼운 순수 자바스크립트를 쓰는 게 더 좋아요.
Q: 티스토리는 왜 굳이 data-ke-size 같은 걸 넣는 건가요?
A: 티스토리 에디터에서 글을 쓸 때 보이는 모습이랑 실제 발행됐을 때 모습이 똑같게 보이게 하려고(WYSIWYG) 넣는 속성이에요. 하지만 우리가 따로 CSS를 만져서 디자인할 때는 오히려 방해가 되거나 충돌이 날 수 있어서 지우는 게 나을 때가 많아요.
Q: 태그 정리가 진짜로 검색 순위 올리는 데 도움이 되나요?
A: 네, 도움이 돼요. 코드가 깔끔하면 검색 엔진 로봇이 내용을 더 쉽게 이해하거든요. 그리고 HTML 용량이 줄어드니까 모바일에서 접속할 때 데이터도 덜 쓰고 로딩도 빨라져서, 결과적으로 검색 엔진이 좋아하는 사이트 환경이 된답니다.
Q: 스크립트 넣었더니 글자 모양이 이상해졌어요. 어떡하죠?
A: 그건 `data-ke-size` 속성이 사라지면서 원래 적용되던 스타일이 같이 풀려서 그래요. 위에서 설명해 드린 ‘CSS 설정’ 부분에 있는 코드를 참고해서, 스킨 편집 메뉴의 CSS 탭에 본문 폰트 스타일을 추가해 주시면 금방 해결됩니다.
