제가 스킨을 수정하고 제작하고, 그리고 적용하면서 느낀점을 알려드립니다. 이제는 제가 스킨과 코드에 대해서 어느정도 아니까 수정이 가능하고 복구가 가능하지만 블로그를 처음하시거나, 코드를 잘 모르시는분들은 반드시 알고 넘어가야 할 부분입니다.

이점을 반드시 숙지하시고 스킨을 변경하거나 수정하거나 하세요. 
이 부분을 간과하면 나중에 꼭 후회하게 됩니다. 꼭 참고하시기 바랍니다.

스킨을 수정하거나 변경하기전 제일 먼저 해야할것은 백업입니다.

1. html, css 코드 복사.

제일먼저 skin.html 과 style.css 를 먼저 에디터에 복사해서 붙여넣으세요. 그리고 알아보기 쉬운 이름으로 저장하세요..
왜냐면 스킨을 변경한 후 코드를 붙여넣기 위함입니다.
스킨을 변경한후 코드를 붙여넣거나 수정해서 넣기위한 것은 아래와 같습니다.

1. RSS 주소.
티스토리에서 제공하는 기본 RSS 주소인 경우는 신경 안써도 됩니다. 스킨 제작자들이 모두 만들어주니까요.
하지만 개인 도메인을 사용하거나 피드버너 등, 개인 RSS 주소를 사용하는분은 스킨을 수정한 후 반드시 RSS 주소도 변경해줘야 합니다.
변경전과 후는 아래와 같습니다. 
 

<head>
....
<!-- 변경전 -->
<link rel="alternate" type="application/rss+xml" href="[#\#_rss_url_##]" title="[#\#_title_##]" />
<!-- 변경후 -->
<link rel="alternate" type="application/rss+xml" href="개인도메인주소" title="[#\#_title_##]" />
....
</head>


RSS 주소는 해더에도 있지만 사이드바에 있는 경우도 많습니다.
이럴때는 사이드바도 반드시 저장한 후 나중에 수정해줘야 합니다.
 
2. 광고 코드.
블로그에 광고를 하는 경우, 많은 분이 구글광고를 할 겁니다. 구글 광고뿐만 아니라 다른 광고도 마찬가지 입니다. 스킨 이곳 저곳에 넣어놓은 광고 코드와 그에 따른 스타일 코드도 모두 원상복구 시킬려면 반드시 변경하기전 복사해서 저장한후 나중에 다시 변경해줘야 합니다.

3. 서식 , 기타(추천버튼.....), 추가로 지정한 스타일.
블로글 사용하다보면 서식을 사용합니다. 또한 하단에 넣은 추천버튼이나 믹시...등등 추가적으로 수정을 하신분들은 나중에 스킨을 변경한 후 사용하려면 똑같이 복사해서 나중에 스킨을 변경한 후 수정 및 보완해서 붙여넣기 해줘야 합니다.
서식 스타일을 css 에서 지정한 경우와 추천버튼이나 기타 코드등을 css 로 지정한 경우 이것도 복사후 붙여넣기를 해줘야 이전과 똑같이 보여집니다.

저의 경우 jQuery 를 사용하기 때문에 관련 자바스크립트나 스타일이 추가적으로 있습니다. 이전과 똑같이 보일려면 스킨을 변경한후 수정 및 보완해서 붙여넣기를 해줘야 합니다.



4. 스킨에 포함되지 않은 기타 설정 및 스타일.
스킨에는 기본 디폴트 스타일만 지정한 경우가 많습니다.
나중에 추가적으로 스타일을 변경한 경우 입니다. 
어떤 경우냐하면 댓글 같은 경우 입니다. 

많은 분들이 댓글에 이미지로 스타일을 입히거나, 스타일을 따로 준경우 html 과 관련 css 를 백업해야 합니다. 어디가 어딘지 알고 백업해야 나중에 붙여넣기 할때도 편합니다. 
그렇기 때문에 html, css 등을 편집을 할경우에는 반드시 주석을 포함해야 나중에 편합니다.

또 사이드바에도 해당되는 사항이지만 링크같은 경우 기본 스타일이 아닌 다른 스타일로 변경한 경우도 이에 해당이 됩니다.
html 전문을 백업을 한경우는 알아보기 쉬워 나중에 복구할때도 편합니다.


2. 사이드바 모듈 복사 후 저장.

먼저 복사 후 에디터에 붙여넣기 한 후 저장하세요. 그 다음 사이드바 모듈로 또다시 저장하기를 권장합니다.
왜 그러냐면은 스킨을 변경하면 사이드바의 너비가 수정이 되는 경우가 많습니다. 그럴때는 코드또한 수정을 하는 경우가 많습니다.
사이드바에서 모듈을 저장한후 다시 불러와서 수정을 해되 되지만 에디터에서 작업하는것이 무엇보다 편하기 때문입니다.
또 하나의 이유는 티스토리 버그입니다. 저장을 했는데 나중에 불러와지지가 않을때가 있습니다.

이때를 대비하기 위해 에디터에 저장하기를 권장하는 바입니다.
중요한 점은 반드시 저장을 하라는 이야기 입니다.
광고나 기타 코드도 사이드바에 많이들 사용합니다. 이 또한 저장한 후 스킨을 변경한 후에 다시 수정 및 붙여넣기 해야 합니다.


3. 스킨 저장.

티스토리에서는 스킨을 통채로 저장하는 기능이 있습니다. 이것을 제일먼저 소개하지 않은것은 한번 저장하면 코드를 볼 수 없기 때문에 에디터에 저장을 먼저 하라는 이유입니다.
스킨을 저장하고 다른 스킨으로 스킨을 변경하면 이전 스킨코드를 볼수 없습니다. 볼려면 다시 이전스킨으로 롤백해야 볼수가 있습니다.
즉 이전스킨과 현재스킨을 왔다갔다 하지말고 에디터로 저장한것을 참고하라고 에디터에 저장하라고 한것입니다.

저의 경우 워낙 스킨을 많이 만들고 수정하고 하다보니 뭐하나만 수정하면 아예 파일을 따로 만들어놓고 참고합니다.
 


스킨을 저장하는 방법은 관리자화면의 스킨에서 스킨저장을 클릭하면 됩니다. 적당한 이름을 넣고 저장하면 됩니다.


4. 스킨위자드의 지원 여부

티스토리에서 제공하는 스킨은 모두 스킨 위자드를 지원합니다. 그래서 초보자분들은 관리자화면의 스킨항목에서 추천하는 스킨으로 변경을 할경우 이걸로 쉽게 수정을 할 수 있습니다.
하지만 외부에서 스킨을 받아서 스킨을 변경할때는 그 스킨이 스킨위자드를 지원하는지 한번을 확인을 해야 합니다.
본인이 html,css 등 티스토리 스킨에 대해서 잘 알면 상관이 없지만 모른다면 확인을 하고 넘어가야 합니다.

스킨위자드도 스킨만 변경할때만 유용합니다.
광고 코드나 기타 수정을 하면 지원이 안되는 경우가 많습니다.
그러니 일단 수정을 하게되면 반드시 주석을 달아놓으세요....


5. 본문너비와 블로그의 스타일

본문너비가 상당이 중요합니다.
일단 본문너비가 변경이 되면 거의 모든 광고와 기타 설정들이 변한다고 보면 됩니다. 
만약 초보자라면 이부분을 상당이 유의해서 봐야 합니다.
모든 설정을 수정해줘야 합니다.

이와 관련해서 사진을 많이 다루는 블로그의 경우 본문의 너비가 큰걸 사용하는경우가 많습니다.
그래서 본문에 삽입한 이미지가 큰경우도 많습니다.

나중에 변경한 스킨의 본문폭이 작을 경우 본문에 삽입했던 이미지들이 커서 레이아웃이 망가지는 경우가 있습니다.
이부분도 크로스브라우징을 염두해서 코드를 짠경우는 괜찮지만 그렇지 않은경우 레이아웃이 망가지는 경우가 더러 있습니다.

즉 스킨을 변경하기전,
이 스킨이 나에게 필요한가를 반드시 생각해보시고, 이 스킨을 변경함으로써 내가 해야할것들을 한번쯤은 생각해봐야 합니다.
초보자분들이 무턱대고 스킨을 변경한 다음 고생하는 부분이 바로 이런부분입니다.

저또한 스킨에 대해서 몰랐을때는 이런 고생을 했습니다.


6. 테스트용 블로그

스킨을 변경하기전 테스트 블로그에서 스킨을 미리 적용해보세요.
스킨을 제작하고 배포하는 분들이 반드시 먼저 테스트를 해봅니다. 하지만 환경은 다 달라서 모든것을 허용하지는 않습니다.
본인의 블로그에는 많은 글들과 키워드,서식, 이미지, ...... 등등이 있기 때문에 나중에 반드시 수정해야 할 부분이 생깁니다.

이런 부분을 최소화하기위해, 그리고 고생을 들하기위해서는 반드시 테스트용으로 티스토리 블로그를 하나 더 갖고 계세요.
그리고 거기에 먼저 적용을 해보고, 수정해보고, 나중에 다 되면 본인의 블로그에 적용을 하세요. 
 

7. 도움을 청하세요.

만약 외부에서 스킨을 받아서 변경한 경우 스킨제작자에게 어디어디 부분을 수정한다고 정확하게 말씀하세요.
잘 모르는경우 본인이 수정한다고 이것 저것 만지면 시간은 한도없이 갑니다.
하지만 아는사람은 수정할 부분만 정확히 안다면 1분도 안되서 수정이 되는경우가 많습니다.

물어볼때는 반드시 정확하게 물어보세요.
어느부분을 어떻게 수정을 할것인지 정확히만 알려준다면 스킨 제작자는 금방 알려줄겁니다. 

만약 안가르쳐주거나 어려움이 있다면 저에게 요청하세요.
시간이 허락하는대로 제가 도와드리겠습니다.
신고

댓글

  1. 2012.01.28 10:01 신고 BlogIcon Channy™  댓글주소  수정/삭제  댓글쓰기

    유용한 포스팅이네여ㅎ 스킨 바꿀 때마다 머리 아팠는데 담에 바꿀 때는 이 포스팅 참고하도록 해야겠습니다

  2. 2012.01.28 17:28 신고 BlogIcon 전자우유  댓글주소  수정/삭제  댓글쓰기

    대문님 저번에 주셨던 White 1단 스킨은 잘 사용하고 있습니다.
    그런데 가장 밑에 있는
    대문님의 라이선스가 적힌 부분의 demunWhite1Col에 되어있는 링크가 조금 이상하네요
    클릭시 http://www.kwink.com/ 이런 이상한 사이트가 뜨는데 정상적인것인가요?

  3. 2012.05.28 19:37  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.05.29 09:53 신고  댓글주소  수정/삭제

      질문은 부끄러운것이 아닙니다. 저도 다른분한테는 질문을 하곤 합니다.

      아는것이 있고, 모르는것이 있지요...ㅎㅎㅎㅎ

      다음부터는 공개로 질문해주세요. 괜찮습니다.
      그래야 똑같은 질문을 다른분이 안하시거든요....

      일단 질문이 정확하게 어느부분에 점선을 넣은것인지 몰라서 ...... 대략 사이드바의 글 하나 하나에 점선이 들어가는것을 예를 들었습니다.

      css 편집창 맨아래에 아래의 코드를 추가해보세요. 그리고 한번 비교해보세요.

      #sidebar li a { 1px dotted #ccc; }

  4. 2012.10.17 17:28  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. 2012.11.25 17:34 신고 BlogIcon Limiter  댓글주소  수정/삭제  댓글쓰기

    역시나 어렵군요. 혹시 따로 질문을 할 수는 없나요?

  6. 2012.12.21 01:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.12.21 17:47 신고  댓글주소  수정/삭제

      링크부분을 잘 살펴보세요.
      푸터 부분에 본인블로그주소을 가리키는 치환자가 있을겁니다.
      예를들어 <a href="[ ##_blog_link_##]"> 형식이죠.
      이런경우 예를든것처럼 할때는 <a href="[ ##_blog_link_##]/naver.com"> 이런형식으로 되어 있을겁니다.

      그러니 [ ##_blog_link_##] 빼시면 될겁니다.

    • BlogIcon Limiter 2012.12.22 01:53 신고  댓글주소  수정/삭제

      <a href="">지역로그</a> :
      위와 같은 기본 소스는 <!-- -->로 모두 주석처리 해 두었습니다.
      지역로그부터 글쓰기부분 까지 말이죠.
      그 아래부분에다 <a href="naver.com"; style="COLOR: #4c4c4c">네이버</a> 라는 소스를 넣었습니다.

      <div class="footMenu"> 안에다 위 소스를 넣었는데말이죠.
      링크는 네이버인데, 제 도메인+설정링크가 되어버리네요.. 치환자는 넣지 않았습니다. 위 보이는 그대로 쓰고있는터라.. CSS 에서도 찾아보려 해도 못찾겠네요 ㅠㅠ..

    • BlogIcon 대문 demun 2012.12.22 10:32 신고  댓글주소  수정/삭제

      삽입한 <a href="naver.com"; style="COLOR: #4c4c4c">네이버</a 부분이 현제 어디있나요?
      제가 아무리 봐도 없는데......

      <div class="footMenu"> 안에다 넣었다고 했는데....없는데요.

      일단 넣고 다시 저에게 물어보세요....
      그리고 마우스 우측버튼도 해제해 두세요.

    • BlogIcon Limiter 2012.12.22 12:31 신고  댓글주소  수정/삭제

      네이버라는 예시 소스구요.. 실제소스는 <a href="limiter-m@limiter.co.kr"; style="COLOR: #4c4c4c">이메일</a>
      이렇습니다.

      오른쪽 마우스 방지 해제해놨습니다 ㅎㅎ

    • BlogIcon 대문 demun 2012.12.22 13:40 신고  댓글주소  수정/삭제

      그니까 메일이 아닌 일반 링크를 한번 넣어보세요.그래야 제가확인이 가능하죠.
      메일 링크 말고....

    • BlogIcon Limiter 2012.12.22 17:11 신고  댓글주소  수정/삭제

      아.. 다른 링크같은 경우는 http:// 를 삽입해야 되는군요..
      이메일의 경우에는 mailto 문을 사용했습니다.
      대충 해결은 되었네요 ㅠ_ㅠ... 감사합니다.. 여러 정보 얻어가겠습니다. ㅎㅎ