티스토리 스킨 변경 - 친효스킨에서 JB-167까지

티스토리 스킨: 친효스킨에서 JB-167로 변경하기까지

절대 친효스킨이 나쁘다고 생각해서 바꾼 것은 아니다.

친효스킨은 설정도 편리하고, 기능도 많고, 업데이트도 훌륭해서 무료 스킨계에서 최고봉을 달리고 있지 않나 생각한다.

그리고, 아이러니하게도 나는 그 이유로 친효스킨을 뒤로 하고 다른 스킨을 찾아 떠나게 되었다.

아마, 친효스킨을 쓰다가 다른 스킨으로 이주한 사람들은 공감할 수 있을 것 같은데, 굉장히 많은 사람들이 친효스킨을 쓰고 있다는 것은 내가 별도 수정을 하지 않는 한 내 사이트들도 유사품으로 남게 될 가능성이 높다는 것을 의미한다.

사실 컨텐츠가 좋으면 그 뿐이지 않겠냐고 할 수도 있겠지만, 조금만 검색을 해보면 굉장히 많은 블로그들이 친효스킨을 사용 중이다.

게다가, 친효스킨을 쓰는 다른 사이트들이 주는 look & feel로부터 내 사이트를 차별화할 엄두는 내지 못했다.

물론, 다른 스킨을 적용한 지금도 차별성이 많이 생긴 것은 아니긴 하지만.

 

친효스킨+2차 도메인 사용시 불편했던 점(별도 설정했던 것)

별도 설정 메뉴가 있었는지는 모르겠으나, 적어도 나는 발견하지 못했다.

2차 도메인을 설정한 상태에서는 관리자/글쓰기 메뉴를 클릭하면 찾을 수 없는 페이지 에러가 발생했다.

링크가 2차 도메인이 아니라, 원래 티스토리 URL을 상대경로로 참조하도록 되어 있는 것 같다.

일반 유저들은 상관없겠지만, 내가 글을 쓰거나 관리하려면 기껏 설정한 2차 도메인이 아니라 티스토리 원래 주소로 액세스를 하는 불편함이 생겼다.

그래서, 직접 html을 수정하여 해당 메뉴를 클릭했을 때는 원래 티스토리 도메인으로 동작하도록 절대 경로로 변경 설정해서 썼다.

 

 

 

스킨 선정

디자인은 나름 아기자기했지만, 내 취향과는 맞지 않는 것 같았다.

그냥 무미건조하더라도 좀더 투박해 보이더라도 심플해 보이는 디자인을 찾아보았다.

다른 무료스킨 들도 검토해 보았으나, 개인적으로는 친효스킨이 제일 좋다고 생각하고 있었던 터라 다른 무료스킨들 중 마땅한 대안을 선정할 수 없었다.

유료스킨 중에는 프라치노 공간스킨과 JB factory의 JB-167 스킨을 두고 검토했고, 이미지 보다는 텍스트 위주의 블로그이기에 JB-167을 택했다.

 

친효스킨에서 JB-167 변경적용 절차

기본 가이드는 JB factory에서 안내하는 것과 다르지 않다.

1. 기존 스킨 백업하기
2. 주요 메타 정보 복사하기
   • 구글, 네이버에 등록해 뒀다면 메타 정보를 업데이트 해뒀을 것이다. 이 정보를 미리 메모장 같은 곳에 복사해 두자. 잊으면 다시 처음부터 설정해야 한다. 어려운 것은 아니지만, 번거로울 것이다.
3. 애드센스 정보
   • 애드센스 정보는 기존 스킨 설정에서 복사해 두는 것이 더 편할 것 같다.
   • 슬롯 번호도 함께 기록해 두자.
4. JB factory에서 구매하기
   • 50,000원
5. 신규 스킨 다운로드하기
6. 신규 스킨 업로드하기
   • 다른 스킨들을 설정하는 것과 동일하다.
   • 주요 파일 및 이미지 폴더를 포함하여 업로드 한다.
7. 주요 레이아웃 설정하기
   • JB-167 상세 매뉴얼을 참고하여 필요한 설정을 한다.
   • JB factory의 데모 사이트에서 메뉴/커버/폰트 등 구성을 조합하여 나에게 맞는 레이아웃을 잡는다.
8. 메타정보 복원하기
   • 2단계에서 미리 복사해둔 메타정보를 스킨 HTML 수정 메뉴를 활용하여 붙여 넣는다.
9. 애드센스 설정 복원하기
   • 기존 스킨에서 사용하면서 설정했던 값(3번)을 참조하여 다시 설정한다.

 

비용, 만족도

가격은 50,000으로 다소 비싸다.

아직 블로그 방문자도 미미하고 보잘 것 없지만, 뭔가 차별성이 생긴 것 같아 만족스럽다.

현재로서는 50,000원 어치 만족스러운데 더 잘 쓰면 잘 쓸 수록, 그 값어치가 올라갈 것이다.

 

사용시 중간광고 넣기

애드센스 설정 중,

• 본문중간 SLOT에 애드센스 값이 입력
• 본문중간 옵션 ON
  이 되어 있다면, 본문 작성 중 수동으로 광고를 넣을 수 있다. 글 작성 중, 원하는 위치에 다음과 같이 넣자.HTML 모드이거나, 마크다운 모드이거나 상관없다.
• <div class="jb-adsense-cm"></div>

 

제목/소제목 등 h1, h2, h3에 CSS 적용하기

친효스킨을 쓰다가 스킨을 변경하고 제일 눈에 띄는 변화는 CSS였다.

기존에 제목에 밑줄까지 그어서 가독성을 높여주었던 부분이 JB-167에는 기본적으로 없다.

그래서, 알아서 해당 부분을 해결해야 한다.

티스토리를 쓰는 많은 유저들은 서식을 주로 많이 쓰는 것 같고, 그것을 안내해 주고 있는 것 같다.

그런데, 서식을 적용하면 신규 작성하는 글들부터야 예쁘게 되겠지만, 기존에 제목/소제목/본문 등을 맞춰서 작성한 글들은 어떻게 할 수가 없다.

결국은 사이트 전체 CSS를 바꿔야 기존 글들도 바뀐다.

예전에 친효스킨을 입혔을 때, 기존 글들이 싹 바뀌었던 것처럼.

아직 JB-167에서 그 옵션이 있는지는 모르겠으나, https://ssonuri.tistory.com/68 님의 블로그로부터 서식을 참조하여 CSS에 넣어 보았다.

마찬가지로, CSS 편집에서 제일 하단에 아래와 같이 넣는다.

그러면 기존 글들 중, h1, h2, h3로 태깅한 (혹은 마크다운 기준으로 ### 등으로 표시한) 글들에 CSS 서식이 입혀진다.

.jb-article h3 { box-sizing: border-box; border-width: 0px 0px 2px 10px; word-spacing: 3px; border-bottom-style: solid; border-bottom-color: #cccccc; padding: 3px 5px; border-left-style: solid; border-left-color: #0c4c8a; margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial; color: #333333; }
.jb-article h2 { box-sizing: border-box; border-width: 0px 0px 2px 10px; word-spacing: 3px; border-bottom-style: solid; border-bottom-color: #cccccc; padding: 3px 5px; border-left-style: solid; border-left-color: #55555b; margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial; color: #333333; }
.jb-article h1 { box-sizing: border-box; margin-bottom: 5px; border-right-width: 0px; word-spacing: 3px; margin-top: 5px; border-bottom: #2A52BE 2px solid; border-left: #2A52BE 12px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; margin-right: 0px; border-image: initial; padding: 3px 5px 3px 5px; }

 

반응형

 

이후 할일

광고 최적화, 메뉴 최적화 등등 손볼 곳들이 많다.

물론, 그것보다 제일 우선순위가 높은 것은 꾸준히 글쓰기일 것이다.

마치 이사와서 가구 새로 들이고, 채워넣는 것처럼.

그래도, 스킨 바꾸기 전에는 전세 사는 것 같았다면, 돈을 지불해서 그런지 내집 마련한 것 같은 기분마저 든다.

 

관련 글

 

티스토리 2차 도메인 설정 후 이슈-리다이렉션/댓글/구독 문제

티스토리 2차 도메인 설정 (보완) - 리다이렉션/댓글/구독/미리보기 문제 해결 방법