최근 티스토리에서는 사용자들의 요구에 부응하여 다양한 새로운 기능들을 발표하였다.
HTTPS 를 통한 보안의 강화, 새로운 스킨의 추가, 통계 기능의 강화 등 그동안의 미미했던 변화와는 차원이 다른 큰 변화를 하였다.
가장 관심있었고 눈에 띄는 부분은 새로운 스킨의 추가로 POSTER, WHATEVER, LETTER 로 명명된 3가지의 신규 스킨이 추가되었다.
신규 스킨들에서는 그동안 볼 수 없었던 커버기능을 제공하는데 커버는 기존의 테터데스크나 티에디션으로 블로그의 첫페이지를 꾸미던 기능을 대체하고 있다.
신규 스킨마다 커버의 형태가 다르게 제공되고 있고 커버에서는 슬라이드, 썸네일 목록, 와이드 패널 등 다양한 형태의 글 목록 배치를 통해 사용자들이 손쉽게 첫페이지를 꾸밀 수 있도록 돕고 있다.
기존의 스킨 사용자로서 커버 기능만을 사용하고 싶은 경우가 있다. 사용중인 스킨에서 커버 기능을 사용하고 싶은 마음이 없어 그동안 관망하고만 있었는데 새로운 스킨을 둘러보기도 할겸 커버기능 이식을 한번 시도해 보려고 한다.
여기서는 티스토리 기본 스킨인 #1 을 샘플로 커버기능을 이식해 보려고 한다.
티스토리 #1 스킨 편집모드
신규 스킨 다운로드 하기
사용하고자 하는 커버기능이 포함된 신규 스킨의 파일을 컴퓨터에 먼저 다운로드한다. (여기서는 WHATEVER 스킨을 활용했다.)
index.xml 파일 교체하기
기존 스킨의 관리자 화면에서 스킨 편집항목에서 파일올리기를 선택하여 다운로드된 WHATEVER 스킨 파일 중 index.xml 파일을 업로드한다.
* 신규 스킨의 커버 기능을 사용하려면 신규 스킨의 index.xml 이 기존 스킨의 index.xml 이 호환되어야 한다. 대부분의 스킨은 교체해도 큰 문제가 발생하리라 생각하지 않지만 .. 복잡한 스킨의 경우는 index 의 내용이 서로 다른 경우도 있을수도 있으니 백업은 필수이다.
변경된 스킨 편집 모드
index.xml 을 업로드하면 스킨의 편집화면에서 커버 기능을 사용할 수 있게 변경된다.
HTML 의 커버 치환자 부분 복사하기
index 파일의 추가로 커버 기능을 사용할 수 있는 환경은 만들어졌다. 이제 추가된 커버를 HTML 에 치환자를 추가해야 한다.
다운로드된 신규 스킨의 SKIN.HTML 파일을 열거나 신규 스킨이 적용된 스킨의 편집모드에서 HTML 보기를 이용하여 커버 기능이 있는 부분을 Ctrl + C 를 이용하여 복사한다.
위의 이미지처럼 <s_cover_group> 부터 아래로 129줄의 </s_cover_group> 까지 복사한다.
HTML 의 커버 치환자 부분 추가하기
복사한 부분을 이식하고자 하는 스킨의 HTML 편집모드에서 아래와 같이 28번째 부분과 같이 CTRL + V 를 이용하여 추가한다.
STYLE CSS 의 커버 치환자 부분 추가하기
HTML 과 마찬가지로 신규 스킨의 style.css 파일을 열거나 신규 스킨이 적용된 스킨의 편집모드에서 CSS 를 선택하여 커버기능과 관련된 부분을 복사하여 사용하고자 하는 스킨의 CSS 에 추가한다.
* 데스크탑 환경과 모바일 환경에서의 내용이 별도로 있으므로 모두 복사하여 옮긴다.
Java Script 의 추가
동일한 script.js 파일명을 사용하지만 신규 스킨과 기존 스킨의 script.js 파일의 내용이 다르다. 메뉴 버튼이나 검색 버튼들의 기능들이 작동하지 않기 때문에 신규스킨의 script.js 안에 기존 스킨의 스크립트를 추가해야한다.
신규 스킨의 script.js 파일을 업로드하여 덮어쓰고 기존의 스크립트 내용을 복사하여 HTML 상에 스크립트를 추가할수도 있고
파일명을 다른 이름으로 저장(script3.js) 하여 파일올리기로 업로드 한 후 아래와 같이 외부 스크립트 연결을 추가해도 관계없지만 위치를 주의하여 삽입해야 한다.
현재는 HTML 의 마지막 부분에 아래와 같이 추가되었다.
커버 기능 적용 확인
커버기능이 제대로 적용되는지 확인해보았다. 그리 어려운 난이도는 아니라서 커버기능을 어렵지 않게 사용할 수 있다.
다만 모든 스킨을 테스트해보지 않아서 모두 동일한 방법으로 가능할지 확신할 수는 없다.
