최근 티스토리에서는 사용자들의 요구에 부응하여 다양한 새로운 기능들을 발표하였다.

HTTPS 를 통한 보안의 강화, 새로운 스킨의 추가, 통계 기능의 강화 등 그동안의 미미했던 변화와는 차원이 다른 큰 변화를 하였다.

가장 관심있었고 눈에 띄는 부분은 새로운 스킨의 추가로 POSTER, WHATEVER, LETTER 로 명명된 3가지의 신규 스킨이 추가되었다.

신규 스킨들에서는 그동안 볼 수 없었던 커버기능을 제공하는데 커버는 기존의 테터데스크나 티에디션으로 블로그의 첫페이지를 꾸미던 기능을 대체하고 있다.

신규 스킨마다 커버의 형태가 다르게 제공되고 있고 커버에서는 슬라이드, 썸네일 목록, 와이드 패널 등 다양한 형태의 글 목록 배치를 통해 사용자들이 손쉽게 첫페이지를 꾸밀 수 있도록 돕고 있다.

기존의 스킨 사용자로서 커버 기능만을 사용하고 싶은 경우가 있다. 사용중인 스킨에서 커버 기능을 사용하고 싶은 마음이 없어 그동안 관망하고만 있었는데 새로운 스킨을 둘러보기도 할겸 커버기능 이식을 한번 시도해 보려고 한다.


여기서는 티스토리 기본 스킨인 #1 을 샘플로 커버기능을 이식해 보려고 한다.




티스토리 #1 스킨 편집모드


1 신규 스킨 다운로드 하기


사용하고자 하는 커버기능이 포함된 신규 스킨의 파일을 컴퓨터에 먼저 다운로드한다. (여기서는 WHATEVER 스킨을 활용했다.)



2 index.xml 파일 교체하기


기존 스킨의 관리자 화면에서 스킨 편집항목에서 파일올리기를 선택하여 다운로드된 WHATEVER 스킨 파일 중 index.xml 파일을 업로드한다.



* 신규 스킨의 커버 기능을 사용하려면 신규 스킨의 index.xml 이 기존 스킨의 index.xml 이 호환되어야 한다. 대부분의 스킨은 교체해도 큰 문제가 발생하리라 생각하지 않지만 .. 복잡한 스킨의 경우는 index 의 내용이 서로 다른 경우도 있을수도 있으니 백업은 필수이다.


3 변경된 스킨 편집 모드


index.xml 을 업로드하면 스킨의 편집화면에서 커버 기능을 사용할 수 있게 변경된다.


4 HTML 의 커버 치환자 부분 복사하기


index 파일의 추가로 커버 기능을 사용할 수 있는 환경은 만들어졌다. 이제 추가된 커버를 HTML 에 치환자를 추가해야 한다.

다운로드된 신규 스킨의 SKIN.HTML 파일을 열거나 신규 스킨이 적용된 스킨의 편집모드에서 HTML 보기를 이용하여 커버 기능이 있는 부분을 Ctrl + C 를 이용하여 복사한다.




위의 이미지처럼 <s_cover_group> 부터 아래로 129줄의 </s_cover_group> 까지 복사한다.


5 HTML 의 커버 치환자 부분 추가하기


복사한 부분을 이식하고자 하는 스킨의 HTML 편집모드에서 아래와 같이 28번째 부분과 같이 CTRL + V 를 이용하여 추가한다.



6 STYLE CSS 의 커버 치환자 부분 추가하기


HTML 과 마찬가지로 신규 스킨의 style.css 파일을 열거나 신규 스킨이 적용된 스킨의 편집모드에서 CSS 를 선택하여 커버기능과 관련된 부분을 복사하여 사용하고자 하는 스킨의 CSS 에 추가한다.

* 데스크탑 환경과 모바일 환경에서의 내용이 별도로 있으므로 모두 복사하여 옮긴다.



7 Java Script 의 추가


동일한 script.js 파일명을 사용하지만 신규 스킨과 기존 스킨의 script.js 파일의 내용이 다르다. 메뉴 버튼이나 검색 버튼들의 기능들이 작동하지 않기 때문에 신규스킨의 script.js 안에 기존 스킨의 스크립트를 추가해야한다.

신규 스킨의 script.js 파일을 업로드하여 덮어쓰고 기존의 스크립트 내용을 복사하여 HTML 상에 스크립트를 추가할수도 있고

파일명을 다른 이름으로 저장(script3.js) 하여 파일올리기로 업로드 한 후 아래와 같이 외부 스크립트 연결을 추가해도 관계없지만 위치를 주의하여 삽입해야 한다.

현재는 HTML 의 마지막 부분에 아래와 같이 추가되었다.



8 커버 기능 적용 확인


커버기능이 제대로 적용되는지 확인해보았다. 그리 어려운 난이도는 아니라서 커버기능을 어렵지 않게 사용할 수 있다. 

다만 모든 스킨을 테스트해보지 않아서 모두 동일한 방법으로 가능할지 확신할 수는 없다.





댓글
  • 프로필사진 글쓰는 엔지니어 커버 넣어보고싶었는데 간단하네요 ㅎㅎㅎ 한번 도전해볼게요 ㅎㅎ 2018.11.09 23:24 신고
  • 프로필사진 SONYLOVE 조금 수정해야 하는 부분들도 있긴 하지만 그리 어렵지 않게 활용하실 수 있을거에요.
    성공하시길.. ^_^
    2018.11.10 10:05 신고
  • 프로필사진 땀똔 새 스킨들의 비밀이 하나씩 드러나네요.. ㅎㅎ;
    팁 감사합니다~ ^^
    2018.11.10 16:46 신고
  • 프로필사진 SONYLOVE 신규 스킨들이 궁금해서 저도 시도해보았어요.
    다른 부분들보다 커버가 가장 궁금하더라고요. ^_^
    2018.11.10 19:17 신고
  • 프로필사진 施兒 기존 스킨에도 커버가 가능하군요
    커버만 사용 하고 싶단 생각도 했었는데 말이죠
    조금만 늦게 스킨을 바꿨더라면 소니러브님 블로그를
    통해 커버만 바꿨을덴데.............. 그래도 지금 스킨에 만족하니.

    그래도 방법은 익히고 갈게요
    감사합니다
    2018.11.14 02:35 신고
  • 프로필사진 SONYLOVE 이미 스킨을 신규 스킨으로 사용하신다면 굳이 몰라도 상관없을듯 해요.

    지금은 과도기적인 시기라서 이런 방법도 사용하지만 앞으로는 신규 스킨 베이스로 점점 바뀌어 갈듯 합니다.
    나중엔 커버가 기본이 되겠죠. ^_^
    2018.11.14 12:50 신고
댓글쓰기 폼