리오집사의 기억저장소

티스토리 지난 포스팅 스타일 정리하기

앞으로는 티스토리 스킨 변경에 있어 신중해야겠습니다. 스킨 변경할 때 포스팅 내용까지 스타일이 변경되어 난감해질 수 도 있거든요.

저는 원래 해당 티스토리 블로그를 학습한 내용 정리용으로 개설했었습니다. 누군가에게 보여주기보단 본인 스스로 정리하고 참고하는 용이었죠. 이왕 정리하는거 누구한테도 혹시 도움이 될까하여 글을 공개로 설정해두니, 방문자가 하나둘씩 쌓이게 되었습니다.

그러다 현재는 미래에 대한 고민으로 해당 블로그를 수익형으로 전환하고자 노력중인 과정인데요. 스킨 꾸미기, 신규글 작성, 수익 전환 등에 신경쓰다 문득 방문 통계의 인기글 목록을 보게 됩니다.

나의 인기글 목록. 대부분 개발 관련 글이다
나의 인기글 목록. 굉장히 오래된 개발 관련 글이다

거의 거의 5~8년간 방치한 블로그임에도 총 방문자 수가 25만명에 이를 수 있도록 해준 고마운 글들이죠. 인기글 목록을 하나씩 들어가 보았습니다.

과거에 작성한 인기 포스팅 중 하나. 상태가 심각하다.

그런데 깜짝 놀랐습니다. 글 상태가 엉망진창인 겁니다. 글씨 크기는 제각각에, 배경색상이라던가 이상한게 많습니다. 원인은 여러가지인데요.

  • 이 당시에는 웹개발자가 아니었습니다. 임베디드 개발자 > 안드로이드 개발자 > 웹프론트엔드 개발자로 커리어 전환을 하는 시기였죠. 그래서 아무 지식 없이 어줍잖게 색상을 변경하고, 글씨를 굵게하는등 <H1> <H2> 등의 개념도 없이, 마음대로 HTML 을 수정했었습니다.
  • 스킨 변경도 이유 중 하나입니다. 스킨마다 에디터의 글 설정이 본문인지 제목1,23 인지에 따라 스타일이 자동으로 적용됩니다. 저는 임의로 색상을 마구 변경했었기 때문에, 배경색이 겹치는 등의 문제가 발생했었습니다.

 

지난 포스팅을 다듬기로 결정

블로그 포스팅을 불신하게 되는 원인 제공자 중 하나였던 저였네요. 과거의 부끄러운 포스팅들은 삭제할까도 생각해봤지만, 아까운 생각도 들었습니다. 이에 과거 글을 모두 삭제하는 대신, 모두 현재 스킨에 맞게 글 스타일을 정리하고, 시간의 여유가 된다면 포스팅 내용도 수정하기로 마음먹었습니다. 또한 방문율이 높았던 포스팅에서, 스타일이 이상해 해당 포스팅을 읽지 않고 수초 내에 바로 나간다면 포스팅 점수가 낮아져서 검색 노출이 더 잘 안될 수도 있겠죠.

1. 수정할 포스팅 결정하기

그러나 140여개의 과거글을 모두 다듬는건 여간 어려운 일이 아닙니다. 그래서 무작정 순차적으로 글을 하나씩 정리해나가기 보다는, 인기글 순으로 정리하기로 하였습니다.

2. 원인 파악하기 - 스킨의 스타일을 방해하는 HTML의 style 속성 및 <span> 태그 

위에서 언급했듯, 잘 만들어진 티스토리 스킨은 고유의 스타일을 제공합니다. 예를 들어, 티스토리 에디터에서 제목1을 선택하였으면, HTML의 <H1> 태그가 적용되고 스킨은 H1에 스타일을 입힙니다.

에디터에서 문단 모양을 제목 1로 변경하면&#44; 웹 브라우저에서 제대로 인식하기 위해 &lt;h1&gt; 태그로 감싸진다.
a. 에디터에서 문단 모양을 제목 1로 변경하면, 웹 브라우저에서 제대로 인식하기 위해 <h1> 태그로 감싸진다.
티스토리 스킨은 이 HTML 태그를 스킨 제작자의 의도대로 스타일이 입혀진다.
b. 티스토리 스킨은 이 HTML 태그를 스킨 제작자의 의도대로 스타일이 입혀진다.

 

하지만 과거의 글들은 과거의 제가, 또는 과거에 사용했던 스킨(또는 과거의 티스토리 방식)이 멋대로 이 스타일이 먹지 않도록 <h1>태그 안에 <span> 태그를 추가하거나, style=" " 를 통하여 글로벌하게 적용되어 있는 스타일을 방해하고 있습니다.

span 태그&#44; style=&quot;&quot;이 포스팅을 엉망으로 만들었다
span 태그, style=""이 포스팅을 엉망으로 만들었다

 

3. 수정하기에서 HTML 모드로 모든 span 태그 및 style 정리하기

아.. 생각보다 쉽지 않습니다. 저 같은 경우 Visual Studio Code 라는 에디터를 통해 좀 더 쉽게 정리했습니다. 설명이 쉽지 않고, 약간의 전문 지식이 필요한 방법이라 저의 정리 팁 같은 건 드리기 힘들지만, 정리 예시 정도는 공유가능할 것 같네요.

원본 글의 HTML

 

span 태그 및 style 을 모두 제거한 수정 글의 HTML

 

4. 정리된 글 확인

이후 기본모드와 HTML 모드를 오가면서 정리하고 나니, 조금은 스타일이 정리된 글이 되었습니다.

 

정말 아무 생각없이 저의 네이버 블로그나 git페이지 블로그 등에서 티스토리로 가져온 글들도 많은데, 확인해보니 내용이 짤리거나 이상한 것들이 너무 많아서 반성하게 되네요.

현재 다섯개 정도의 포스팅을 정리했는데, 앞으로 하나씩 계획적으로 차근차근 정리해나가야겠습니다. 스킨 변경에도 신중해야겠고요.

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band