개발/배포
수정 비공개로 변경 삭제

Devly — Sidebar | 개발자를 위한 티스토리 무료 스킨 적용 가이드

반응형

  1. 이 스킨은 뭔가요?
  2. 주요 기능 한눈에 보기
  3. 다운로드
  4. 적용 전 꼭 해야 할 것 — 백업
  5. 적용 방법 (5단계)
  6. 사이드바 위젯 배치하기
  7. GTM / 네이버 / AdSense 넣기 (선택)
  8. 내 입맛에 맞게 바꾸기
  9. 문제가 생겼을 때 (복구 방법)
  10. 자주 묻는 질문 (FAQ)

✳️ 이 스킨은 뭔가요?

커스텀 테마가 처음이신 분들을 위해 간단한 테마 소개글을 작성했습니다. 도움이 되실거예요!
👉 [개발/개발환경 & 배포] - Devly — Sidebar | 개발자를 위한 티스토리 무료 스킨을 만들어 배포합니다

개발자 블로그에 딱 맞는 다크 테마 티스토리 스킨이에요.
보라색 액센트 컬러에 3컬럼 고정 레이아웃으로 코드 가독성과 글 탐색성을 모두 잡았어요.
무료 배포이고 티스토리 기본 기능에 완벽히 호환돼요. 아래 가이드를 따라하면 10분 안에 적용할 수 있어요.

혹시 적용하다가 문제가 생기더라도 걱정 마세요.
백업만 해두면 언제든 원래대로 돌릴 수 있어요. 방법은 아래에 있어요.

✳️ 주요 기능 한눈에 보기

* 디자인

  • 다크/라이트 모드 전환 (OS 자동 감지 + 슬라이드 스위치 토글 + 설정 저장)
  • 3컬럼 고정 레이아웃 (좌 220px / 본문 960px / 우 260px)
  • 개발자 테마 — >_ 터미널 로고
  • 라이트 모드 텍스트 가독성 강화 (진한 색상 적용)
  • 구분선 가시성 개선 (라이트/다크 모두)

* 글 목록

  • 카드형 리스트 (좌측 썸네일 + 제목 + 요약 3줄 + 메타 아이콘: 📅날짜 📁카테고리 💬댓글)
  • HOT 뱃지 (댓글 5개 이상), NEW 뱃지 (7일 이내 글)
  • 카드 아무 곳이나 클릭하면 글로 이동

* 본문 페이지

  • 플로팅 목차(TOC) — 본문 우측 트리거 아이콘, 호버 시 패널 펼침 + 현재 섹션 하이라이트
  • macOS 스타일 코드블록 — 헤더바(빨/노/초) + 코드 영역 분리, Copy 버튼 항상 표시
  • 이미지 클릭하면 전체화면 확대 (라이트박스)
  • 글자 크기 조절 (A- / A+)
  • 글 관리 버튼 (수정/비공개/삭제, 소유자만 표시)
  • 공유 버튼 — URL 복사, 카카오톡, X, Facebook, LinkedIn, 네이버 블로그
  • 이전/다음 글 + 관련 글 표시
  • 읽기 프로그레스바 (헤더 바로 아래)
  • 다크모드 표/텍스트 완전 대응 (인라인 스타일 자동 오버라이드)

* 사이드바

  • 프로필 + SNS 아이콘 (링크 URL에서 자동 감지) + 구독 버튼
  • 방문자 꺾은선 그래프 (Chart.js, 테마 색상 매칭, 날짜 축) + 숫자 통계
  • 검색, 카테고리 (항상 펼침, 📂/볼드/▸ 계층 구조), 달력, 최근 글/댓글

* 이스터에그

  • 마우스를 따라다니는 치즈 고양이 (눈동자가 마우스를 쳐다봐요)
  • 키보드 단축키 — / 검색, t 테마 전환

✳️ 다운로드

GitHub 레포: https://github.com/rena-data/devlog-dark

레포 페이지에서 Code > Download ZIP 을 클릭하면 전체 파일을 받을 수 있습니다.

아래 파일 4개가 필요해요:

파일 역할
skin.html 블로그 HTML 구조
style.css 디자인 스타일
index.xml 스킨 설정
images/script.js 기능 동작 (다크모드, 고양이, TOC, 차트 등)

✳️ 적용 전 꼭 해야 할 것 — 백업

스킨을 바꾸기 전에 현재 스킨을 반드시 백업하세요. 문제가 생기면 백업 파일로 바로 복구할 수 있어요.

    1. 티스토리에 로그인하고 블로그 관리자 페이지로 이동해요
    2. 왼쪽 메뉴에서 꾸미기 > 스킨 편집 클릭
    3. 화면 오른쪽 위의 HTML 편집 버튼 클릭

  1. HTML 탭이 선택된 상태에서 코드가 보여요
  2. 코드 영역 아무 곳이나 클릭 → Ctrl+A (전체 선택) → Ctrl+C (복사)
  3. 메모장을 열어서 Ctrl+V (붙여넣기) → backup-skin.html로 저장
  4. 다시 티스토리로 돌아가서 CSS 탭 클릭
  5. 동일하게 전체 선택 → 복사 → 메모장에 붙여넣기 → backup-style.css로 저장

Mac 사용자는 Ctrl 대신 Cmd를 사용하세요.

✳️ 적용 방법 (5단계)

Step 1. HTML 붙여넣기

  1. 아까 열어둔 HTML 편집 화면으로 돌아가요
  2. HTML 탭에서 기존 내용을 전체 삭제 (Ctrl+A → Delete)
  3. 다운로드 받은 skin.html 파일을 메모장이나 VS Code로 열어요
  4. 내용을 전체 선택 (Ctrl+A) → 복사 (Ctrl+C)
  5. 티스토리 HTML 탭에 붙여넣기 (Ctrl+V)

Step 2. CSS 붙여넣기

  1. CSS 탭 클릭
  2. 기존 내용을 전체 삭제
  3. style.css 파일을 메모장으로 열어서 전체 복사
  4. CSS 탭에 붙여넣기

Step 3. 파일 업로드

  1. HTML 편집 화면 오른쪽에 파일업로드 탭이 있어요. 클릭해주세요.
  2. 하단 +추가 버튼을 클릭해서 아래 2개 파일을 하나씩 업로드해요:
    • index.xml
    • script.js

script.js를 업로드하면 티스토리가 알아서 images/ 폴더 안에 넣어줘요.
따로 폴더를 만들 필요 없어요.

Step 4. 적용 버튼 클릭

오른쪽 위의 적용 버튼을 클릭하세요. 이러면 스킨이 바로 반영돼요.

Step 5. 블로그 확인

  1. 새 탭에서 본인 블로그 주소를 열어요
  2. Ctrl+Shift+R (강력 새로고침) — 이전 캐시를 지우고 새 스킨을 불러와요
  3. 다크 모드가 적용된 블로그가 보이면 성공이에요!

반응형

✳️ 사이드바 위젯 배치하기

스킨을 적용하면 사이드바 위젯 순서가 초기화될 수 있어요. 직접 배치해줘야 해요.

  1. 관리자 페이지에서 꾸미기 > 사이드바 클릭

  1. 위젯들을 드래그 앤 드롭으로 순서를 맞춰요

사이드바 1 (좌측)

순서 위젯
1 프로필
2 검색
3 카테고리
4 방문자 그래프(플러그인)
5 방문자 통계

사이드바 2 (우측)

순서 위젯
1 달력
2 최근 글
3 최근 댓글
  1. 순서 배치 완료 후 저장 클릭

✳️ GTM / 네이버 / AdSense 넣기 (선택)

배포용 스킨에는 추적 코드가 포함되어 있지 않아요. 본인 코드를 직접 넣으면 돼요.
이미 사용 중이 아니라면 이 단계는 건너뛰어도 괜찮아요. 나중에 언제든 추가할 수 있습니다.

* Google Tag Manager (GA4 연동용)

⚠️ GTM 설치가 처음이라면 GTM으로 티스토리에 GA4 설치하기 글도 참고해 보세요!!

[데이터 분석/GA4 & 웹 분석] - GTM으로 티스토리에 GA4 설치하기 (1편) - 계정 만들기

[데이터 분석/GA4 & 웹 분석] - GTM으로 티스토리에 GA4 설치하기 (2편) - 실제 연결하고 확인하기

 

GTM을 사용하면 GA4(구글 애널리틱스), 전환 추적 등을 코드 수정 없이 관리할 수 있어요.

GTM 코드 받는 곳: Google Tag Manager → 계정 만들기 → 컨테이너 생성 → 설치 코드 자동 제공

skin.html에서 <head> 태그를 찾아요. 그 바로 아래에 GTM 코드를 넣으세요:

<head>
  <!-- 여기에 GTM 코드 붙여넣기 -->
  <script>(function(w,d,s,l,i){...본인 GTM 코드...})</script>

<body> 태그 바로 아래에 noscript 코드도 넣어야 해요:

<body id="tt-body-page">
  <!-- 여기에 GTM noscript 코드 붙여넣기 -->
  <noscript>...</noscript>

* 네이버 서치어드바이저

네이버 검색에 블로그가 노출되려면 서치어드바이저에 사이트를 등록해야 해요.

인증코드 받는 곳: 네이버 서치어드바이저 → 웹마스터 도구 → 사이트 추가 → HTML 태그 인증 선택 → 메타태그 복사

<head> 안에 메타태그 한 줄 추가:

<meta name="naver-site-verification" content="본인 인증코드" />

* Google AdSense

블로그에 광고를 게재해서 수익을 얻고 싶다면 AdSense를 연결할 수 있어요.

AdSense 신청: Google AdSense → 가입 → 사이트 등록 → 심사 (보통 1~2주)

심사 통과 후 두 가지 방법으로 적용할 수 있어요:

  1. 티스토리 관리자 > 수익 메뉴에서 자동 설정 (가장 간단)
  2. skin.html의 <head> 안에 AdSense 코드를 직접 삽입

처음이라면 방법 1을 추천해요. 티스토리가 자동으로 광고 위치를 잡아줍니다.

✳️ 내 입맛에 맞게 바꾸기

* 색상 변경하기

style.css 맨 위에 있는 색상 코드를 바꾸면 전체 색상이 한번에 변경돼요:

--accent: #7c3aed;        /* 메인 색상 (보라) → 원하는 색으로 변경 */
--accent-light: #a78bfa;  /* 밝은 버전 */

색상 코드는 구글에서 "color picker"를 검색하면 쉽게 찾을 수 있어요.

* SNS 아이콘

티스토리 관리자 > 꾸미기 > 사이드바에서 링크 위젯에 URL을 추가하면 돼요.
스크립트가 URL에서 플랫폼을 자동으로 감지해서 맞는 아이콘을 보여줘요:

  • linkedin.com → LinkedIn 아이콘
  • github.com → GitHub 아이콘
  • instagram.com → Instagram 아이콘
  • 그 외 → 기본 링크 아이콘

* 마우스 고양이 끄기

고양이가 필요 없다면 script.js 파일에서 SVG Cat Character Follower라는 주석을 찾아서 그 아래 코드 블록을 통째로 삭제하면 돼요.

* 개인정보처리방침 링크

푸터에 있는 개인정보처리방침 링크를 본인 페이지 URL로 수정하세요:

<a href="/pages/본인-페이지-경로" class="footer-privacy">개인정보처리방침</a>

✳️ 문제가 생겼을 때 (복구 방법)

스킨 적용 후 블로그가 이상하게 보인다면 당황하지 마세요.

  1. 관리자 > 꾸미기 > 스킨 편집 > HTML 편집 진입
  2. HTML 탭의 내용을 전체 삭제
  3. 아까 저장해둔 backup-skin.html 파일을 열어서 전체 복사 → 붙여넣기
  4. CSS 탭도 동일하게 backup-style.css 내용으로 교체
  5. 적용 클릭

이렇게 하면 원래 스킨으로 바로 돌아가요. 그래서 백업이 정말 중요해요.

✳️ 자주 묻는 질문 (FAQ)

Q. 비공개 카테고리가 다른 사람한테 보이나요?
A. 아니요. 티스토리가 자동으로 비공개 카테고리를 숨겨줘요. 스킨에서 따로 설정할 필요 없어요.

Q. 글 목록에 보이는 글 수를 바꾸고 싶어요.
A. 관리자 > 꾸미기 > 스킨 편집 > 홈 화면 설정에서 "페이지당 글 수"를 바꾸면 돼요.

Q. 프로필 사진은 어디서 바꾸나요?
A. 관리자 > 블로그 관리 > 블로그 정보에서 프로필 이미지를 변경하면 자동 반영돼요.

Q. 방문자 그래프가 안 보여요.
A. 로컬에서는 더미 데이터가 나와요. 실제 블로그에 적용하면 티스토리가 자동으로 데이터를 제공해서 정상 표시돼요.

Q. 다크/라이트 모드 설정이 초기화돼요.
A. 브라우저의 localStorage에 저장되는데 시크릿 모드나 캐시 삭제 시 초기화될 수 있어요. 일반 브라우징에서는 유지돼요.

Q. 코드블록에 Copy 버튼이 안 보여요.
A. Copy 버튼은 코드블록 헤더바 우측에 항상 표시됩니다. 보이지 않으면 Cmd+Shift+R로 새로고침해 보세요.

Q. 개인정보처리방침 페이지가 없는데 푸터 링크가 깨져요.
A. 티스토리 관리자 > 페이지 관리에서 "개인정보처리방침" 페이지를 새로 만들고 skin.html 푸터의 링크 경로를 해당 페이지 주소로 수정하면 돼요.

<a href="/pages/본인-페이지-경로" class="footer-privacy">개인정보처리방침</a>

Q. 푸터에서 개인정보처리방침 링크를 아예 숨기고 싶어요.
A. skin.html에서 아래 줄을 찾아서 통째로 삭제하면 돼요.

<a href="/pages/..." class="footer-privacy">개인정보처리방침</a>

또는 삭제하지 않고 CSS로 숨기려면 style.css에 아래 한 줄을 추가하면 돼요.

.footer-privacy { display: none; }

이 스킨이 마음에 드셨다면 직접 적용해보시고 사용 후기를 댓글로 남겨주세요.
작은 후기나 피드백도 앞으로 스킨을 개선하고 업데이트해나가는 데 큰 도움이 됩니다.

사용 중 불편한 점이나 버그, 개선 아이디어가 있다면 언제든 편하게 의견 남겨주세요.

적용 과정에서 막히는 부분이나 궁금한 점이 있다면 댓글로 질문주시면 확인하는 대로 답변드리겠습니다.

GitHub에서 Issue나 PR도 환영합니다!

사용해주셔서 감사합니다 😊

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 > 배포' 카테고리의 다른 글

Devly — Sidebar | 개발자를 위한 티스토리 무료 스킨을 만들어 배포합니다  (1) 2026.05.21