[티스토리 스킨 만들기 #1] 치환자 이해하기

[티스토리 스킨 만들기 #1] 치환자 이해하기

티스토리 스킨을 만들어 볼 작정입니다. 최근 티스토리에서 자체 광고를 신설하고 상단 혹은 하단의 광고 영역을 침범(?)한다고 공지한 이후 티스토리 블로거들의 거센 반발에 부딪혔는데요, 그럼에도 불구하고 티스토리 만큼 자유롭고 무료로 사용할 수 있는 블로그는 또 없기 때문에 애증을 담아 스킨을 한번 만들어 보려고 합니다. 

 

 

티스토리에 적용할 스킨을 만들기 위해서는 치환자를 이해해야 하는데요, 스킨 제작이 처음이신 분들은 티스토리 스킨 가이드를 참고하셔야 합니다. 

우리가 웹 애플리케이션을 만들 때 프론트랑 백엔드랑 2개를 만듭니다. 여기서 티스토리 스킨 가이드는 백엔드 영역을 담당해주고 있습니다. 프론트에서 get 요청을 보내지 않아도 HTML에 치환자를 심어주면 해당 데이터가 들어와서 블로그 페이지를 완성할 수 있습니다. 

 

 

파일 구조

티스토리 스킨을 제작하기 위해서는 전체적인 파일 구조는 아래 처럼 제작해야 됩니다. 핵심은 index.xml | skin.html | style.css로 보입니다. 만약 JS를 삽입하는 경우 HTML파일에 넣는 것 보다 images 디렉토리에 담아서 배포합니다. 나머지는 이미지 파일들이네요. 

preview256, preview560, preview1600 이미지들은 스킨을 미리 볼 수 있는 이미지들입니다. 아래 처럼 스킨을 적용한 모습을 미리 보여주고 유저가 선택하도록 하고 있습니다. 

 

 

 

index.xml파일

이 파일에는 스킨이름, 스킨 설명, 제작자 정보가 들어갑니다. OO 스킨이라고 이름을 붙이고 판매도 가능한 것이죠. 스킨을 받아서 조금만 수정한 뒤에 제작자 이름이 적힌 footer를 수정하는 일이 없도록 저작권을 분명하게 명시해놓는 곳입니다.

추가적으로 스킨 기본 설정값을 넣어줄 수도 있습니다. 아래 기본 설정값들을 입력해놓으면 제작자가 추천하는 설정을 프리셋 해놓을 수 있습니다. 처음 블로그를 시작하는 입장에서는 복잡할 수 있기 때문에 미리 설정을 해놓는 것이죠. 

index.xml파일에서 스킨 제작자가 사용하고자 하는 변수를 설정할 수도 있습니다. 그리고 변수값을 치환자와 데이터로 받아와서 스킨의 변수값으로 사용할 수 있습니다. 

 

 

 

치환자 구조

티스토리 치환자 구조는 그룹치환자와 값치환자 2개로 구분됩니다. 

• 그룹치환자 : 스킨 데이터 포함, 렌더링 된 값으로 변경됨, <s_tag></s_tag> 등
• 값치환자 : 해당 값으로 변경, 등

 

치환자 사용방법

티스토리 스킨에 치환자를 적용하기 위해서 제일 먼저 body태그 바로 아래에 <s_t3>을 삽입해줘야 합니다. 티스토리 스킨 Javascript를 불러오는 치환자로 반드시 넣어줘야 되는 필수사항 입니다. 

치환 후에 daumcdn.net의 common.js를 불러오는 script태그로 치환되는 걸 볼 수 있습니다. common.js 파일이 들어와야 나머지 치환자들이 정상적으로 렌더링 됩니다. 

 

 

<s_t3> 태그를 삽입하면 본격적으로 블로그 데이터를 가져올 수 있습니다. 블로그에서 사용하는 기본 데이터는 아래와 같습니다. 블로그 제목 부터 설명, 필명, URL, RSS Feed 주소를 가져옵니다. 

맨 마지막에 [기타] > [페이지 타입에 따른 id] 값은 아래 처럼 변경됩니다. 예를 들어 홈화면은 <div id="tt-body-index">로 변경되고 글화면은 <div id="tt-body-page">로 변경됩니다. 

 

 

 

그 밑으로는 논란의 중심에 선 광고 치환자 입니다. 티스토리에서는 이곳을 본인들이 만든 광고로 대체하겠다는 말인데요, 저는 이걸 밀어버리고 아예 새로 광고 단위를 만들어서 사용할 예정입니다.

공통 치환자를 적용해서 데이터를 불러오는 HTML 파일의 예시는 아래와 같습니다. 아래 처럼 치환자를 삽입해주면 기본 데이터를 받아올 수 있습니다. 

미리 만들어 놓은 skin.html 파일에서 <s_t3> 태그와 그룹치환자를 붙여줍니다. 

 

이제 블로그 이름을 정상적으로 받아옵니다. 블로그 전체 구조를 만들고 나면 치환자를 하나씩 바꾸면서 티스토리 스킨에 적용만 해주면 블로그 스킨이 순조롭게 마무리 될 것으로 보입니다. 

이번 포스팅에서는 티스토리 스킨 제작 가이드를 살펴보았습니다. 처음 보면 복잡해보일 수 있지만 프론트앱에서 백엔드로 ajax 함수를 사용한다고 생각하면 이해가 편합니다.

또한 티스토리 스킨은 블로그 형식이다 보니 페이지가 많지도 않습니다. 메인화면, 글화면, 태그 클라우드, 방명록 정도만 만들어주면 됩니다. 방명록과 태그 클라우드는 거의 사용안하니 가능하다면 생략해서 만들어보려고 합니다. 

다음 시리즈로 다시 찾아오겠습니다. 

🚀️ 도움이 되셨다면 구독과 좋아요 부탁드립니다 👍️

 

맥북프로 14 M2 모델 드디어 출시 !

 

Github CLI Install Ubuntu 22.04

 

Nginx Docker 웹 서버 배포하기