2. 티스토리 파일 구조

디자인을 구상했으면 디자인을 '티스토리 스킨'으로 만들어야한다.

그렇다면 티스토리 스킨은 무엇으로 이루어져 있고, 어떤 파일을 어떻게 편집해야할까.

티스토리 스킨가이드에서 제공하는 파일구조는 다음과 같다.

SKIN ─┬─ skin.html
      ├─ style.css
      ├─ index.xml
      ├─ preview.gif
      ├─ preview256.jpg
      ├─ preview560.jpg
      ├─ preview1600.jpg
      └─ images ─┬─ script.js
                 ├─ background.jpg
                 ├─ background.jpg
                 └─ background.jpg

우선, 가장 위의 세 파일 (skin.html, style.css, index.xml)이 필수요소 파일로 가장 중요하다.

skin.html

스킨의 메인 템플릿 파일로 치환자를 사용해 각 url에 해당하는 HTML 결과물로 치환됩니다.

스킨 에디터에서 'html' 편집버튼을 눌러 들어가면 HTML 탭에서 편집할 수 있다.

현재 적혀있는 모든 HTML 코드를 지우면 블로그는 적어놓은 글이나 카테고리 유무에 상관없이 백지 상태가 된다. 즉, 티스토리 블로그를 이루고 있는 '모든' 구성요소는 HTML element를 이용해서 생성해야 블로그에서 보이게 된다.

티스토리 구성요소는 그 종류는 같지만 사용자마다 내용이 다르기 때문에 내용에 상관없이 모든 사용자의 블로그에 대응될 수 있어야한다. 이를 위해 이용하는 것이 치환자이다.

치환자

치환자는 티스토리를 구성하고 있는 요소의 내용을 사용자에 맞출 수 있도록 항목화 해놓은 것으로 볼 수 있다.

예를 들어,

현재 블로그 주소로 가는 링크를 만들 때, 현재 블로그 주소를 적어야하는데 '블로그 주소'라는 요소는 같지만 각 사용자의 블로그 주소는 모두 다르다.
그러므로 실제 블로그 주소 대신 '나의 블로그 주소'로 치환되는 블로그 주소 치환자 https://crackyachae.tistory.com/m/를 사용해서 HTML 코드를 작성한다.

치환자를 이용해서 작성한 링크 주소는 실제 페이지에서 다음과 같이 표시된다.

<!-- 스킨파일 작성 (치환전) -->
<a href = "https://crackyachae.tistory.com/m/">Home</a>

<!-- 실제 페이지 (치환후) -->
<a href = "crackyachae.tistory.com">Home</a>

티스토리의 치환자는 그룹치환자, 값치환자 두 가지로 분류된다.

그룹치환자는 "내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환된다"라고 설명하고 있으나 스킨의 영역을 구분하는 용도로 생각하면 편하다.
- <>로 감싸져있는 형태이다.
값치환자는 위의 예시처럼 스킨을 이루는 구성요소 값으로 변환되는 치환자이다.
- []로 감싸져있는 형태이다.

예를 들어 다음과 같이 스킨코드를 작성했을 때

<s_tag>
    <div class="taglog">
        <h3>태그</h3>
        <ul>
            <s_tag_rep>
                <li><a href="" class=""></a></li>
            </s_tag_rep>
        </ul>
    </div>
</s_tag>

그룹치환자: <s_tag>, <s_tag_rep>
값치환자: , ,

구체적인 치환과정이나 사용 방법은 추후 각 페이지를 작성하면서 이해하는 것을 추천한다.

style.css

css 분리를 위한 파일이며 skin.html과 마찬가지로 스킨에디터에서 편집할 수 있습니다.

HTML 파일에서 생성한 요소들의 모든 시각적인 요소를 결정하는 파일로 CSS에 대한 이해가 있으면 일반 웹 페이지와 큰 차이없이 작성할 수 있다.
치환되어 나온 각 요소와 class 값을 잘 파악해서 작성하고 HTML 파일에 잊지않고 연결시켜주는 것이 중요할 것 같다.

index.xml

스킨 정보 파일로 자세한 내용은 '스킨 정보 파일' 장에서 다룹니다.

스킨의 정보를 나타내는 파일로 스킨의 정보나 기본값, 옵션 등을 만들고 설정할 수 있는 파일이다.

preview

티스토리 각 영역에서 미리보기를 표시하기 위한 파일입니다.

preview.gif : 미리보기 기본 파일로 아래 파일이 없는 경우에 사용 (112x84)
preview256.jpg : 사용 중인 스킨 미리보기 (256x192)
preview560.jpg : 스킨 목록 미리보기 (560x420)
preview1600.jpg : 스킨 상세보기 미리보기 (1600x1200)

아직 정확한 용도와 사용 이유를 잘 모르겠다. 추후에 알아보는대로 내용을 추가할 예정.

images

필수요소가 아닌 파일은 모두 images 아래에 위치하게 됩니다. image, script, css 등을 업로드하여 스킨에서 사용합니다.

위에서 언급한 파일 외에 업로드한 파일은 전부 자동으로 images 폴더에 위치하게된다.
스킨에 사용할 image, icon, font, 추가적인 css나 js파일 등을 폴더에 업로드해 사용할 수 있다.

<!-- Example -->
<img scr="/images/img.jpg">
<script src="/images/additional-script.js"><script>

참고

스킨가이드 - 파일 구조 by Tistory