티스토리 스킨 설치 구글 네이버 광고 분석 코드 옮기기

이번 글에서는 티스토리 스킨 변경하는 방법에 대해서 말씀드리려고 합니다. 

최근 들어 티스토리에서 예쁘고 편리하면서도 사용성이 좋은 스킨들을 많이 내놓고 있죠. 그래서 새로운 스킨을 볼때마다 스킨을 변경하고 싶은 욕구가 샘솟곤 합니다.

이번에도 8월 새로운 스킨 Book Club을 업데이트하며 티스토리 이용자들을 놀라게 했습니다. 저도 이 스킨을 보고 바로 바꿔야겠다 결심하고 바꾸었구요.

이번 스킨은 두 개의 단으로 구성되어 공간 효율을 높이고 있습니다. 페이스북 타임라인, 트위터 타임라인도 생겨 블로그에서 페이스북과 트위터 페이지를 확인해 볼 수도 있구요. 

스킨 홍보 글처럼 되어버렸는데, 제가 알려드리고 싶었던 걸 이제부터 말해보도록 하겠습니다. 먼저 스킨을 변경하여 설치하는 것부터 다뤄보도록 할게요.

스킨 설치

하지만 주석으로 잘 정리해둔다면 위 같은 일은 없을 겁니다. 주석의 중요성을 강조하는 글이죠 사실. 스킨 변경은 티스토리 공식 블로그에서 스킨 탭에 마음에 드는 것을 골라 적용하기 버튼을 누르면 됩니다. 위 사진처럼 하면 되겠죠. 

압축을 푼 모습

이용자 제작 스킨일 경우에는 제작 블로그에 들어가셔서 스킨을 다운로드 한 뒤에, 압축을 풀어줍니다. 압축을 풀면 다음과 같은 파일들이 보이실 겁니다. 위 파일들은 어포스트님이 배포하신 반응형 2단 레트로 프레임즈 스킨을 예시로 들었습니다.

이 압축 푼 것들을 이제 적용을 할 차례입니다. 블로그 관리 창에 들어가셔서 꾸미기 탭 > 스킨 변경 으로 가시면 위와 같은 화면이 나옵니다. 여기서 스킨등록을 눌러 아까 파일을 업로드 하면 됩니다. 

다 업로드하면 이런 모습이 나올 겁니다. 이미지 폴더 안에 있던 파일들은 이미지 폴더 내부로 들어가서 업로드하면 자동으로 이미지폴더/파일명.png 같은 형식으로 등록이 됩니다. 업로드하실때 index.xml, skin.html, style.css 세 파일이 모두 올라가야 정상적으로 적용됩니다. 주의하셔서 올려주시면 되겠습니다.

따로 꾸미기 탭 > 스킨 편집 > html 편집에 들어가 skin.html의 내용을 html 탭에, style.css 을 CSS 탭에 복사 붙여넣기 해야하는 경우도 있는데요. 저는 먼저 제작자의 가이드를 잘 따르는 것을 추천드리고, 위 방법으로 잘 스킨이 변경되지 않으면 복사 붙여넣기를 시도해보시는 것도 추천드립니다. 

스킨 코드 정리

코드 정리라고 거창하게 이름은 붙여놓긴 했지만, 그리 대단한 정리는 아니니 글을 읽으시기 전에 참고해주시기 바랍니다.ㅜㅜ

맨 윗 제목에 보이듯이 스킨 변경시 현재 블로그에 적용해 두었던 코드들을 쉽게 옮기는 방법을 알려드리려고 합니다. 예전 블로그를 하던 초반에는 여러 스킨을 적용해보고 마음에 드는 스킨을 고르면 그 위에 네이버, 구글 애널리틱스, 자동 광고 등을 막무가내로 삽입하곤 했습니다. 물론 찾아보면 head 태그 안에 다 정리는 되어있겠지만요.

그러다 보니 스킨을 변경할 때, 저 코드들이 다 사라져, 네이버와 구글 애널리틱스 등의 인증을 다시 받아야 하는 문제도 발생하고, 모바일 환경에서 나오는 자동 광고들도 스킨을 변경한 후엔 나오지 않아 번거로운 경험을 하곤 했습니다. 그러다보니 좋은 스킨을 찾아도 변경하지 않게 되었죠.

정리를 시작하면 이와 같은 문제점들을 해결할 수 있습니다.

저는 이런식으로 정리를 해두었습니다. 광고 시작과 광고 끝에 주석을 달아주고, 사이트맵이나 애널리틱스는 하나로 묶어 구글 네이버의 검색 분석이나 유입을 정상적으로 다시 유도할 수 있도록 했습니다. 

이렇게 주석으로 잘 정리해두면 나중에 저 부분만 떼서 스킨 변경할 때 붙여넣으면 되겠죠! 저는 이 방법으로 앞으로도 더 마음에 드는 스킨이 있으면 바로바로 스킨을 적용해보려고 합니다.