티스토리 스킨 신규 등록 방법 - 무료 스킨 2종 배포 + 원본 안 건드리고 안전하게 적용하기

 

"받은 스킨은 대체 어디에 붙여넣는 거지?", "지금 쓰는 스킨 갈아엎었다가 망하면 어떡하지?", "index.xml은 어디로 올리는 거야?" 스킨을 처음 바꿔보려는 분들이 꼭 한 번씩 막히는 지점들입니다. 저도 처음엔 라이브 스킨을 바로 덮어썼다가 화면이 하얗게 떠서 식은땀 흘린 적이 있어요.

그래서 이 글에서는 두 가지를 같이 다룹니다. 하나는 제가 직접 만들어 무료로 배포하는 스킨 2종이고, 다른 하나는 그 스킨을 지금 쓰는 스킨을 건드리지 않고 안전하게 얹는 방법입니다. 티스토리 기본 무료 스킨의 h1 중복이나 메타 설명 문제 때문에 답답했던 게 스킨을 직접 만든 계기였는데, 어차피 만든 김에 필요하신 분들 쓰시라고 풀어둡니다.

스킨 파일은 이 글 아래 다운로드 섹션에 첨부해 뒀습니다. 개발 블로그라면 다크 터미널 느낌의 DevWar Neon, 일상·정보 블로그라면 밝은 카드형 스킨이 어울립니다. 다운로드부터 적용, 광고 설정까지 순서대로 따라오시면 됩니다.

📋 목차

1. 무료로 배포하는 스킨 2종 (다운로드)
2. 왜 덮어쓰기 말고 신규 등록을 권하나
3. 스킨 백업 - 현재 스킨을 보관함에 저장
4. 압축 파일 구성 - 파일 4종의 역할
5. 스킨 등록 화면 열기와 파일 넣기
6. 보관함에서 적용하기
7. 스킨옵션 광고 설정
8. 사이드바와 모바일 설정 정리
9. 자주 걸리는 문제 (FAQ)

1. 무료로 배포하는 스킨 2종 (다운로드)

먼저 스킨부터 받으셔야 다음 단계를 따라올 수 있으니 여기서 정리하겠습니다. 두 스킨 모두 제가 제 블로그에 쓰려고 직접 만든 것이고, 별도 조건 없이 무료로 드립니다. 둘 다 반응형이라 모바일에서도 레이아웃이 깨지지 않고, 티스토리 기본 스킨에서 흔히 걸리는 h1 태그 중복을 정리하고 메타 설명이 첫 문단에서 제대로 뽑히도록 손봐 뒀습니다.

항목	동방생활 스킨 (라이트)	DevWar Neon (다크)
분위기	밝은 카드형, 깔끔한 편	검정 배경 터미널풍, 네온 포인트
어울리는 블로그	일상·정보·잡학	개발·기술·IT
기본 색	흰 배경 + 파란 포인트	다크(#0d1117) + 네온 그린
반응형	지원	지원
SEO 정리	h1 단일화, 메타 설명 최적화	동일하게 적용됨
광고 설정	스킨옵션에서 위치별 on/off	스킨옵션에서 위치별 on/off

 

💡 어느 걸 받을지 애매하다면

블로그 주제로 고르시면 됩니다.

코드나 개발 이야기가 많으면 다크 쪽이 눈이 편하고,

생활·정보 글 위주라면 밝은 카드형이 무난합니다.

둘 다 받아 보관함에 넣어두고 번갈아 적용해 봐도 됩니다.

 

아래에 스킨 zip 파일을 첨부해 두었습니다. 필요한 쪽을 받으시고, 바로 다음 단계로 넘어가시면 됩니다.

 

매번 두번씩 업로드 하는데 번거로워서 아래 링크에 옮겼습니다.

티스토리 무료 스킨 2종 배포, SEO 처리까지 끝냈습니다

개발은전투다

읽기만 해도 지적 호기심이 채워지는 재미있는 이야기

반응형

2. 왜 덮어쓰기 말고 신규 등록을 권하나

 

스킨을 적용하는 길은 크게 둘입니다. 지금 쓰는 스킨의 HTML/CSS를 그 자리에서 덮어쓰는 방식, 그리고 새 스킨으로 하나 따로 등록한 뒤 적용하는 방식이죠. 최종 화면은 같은데, 문제 생겼을 때가 완전히 다릅니다.

구분	직접 덮어쓰기	신규 등록 (이 글)
현재 스킨	사라짐 (덮어씀)	그대로 보관됨
되돌리기	백업 안 했으면 사실상 불가	보관함에서 원클릭 복원
새 스킨 검토	라이브에 바로 반영	적용 전까지 원본 유지

 

💡 그래서 신규 등록입니다

새 스킨을 보관함에 따로 만들어 두면,

마음에 안 들 때 예전 스킨으로 그냥 돌아가면 됩니다.

원본을 안 건드리니 이것저것 부담 없이 시도해 볼 수 있어요.

 

3. 스킨 백업 - 현재 스킨을 보관함에 저장

신규 등록이라 원본이 보존되긴 하지만, 그래도 지금 쓰는 스킨을 한 번 명시적으로 보관함에 저장해 두시길 권합니다. 관리자 → 꾸미기 → 스킨 편집으로 들어가면 상단에 현재 사용 중인 스킨이 뜹니다. 여기서 보관 버튼을 누르고 스킨명을 입력해 저장하면 됩니다.

이름은 나중에 알아보기 쉽게 날짜를 붙여두면 좋습니다. "이전스킨_2026-07" 같은 식으로요. 저는 예전에 이걸 안 해두는 바람에 원래 어떻게 생겼는지 기억이 안 나서 한참 헤맨 적이 있습니다.

 

 

📌 홈 커버·사이드바도 미리 캡처

스킨을 바꾸면 홈 커버와 사이드바 설정이 초기화될 수 있습니다.

지금 배치를 스크린샷으로 남겨두면 새 스킨 적용 후 복구가 훨씬 편합니다.

 

4. 압축 파일 구성 - 파일 4종의 역할

받은 zip을 풀면 대략 이런 파일들이 나옵니다. 각 파일이 등록 화면 어디로 들어가는지부터 알고 시작하는 게 덜 헷갈립니다.

파일	역할	등록 화면에서
skin.html	스킨 구조(HTML)	HTML 탭에 붙여넣기
style.css	스타일(CSS)	CSS 탭에 붙여넣기
index.xml	스킨옵션 정의(광고 입력란 등)	파일업로드 탭에 업로드
preview*.jpg	미리보기 이미지	파일업로드 탭에 업로드

 

💡 여기가 핵심

skin.html과 style.css는 편집기에 "붙여넣고",

index.xml과 이미지는 "업로드"합니다.

붙여넣기와 업로드 두 방식이 섞여 있다는 것만 기억하면 나머지는 어렵지 않습니다.

 

5. 스킨 등록 화면 열기와 파일 넣기

 

이제 새 스킨을 만들 차례입니다. 관리자 → 꾸미기 → 스킨 편집으로 가서, 스킨 목록 우측의 스킨 등록 버튼을 누르면 등록 화면이 열립니다. 여기서 우측 상단 html 편집으로 들어가 파일을 넣습니다.

순서는 이렇습니다.

- HTML 탭: 기존 내용을 전체 선택해 지우고 skin.html 내용을 붙여넣습니다
- CSS 탭: 마찬가지로 전체 교체한 뒤 style.css 내용을 붙여넣습니다
- 파일업로드 탭: index.xml과 preview 이미지(preview.gif, preview256/560/1600.jpg)를 올립니다
- 다 넣었으면 저장을 누릅니다

저장하면 이 스킨이 보관함에 새 항목으로 추가됩니다. 아직 블로그에 적용된 게 아니라 "만들어 둔" 상태예요. 참고로 보관함은 무한정이 아니라 최대 30개까지 저장됩니다.

 

 

📌 index.xml을 빠뜨리지 마세요

index.xml은 스킨옵션(광고 코드 입력란 등)을 정의하는 파일입니다.

이걸 안 올리면 나중에 스킨옵션 메뉴에 아무 입력란도 안 뜹니다.

저도 처음에 이거 빼먹고 "광고 칸이 왜 없지" 하며 한참 찾았어요.

 

6. 보관함에서 적용하기

꾸미기 → 스킨 메뉴의 보관함으로 가면 방금 등록한 스킨이 보입니다. 스킨 이미지 위에 마우스를 올리면 적용 버튼이 나오고, 이걸 누르면 블로그에 반영됩니다.

적용 직후엔 블로그를 새 탭에서 열어 깨진 곳이 없는지 봅니다. 특히 화면을 모바일 크기로 줄였을 때 햄버거 메뉴가 정상적으로 열리는지, 그리고 글 상세 페이지가 제대로 나오는지. 이 두 가지는 꼭 확인하시는 걸 권합니다.

 

 

💡 적용해도 원본은 남아 있습니다

새 스킨이 마음에 안 들면 보관함에서 예전 스킨의 적용 버튼을 다시 누르면 됩니다.

이게 신규 등록 방식의 가장 큰 장점이죠.

 

7. 스킨옵션 광고 설정

스킨을 적용했으면 꾸미기 → 스킨옵션으로 이동합니다. index.xml에 정의된 입력란이 여기 보이고, 광고 설정은 대부분 이 화면에서 끝납니다. skin.html을 직접 열 필요가 없어요.

- 애드센스: 사용 여부를 켜고 client(ca-pub-…)와 슬롯 ID를 위치별로 입력합니다
- 쿠팡 파트너스: 배너 ID, 트래킹 코드(AF…), 크기를 입력하고 위치별로 개별 on/off 합니다
- GA4: 측정 ID(G-…)만 넣으면 gtag가 자동으로 삽입됩니다

 

 

📌 광고 이중 노출 주의

티스토리 자체 [수익 → 광고 설정]으로 애드센스를 이미 연동해 둔 상태라면,

스킨옵션의 자동 광고까지 켰을 때 광고가 이중으로 붙을 수 있습니다.

둘 중 하나만 쓰는 편이 안전합니다.

 

8. 사이드바와 모바일 설정 정리

스킨을 바꾸면 사이드바 위젯 순서가 흐트러질 수 있습니다. 꾸미기 → 사이드바에서 다시 잡아주면 됩니다. 스킨이 기본 제공하는 모듈(프로필, 카테고리, 인기글, 최근글, 광고 영역)이 목록에 보이니 원하는 순서로 배치하고, 안 쓰는 모듈은 내리면 됩니다.

한 가지 더 챙길 게 있습니다. 이전 스킨과 새 스킨의 반응형 여부가 다르면 모바일 설정을 다시 잡아줘야 합니다. 새 스킨이 반응형이라면 관리자의 모바일 설정에서 "티스토리 모바일 웹 자동 연결"을 사용하지 않음으로 두는 편이 보통 맞습니다. 반대로 비반응형 스킨이면서 모바일 웹을 쓰고 싶다면 사용함으로 둡니다. 여기서 배포하는 두 스킨은 모두 반응형이니, 받아서 적용하셨다면 사용하지 않음이 기본이라고 보시면 됩니다.

9. 자주 걸리는 문제 (FAQ)

스킨 등록 화면에서 저장했는데 보관함에 안 보입니다

저장이 제대로 안 됐거나, 스킨 편집이 아니라 다른 화면을 보고 있는 경우입니다. 꾸미기 → 스킨 메뉴의 보관함을 새로고침해서 확인하고, 없으면 등록 과정을 다시 밟아보세요.

적용했더니 화면이 하얗게 또는 까맣게 나옵니다

등록 화면에서 CSS 탭이 아니라 HTML 탭에 style.css를 붙여넣은 경우가 대부분입니다. 반대의 경우도 마찬가지고요. 두 탭 내용을 각각 확인해 보세요.

스킨옵션에 입력란이 안 보입니다

등록할 때 index.xml을 파일업로드로 올리지 않았거나 저장을 안 했을 때 생깁니다. 등록 화면에서 index.xml 업로드 → 저장 → 다시 적용 순서로 확인해 보세요.

광고가 안 나옵니다

애드센스는 코드를 넣어도 반영까지 시간이 걸립니다. 신규 슬롯은 수십 분에서 수 시간까지도 걸려요. 슬롯 ID 오타가 아니라면 조금 기다려 보시고, 광고 차단 확장 프로그램을 끈 상태에서 확인하세요.

예전 스킨으로 돌아가고 싶습니다

보관함에서 예전 스킨의 적용 버튼을 다시 누르면 됩니다. 3번에서 현재 스킨을 보관해 뒀다면 그 스킨이 보관함에 있을 겁니다.

마무리

정리하면, 스킨은 위에서 무료로 받아 가시고, 적용은 원본을 건드리지 않는 신규 등록 방식으로 하시면 됩니다. 스킨 등록 버튼으로 새 스킨을 만들어 보관함에 넣고, 적용 버튼으로 갈아 끼우고, 아니다 싶으면 다시 원래 스킨으로 돌아오면 되니까요. 한 단계 더 거치는 대신 그 한 단계가 안전장치가 됩니다.

적용 후에는 홈 커버, 사이드바, 모바일 설정 이 세 가지만 다시 점검하면 교체가 끝납니다

📚 함께 보면 좋은 글

티스토리 무료 스킨 2종 배포, SEO 처리까지 끝냈습니다

티스토리 SEO를 위한 HTML 태그 사용법 - h1 중복부터 메타 디스크립션까지 (무료 스킨 공개)

티스토리 SEO 작성법과 태그 활용 - 검색 노출 올리는 실전 정리