내 포스팅의 HTML 소스는 왜 이리 지저분할까?

포스팅의 HTML소스를 열어본 적이 있습니까?

포스팅의 기본 글꼴 크기나 줄 간격은 각자 취향대로 설정하게 되죠.

 

저는 기본 설정된 글꼴 크기가 너무 작고 줄과 줄사이의 간격이 너무 좁아 포스팅 작성 후 수동으로 글꼴 크기와 줄 간격을 늘려주곤 했습니다.

 

그런데, 매번 이런 작업을 따로 해주는게 번거로울 뿐 더러, 작성한 포스팅의 HTML 코드를 보면 엄청나게 지저분한 것이 계속 맘에 걸려 티스토리 관리자의 HTML/CSS 편집에서 기본 값을 수정해 보았습니다.

 

본문의 기본 글꼴 크기나 줄간격을 수정하지 않고 기본 값을 사용하여 포스팅하시는 분이라면, 이 포스팅이 별 도움되지 않겠지만, 저같이 포스팅을 작성할 때마다 본문 전체의 글꼴 크기와 줄 간격을 수작업으로 설정하셨던 분이라면, 도움이 될 것이라 생각합니다.

기존 티스토리에서 글 작성 방식

큼직큼직한 글꼴을 선호하는 저는 포스팅의 기본 글꼴 크기를 11pt, 줄 간격을 180%로 잡고 있습니다.

이를 위해, 지금까지 포스팅을 작성한 후 영역을 전체 설정하여 글꼴 크기를 11pt로 바꿔주었고, 줄 간격을 180%로 설정했습니다.

글꼴 크기와 줄간격 설정

 

이렇게 글을 수정하고 난 후 HTML 코드를 보면 각각의 줄마다 글꼴 크기와 줄 간격 설정 태그가 붙어 코드가 길어지고 지저분해 집니다.

실제로 글꼴 크기와 줄 간격을 설정하면 어떤 코드가 추가되는지 볼까요?

글꼴 크기와 줄간격을 수정한 후 코드

위의 코드는 복잡해 보이지만, 화면에 표시되는 내용은 1 2 3 4 5 의 다섯 글자 밖에 없습니다.

티스토리 에디터에서 폰트 크기를 설정하고 줄 간격을 넓히니 각 줄마다 해당 코드가 붙어 버린 것이죠.

딱 다섯 줄, 다섯 글자에 붙은 코드가 이정도이니 장문의 포스팅에 복잡한 코드가 따라 붙을 것은 말할 필요도 없습니다.

화면 표시되는 글꼴 크기와 줄간격을 미리 설정

티스토리에서 출력하는 글꼴의 기본을 11pt 크기에 180% 줄간격으로 설정할 수 있다면, 각 행마다 덕지덕지 코드가 붙지 않아도 될 것이란 생각이 들더군요. 수정은 매우 간단합니다.

1. 티스토리 관리자에서 [HTML/CSS 편집] 항목을 클릭합니다.
2. CTRL+F 키를 눌러 검색창을 열고, 찾기 창에 post-body-font-size 를 입력합니다. 제가 사용 중인 스킨에서는 한 줄만 검색됩니다.
3. style.css의 /*@post-body-size=*/ 항목 뒤의 폰트 크기를 바꾸면 글꼴 크기를 할 수 있습니다. 저는 15px로 바꿨습니다.
4. 줄의 마지막 부분에 LINE-HEIGHT:1.8; 을 추가합니다. 1.8은 줄 간격을 180%로 설정하는 것과 같습니다.

 

post-body-font-size 를 검색

 

바꾼 내용을 좀 더 키운 그림입니다. 붉게 표시한 영역 중, 11pt는 수정한 것이며 LINE-HEIGHT:1.8;은 직접 추가한 것입니다.

글꼴 크기와 줄간격을 수정

티스토리 기본 서식 설정으로 얻은 것과 잃은 것

얻은 것은 여러가지입니다.

1. 매 번 설정하지 않아도 11포인트에 줄간격 180% 글꼴이 기본 설정됩니다. 간편합니다.
2. 작성 후 HTML 코드를 살펴보면, 지저분한 코드가 붙지 않습니다. 다음 두 코드는 같은 결과물이 됩니다.같은 결과물, 다른 코드
3. 지저분한 코드가 많이 붙은 포스팅은 검색 엔진의 순위에서 불리하다는군요.
4. 나중에라도 기본 글꼴이나 형태를 바꾸고 싶다면, HTML/CSS 편집에서 바꿔주기만 하면 됩니다. 포스팅을 일일이 열어 수정하지 않아도 된다는 얘기죠.

 

잃은 것은 한 가지로, 티스토리 편집기의 WYSIWYG 적인 측면에 많이 의존했다면 불편합니다.

 

한마디로, 화면에 보이는 것과 실제 출력되는 글의 형태가 달라보인다는 것인데요, 티스토리 편집기에서 폰트의 속성을 눈으로 확인하기 어렵게 됩니다.

편집 화면과 출력 화면이 다르다

저는 제목은 12포인트, 본문은 11포인트, 설명은 10포인트 식으로 3~4단계의 글꼴 크기만을 사용하기로 맘먹었고, 폰트 기본 속성을  바꾼 상태로 2~3개의 포스팅을 작성해보니 그리 불편함을 느낄 수 없었지만, 포스팅을 작성하면서 글꼴 크기와 속성을 자주 바꾸는 분이라면 불편할 것 같습니다.

 

하지만, 포스팅을 작성하고 나서 HTML 버튼을 클릭하여 한결 간결해진 코드를 보니, (개인적으로는) 이정도의 불편은 감수할만 하겠다는 생각이 듭니다.

관련글

• 2013/05/09 - 티스토리 이미지에 나만의 도장, 워터마크 간편하게 찍는 법
• 2013/03/05 - 모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법
• 2012/10/13 - 다음뷰로 발행한 티스토리 글의 에러, 한 끝차이의 문제
• 2012/06/09 - 티스토리 이미지와 글 간격을 줄이려면?
• 2012/06/05 - 티스토리 각주 글꼴 색상 설정하려면?
• 2012/05/30 - [간단팁] 티스토리 관리센터 꾸미기