[티스토리 스킨 만들기] 1. 구조 파악하기

pIutos 2022. 10. 21. 15:19

개요

어느날 내 티스토리에 적용할 블로그 테마를 찾는 중에 마음에 드는 테마가 없어서 내 입맛대로 스킨을 만들어 보기로 했다.
하지만 어떻게 만들어야 할 지 몰라서 찾아보는데 시간 투자를 많이했는데, 처음 개발하는 사람들을 위한 정리된 가이드 글이 있으면 좋겠다 싶어서 글을 작성한다.

스킨 제작 가이드

스킨 개발을 위해서 티스토리에서는 스킨 제작 가이드를 제공한다. 하지만 제작 가이드가 친절하게 설명되어있지 않아서 앞으로 해당 문서를 토대로 최대한 이해하기 쉽게 설명하도록 하겠다.
스킨을 적용하기 위해 필요한 파일에는 skin.html, index.xml, style.css와 추가적으로 js, image 파일이 있다. 스킨의 메인 템플릿 파일인 skin.html과 스킨 정보 파일인 index.xml에 대해서 자세히 알아보도록 하자.

기본 skin.html 파일 파악하기

블로그의 뼈대를 세우는 skin.html 파일을 알아보기 이전에 티스토리가 제공하는 치환자라는 개념을 알아보자.

티스토리 치환자?

티스토리 치환자는 그룹 치환자, 값 치환자의 2가지 형태를 가지고 있다. 치환자를 사용하면 각 url에 해당하는 HTML 결과물로 치환된다.

그룹치환자: 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환된다
값치환자: 해당하는 값으로 변환된다

<s_tag_rep>
  <li>
    <a href="" class=""></a>
  </li>
</s_tag_rep>

그룹치환자와 값 치환자 예시 - 태그가 표시되야하는 상황이라면 그룹치환자 <s_tag_rep>으로 감싸진 안의 내용을 렌더링하고, 값치환자 등을 통해 해당 태그의 링크나 이름 값으로 치환한다.

head 및 메타데이터 설정

검색엔진 최적화(SEO)를 위해서 <title>요소와 <meta>요소를 다음과 같이 추가할 수 있다.
그리고 <link>요소를 이용해 style.css 경로를 꼭 삽입해야한다. 스킨을 등록하기 위해서 꼭 필요한 파일이기 때문이다.

<head>
    <title>[티스토리 스킨 만들기] 1. 구조 파악하기</title>
    <meta charset="UTF-8" />
    <meta name="title" content="[티스토리 스킨 만들기] 1. 구조 파악하기 :: 개발 창고" />
    <meta name="description" content="안녕하세요, 개발자 플루토입니다." />
    <meta
        name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />

    <link
        rel="alternate"
        type="application/rss+xml"
        title="개발 창고"
        href="https://devpluto.tistory.com/rss"
    />
    <link rel="stylesheet" href="./style.css" />
</head>

기본으로 쓰이는 티스토리 치환자들

<body>
  <s_t3>
    ...
  </s_t3>
</body>

티스토리 치환자를 사용하기 위해서는 위 같이 <s_t3> 치환자로 전체를 감싸줘야한다. 이 치환자 안에 홈 커버, 게시글 목록, 사이드바 등의 치환자들을 추가해서 원하는 블로그를 디자인 할 수 있다. 본문 내부에 쓸 수 있는 중요한 치환자들을 알아보자.

본문 구성, 인덱스와 파머링크 페이지

인덱스 치환자는 메인페이지에서 게시글 목록을 반복하여 반환하고 , 퍼머링크 치환자는 게시글을 클릭했을 때 보여지는 글을 반환한다. 예를들어 현재 사용자의 접속이 메인페이지라면 인덱스 치환자 내부 HTML은 보여주고, 퍼머링크 치환자는 보여주지 않는 방식으로 동작한다.
인덱스 치환자 안에는 메인에서 보여질 목록 하나의 구조를 작성하면 되고, 퍼머링크 치환자 안에는 본문에 보여질 구조(제목, 내용, 이전-다음글, 댓글 등)을 작성하면 된다. 각각 해당되는 자세한 치환자는 스킨 제작 가이드의 글 카테고리에서 확인할 수 있다.

<!-- 본문 -->
<s_article_rep>
  <!-- 인덱스 페이지 -->
  <s_index_article_rep>
  ...
  </s_index_article_rep>

  <!-- 퍼머링크 페이지-->
  <s_permalink_article_rep>
  ...
  </s_permalink_article_rep>
</s_article_rep>

리스트 페이징 처리

페이징 치환자는 아래 보이는 게시글의 페이지를 출력한다.
<s_paging> 치환자는 다음과 같이 본문 치환자 안이 아니라, 아래에 위치시키면 된다. 만약 본문 안에 위치시키면 게시글 목록마다 반복하여 리스트가 표시된다.

<s_t3>
  <s_article_rep>
  </s_article_rep>
  <!-- //본문 -->

  <s_paging>
    <div>
      <a >
      <
      </a>
        <span class="flex">
          <s_paging_rep>
            <a >
              
            </a>
          </s_paging_rep>
        </span>
      <a >
      >
      </a>
    </div>
  </s_paging>
</s_t3>

사이드바

사이드바를 적용하기 위해서는 아래와 같이 적용하고싶은 위치에 <s_sidebar> 사이드바 그룹치환자 안에 <s_sidebar_element> 사이드바 개별 그룹치환자를 각각 넣으면 된다.
주로 볼수있는 방문자수나 최근 글, 댓글, 공지사항, 태그 목록 등을 넣을 수 있고 각 항목의 상세 구현은 스킨 제작 가이드의 사이드바 카테고리에서 확인할 수 있다.

  <s_sidebar>
    <!-- 오른쪽 사이드바 -->
    <s_sidebar_element>
      <!-- 카테고리 -->
      ...
    </s_sidebar_element>
    <s_sidebar_element>
      <!--최근에 올라온 글 -->
      ...
    </s_sidebar_element>
  </s_sidebar>

기타

티스토리의 방명록, 태그 페이지도 본문과 마찬가지로 <s_t3>치환자 안에 작성하면 된다. (유저가 접근한 url이 /tag라면 태그 클라우드 치환자만 표시하고 나머지는 표시하지 않는다.)
이것들도 마찬가지로 스킨제작가이드의 컨텐츠 > 태그클라우드, 방명록 카테고리에서 확인할 수 있다.

스킨 정보 파일 (index.xml) 파악하기

처음 개발을 시작할 때 xml은 처음보는 파일 형식이었고, index.xml 파일 예시 코드도 난해해서 해석하는데 많은 시간을 투자했었다. 그렇기 때문에 이해를 돕고자 설명을 덧붙이겠다.
xml 파일은 알고보면 간단한데, html 파일과 같이 마크업 언어로 태그로 데이터를 둘러싼 형태를 가지고 있다.
html은 웹페이지를 위해 정해진 태그를 사용하여 작성하는 반면, xml은 사용자가 태그를 직접 정의할 수 있고, 데이터 저장 및 전달을 위해 작성된다는면에서 차이가 있다.
티스토리 스킨에 필요한 정보가 담겨있는 xml 파일 예시코드는 해당 카테고리에 들어가서 복사-붙여넣기 하면 된다. 나는 추가적으로 작성 할 수 있는 스킨 정보에 대해 조금 더 다뤄보겠다.

홈 커버

홈 커버 치환자를 통해 슬라이더, 썸네일 리스트, 글 목록 등 다양한 홈 커버를 만들 수 있다. 하지만 홈 커버를 설정하게 되면 기본 설정인 최신 글을 표시할 수 없으므로 염두에 둬야한다.
마찬가지로 홈 커버도 홈 커버 카테고리에서 설명을 확인할 수 있고, 이해하기 쉽도록 작성한 홈 커버 예시는 다음과 같다.

<!-- index.xml -->
<default>
  ...
  <cover>
    <![CDATA[
      [
        {
          "name": "cover-thumbnail-list",
          "title": "게시물이 존재할 경우 아래에 최신순 5건이 배열됩니다",
          "dataType": "RECENT",
          "data": {"category":"ALL","size":"5"}
        }
      ]
    ]]>
  </cover>
</default>

<cover>
  <item>
    <name>cover-thumbnail-list</name>
    <label><![CDATA[ 글 리스트 ]]></label>
    <description><![CDATA[ 메인 화면에 표시할 기본 글 리스트 입니다. ]]></description>
  </item>
</cover>

<!-- skin.html -->
<s_cover name="cover-thumbnail-list">
  <s_cover_item>
    <s_cover_item_article_info>
    ...

xml 파일에서 홈 커버 치환자와 이름를 정의하고, html에 해당 이름을 <s_cover> 치환자의 name 유형에 작성함으로써 사용할 수 있다.
이렇게 작성하면 사용자는 아래와 같이 티스토리 관리자 화면 > 스킨편집 > 홈 설정에서 커버를 선택해서 사용할 수 있다.

커버 수정에 들어가면 default > cover에서 정의한 json 데이터가 표시된다.

스킨 옵션

xml 파일에서 스킨의 옵션을 정의하면 위에서 봤던 티스토리 치환자를 커스텀하여 사용할 수 있다.
다음 예시와 같이 xml 파일에서 커스텀 할 옵션들을 정의한 다음 html 파일에서 해당 치환자를 사용할 수 있다.

<!-- index.xml -->
<variables>
    <variablegroup name="커스텀 주소 링크">
      <variable>
        <name>portfolio_link</name>
        <label>
          <![CDATA[포트폴리오 주소]]>
        </label>
        <description>
          <![CDATA[ 개인 포트폴리오 사이트 링크를 설정할 수 있습니다. ]]>
        </description>
        <type>STRING</type>
        <option></option>
        <default></default>
      </variable>
      ...
    </variablegroup>  
</variables>

<!-- skin.html -->
<s_if_var_portfolio_link>
    <a href="" target="_blank">link</a>
</s_if_var_portfolio_link>

스킨을 옵션을 정의하여 작성하면 사용자는 관리자 화면 > 스킨 편집에서 다음과 같이 옵션을 선택할 수 있다.

마무리와 짤막한 팁

티스토리 스킨을 만들기 위해 기본적으로 필요한 요소들에 대해서 설명헀고, 티스토리 스킨 구조를 이해하는데 도움이 되었으면 한다.
처음부터 짜기 막막하다면 해당 글을 참고하면서 이미 만들어진 스킨의 html 구조를 파악하여 작성하면 유용할 것이다. 티스토리 치환자가 포함된 html파일을 보고싶다면 원하는 스킨을 적용한 후 스킨 편집 > html 편집에서 확인 할 수 있다.

글이 도움이 되었다면 아래 공감버튼을 눌러주세요! :)

저작자표시 비영리 변경금지

'프로젝트/블로그 테마'의 다른 글

more >

- [티스토리 스킨 만들기] 2. 개발 환경 세팅하기(Typescript, TailwindCSS, Webpack)