[티스토리 스터디1] 파일구조, 스킨정보파일

(2021.12.07 업데이트) 도리가 포스팅한 글이 너무 깔쌈해서 나도... 일단 구분을 좀 하기로...!!

---

티스토리 스킨이 너무X100 마음에 들지 않아서 도리를 꼬셔서 같이 티스토리 스킨 만드는 스터디를 하자고 했다. 나는 스터디를 하자고 했는데, 도리는 이미 스킨 판매해서 부수입 얻고 부자가 되는 상상까지 했다고 해서 시작부터 유쾌했다 ㅋㅋㅋㅋ

(0회차) 2021년 11월 8일, 스터디 방식 ・ 자료 공유 ・ 각자 생각하는 목표 등을 간단하게 공유하고 신나게 근황공유를 했다.

(1회차) 2021년 11월 22일, 티스토리에서 제공하는 스킨 가이드를 토대로 같이 읽으면서 공부하는 방식으로 진행해보았다. 나는 이게 짝 프로그래밍하는 느낌일까? 싶어서 재미는 있었는데, 애초에 무슨 내용인지 파악도 안된 상태로 가이드를 보려니 도리에겐 수준이 너무 낮을 까봐 걱정되었다. 오후에는 내가 회사 업무를 진행해야해서 연습용 티스토리 만들고, 숙제 범위를 정하고 종료.

💥주의 저는 개발자가 아님다. 이상한 소리가 있더라도 무지한 자의 뚫린 입이라고 생각하고 너른 마음으로 봐주시고, 잘못된 정보는 댓글로 알려주시면 감사드리겠습니다 🙏

---

숙제: 티스토리 스킨 가이드의 <공통치환자-공통>까지 공부해오기

그렇다, 이것은 사실 숙제 내용을 혼자서 아둥바둥 이해해보고, 모르는 건 찾아보려고 애쓴 흔적을 기록한 포스팅이다... 도리랑 '스터디 한 내용들은 전부 블로그에 포스팅하자'고 약속했기 때문에, 노션에 1차로 작성하면서 공부하고 추후 내용 쬐금 더 보강해서 포스팅!

---

## 파일구조: 티스토리 스킨에 사용되는 기본적인 파일 구조!

• index.xml: 스킨 정보 파일
• skin.html: 스킨의 메인 템플릿(HTML 구조)
• style.css: 티스토리 스킨 에디터에서 편집 가능한 CSS 소스
• preview.gif: 미리보기 기본 파일로 아래 파일들이 없는 경우에 사용(112*84)
• preview256.jpg: 사용 중인 스킨 미리보기(256*192)
• preview560.jpg: 스킨 목록 미리보기(560*420)
• preview1600.jpg: 스킨 상세보기 미리보기(1600*1200)
• images 폴더: 필수요소가 아닌 파일은 모두 images 아래에 위치한다.(기본 구조의 파일을 제외하고 추가 파일은 모두 이 폴더에!)

 

## 스킨정보 파일: 스킨에 필요한 정보를 담고 있는 xml 파일로 이 파일이 변경되면 스킨의 모든 설정이 초기화됩니다.

스킨에디터 우측에 보여지는 내용인것 같다고 도토리가 이야기 해줬다 + 기본적으로 설정해둘 값에 대해서 정해두는 파일인 것!

<?xml version="1.0" encoding="utf-8"?>
<skin>
  <information><!--기본정보-->
    <name>기본 스킨</name><!--표시되는 스킨의 이름-->
    <version>1.1</version><!--스킨 버전-->
    <description><!--스킨의 상세 설명: CDATA[]하면 내용이 하드코딩처럼 들어가는건가??(아님)-->
      <![CDATA[웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다.]]>
    </description>
    <license><!--저작권 표시-->
      <![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
    </license>
  </information>
  <author><!--제작자정보-->
    <name>tistory</name><!--표시되는 제작자의 이름-->
    <homepage>http://notice.tistory.com</homepage><!--제작자의 웹사이트 주소-->
    <email>tistoryblog@daum.net</email><!--제작자의 이메일 주소-->
  </author>
  <default><!--제작자가 추천하는 설정값을 저장해두는 개념이라고 이해함... 맞나??-->
    <recentEntries>5</recentEntries><!--사이드바의 최근글 표시 갯수-->
    <recentComments>5</recentComments><!--사이드바의 최근댓글 표시 갯수-->
    <recentTrackbacks>5</recentTrackbacks><!--사이드바의 최근 트랙백 표시 갯수-->
    <itemsOnGuestbook>10</itemsOnGuestbook><!--한 페이지에 표시될 방명록 갯수-->
    <tagsInCloud>30</tagsInCloud><!--사이드바에 표시될 태그 갯수-->
    <sortInCloud>3</sortInCloud><!--태그 클라우드 표현 방식(1.인기도순, 2.이름순, 3.랜덤)-->
    <expandComment>0</expandComment><!--댓글영역 표현 방식(0.감추기, 1.펼치기)-->
    <expandTrackback>0</expandTrackback><!--트랙백영역 표현 방식(0.감추기, 1.펼치기)-->
    <lengthOfRecentNotice>25</lengthOfRecentNotice><!--최근 공지 표현될 글자수-->
    <lengthOfRecentEntry>27</lengthOfRecentEntry><!--최근 글 표현될 글자수-->
    <lengthOfRecentComment>30</lengthOfRecentComment><!--최근 댓글에 표현될 글자수-->
    <lengthOfRecentTrackback>30</lengthOfRecentTrackback><!--최근 트랙백에 표현될 글자수-->
    <lengthOfLink>30</lengthOfLink><!--링크에 표현될 글자수-->
    <showListOnCategory>1</showListOnCategory><!--커버 미사용 홈에서 글 목록 표현(0.내용만, 1.목록만, 2.내용+목록)-->
    <showListOnArchive>1</showListOnArchive><!--오잉 이건 가이드에 없어...!그치만... 위에서도 반복적으로 사용된 걸 보면, 이것도 커버 미사용 홈에서 archive 목록 표현인거겠지...? 근데 archive가 뭔데...-->
    <commentMessage>
      <none>댓글이 없습니다.</none>
      <single>댓글 &lt;span class="cnt"&gt;하나&lt;/span&gt; 달렸습니다.</single>
    </commentMessage>
    <trackbackMessage>
      <none>받은 트랙백이 없고</none>
      <single>트랙백이 &lt;span class="cnt"&gt;하나&lt;/span&gt;이고</single>
    </trackbackMessage>
    <tree><!--카테고리-->
      <color>000000</color><!--카테고리 글자색-->
      <bgColor>ffffff</bgColor><!--카테고리 배경색-->
      <activeColor>000000</activeColor><!--선택시 글자색-->
      <activeBgColor>eeeeee</activeBgColor><!--선택시 배경색-->
      <labelLength>27</labelLength><!--표현될 카테고리 글자수-->
      <showValue>1</showValue><!--카테고리 글 수 표현(0.숨김, 1.보임)-->
    </tree>
    <contentWidth>500</contentWidth><!--콘텐츠 영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다-->
  </default>
</skin>

 

가이드에 스킨정보 파일 예시로 작성되어있는 소스를 하나하나 읽으면서 옆에 내용을 적어보았다.

처음엔 이거 뻘짓일까 싶었는데, 그냥 읽는 것 보다 이해하기 더 쉬운 느낌이었다. 사진으로 첨부된 #1이라는 스킨의 스킨정보 파일도 편집에디터(이미지에 표시된 화면)과 같이 보면 조금더 이해하기 쉽다. 어쨋든 작성 끝~!

예시 소스에 적용되지 않은 세가지 항목이 있어서 추가로 정리했다.

• <entriesOnPage>: 홈 화면 글 수
• <entriesOnList>: 글 목록 글 수
• <showListLock> : 홈 설정과 기본 설정에서 '목록 구성 요소' 항목의 노출 여부 결정 (0: 노출, 1: 노출 안 함)

그리고 보면서 궁금한 점도 생겨서 그때 그때 적어둔 것도 리스트업하고, 추후에 자료를 쬐금 찾아서 첨언하였다.

• 트랙백이 뭐였더라: 트랙백은 블로그만의 연결고리라고 한다. 트위터로 치면 인용알티... 노션으로 치면 백로그...👀?
• 'lengthOfRecentNotice: 최근 공지 표현될 글자수' 이게 무슨 말이지? 👉 'lengthOfRecentComment: 최근 댓글에 표현될 글자수'라고 표현하고 있으니까, 이것도 똑같이 공지의 제목...을 몇글자까지 보여줄거냐 하는 말인가? 나중에 실험해보자!
• commentMessage, trackbackMessage는 왜 설명이 없지: 가이드 다른 페이지에 있을 것으로 기대해본다.(일단 넘어가)
• 위지윅이 뭔가요: 와우.. What you see is What you get...! 에디터에서 줄바꿈을 했는데, 실제 콘텐츠랑 다를 때 신경쓰이는데 그걸 말하는 것인가보다!

스킨정보 파일 페이지의 마지막에 홈커버, 스킨옵션, 리스트스타일까지 언급된 걸 보면 그 친구들(?)까지 관계된 부분들이 있나보다~ 정도로 이해하고 넘어갔다.