나만의 티스토리 스킨 제작: 템플릿 만들기 가이드
티스토리 블로그를 운영하며 자신만의 독특한 디자인을 적용하고 싶거나, 광고 배치 및 레이아웃을 자유롭게 구성하고 싶은 분들이 많습니다. 이러한 요구를 충족시키기 위해 티스토리에서는 사용자가 직접 HTML과 CSS로 스킨을 제작하여 등록할 수 있는 기능을 제공하고 있습니다.
기본 제공되는 템플릿으로는 만족하기 어렵거나, 블로그의 브랜드 통일성을 추구하는 운영자라면 스킨을 처음부터 직접 제작하는 것이 훨씬 더 유리한 선택이 될 수 있습니다. 이 글에서는 티스토리 스킨을 처음부터 제작하고, 이를 ZIP 파일로 압축하여 티스토리 관리자에 등록하는 전 과정을 초보자도 쉽게 따라할 수 있도록 상세하게 설명합니다.
HTML과 CSS 파일 작성부터 시작하여 필수적인 폴더 구조 설정, 최종 압축 파일 생성, 그리고 티스토리 관리자 업로드 절차까지 단계별로 안내해 드립니다. 이 가이드를 통해 자신만의 개성을 담은 티스킨을 만들어 보세요.
목차
1. 티스토리 스킨 제작을 위한 필수 폴더 및 파일 구성
2. HTML과 CSS를 활용한 티스토리 스킨 파일 작성
3. 티스토리 스킨 등록을 위한 ZIP 파일 압축 방법
4. 티스토리 관리자에서 직접 만든 스킨 등록하기
5. 티스토리 스킨 제작 시 주요 치환자 태그와 유의사항
6. 티스토리 스킨 직접 제작: 핵심 요약
7. 자주 묻는 질문
티스토리 스킨 제작을 위한 필수 폴더 및 파일 구성
티스토리에서 정상적으로 인식 가능한 스킨으로 만들기 위해서는 특정 파일과 폴더 구조를 따라야 합니다. 다음은 티스토리 스킨 제작을 위한 기본적인 폴더 및 파일 구성 예시입니다.
기본 폴더 구조 예시
MySkin/
├── skin.html
├── style.css
├── images/
│ └── logo.webp (예시)
└── skin.json (선택사항)각 파일이 티스토리 스킨에서 어떤 역할을 하는지 자세히 살펴보겠습니다.
| 파일명 | 설명 |
|---|---|
| skin.html | 스킨의 전체적인 레이아웃과 구조를 정의하는 핵심 HTML 파일입니다. |
| style.css | 색상, 폰트, 배치 등 스킨의 모든 시각적 디자인 요소를 지정하는 CSS 파일입니다. |
| images/ | 로고, 아이콘, 배경 이미지 등 스킨에 사용될 다양한 리소스 이미지를 저장하는 폴더입니다. |
| skin.json | 스킨 이름, 제작자, 설명, 버전 등의 메타 정보를 담는 설정 파일입니다. (선택사항이나, 추가 시 사용자 경험이 향상됩니다.) |
HTML과 CSS를 활용한 티스토리 스킨 파일 작성
이제 실제로 HTML과 CSS 파일을 작성하는 방법을 알아보겠습니다. 특히 티스토리 스킨은 일반적인 웹페이지와 달리 티스토리 치환자 태그를 반드시 포함해야 블로그 콘텐츠가 정상적으로 출력됩니다.
skin.html 작성 예시 – 티스토리 치환자 태그 포함
skin.html 파일은 티스토리 콘텐츠를 표시하기 위한 특정 치환자 태그를 포함해야 합니다. 이 태그들이 없으면 블로그 제목, 글 내용 등이 제대로 표시되지 않습니다.
skin.html 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>[##_page_title_##]</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<span class="logo"><a href="[##_blog_link_##]">[##_title_##]</a></span>
</header>
<main>
<!-- 본문 -->
<s_article_rep>
<!-- 인덱스 페이지: 게시글 목록 -->
<s_index_article_rep>
<a href="[##_article_rep_link_##]">
<h2>[##_article_rep_title_##]</h2>
<p>[##_article_rep_summary_##]</p>
</a>
</s_index_article_rep>
<!-- 퍼머링크 페이지: 게시글을 클릭했을 때 보여지는 글 -->
<s_permalink_article_rep>
<h1>[##_article_rep_title_##]</h1>
<div class="content">[##_article_rep_desc_##]</div>
</s_permalink_article_rep>
</s_article_rep>
</main>
<footer>
<p>© [##_title_##] - All rights reserved.</p>
</footer>
</body>
</html>소스코드를 이해하시기 위해서 티스토리 치환자라는게 있는데 이 부분을 어느정도 숙지하셔야 알수 있습니다.
"티스토리 스킨 HTML 편집, 치환자 활용법 완벽 정리" 이 글을 먼저 읽어 보시는걸 권해 드립니다.
style.css 작성 예시 – 기본 디자인 구성
style.css 파일은 스킨의 시각적 요소를 정의합니다. 여기서는 기본적인 폰트, 배경색, 헤더, 푸터 등에 대한 스타일을 지정하는 CSS 코드 예시를 제공합니다.
style.css 기본 스타일
h1 { font-size:24px; }
h2 { font-size:18px; }
p { font-size:16px; }
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
background: #f4f4f4;
color: #333;
}
header {
background: #111;
color: #fff;
text-align: center;
padding: 30px;
}
header a:link, header a:hover, header a:visited {
font-size:24px;
color: #fff;
text-decoration: none;
}
.desc {
font-size: 14px;
margin-top: 5px;
}
nav {
margin-top: 10px;
font-size: 16px;
}
main {
max-width: 800px;
margin: 40px auto;
background: white;
padding: 30px;
}
footer {
background: #ddd;
text-align: center;
padding: 20px;
font-size: 14px;
}선택 파일: skin.json 활용하기
skin.json 파일은 스킨의 메타데이터를 포함하며, 티스토리 관리자 화면에서 스킨 정보를 명시적으로 표시하는 데 사용됩니다. 필수는 아니지만, 추가하면 사용자 경험을 향상시킬 수 있습니다.
skin.json 예시
{
"skin": {
"name": "My Custom Skin",
"author": "홍길동",
"description": "반응형 기반의 심플한 티스토리 스킨입니다.",
"version": "1.0.0"
}
}이 파일이 없어도 스킨 등록은 가능하지만, 관리자 화면에서 스킨 이름과 설명이 표시되는 등 사용자 경험이 향상됩니다.
티스토리 스킨 등록을 위한 ZIP 파일 압축 방법
이제 직접 만든 티스토리 스킨 파일들을 티스토리에 등록하기 위해 하나의 .zip 파일로 압축해야 합니다. 다음은 압축하는 방법의 예시입니다.
skin.html,style.css,images폴더, (선택 시skin.json)을 모두 같은 하나의 폴더 안에 넣습니다. 폴더 이름은 예를 들어 "MySkin"으로 지정할 수 있습니다.- 이 폴더("MySkin")를 마우스 오른쪽 클릭한 다음, "압축 > ZIP 파일 만들기" 또는 "보내기 > 압축(ZIP) 폴더"를 선택합니다. (운영체제에 따라 메뉴 이름은 다를 수 있습니다.)
- "MySkin.zip"과 같은 이름의 압축 파일이 생성됩니다.
티스토리 관리자에서 직접 만든 스킨 등록하기
티스토리 스킨 압축 파일이 준비되었다면, 이제 이 파일을 티스토리 블로그에 등록할 차례입니다. 다음 절차에 따라 스킨을 업로드하고 적용할 수 있습니다.
- 티스토리 블로그 관리자 페이지에 접속합니다.
- 왼쪽 메뉴에서 "꾸미기 > 스킨 변경"을 클릭합니다.
- 상단 메뉴에서 "스킨 등록" 버튼을 클릭합니다.
- 준비된 압축 파일(.zip)을 찾아 업로드합니다.
- 등록이 완료되면 스킨 목록에 새로 추가된 스킨이 나타납니다. 해당 스킨을 선택한 후 "미리보기"를 통해 전체 레이아웃이 정상적으로 작동하는지 반드시 확인합니다.
- 미리보기를 통해 문제가 없음을 확인한 후, "적용" 버튼을 클릭하여 스킨을 블로그에 적용합니다.
티스토리 스킨 제작 시 주요 치환자 태그와 유의사항
티스토리 스킨 제작에 있어 치환자 태그는 블로그의 동적 콘텐츠를 불러오는 데 필수적인 요소입니다. 또한, 원활한 스킨 작업을 위한 몇 가지 유의사항이 있습니다.
주요 치환자 태그 요약
다음은 skin.html 파일에서 자주 사용되는 티스토리 치환자 태그 목록입니다. 이 태그들을 올바르게 사용해야 블로그 콘텐츠가 제대로 표시됩니다.
| 용도 | 치환자 태그 |
|---|---|
| 블로그 제목 | [##_title_##] |
| 블로그 설명 | [##_desc_##] |
| 블로그 링크 | [##_blog_link_##] |
| 페이지 제목 | [##_page_title_##] |
| 글 제목 | [##_post_title_##] |
| 본문 내용 | [##_article_rep_desc_##] |
| 카테고리 목록 | [##_category_list_##] |
| 최근 글 목록 | [##_recent_entry_##] |
이 치환자 태그를
skin.html 내부에 포함하지 않으면 콘텐츠가 출력되지 않거나 기능이 정상적으로 작동하지 않을 수 있으니 반드시 확인해야 합니다.
티스토리 스킨 작업 시 유의사항
티스토리 스킨 제작 과정에서 발생할 수 있는 오류를 줄이고 안정적인 스킨을 만들기 위한 몇 가지 중요한 팁을 알려드립니다.
- 인코딩 설정: 모든 HTML, CSS 파일은 반드시 UTF-8 인코딩으로 저장해야 합니다. 다른 인코딩 방식은 스킨 오작동의 원인이 될 수 있습니다.
- CSS 경로: CSS 파일 경로는 항상 상대 경로(예:
./style.css)를 사용해야 합니다. 절대 경로는 스킨이 제대로 로드되지 않게 할 수 있습니다. - 반응형 웹 디자인: 모바일 환경을 고려하여 CSS에
@media쿼리를 활용해 반응형 디자인을 구성하는 것이 중요합니다. 이는 사용자 경험과 SEO에 큰 영향을 미칩니다. - 외부 리소스 추가: Google Fonts, 외부 광고 코드, 자바스크립트 등 외부 리소스를 추가할 경우,
<head>태그 안에 직접 삽입하여 사용할 수 있습니다. - 스킨 관리: 등록 후 적용한 스킨은 티스토리 관리자 페이지에서 언제든지 다시 편집하거나 삭제할 수 있으므로, 안심하고 다양한 시도를 해볼 수 있습니다.
티스토리 스킨 직접 제작: 핵심 요약
티스토리 스킨을 직접 제작하는 것은 복잡하게 느껴질 수 있지만, 몇 가지 핵심 단계를 따르면 누구나 자신만의 블로그를 만들 수 있습니다. 다음은 티스토리 스킨 제작의 주요 포인트입니다.
- 필수 파일 구성:
skin.html,style.css, 그리고images/폴더는 티스토리 스킨의 기본을 이룹니다. 선택적으로skin.json을 추가하여 스킨 정보를 명시할 수 있습니다. - 치환자 태그 활용:
[##_title_##],[##_article_rep_desc_##]등 티스토리에서 제공하는 치환자 태그를skin.html에 포함해야 블로그 콘텐츠가 정상적으로 표시됩니다. - HTML 및 CSS 작성:
skin.html로 레이아웃을 구성하고,style.css로 디자인을 입힙니다. 이때, UTF-8 인코딩과 상대 경로 사용에 유의해야 합니다. - ZIP 파일 압축: 제작된 모든 파일과 폴더를 하나의 ZIP 파일로 압축하여 티스토리 관리자 페이지에 업로드할 준비를 합니다.
- 스킨 등록 및 적용: 티스토리 관리자의 "스킨 변경" 메뉴를 통해 압축 파일을 업로드하고, 미리보기를 통해 정상 작동을 확인한 후 적용합니다.
- 반응형 디자인 고려: 모바일 환경에서도 최적의 사용자 경험을 제공하기 위해 CSS
@media쿼리를 활용한 반응형 스킨 제작을 권장합니다.
자주 묻는 질문
skin.html (레이아웃 정의), style.css (디자인 정의), 그리고 이미지 저장용 images/ 폴더가 필수적입니다. 스킨 정보를 위한 skin.json은 선택사항이지만 권장됩니다.skin.html 파일에 표시하기 위해 사용되는 특수한 태그입니다. 예: [##_title_##], [##_article_rep_desc_##]../style.css)를 사용해야 합니다. 또한, 모바일 환경을 위한 반응형 디자인을 고려하는 것이 좋습니다.티스토리 스킨을 직접 만드는 과정은 처음에는 복잡하게 느껴질 수 있지만, HTML과 CSS의 기본 구조를 이해하고 티스토리에서 제공하는 치환자 태그의 역할을 파악하면 자신만의 브랜드를 반영한 블로그를 직접 구성할 수 있습니다. 이를 통해 광고 위치 최적화나 SEO 대응까지 자유롭게 설정하여 블로그를 단순한 콘텐츠 플랫폼이 아닌, 독립형 웹사이트처럼 강력하게 활용할 수 있을 것입니다.
관련글
워드프레스 초보자를 위한 검색 노출 최적화: 필수 테마와 속도 개선 플러그인 엄선 가이드
워드프레스 초보자를 위한 애드센스 수익화 필수 테마와 플러그인! 복잡한 워드프레스 환경에서 애드센스 수익을 극대화하고 싶으신가요? 이 글에서는 꼭 필요한 테마와 플러그인만을 엄선하여, 블로그 운영을 쉽고 효율적으로 만드는 방법을 알려드립니다. 워드프레스를 처음 시작하는 분들은 아마 저와 비슷한 고민을 해보셨을 거예요. 수많은 테마와 플러그인 중에서 대체 뭘 골라야 할지 막막하죠. 특히 애드센스 수익화를 ..
티스토리 스킨 업로드 없이 디자인 바꾸기 (HTML/CSS)
안녕하세요. 티스토리 블로그를 운영하면서 나만의 독창적인 디자인을 만들고 싶지만, 복잡한 스킨 제작 과정이 부담스러운 분들이 많습니다. 별도의 스킨 파일을 업로드하지 않고도 기존 티스토리 기본 스킨(Book Club, Poster)을 활용하여 자신만의 블로그를 만들 수 있는 방법이 있습니다. 바로 HTML과 CSS 코드를 직접 편집하는 방식입니다. 이 글에서는 스킨 편집기를 통해 실시간으로 블로그 디자인을 변경하는 방법을 알려 드리겠습니다.먼저..
티스토리 스킨 HTML 편집, 치환자 활용법 완벽 정리
티스토리 블로그를 운영하면서 스킨을 직접 만들거나 커스터마이징하고 싶다면, 티스토리 스킨 치환자에 대한 이해가 필수적입니다. 치환자는 티스토리 시스템의 내부 데이터를 자동으로 불러와 스킨의 HTML에 출력해주는 특수 태그로, 이 치환자들을 잘 활용하면 블로그의 메인, 글 목록, 단일 글, 사이드바 등 거의 모든 영역을 원하는 대로 자유롭게 조정할 수 있습니다. 특히, `<s_article_rep>`, `<s_index_arti..
티스토리 블로그 운영 시작하는 방법: 초보자를 위한 개설부터 필수 세팅 가이드
티스토리 블로그를 시작하고 싶은데, 무엇부터 해야 할지 막막하신가요? 티스토리 블로그 개설부터 필수 세팅, 그리고 티스토리 블로그 운영 시작하는 방법까지, 복잡한 고민 없이 바로 시작할 수 있도록 단계별 가이드를 알려드립니다. 수익형 블로그에 도전하고 싶다면 지금 바로 시작하세요. 최근 많은 분들이 블로그를 통해 자신의 관심사를 기록하고, 나아가 부수입까지 창출하는 '수익형 블로그'에 도전하고 있습니다. 그중에서도 티스토리 ..
태그: 티스토리 템플릿 만드는 방법, 티스토리 스킨 제작, 티스토리 템플릿, 티스토리 스킨, HTML, CSS, 블로그 수익화, 티스토리 스킨 업로드, 티스토리 전용 태그, 반응형 디자인