티스토리 스킨 만들기 로그 2 | 티스토리 치환자 둘러보기 | 반응형 HTML 구조 작성
티스토리 스킨 만들기 로그 두번째 에피소드
네이버 블로그와 티스토리의 다른 점이 설치형 유무에 따른 차이가 있다.
장단점이 있는데 어느 한 쪽이 더 좋은 것은 아니고 운영자의 취향이나 상황에 따라 차이가 있다.
첫번째 로그에서 이 블로그는 코딩 블로그라서 설치형을 사용하는 티스토리를 선택했다고 이야기 했다.
프론트엔드와 UI 전문은 아니지만 스킨을 손보다 보면 자연스럽게 익숙해질 수 있다고 생각했기 때문이다.
그런데 티스토리의 역사가 오래된 것 만큼 좋은 외부 스킨들이 많이 개발되어 있어서 거창하게 스킨을 개발한다고는 말하기 어렵지만 스킨의 로직을 정리하는 재미로 생각하고 있다.
티스토리 스킨 제작은 티스토리 치환자라는 자체의 태그를 사용하기 때문에 일반 프론트엔드 개발자라도 별도로 레퍼런스를 보고 만들어야 한다.
치환자 구조는 아래 티스토리 GitBook에 정리되어 있다. 사실 친절한 튜토리얼이 아니라 개발자용 가이드라서 쉽게 이해는 안된다. 필자도 이제 막 테스트를 시작하는 단계다.
치환자 구조 · GitBook (tistory.github.io)
치환자 구조 · GitBook
치환자 구조 티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값
tistory.github.io
*티스토리의 치환자
치환자는 위의 내용 같이 특수문자를 사용한 단어나 태그를 말한다.
스킨상에는 치환자로 써있지만 실제 블로그를 보는 브라우저에서는 HTML로 변환되어 있다. 그러니까 저 안에 무엇이 들어있는지 내용과 규칙을 알아야 한다. 여러가지가 들어있다. 웹의 주소가 들어있기도 하고, 텍스트나 HTML태그도 들어있다. 그룹치환자안에는 자바스크립트 링크도 들어있다. 치환자만 봤을 때는 정확히 무엇이 들어있는지 알 수가 없기 때문에 여러번 테스트를 하면서 알아내야 한다.
인터넷 포스트를 찾아봐도 부분적으로는 설명이 나오는데 처음부터 끝까지 상세한 내용이 나와있는 곳은 찾아보기 힘든 것 같다. 멋진 스킨을 가지고 싶으면 유료 스킨을 구매하는게 최선이라는 말이 수긍이 간다. 제대로된 유료스킨은 코드가 수천줄에 달한다. 디자인은 물론이거니와 온갖 세부기능이 다 제대로 구현되어 있어서 혹시 티스토리 관련 담당자가 아니었을까 추측할 정도로 스킨이 좋다.
바깥에서 보는 일반인이 정확히 티스토리 치환자가 서버안에서 어떻게 작동하는지 까지는 알기 힘들다. 브라우저의 웹소스코드를 보면서 알아내야 하기 때문에 상당히 시간이 걸리는 작업같다. 스킨 작업이 결코 만만하지가 않다. 또 치환자 내용을 알아내더라도 맘에 드는 최신 디자인을 위한 코드를 찾아내려면 이것도 시간이 참 걸린다. 이번에 스킨을 만들어 보면서 프론트엔드에 대한 존경심이 생겼다. 다른 사람의 코드를 수용하고 자기 것으로 만들기 위해서는 인내심과 열린 마인드도 필요하다.
치환자는 새로운 프레임워크 처럼 보이지만 오래전 부터 티스토리가 설치형 블로그를 운영하던 방식이다. 스킨의 코드와 치환자의 코드가 합친 HTML/CSS파일을 클라이언트(브라우저)에 보내는 방식이다. 자바스크립트나 개별 이미지, 폰트들을 사용할 수 있도록 별도의 폴더(image) 를 사용할 수 있다. 용량제한은 딱 20메가를 걸어놨으니 1-2메가 남짓의 웹폰트를 넣을 공간 정도가 된다.
물론 파일 저장이나 이미지 파일등은 카카오의 서버를 사용하니 20메가 정도면 부족할 일은 없다. 블로그에 필요한 파일만 딱 저장할 수 있는 수준이다.
티스토리의 치환자를 사용하기 전에 HTML 구조를 한번 그려본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./style.css"/>
<title>Tistory Frame</title>
</head>
<body>
<!-- 컨테이너 시작 -->
<div id="grid-container">
<!-- 메인헤더 시작 -->
<header id="main-header">
<h1>Main Header</h1>
</header>
<!-- 메인헤더 끝 -->
<!-- 네비 시작 -->
<nav id="main-nav">
<h4>Navigation</h4>
</nav>
<!-- 네비 끝 -->
<!-- 메인 시작 -->
<main id="content">
<!-- 섹션-최신글 시작 -->
<section class="section recent">
<h2>최신 글</h2>
<article class="recent item">
최신 포스트 타이틀
</article>
</section>
<!-- 섹션-최신글 끝 -->
<!-- 섹션-인기글 시작 -->
<section class="section popular">
<h2>인기 글</h2>
<article class="recent item">
인기 포스트 타이틀
</article>
</section>
<!-- 섹션-인기글 끝 -->
</main>
<!-- 메인 끝 -->
<!-- 사이드바 시작 -->
<aside id="sidebar">
<section class="section menu">
<h2>Menu</h2>
</section>
<section class="section etc">
<h2>사이드바 기타</h2>
</section>
</aside>
<!-- 사이드바 끝 -->
<footer id="footer">
<h3>Footer</h3>
</footer>
</div>
<!-- 컨테이너 끝 -->
</body>
</html>
CSS 적용 전은 아래와 같다.
CSS 에 레이아웃을 그리드, 플렉스를 사용하니 아래와 같이 나온다. CSS는 계속 수정하고 있는데 그리드나 플렉스를 사용하면 기본적으로 반응형웹의 요소를 사용할 수 있다.
전체적으로 만들고 있지만 디자인 소스코드가 더 필요하다는 것을 느낀다. 반응형 UI 부분에 익숙하지 않아서 공부를 하며 하나씩 코드를 만져보고 있다. 아무래도 스킨을 만지다 보니 디자인에 대한 호기심이 생기는 것 같다. 너무 빠지면 본업인 프로그래밍에 소홀하게 되니까 너무 욕심내지 않으려고 한다.
웬지 제대로된 스킨을 만들려면 3-4번은 만들고 부시는 일을 벌려야 할 것 같은 느낌이 든다. 좋은 스킨은 그 만큼 글쓰는 맛이 좋으니 확실히 설치형 스킨이 매력적이긴 하다. 원래 워드프레스를 하려다가 워드프레스는 다른 이유들로 하지 않았는데 전세계 사용자들이 쓰는 만큼 스킨이 막강한 워드프레스도 괜찮을 것 같다.
아직까지는 티스토리 스킨을 제대로 완성할 수 있을지 모르겠다. 조금 욕심 부리면 코드가 수천줄이 넘어갈 듯 한데 그러면 관리시간도 급증할 수 밖에 없다. 유료스킨을 써야 하나 고민도 하고 있다. 아직은 확신이 없지만 좀 더 진행은 해야겠다.
다음 에피소드는 치환자를 테스트하는 내용이다.
