본문 바로가기
금융

🎨 나만의 블로그 만들기티스토리 스킨 만드는 방법 (2025년 완전 가이드)

by moneytime123 2025. 7. 13.
반응형

 

티스토리 블로그의 가장 큰 매력은 바로 스킨 커스터마이징입니다.
단순한 템플릿이 아니라, HTML/CSS를 활용해 내가 원하는 디자인으로 블로그를 꾸밀 수 있다는 점이죠.

이번 글에서는 티스토리 스킨을 처음부터 커스터마이징하거나 직접 만드는 방법을 단계별로 알려드릴게요.

🧱 티스토리 스킨이란?

스킨은 블로그의 겉모습을 구성하는 디자인 템플릿입니다. 글의 배치, 메뉴 구성, 사이드바, 폰트, 색상, 썸네일 스타일 등 모든 것이 스킨 안에 포함되어 있어요.

티스토리는 크게 두 가지 방식의 스킨을 제공합니다.

  • 기본 제공 스킨 – 무료 템플릿, 간단한 디자인 수정 가능
  • 커스텀 스킨 – HTML/CSS/JS를 직접 수정하여 고급 커스터마이징 가능

🛠️ 티스토리 스킨 만드는 3가지 방법

방법 1. 기본 스킨에서 간단한 수정하기

초보자라면 처음엔 티스토리에서 제공하는 ‘스킨 편집’ 기능을 활용해 보세요.

✅ 설정 경로:
블로그 관리자 페이지 → 꾸미기 → 스킨 편집

수정 가능한 항목:

  • 글 목록 스타일 (카드형 / 리스트형)
  • 사이드바 위치
  • 대표 이미지 설정
  • 폰트 변경
  • 색상 및 버튼 스타일
🎯 장점: 코드 몰라도 가능
단점: 수정 범위가 제한적

방법 2. 스킨 소스 직접 수정하기

좀 더 세밀하게 꾸미고 싶다면, HTML과 CSS를 직접 수정할 수 있어야 합니다.

✅ 경로:
블로그 관리자 → 꾸미기 → HTML 편집

주요 구조:

  • index.xml: 전체 구조와 영역 정의
  • style.css: 디자인 스타일
  • script.js: 기능, 인터랙션 처리

예시: 글 제목 글꼴 변경하기

.post-title {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 24px;
  color: #222;
}

예시: 본문 너비 넓히기

.container {
  max-width: 900px;
  margin: 0 auto;
}
📌 실시간 반영되기 때문에 수정 전 반드시 백업을 해두세요!

방법 3. 외부에서 스킨 다운로드해 적용하기

HTML을 직접 코딩하지 않아도, 이미 완성된 무료/유료 스킨을 설치할 수 있어요.

✅ 대표 스킨 사이트:

  • TistoryHub
  • 디시인사이드 티스토리 갤러리
  • 개인 블로거 배포 스킨

✅ 설치 방법:

  1. 스킨 파일(zip) 다운로드
  2. 관리자 페이지 → 꾸미기 → 스킨 변경 → 스킨 등록
  3. zip 파일 업로드 후 적용
장점: 퀄리티 높고 적용 간편
단점: 코드 구조 복잡하거나 광고 포함 가능

💡 초보자를 위한 스킨 커스터마이징 팁

  • 크롬 개발자 도구(F12)를 활용해 요소 위치 확인
  • 디자인은 간결하고 읽기 쉬운 스타일이 기본
  • 반응형 디자인 필수 (모바일 최적화)
  • 수정 전 스킨 백업 필수

🧩 스킨 커스터마이징 추천 항목

항목 추천 내용
글 제목 폰트 키우고 가독성 높은 스타일
본문 너비 700~900px 사이 권장
썸네일 정렬 카드형, 그리드형 등 레이아웃 조정
사이드바 구성 카테고리, 최근 글, 태그 설정
푸터/헤더 SNS 링크, 간단한 내비게이션 추천

✅ 마무리

티스토리의 진짜 매력은 자신만의 공간을 직접 디자인할 수 있다는 점입니다.
기본 스킨 편집으로 시작해보고, 익숙해지면 직접 커스터마이징에도 도전해보세요.

하나씩 수정하며 익숙해지면 블로그 운영이 더 즐거워지고, 더 많은 방문자와 소통할 수 있는 공간이 될 거예요. 지금 바로 스킨 수정에 도전해보세요!

반응형