티스토리 스킨 적용하는 방법 상세 안내. 종결판. 디엔드. 끝판왕.

티스토리 스킨 적용하면서 시행 착오나 잘못된 스킨 적용으로 인한 문의가 너무 많아서

일일이 답변 달기가 귀찮아서 정리를 해두려고 쓰는 글입니다.

스킨 설치하는 방법에 대해서는 여러차례 글을 썼는데 이것만으로는 부족한듯 싶습니다.

티스토리 레퍼런스 스킨은 "적용" 버튼을 누르면 바로 적용되지만, 별도로 배포하는 스킨들은 다운로드 받은 스킨을 사용자가 블로그에 직접 적용해야 합니다.

사용자 스킨을 적용하는 방법은 2가지가 있습니다.

각각 나누어서 설명합니다.

0. 다운로드 받은 스킨의 구조 확인

대부분 배포 스킨이 다 비슷한 구조입니다. 

중요합니다. 스킨 적용할 때 하나라도 누락하면 안됩니다. 모두 적용해야 스킨이 정상 동작합니다.

배포하는 스킨을 다운로드 받아 압축을 풀면 다음과 같은 파일들이 나옵니다.

중요한 필수 파일은 3개입니다. "skin.html"과 "style.css" 파일은 파일 이름이 다를 수 있습니다.

"html"과 "css" 확장자를 가진 파일이 해당됩니다.

"index.xml" 파일이 없는 스킨도 드물게 있을 수 있습니다. 없으면 제외하면 됩니다.

• index.xml
• skin.html
• style.css

그리고, "images" 폴더가 있습니다. 스킨에서 사용하는 이미지 파일과 스크립트 파일, 그외 스킨에서 가져와 사용하는 css 등 모든 리소스가 들어있는 폴더 입니다. 폴더 안의 파일들은 모두 업로드하는 파일이라고 생각하면 됩니다.

1. 스킨 편집기로 스킨 적용하기

스킨 편집기로 업로드를 하려면 스킨 편집기 화면으로 들어가야 합니다.

블로그 관리자 화면 꾸미기 > 스킨 편집으로 들어가면 스킨 설정 및 미리보기 새 창이 열립니다.

오른쪽의 "html편집" 버튼을 눌러 편집기 화면으로 이동합니다.

오른쪽 설정 화면이 편집기 화면으로 바뀝니다.

편집기 화면을 보면 "HTML", "CSS", "파일업로드" 3개가 보이는데, 클릭해서 각각의 기능을 이동하는 탭입니다. 모양이 조금 이상하지만, 클릭해보면 하단 화면이 바뀌는 것을 확인할 수 있습니다.

다운로드 받아 압축을 푼 각 스킨 파일들은 다음과 같이 적용합니다.

"skin.html" 파일은 메모장이나 텍스트 편집기에서 먼저 열어서 전체 선택한 후 클립보드로 복사합니다.

편집기 탭 중 "HTML" 탭을 선택해 HTML 편집기 에디터 화면을 연후 편집기 영역을 클릭해 입력 커서를 표시합니다.

"Ctrl+A"를 눌러 편집기 안의 HTML 코드를 모두 선택합니다.

"Del" 키를 눌러 선택한 내용을 모두 삭제합니다.

"Ctrl+V"를 눌러 앞서 클립보드로 복사해 놓은 새 스킨의 HTML 코드를 붙여넣습니다.

"style.css" 파일도 같은 방법으로 "CSS" 탭으로 이동해 새 스킨용 CSS를 붙여넣으면 됩니다.

"images" 폴더의 파일들은 대부분 스킨에서 사용하는 필수 파일인 경우가 많습니다.

특히 자바스크립트 파일(*.js)은 스킨 환경을 구성하는 중요한 파일인 경우가 많습니다.

업로드 하지 않으면 스킨이 동작하지 않는 경우가 많습니다.

따라서 "images" 폴더 안에 있는 모든 파일을 꼭 업로드 해야 합니다.

"파일업로드" 탭을 선택한 후 하단의 "추가" 버튼을 눌러 "images" 폴더 안의 모든 파일들을 드래그해서 선택한 후 "열기" 버튼을 누르면 모든 파일을 업로드할 수 있습니다.

index.xml 파일은 업로드 하면 직후에 모래시계가 무한으로 돕니다.

티스토리 시스템 버그입니다. 언젠가는 해결해 주겠지가 1년이 넘어가고 있습니다.

모래시계 돌면 업로드 완료되고, 설정 옵션 적용된 것입니다.

스킨 편집 초기화면의 스킨 옵션 설정하는 화면으로 돌아가서 옵션 항목들이 보이는지 확인하면 됩니다.

스킨 환경 설정과 옵션 적용은 거의 즉시 되기 때문에 동그라미 돌기 시작하면 그냥 화면 빠져나오면 됩니다.

2. 스킨 보관함 등록으로 스킨 적용하기

이 방법은 기존에 운영하던 블로그에 적용하면 블로그의 모든 설정이 초기화됩니다.

블로그를 최초 개설하는 경우가 아니면 주의해서 사용해야 합니다.

기존에 운영하던 블로그는 가능하면 앞서의 스킨 편집기 적용 방법을 사용하는 것을 권장합니다.

블로그 관리자 화면에서 꾸미기 > 스킨변경 을 선택합니다.

오른쪽 상단의 "스킨등록+" 버튼을 클릭합니다.

새 스킨을 등록할 수 있는 새 화면에 표시됩니다.

등록한 스킨의 구성 파일들을 선택해야 합니다. 스킨 등록 화면 오른쪽 "추가" 버튼을 클릭합니다.

다운로드 받아 압축을 풀어놓은 스킨 파일들이 있는 폴더로 들어가서 모든 파일을 드래그해서 선택합니다.

주의할 점이 있습니다.

스킨 등록할 때 폴더를 선택해도 그 안의 파일들은 추가되지 않습니다. "images" 폴더 안에 있는 파일들은 "추가" 버튼을 다시 눌러 폴더 안의 파일 목록을 드래그해서 다시 선택해야 합니다.

"열기" 버튼을 누르면 선택한 파일들이 모두 업로드 됩니다.

스킨 등록 화면 왼쪽 "파일 목록"에 선택한 파일들이 모두 업로드 되어 표시되는지 확인합니다.

"저장" 버튼을 누르면 저장해놓은 스킨의 이름을 묻습니다. 이름을 입력하면 "확인" 버튼이 활성화 됩니다. 

"확인" 버튼을 누르면 스킨이 등록됩니다.

등록한 스킨은 블로그의 스킨보관함에 저장됩니다.

스킨보관함은 블로그 단위로 저장되므로 다른 블로그에 저장하려면 해당 블로그 관리자 화면으로 이동해서 다시 업로드 해야 합니다.

스킨 목록 오른쪽의 "스킨 보관함>" 버튼을 클릭해 보관함으로 이동합니다.

방금 보관한 스킨이 표시됩니다.

스킨 위로 마우스 커서를 가져가면 스킨의 기능 명령 버튼이 스킨 썸네일 이미지 위에 표시됩니다.

"적용" 버튼을 누르면 블로그에 스킨이 적용됩니다.

3. 스킨 적용 후

스킨을 적용했는데 스킨이 정상 적용되어 보이지 않는 경우가 있습니다.

웹 브라우저에서 구 스킨의 일부 파일을 캐시해서 가지고 있어서 나타나는 현상으로 티스토리 시스템의 특성입니다.

이 경우 웹 브라우저 캐시를 한번 소거하면 새로 등록한 스킨 파일이 적용되어 보입니다.

티스토리 시스템은 최대 약 20분의 캐시 주기를 가지고 있기 때문에 약 20분이 경과하면 자동으로 새로 적용한 스킨이 적용되어 보이므로 스킨 등록을 제대로 했다면 조금 기다리면 자연스럽게 새 스킨이 적용되어 보입니다.

주로 구 스킨과 같은 이름을 가진 새 스킨의 자바스크립트 파일이 갱신이 안되서 이런 현상이 발생합니다.

주의해야 합니다.