친절한효자손 취미생활

티스토리 스킨 제작을 위한 티스토리 가이드 페이지가 있긴 합니다만 설명이 많이 부실합니다. 저 같은 초보자에게는 이게 대체 무슨 의미인지를 모르겠더군요. 제가 만약 티스토리 부서에 배치된 직원이라면 절대 그렇게 설명하지 않습니다. 제대로 설명을 해놨을 것입니다. 그런 마음을 담아서 이번 강좌부터는 제 스타일대로 나름 자세한 설명을 진행하려고 합니다. 부디 이 내용이 티스토리 스킨을 제작하시는 분들에게 도움이 되기를 바랍니다.

 

스킨 구성 파일 중 index.xml 의 역할

이 파일은 티스토리 스킨편집의 구성을 담당합니다. 스킨의 설정을 직접적으로 진행하기 위한 페이지로서 사용자 편의성을 제공하는데 목적을 두고 있습니다. 스킨 편집을 위한 파일이라고 생각하시면 됩니다. 스킨의 HTML에 특수 태그를 만들고 해당 태그를 index 페이지에 그대로 사용하여 스킨을 제어합니다.

 

친효스킨의 스킨편집 화면입니다. 보시면 홈설정 부분에 커버 기능이 들어있습니다. 이것은 HTML 문서에 있는 커버 태그를 인식함과 동시에 스킨 편집 화면에서 설정하여 사용자가 원하는 방식, 원하는 스타일로 그대로 스킨에 적용됩니다.

 

애드센스나 추천글 설정 부분도 마찬가지입니다. 현재 저런 옵션들은 모두 index.xml 문서에 입력되어있는 상태인 것입니다. 무슨 소리인지 모르시겠다면 index.xml 파일을 한번 열어보시기 바랍니다. 브라켓같은 프로그램이나 메모장으로 HTML 문서를 열람할 수 있는데 index.xml 페이지 열람도 가능합니다.

 

이것이 친효스킨의 index.xml 문서 내용 중 일부의 모습입니다. 보시면 커버 부분에 무언가가 마크업되어 있습니다. rgy-cover-list라고 하는 커버의 이름은 최신글 리스트 커버라고 하는 타이틀로 전체 카테고리의 최신글 10개를 노출시킨다는 의미를 담고 있습니다. 자세한 내용은 나중에 추가 설명을 드릴 것입니다. 이번에는 대략적인 의미만 알고 계시면 됩니다.

 

커버 기능 중 rgy-cover-gallery 라고 하는 이름을 가진 아이템과 rgy-cover-gallery2 라고 하는 이름을 가진 아이템 두 개가 등록되어 있는 상태입니다.

 

애드센스 부분도 보시면 이렇게 명시되어 있습니다. veriablegroup 부분이 바로 스킨편집 페이지의 대단원이라는것도 대충 아실겁니다. 이 태그의 name 부분의 텍스트가 스킨편집에서 보여지는 부분이라는것도 이해가 되시나요?

 

HTML에서의 index.xml 역할

이번에는 친효스킨의 HTML 문서 내용을 살펴보겠습니다. 스킨 구성 파일 중 skin.html에 해당됩니다. 스킨편집 페이지의 HTML 편집을 들어가면 나오는 수 많은 코드가 바로 이 문서입니다.

 

친효스킨 갤러리 커버의 태그 상태입니다. <s_cover> 태그에 name이라고 하는 값이 적용되는데 그 코드명이 rgy-cover-gallery라고 입력되어 있습니다. 이러한 HTML의 코드 상태를 index.xml 문서가 이해하고 인식한 상태가 되었을 때 우리는 스킨편집 페이지에서 편집을 할 수 있게 되는 것입니다. 그래서 방금 살펴봤던 index.xml 페이지 안쪽에 <name> 이라는 태그 안에 rgy-cover-gallery라는 내용이 입력되어 있던 것입니다. 이 둘은 이런식으로 서로 연결이 되어 있습니다. 연결되는 네이밍은 개발자 마음대로 정할 수 있는데 보통은 영어 소문자로 구성되어 있습니다. 이 부분도 HTML의 클래스명과 같아서 숫자로 시작할 수 없습니다.

 

갤러리2 커버도 마찬가지 방식으로 index.xml 문서와 연동되어 있습니다.

 

당연히 리스트 커버도 같은 방식입니다.

 

마무리

한마디로 요약 정리합니다. index.xml 문서는 티스토리 스킨의 skin.html 문서와 연동되어 있음과 동시에 스킨편집 페이지에서 사용자가 임의로 제어하는 값을 그대로 받아 다시 skin.html에 입력하는 역할을 하게 됩니다. 그렇기에 사용자가 원하는 설정값대로 스킨이 변하게 됩니다. 이 관계를 잊지 말아주세요. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 이 글 덕분에 스킨제작 작업을 시작했습니다 감사합니다!
    2021.07.26 19:58 신고
  2. skin.html입니다
    2021.08.15 21:05 신고