개발자 블로그를 위한 무료 티스토리 커스텀 스킨
- 다크 / 라이트 모드 전환 (OS 자동 감지 + 슬라이드 스위치 토글 + 설정 저장)
- 3컬럼 고정 레이아웃 (좌측 사이드바 / 본문 / 우측 사이드바)
- 개발자 테마 — 터미널 프롬프트
>_, 맥북 스타일 코드블록
- 카드형 리스트 (좌측 썸네일 + 제목 + 요약 3줄 + 메타 아이콘: 📅날짜 📁카테고리 💬댓글)
- HOT 뱃지 — 댓글 5개 이상인 글에 자동 표시
- NEW 뱃지 — 7일 이내 작성된 글에 자동 표시
- 카드 전체 영역 클릭 가능, 호버 시 보라색 세로 바 표시
- 플로팅 목차(TOC) — 본문 우측 트리거 아이콘, 호버 시 패널 펼침 + 현재 섹션 하이라이트
- 코드블록 macOS 윈도우 UI — 헤더바(트래픽 라이트) + 코드 영역 분리, Copy 버튼 항상 표시
- 이미지 라이트박스 — 클릭하면 전체화면 확대 (ESC로 닫기)
- 글자 크기 조절 — A- / A+ 버튼
- 브레드크럼 —
Home / 카테고리경로 표시 - 글 관리 버튼 — 날짜 옆 ⋮ 아이콘 (수정/비공개 변경/삭제, 소유자만 표시)
- 공유 버튼 — URL 복사, 카카오톡, X, Facebook, LinkedIn, 네이버 블로그
- 이전/다음 글 + 관련 글 (같은 카테고리 기반)
- 다크모드 표/텍스트 지원 — 인라인 스타일 자동 오버라이드
- 읽기 프로그레스바 (헤더 바로 아래)
- 프로필 — 이미지, 이름, 설명, SNS 아이콘 (URL에서 플랫폼 자동 감지)
- 구독 버튼 — 커스텀 구독 버튼 (링크 아이콘 아래, 티스토리 구독 연동)
- 방문자 꺾은선 그래프 — Chart.js 기반, 테마 색상 매칭, 날짜 축/툴팁 포함
- 방문자 수 (Yesterday / Today / Total)
- 검색, 카테고리 (항상 펼침, 📂/볼드/▸ 계층 구조), 달력, 최근 글, 최근 댓글
- 치즈 고양이 마우스 팔로워 (눈동자 추적, 걷기/잠자기 모션)
- 키보드 단축키 —
/검색,t테마 전환 - Back to Top 버튼
- 프린트 스타일 — Ctrl+P 시 본문만 깔끔하게 출력
- 티스토리 관리자 > 꾸미기 > 스킨 편집 > HTML 편집 진입
- HTML 탭에
skin.html내용 전체 붙여넣기 - CSS 탭에
style.css내용 전체 붙여넣기 - 파일업로드 탭에서
index.xml,script.js업로드 - 적용 클릭
- 티스토리 관리자 > 꾸미기 > 스킨 변경 > 스킨 등록 으로 이동
- 아래 파일들을 개별 업로드:
skin.html,style.css,index.xml,script.jspreview.gif,preview256.jpg,preview560.jpg,preview1600.jpg
- 저장 후 스킨 적용
스킨 적용 후 관리자 > 꾸미기 > 사이드바에서 순서를 맞춰주세요.
좌측 사이드바 (사이드바 1)
| 순서 | 위젯 |
|---|---|
| 1 | 프로필 |
| 2 | 검색 |
| 3 | 카테고리 |
| 4 | 방문자 통계 |
우측 사이드바 (사이드바 2)
| 순서 | 위젯 |
|---|---|
| 1 | 달력 |
| 2 | 최근 글 |
| 3 | 최근 댓글 |
style.css 상단의 색상 값을 수정하면 전체 테마 색상이 바뀌어요:
--accent: #7c3aed; /* 메인 보라색 → 원하는 색으로 */
--accent-light: #a78bfa; /* 밝은 보라색 */티스토리 관리자 > 꾸미기 > 사이드바 > 링크에서 URL을 추가하면, 스크립트가 URL에서 플랫폼을 자동 감지해서 아이콘을 매핑해요:
newpost(URL에 포함) → 글쓰기 아이콘manage(URL에 포함) → 설정(기어) 아이콘linkedin.com→ LinkedIn 아이콘github.com→ GitHub 아이콘instagram.com→ Instagram 아이콘facebook.com→ Facebook 아이콘tistory.com→ 블로그 아이콘- 그 외 → 기본 링크 아이콘
images/script.js에서 SVG Cat Character Follower 주석을 찾아서 해당 블록을 삭제하면 돼요.
skin.html 하단 푸터에서 URL을 본인 페이지로 수정:
<a href="/pages/본인-페이지-경로" class="footer-privacy">개인정보처리방침</a>skin.html의 <head> 안에 본인 코드를 추가하세요. 자리표시 주석이 있어요.
skin.html # HTML 템플릿
style.css # CSS 스타일 (다크/라이트 모드 변수 포함)
index.xml # 스킨 설정 메타데이터
images/script.js # JS 기능 (테마 토글, TOC, 고양이 등)
preview.gif # 스킨 미리보기 (112x84)
preview256.jpg # 스킨 미리보기 (256x192)
preview560.jpg # 스킨 미리보기 (560x420)
preview1600.jpg # 스킨 미리보기 (1600x1200)
preview.html # 로컬 프리뷰 (글 목록)
preview-post.html # 로컬 프리뷰 (본문)
- 티스토리 카테고리는
<table>+ 인라인 스타일 구조로 렌더링되며, CSS!important로 오버라이드합니다. - 댓글 영역은
data-tistory-react-app="Comment"React 컴포넌트로 동적 렌더링됩니다. - 구독 버튼은
data-tistory-react-app="SubscribeAndNotify"마운트가 필요합니다. - "이미지 크게 보기(Light TT EX)" 플러그인은 내장 라이트박스와 충돌할 수 있으므로 비활성화를 권장합니다.
Chrome, Edge, Safari, Firefox 최신 버전
본 스킨은 개인 블로그 용도로 무료 사용할 수 있습니다.
허용
- 개인 블로그에 적용
- 본인 블로그에 맞게 커스텀 수정
금지
- 상업적 이용 및 유료 판매
- 스킨 파일 재배포 (공유 시 GitHub 링크로)
- 수정본 재배포
블로그 후기 작성 시 GitHub 링크를 함께 남겨주시면 감사하겠습니다.
Copyright © 2026 rena-data. All Rights Reserved.