티스토리 스킨 제작 도움말 : index.xml 문서의 구조
HTML과 CSS, 자바스크립트를 어느정도 할 줄 아신다면 아마 레이아웃 구성 부분은 큰 문제없이 세팅을 할 수 있을 것입니다. 제가 티스토리 스킨을 만들 때 가장 어려웠던 부분은 바로 index.xml의 활용이었습니다. 이 문서를 어떻게 적용시켜야 제어가 가능한지 전혀 몰랐기 때문입니다. 그러니 가장 먼저 index.xml 문서에 대해서 개념을 이해할 필요가 있겠습니다. 티스토리 스킨 제작 가이드 페이지에도 정의가 나름 명시되어 있지만 너무 요약된 설명 때문에 초보자인 제가 볼 때는 당췌 이게 무슨 의미인지를 전혀 알 수 없었습니다. 아마 저와 비슷한 시행착오를 겪는 분들이 많을 것이라 짐작을 하며 최대한 쉽게 정리를 다시 해보려고 합니다.
index.xml 페이지 구조
앞서 설명드렸던 강좌를 정독하셨다면 대략적으로 인덱스 페이지는 티스토리 스킨의 HTML 문서를 제어하기 위한 웹문서라는 개념을 이해하셨을 것입니다. 오늘은 index.xml 문서만 집중 공략해 보고자 합니다.
<?xml version="1.0" encoding="utf-8"?>
<skin>
<information>
<name>친효스킨 v2.3</name>
<version>2.3</version>
<description>
<![CDATA[웹표준을 준수한 XHTML 기반의 티스토리 반응형 스킨입니다. 스킨 저작권은 "친절한효자손"에게 있습니다.]]>
</description>
<license>
<![CDATA[편집은 가능하지만 배포는 하실 수 없습니다. 푸터의 제작자 표시는 편집 금지입니다. 상업적인 사용 또한 불가합니다.]]>
</license>
</information>
<author>
<name>친절한효자손</name>
<homepage>https://rgy0409.tistory.com</homepage>
<email>rgy0409@gmail.com</email>
</author>
<default>
<entriesOnPage>30</entriesOnPage>
<entriesOnList>30</entriesOnList>
<recentEntries>5</recentEntries>
<recentComments>5</recentComments>
<recentTrackbacks>5</recentTrackbacks>
<itemsOnGuestbook>30</itemsOnGuestbook>
<tagsInCloud>30</tagsInCloud>
<sortInCloud>1</sortInCloud>
<expandComment>1</expandComment>
<expandTrackback>0</expandTrackback>
<lengthOfRecentNotice>100</lengthOfRecentNotice>
<lengthOfRecentEntry>100</lengthOfRecentEntry>
<lengthOfRecentComment>100</lengthOfRecentComment>
<lengthOfRecentTrackback>100</lengthOfRecentTrackback>
<lengthOfLink>100</lengthOfLink>
<showListOnCategory>1</showListOnCategory>
<showListOnArchive>1</showListOnArchive>
<commentMessage>
<none>댓글이 없습니다.</none>
<single>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</single>
</trackbackMessage>
<tree>
<color>000000</color>
<bgColor>ffffff</bgColor>
<activeColor>000000</activeColor>
<activeBgColor>eeeeee</activeBgColor>
<labelLength>27</labelLength>
<showValue>1</showValue>
</tree>
<contentWidth>860</contentWidth>
<cover>
<![CDATA[
[
{
"name": "rgy-cover-list",
"title": "최신글 리스트 커버",
"dataType": "RECENT",
"data": {"category":"ALL","size":10}
}
]
]]>
</cover>
</default>
<cover>
<item>
<name>rgy-cover-gallery</name>
<label>
<![CDATA[ 갤러리 ]]>
</label>
<description>
<![CDATA[ 갤러리 스타일의 커버입니다. ]]>
</description>
</item>
</cover>
<variables>
<variablegroup name="애드센스">
<variable>
<name>rgy-adss-client</name>
<label>
<![CDATA[ 애드센스 Client ]]>
</label>
<type>STRING</type>
<option />
<default></default>
<description>
<![CDATA[ 애드센스의 클라이언트값을 입력합니다. ]]>
</description>
</variable>
</variablegroup>
</variables>
</skin>
위의 코드는 친효스킨의 index.xml의 일부를 가지고 온 것입니다. 간단하게 구조를 파악해 보도록 합니다. 티스토리 스킨 가이드에서도 index.xml의 기본값을 제공하고 있습니다. 친효스킨은 <cover>와 <variables> 부분을 제외한 나머지는 공식 가이드의 기본값을 따르고 있습니다. 더 자세한 내용은 아래의 공식 가이드를 참고해 주시기 바랍니다.
스킨 정보 파일 (index.xml) · GitBook
스킨 정보 파일 스킨에 필요한 정보를 담고 있는 xml 파일로 이 파일이 변경되면 스킨의 모든 설정이 초기화됩니다. 기본 스킨 1.1 tistory http://notice.tistory.com tistoryblog@daum.net 5 5 5 10 30 3 0 0 25 27 30 30
tistory.github.io
그러면 공식 가이드북의 설명과 제 생각을 합쳐서 나름대로 살을 붙여서 이야기를 해보겠습니다.
<skin> : index.xml의 기본 태그입니다. 가장 최상위의 부모 요소입니다. 절대로 있어야 합니다. 이 태그의 바로 자식 요소가 <infomation>, <author>, <default>, <cover>, <variables> 등등이 있습니다. 이것은 스킨 제작자마다 조금씩 다를 수 있습니다.
<infomation> : 스킨의 이름, 버전, 설명등을 직접 입력하여 스킨편집 페이지에 표시하는 태그입니다.
<author> : 스킨편집의 제작자, 저작권, 이메일에 대한 설명을 표시하는 태그입니다.
<default> : 이 부분은 위의 스킨 정보 파일 공식 가이드 페이지에 자세히 설명이 나와 있습니다. 설정 기본값 부분을 참고하시면 됩니다. 사실상 이 부분은 거의 수정할것이 없습니다. 그냥 기본값으로 입력해두면 됩니다. 단 이 태그 안에 들어가는 자식 요소의 <cover>는 스킨에 커버 기능이 추가되었을 때 기본 커버에 대한 설정을 정의하는 태그로 활용됩니다. 반드시 들어갈 필요는 없습니다.
<cover> : 스킨의 커버 기능을 추가할 때 사용하는 태그입니다. 커버의 종류에 따라 자식 요소인 <item> 태그의 개수가 그만큼 추가됩니다.
<variables> : 스킨 편집의 꽃이라 할 수 있겠습니다. 친효스킨은 이 기능이 참 많이 적용되어 있습니다. 다양한 스킨 제어를 위해서 사용하는 태그입니다.
이런 개념입니다.
<infomation> 태그 설명
스킨 편집 화면의 이미지입니다. 지금 빨간색으로 표시된 부분이 바로 <infomation>에서 정의하는 부분입니다. 자세한 설명 들어갑니다.
<name> : 스킨 이름
<version> : 스킨 버전
<description> : 스킨 설명
스킨 설명의 경우는 <!CDATA[ 다음 바로 들어가는 텍스트부터 출력이 됩니다. 괄호에 유의해서 입력해야 합니다.
이 부분은 <license>와 <author> 태그에서 제어합니다. 라이센스는 저작권에 대한 설명을 입력합니다. <author>에 대한 자세한 태그 설명은 다음과 같습니다.
<name> : 제작자
<homepage> : 티스토리 주소 (표시는 되지 않음)
<email> : 이메일
이렇게 입력하시면 됩니다.
<default>의 자식 요소인 <cover>를 사용할 경우
위에서 설명드렸듯 디폴트 태그 안의 자식 요소로서 <cover> 태그를 반드시 사용할 필요는 없습니다. 이것은 스킨의 커버 기능을 추가했을 때 기본값에 대한 정의를 내릴 때 쓰입니다. 여러분들께서 직접 제작하는 티스토리 스킨은 커버 기능 사용 시 기본값을 딱히 세팅하고 싶지 않다면 이 기능은 적용시키지 않아도 됩니다.
<cover>
<![CDATA[
[
{
"name": "rgy-cover-list",
"title": "최신글 리스트 커버",
"dataType": "RECENT",
"data": {
"category":"ALL",
"size":10
}
}
]
]]>
</cover>커버에 대한 기본 태그 상태입니다. 이 옵션이 커버 기능 사용 시 기본값이 됩니다. 친효스킨의 경우는 rgy-cover-list라고 하는 커버 네임을 기본값으로, 이 커버의 타이틀은 "최신글 리스트 커버" 라는 텍스트가 들어가도록, 타입은 RECENT 즉, 최신글 순으로, 카테고리는 전체로, 리스트 목록 개수는 10개로 세팅되어 있습니다. 커버에 대한 기본 개념도 스킨 제작 가이드에 명시되어 있으니 꼭 한번 확인해 보시기 바랍니다.
홈 커버 · GitBook
홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지
tistory.github.io
기본값 JSON의 내용을 필히 참고하시기 바랍니다. 특히 dataType 부분이 햇갈릴 수 있는데 딱 두개만 사용된다는것만 기억하면 됩니다.
RECENT : 최신 글
CUSTOM : 직접 입력
이 두가지인데 통상적으로 RECENT를 가장 많이 사용합니다. CUSTOM은 사용자 설정에 맞기는게 빠르기에 기본 옵션으로는 부적절합니다. 따라서 data 안쪽에 들어가는 여러 옵션 중 CUSTOM을 선택한 경우라면 title, summary, url, thumbnail의 네 가지를 세팅해야합니다. 그렇지만 방금 설명한대로 RECENT를 사용할 것이기에 그냥 CUSTOM 설정은 없다고 생각하시면 편합니다. 따라서 위의 친효스킨 코드 예시처럼 category와 size만 마크업하여 그 값을 입력하면 됩니다. category의 경우는 통상적으로 전체글(all)로 많이 세팅하는 편입니다. 왜냐하면 이제 막 시작하는 분들이 카테고리가 다양할리가 없기 때문입니다. 또한 티스토리 사용자마다 카테고리 이름도 다르고 개수도 다르기 때문에 딱히 어떤 카테고리를 타켓으로 할지 결정할 수 없습니다. 따라서 제작자가 고려할 부분은 size입니다. 목록 개수의 기본값을 몇 개로 초기 세팅할지만 정하면 됩니다. 친효스킨의 경우는 위의 코드를 살펴보시면 아시다시피 10개가 기본 목록 개수입니다.
<cover> 태그 설명
다음은 커버 기능입니다. 티스토리 스킨의 핵심 중 하나입니다. 과거에는 커버 기능 대신 티에디션이라는 기능을 사용했습니다만 이 기능은 반응형이 아닙니다. 또한 어도비 플래시 플레이어 엔진을 기반으로 운영되는 기능이기에 지금은 사용을 할 수 없습니다. 그래서 티스토리측에서도 티에디션 서비스를 종료한 것입니다. 티에디션을 대신하여 추가된 기능이 바로 커버(Cover)입니다. 티스토리 스킨의 개성을 한껏 살릴 수 있는 막강한 기능으로서 티스토리 스킨을 제작하시는 분들이라면 왠만하면 꼭 이 기능을 넣는것을 추천합니다.
커버 기능은 index.xml에서 작업할게 생각보다 없습니다. 주로 HTML과 CSS에서 작업을 많이 하게 됩니다. 특히 CSS 작업이 많이 들어가지요. 스타일 부분이니까요. 친효스킨의 경우도 커버가 네 종류가 있지 않습니까? 기본 뼈대와 이를 스킨편집에 연결시킬 index 세팅만 끝내놓으면 나머지 몫은 온전히 CSS에 있습니다. 네 가지의 스타일은 모두 CSS에서 정의하고 있습니다.
<cover>
<item>
<name>HTML 커버 네임</name>
<label>
<![CDATA[ 커버 이름 ]]>
</label>
<description>
<![CDATA[ 커버 설명 ]]>
</description>
</item>
</cover>커버 태그의 기본 스타일입니다. 각 부분에 대한 설명은 다음과 같습니다.
<item> : 커버 아이템을 구별짓는 태그
<name> : HTML에 입력한 커버 네임 코드
<label> : 커버의 이름 (별칭)
<description> : 커버 설명 (스킨 편집 화면에서는 표시되지 않음)
친효스킨의 경우는 커버가 총 네 종류입니다. 따라서 <cover>의 자식 요소인 <item>태그도 총 네 쌍이 들어있습니다. 갤러리, 갤러리2, 그리드, 리스트 커버 이렇게 네 종류의 <item> 태그 꾸러미가 존재하고 있는 것입니다. 그리고 각 <item> 태그 안쪽에 <name>, <label>, <description>이 각각 존재하고 있습니다. 사실상 <cover>는 index.xml에서 세팅하는것이 이게 전부입니다. 여기에서 중요한건 <name>태그입니다. 여기 들어가는 HTML 커버 네임과 실제로 스킨의 HTML에서의 커버 부분의 네임이 일치하도록 해야 스킨편집 페이지에서 제어가 됩니다. 이 부분은 다음 단원에서 좀 더 자세히 다루도록 하겠습니다.
<variables> 태그 설명
스킨편집의 꽃이라 할 수 있는 태그입니다. 여기에서부터 스킨편집 화면에서 제어하는 옵션들을 설정합니다. 먼저 기본 형태부터 살펴보겠습니다.
<variables>
<variablegroup name="스킨편집 화면에서 표시될 그룹이름 텍스트">
<variable>
<name>치환자 이름</name>
<label>
<![CDATA[ 스킨편집 화면에서 표시될 설명 텍스트 ]]>
</label>
<type>타입</type>
<option />
<default></default>
<description>
<![CDATA[ 설명 입력 ]]>
</description>
</variable>
</variablegroup>
</variables>이렇게 세팅되어 있습니다. 이제 각 자식요소들을 알아보겠습니다.
<variables> : 스킨편집 화면에서 설정할 옵션들에 대해 정의하는 태그. 딱 한 번 사용함
<variablegroup> : 스킨편집 화면에서 표시될 그룹 이름을 name에 지정
<variable> : 옵션 구간을 지정하는 태그
<name> : HTML의 치환자 네임
<label> : 스킨편집 화면에서 표시되는 텍스트
<type> : 편집 옵션 타입
<option /> : type의 옵션이 SELECT의 경우 지정함
<default> : 기본값
<description> : 옵션에 대한 설명 (스킨편집 화면에 표시되지 않음)
더 자세한 설명은 가이드 페이지에 있으니 꼭 확인해 보시기 바랍니다.
스킨 옵션 · GitBook
tistory.github.io
말로는 설명이 어려우므로 추가적으로 이야기를 계속 진행해보겠습니다.
친효스킨의 스킨편집 화면 중 일부입니다. 여기에서 댓글 설정이라고 하는 글씨는 <variablegroup>의 name의 큰따옴표 안에 입력되어있는 텍스트를 받아오게 됩니다. 친효스킨의 index.xml을 열어 확인해 보시면 <variablegroup name="댓글 설정"> 이라는 태그가 존재할 것입니다. 그리고 그 안쪽에 위에서 언급했던 자식 태그들이 고스란히 존재하고 있을 것입니다. 그리고 <label> 태그에도 "댓글창"이라는 텍스트가 입력되어있기 때문에 위의 스크린샷처럼 댓글창이라는 옵션이 보여지게 됩니다.
이제부터 중요한 부분은 <name>과 <type> 태그입니다. <name> 태그는 앞서 설명드렸던 <cover> 부분과 일맥상통합니다. HTML의 치환자를 미리 만들어놓고 해당 치환자 코드와 똑같이 입력하여 연결짓는 것입니다. 위의 경우는 댓글창에 대한 제어 옵션이므로 name 치환자는 분명 댓글창과 관련된 HTML 태그에 입력되어 있습니다. 이 부분은 차후에 더 자세히 설명을 드릴 것입니다. <type>은 크게 네 가지가 있습니다. 위의 스킨 가이드 페이지에 자세히 나와있으니 혹시 놓치셨다면 꼭 정독하시기 바랍니다. 위의 스크린샷 부분에 대한 친효스킨의 index.xml 상태를 살펴봅시다.
<variablegroup name="댓글 설정">
<variable>
<name>rgy-comment-onoff</name>
<label>
<![CDATA[ 댓글창 ]]>
</label>
<type>BOOL</type>
<option />
<default>true</default>
<description>
<![CDATA[ 본문 댓글을 ON / OFF 합니다. ]]>
</description>
</variable>
<variable>
<name>rgy-article-reply</name>
<label>
<![CDATA[ 댓글 정렬 순서 ]]>
</label>
<type>SELECT</type>
<option>
<![CDATA[[{"name":"rgy-article-reply-new","label":"최신순(역순)","value":"rgy-article-reply-new"},{"name":"rgy-article-reply-origin","label":"작성순(오리지널)","value":"rgy-article-reply-origin"}]]]>
</option>
<default>rgy-article-reply-new</default>
<description>
<![CDATA[ 댓글 정렬 방식을 선택합니다. ]]>
</description>
</variable>
<variable>
<name>rgyArticleReplyFontsize</name>
<label>
<![CDATA[ 댓글 폰트 크기 ]]>
</label>
<type>STRING</type>
<option />
<default>13px</default>
<description>
<![CDATA[ 댓글의 폰트 크기를 설정합니다. ]]>
</description>
</variable>
<variable>
<name>rgyArticleReplyLineheight</name>
<label>
<![CDATA[ 댓글 폰트 줄간격 ]]>
</label>
<type>STRING</type>
<option />
<default>1.3rem</default>
<description>
<![CDATA[ 댓글의 폰트 줄간격을 설정합니다. ]]>
</description>
</variable>
</variablegroup>
보시면 <variablegroup> 태그가 하나로 구성되어 있음을 확인할 수 있습니다. 그리고 이 태그 안쪽에 꽤 많은 <variable>태그 그룹들이 존재하고 있습니다. 친효스킨의 댓글 설정과 관련된 옵션은 버전 2.3을 기준으로 현재 4개입니다. 그렇기에 <variable> 태그 그룹이 총 네 개가 존재합니다. 그리고 이 네 개의 그룹안에는 <name>, <label>, <type>, <option>, <default>, <description> 태그가 각각 존재합니다. 즉 <variable> 태그는 옵션을 정의하는 가장 기본 태그이며 옵션 개수만큼 존재함을 알 수 있습니다.
<name>태그 안쪽에 존재하는 영어로 이루어진 저 코드는 스킨의 HTML에서도 똑같이 존재하는 코드입니다. 그렇기에 HTML의 태그 구간을 인식하여 index.xml에서 설정을 할 수 있게 되는 것입니다. 일종의 링크라고 볼 수 있습니다. 커버도 마찬가지이며 variablegroup도 마찬가지입니다. <type> 부분에 대해서는 다음에 좀 더 자세히 소개를 해드릴 것입니다.
마무리
여기까지가 티스토리 스킨의 index.xml에 대한 소개입니다. 스킨을 만들기전에 우선 다른 스킨들은 어떤 식으로 세팅이 되어있는지 분석해보는것도 좋은 방법입니다. 저 역시 친효스킨을 만들기까지 여러 반응형 스킨을 뜯어가며 분석했습니다. 티스토리 정식 스킨부터 개인 개발자분들의 스킨들을 열람하며 조금씩 알게 되었습니다. 다음 시간에는 오늘 미처 설명을 자세히 못 한 부분에 대해 추가 설명을 진행하겠습니다. 끝.
