티스토리 블로그 스킨 설정 방법 및 속도 최적화 팁

이번에는 티스토리 블로그 스킨 설정 방법과 속도 최적화 팁에 대해 알려드릴게요.

 

티스토리 블로그 스킨 설정 방법

1. 관리자 페이지 접속: 블로그 주소 뒤에 /manage 붙여서 접속
2. 스킨 변경: 꾸미기 > 스킨 변경 메뉴에서 원하는 스킨 선택
3. 스킨 편집: HTML/CSS 편집 기능으로 직접 커스터마이징 가능, 원하는 디자인 요소를 자유롭게 수정 가능
4. 위젯 설정: 사이드바, 하단 영역에 다양한 위젯 추가 가능
5. 저장 및 적용: 변경 사항 저장 후 블로그에 적용

---

• 스킨은 블로그의 얼굴: 디자인, 가독성, 사용자 경험을 좌우함
• 광고 수익과도 연결: 광고 위치, 사이드바 유무, 본문 구조 등
• 폰트·제목 크기·레이아웃: CSS 편집으로 커스터마이징 가능
• 기본 스킨도 충분: 속도 빠르고 안정적, 광고 적게 넣을 경우 추천
• 디자인·광고 최적화 원할 경우: 유료 스킨 고려

 

반응형 스킨을 선택하면 PC와 모바일에서 모두 보기 좋게 표시돼요.

---

속도 측정과 최적화 팁

• 속도 측정 사이트: https://developers.google.com/speed/pagespeed/insights/?hl=ko

PageSpeed Insights

 

• 티스토리는 데스크톱 속도 기준으로 평가되요.
• 데스크톱 속도 70 이상이면 양호
• 모바일 속도는 크게 중요하지 않음
• 노란색으로 나오고 빠를수록 좋아요.

• 속도 개선 방법

1. 가벼운 스킨 사용
2. 이미지 용량 최소화
3. 불필요한 사이드바·위젯 제거

 

현재 제가 설정한 블로그 스킨은 기본스킨 중 whatever 를 사용하고 있고, 속도는 다음과 같이 표시되요.

---

광고와 수익 연계

• 사이드바 있는 스킨
  • 광고 위치 다양 (상단, 하단, 본문 옆 등)
  • PC 유입 많을수록 효과 큼
• 모바일에서는 사이드바 광고 효과 미미
  • 본문 먼저 보이고 사이드바는 아래쪽에 위치
• 속도가 느리면 광고 출력 지연 → 수익 감소

 

SMALL

---

스킨 변경 방법 및 주의사항

• 관리자 페이지 접속
• 변경 전
  1. 기존 스킨 저장
  2. HTML 수정한 코드 백업
• 변경 후
  1. 코드 다시 삽입
  2. 사이트맵 재생성 및 제출
• 주의사항
  1. 글 누락 사례 있음
  2. 검색엔진이 새 사이트로 인식할 수 있음
  3. 사이드바 광고 효과는 PC 유입 비중에 따라 다름

---

요약 체크리스트

스킨 변경 전 백업	☑️
속도 측정 후 스킨 선택	☑️
광고 위치 고려	☑️
CSS 편집 가능 여부 확인	☑️
사이트맵 재제출	☑️

---

이외에 CSS 편집 기능을 사용하면 티스토리 블로그의 스킨을 내 스타일에 맞게 바꿀 수 있어요.

 

1. 관리자 페이지에서 CSS 편집 접근

• 주소창에 블로그주소/manage 입력 → 꾸미기 > 스킨 편집 > HTML/CSS 편집

 

2. 자주 수정하는 요소들

제목 크기	h1 { font-size: 28px; }	블로그 글 제목 크기 조절
본문 글꼴	body { font-family: 'Noto Sans', sans-serif; }	전체 글꼴 변경
배경색	body { background-color: #f9f9f9; }	블로그 배경색 변경
링크 색상	a { color: #0077cc; }	하이퍼링크 색상 변경
사이드바 숨기기	#sidebar { display: none; }	사이드바 제거 (속도 향상)

 

3. 광고 위치 조절 팁

광고가 들어가는 영역은 .ad-area, .sidebar, .footer 등으로 지정됨

예) .ad-area { margin-top: 20px; text-align: center; }

 

4. 모바일 최적화

모바일에서는 사이드바가 아래로 내려가므로 광고 효과가 떨어짐

반응형 디자인을 위해 @media 쿼리 사용:

예) media screen and (max-width: 768px) { #sidebar { display: none; } .post-title { font-size: 22px; } }

 

5. 속도 최적화 팁

불필요한 애니메이션 제거:

* { transition: none !important; animation: none !important; }

 

이미지 크기 제한: img { max-width: 100%; height: auto; }

 

6. 편집 전 백업 필수

• HTML/CSS 수정 전에는 꼭 기존 코드 복사해두기
• 스킨 변경 시 기존 코드가 사라질 수 있음

 

• CSS 색상 선택기: https://www.colorpicker.com
• 폰트 추천: 구글 웹폰트 https://fonts.google.com

Browse Fonts - Google Fonts

 

Color Picker Tool | Free HEX Color Picker by WebFX

 

---

 

티스토리 블로그 개설부터 수익형 세팅까지 완벽 가이드!

 

블로그 검색 최적화(SEO)에 도움이 되는 핵심 요소 정리