티스토리 블로그 스킨 변경 CCZ-CROSS

안녕하세요. 드리머즈입니다.

좀 전에 티스토리 스킨을 변경했습니다. 아직 세세하게 수정해야 할 부분은 있지만 큰 부분은 설정이 완료된 것 같습니다~

1. 스킨 변경 내역

기존에 사용하던 스킨은 Readiz님이 만든 fastboot이라는 스킨이었습니다. 아마 티스토리에서 가장 많이 쓰이는 반응형 스킨일 겁니다. 저도 한 4개월 정도 그 스킨을 잘 사용했었습니다. 그런데 스킨을 쓰다보니 눈이 높아져.. 귀찮음을 이겨내고 새로운 스킨으로 변경했습니다.

이번에 새로 바꾼 스킨은 흉내쟁이님이 만드신 CCZ-CROSS라는 스킨입니다.

http://webdir.tistory.com/491

위의 링크에서 다운로드 받을 수 있습니다. 다운로드 받고 기본적으로 바꿔야 하는 설정에 대한 설명도 있습니다.

2. 스킨 변경 후 작업 - html 코드

스킨을 변경하게 되면 기존 스킨에 추가했던 html 코드들도 날라가게 됩니다.

저의 경우 스킨 변경 후

네이버, 다음 등의 웹마스터 도구 인증을 위해 쓰였던  <meta>태그의 인증 코드와

구글 애널리리틱스를 위한 <script>태그 코드들 다시 추가했습니다.

웹마스터 도구의 인증을 위한 <meta>코드는 이제 필요없는 것 같지만 혹시 몰라서 추가했습니다.

3. 구글 애드센스 사이드바 광고

제 실력이 부족해서 블로그 사이드바에 애드센스 광고 넣는 과정에서 고생좀 했습니다. 

저는 블로그 관리자 > 꾸미기 > 사이드바에서 기본 모듈에 있는 [플러그인] HTML 배너출력를 새로 만들어서 구글 광고 코드를 넣으면 될 줄 알았는데 여기서 문제가 발생했습니다.

기본 모듈에 있는 [플러그인] HTML 배너출력을 이용해 메뉴?를 만들면 위 사진처럼 됩니다.

위 사진처럼 광고가 오른쪽 정렬된 것처럼 나왔다는 것입니다.

이 문제를 해결하기 위해서 문제가 되는 사이드바의 플러그인을 제거하고,

관리자 > 꾸미기 > 스킨 편집 > html 편집을 클릭합니다.

CSS와 HTML 모두 간단하게 수정해야 하는데, HTML 먼저 수정하겠습니다.

코드의 후반부에 보면 <s_sidebar_element>~</s_sidebar_element> 태그가 보이기 시작합니다. 이 태그가 바로 블로그의 사이드바에서 보여지는 메뉴와 관련된 코드들입니다. 좀전에서와 같이 기본 모듈에서 HTML 배너출력을 사용하면.. 바로 이 부분의 HTML이 변경됩니다. 하지만 기본 모듈을 통해 사이드바 메뉴를 추가하면 <div>에 한번 더 감싸진 코드가 생성됩니다. 그래서 직접.. HTML 코드를 추가해야합니다.

저는 사이드바의 태그 위에 구글 광고 코드를 추가했습니다.

<s_sidebar_element>    
    <div class="module module-ad hidden-xs hidden-sm">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 사이드바_구글_광고 -->
    <!--코드 입력-->
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
</s_sidebar_element>

위의 코드에서 <!-- 코드 입력--> 부분에 보여주고자하는 자신의 광고 코드를 넣고 저장을 합니다.

직접 HTML코드를 통해 사이드바에 메뉴를 추가하면 관리자 > 꾸미기 > 사이드바에서 위처럼 보입니다. 

이제 CSS 코드를 추가하면 됩니다.

/* 구글광고 */
.ads {margin-left: -15px; margin-right: -15px; /*background-color: #f5f5f5*/}
.adsence-ct {margin-bottom: 15px;}
.adsence-cb {margin-top: 15px; margin-bottom: 30px;}
.module-ad {margin: 15px 10px;}
.adsence-pb {margin: 15px 0;text-align: center;}

위의 코드를 CSS코드의 제일 아래에 추가하면 됩니다.

저는 스킨제작자님 따라하다보니. 제일 밑에서 약간 위에 코드를 넣었습니다.

사이드바 광고가 제대로 보이게 하는데 필요한 코드는 사실 .module-ad로 시작하는 코드 1줄입니다. module-ad 클래스의 상하여백을 15px로, 좌우여백을 10px로 설정하는 단순한 코드입니다.

나머지 코드들은 없어도 되지만 혹시 추후에 필요할까 싶어 그냥 같이 추가했습니다.

이렇게 하면 사이드바에 광고가 한쪽에 쏠리지 않고~ 중앙에 딱 나옵니다.

4. 느린 로딩.. 치명적

이 스킨의 치명적인 문제였습니다. 깔끔하고 이쁜 디자인이 좋았는데 PC로 접속하면 이전 스킨에 비해 로딩 시간이 꽤 길었습니다. 더 큰 문제는 스마트폰으로 접속을 하면 화면 뜨는데 5초?6초 정도 걸렸다는 점입니다.

이 문제에 대해 개발자님은

fouc부분은 skin.html 파일에서 검색하셔야 됩니다. 

티스토리 구조상 변경불가능한 부분들을 

페이지 로드후 자바스크립트등을 이용하여 강제로 위치이동 및 디자인을 변경하는 부분들을 감추기위해 숨겨놓았다 보여지게 하는 부분에서 답답함을 느끼시곤하더군요. 해당부분들이 fouc 클래스명이 붙어있으니 하나씩 제거하시면서 상태를 확인하시면 됩니다.

해당 스킨이 구버전의 IE 브라우저들 또한 대응하다보니 좀 더 무겁게 느껴질수 있습니다. 만들 당시 제 능력의 한계인 것이죠. 저 또한 국내에서 저의 인터넷환경을 고려하며 만들었던 스킨인지라 외국환경에서는 더욱 느리게 느낄수 있겠네요 ㅠ.ㅠ

preload는 본문에 적혀있듯 스킨 옵션설정 main.js 상단에서 true, false 값을 통해 설정이 가능합니다.

라고 말했습니다. 답답한 정도가 아니라.. 모바일로 테스트하면 심각한 수준이었습니다. ㅜㅜ

너무나 큰 문제였기에 바로 스킨을 변경하려다가.. 위의 답변에서 언급된 fouc가 생각났습니다.

skin.html에 fouc클래스는 5개가 있는데 이 중에서 제일 마지막의 fouc 1개만 제거하니.. 포스팅을 볼 때 로딩속도가 정상적으로 빨라졌습니다.

위의 사진은 수정된 코드이며 원래 코드는 아래와 같았습니다.

<div class="e-content post-content fouc">




     (adsbygoogle = window.adsbygoogle || []).push({});


    if(window.ObserveAdsenseUnfilledState !== undefined){ ObserveAdsenseUnfilledState(); }

                            
        



(adsbygoogle = window.adsbygoogle || []).push({});


        

                                        



                                



            안녕하세요. 드리머즈입니다.좀 전에 티스토리 스킨을 변경했습니다. 아직 세세하게 수정해야 할 부분은 있지만 큰 부분은 설정이 완료된 것 같습니다~1. 스킨 변경 내역기존에 사용하던 스킨은 Readiz님이 만든 fastboot이라는 스킨이었습니다. 아마 티스토리에서 가장 많이 쓰이는 반응형 스킨일 겁니다. 저도 한 4개월 정도 그 스킨을 잘 사용했었습니다. 그런데 스킨을 쓰다보니 눈이 높아져.. 귀찮음을 이겨내고 새로운 스킨으로 변경했습니다.이번에 새로 바꾼 스킨은 흉내쟁이님이 만드신 CCZ-CROSS라는 스킨입니다.http://webdir.tistory.com/491위의 링크에서 다운로드 받을 수 있습니다. 다운로드 받고 기본적으로 바꿔야 하는 설정에 대한 설명도 있습니다.2. 스킨 변경 후 작업 - html 코드스킨을 변경하게 되면 기존 스킨에 추가했던 html 코드들도 날라가게 됩니다.저의 경우 스킨 변경 후네이버, 다음 등의 웹마스터 도구 인증을 위해 쓰였던  <meta>태그의 인증 코드와구글 애널리리틱스를 위한 <script>태그 코드들 다시 추가했습니다.웹마스터 도구의 인증을 위한 <meta>코드는 이제 필요없는 것 같지만 혹시 몰라서 추가했습니다.3. 구글 애드센스 사이드바 광고제 실력이 부족해서 블로그 사이드바에 애드센스 광고 넣는 과정에서 고생좀 했습니다. 저는 블로그 관리자 > 꾸미기 > 사이드바에서 기본 모듈에 있는 [플러그인] HTML 배너출력를 새로 만들어서 구글 광고 코드를 넣으면 될 줄 알았는데 여기서 문제가 발생했습니다. 기본 모듈에 있는 [플러그인] HTML 배너출력을 이용해 메뉴?를 만들면 위 사진처럼 됩니다.위 사진처럼 광고가 오른쪽 정렬된 것처럼 나왔다는 것입니다.이 문제를 해결하기 위해서 문제가 되는 사이드바의 플러그인을 제거하고,관리자 > 꾸미기 > 스킨 편집 > html 편집을 클릭합니다.CSS와 HTML 모두 간단하게 수정해야 하는데, HTML 먼저 수정하겠습니다.코드의 후반부에 보면 <s_sidebar_element>~</s_sidebar_element> 태그가 보이기 시작합니다. 이 태그가 바로 블로그의 사이드바에서 보여지는 메뉴와 관련된 코드들입니다. 좀전에서와 같이 기본 모듈에서 HTML 배너출력을 사용하면.. 바로 이 부분의 HTML이 변경됩니다. 하지만 기본 모듈을 통해 사이드바 메뉴를 추가하면 <div>에 한번 더 감싸진 코드가 생성됩니다. 그래서 직접.. HTML 코드를 추가해야합니다.저는 사이드바의 태그 위에 구글 광고 코드를 추가했습니다.<s_sidebar_element>    
    <div class="module module-ad hidden-xs hidden-sm">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 사이드바_구글_광고 -->
    <!--코드 입력-->
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
</s_sidebar_element>위의 코드에서 <!-- 코드 입력--> 부분에 보여주고자하는 자신의 광고 코드를 넣고 저장을 합니다.직접 HTML코드를 통해 사이드바에 메뉴를 추가하면 관리자 > 꾸미기 > 사이드바에서 위처럼 보입니다. 이제 CSS 코드를 추가하면 됩니다./* 구글광고 */
.ads {margin-left: -15px; margin-right: -15px; /*background-color: #f5f5f5*/}
.adsence-ct {margin-bottom: 15px;}
.adsence-cb {margin-top: 15px; margin-bottom: 30px;}
.module-ad {margin: 15px 10px;}
.adsence-pb {margin: 15px 0;text-align: center;}위의 코드를 CSS코드의 제일 아래에 추가하면 됩니다.저는 스킨제작자님 따라하다보니. 제일 밑에서 약간 위에 코드를 넣었습니다.사이드바 광고가 제대로 보이게 하는데 필요한 코드는 사실 .module-ad로 시작하는 코드 1줄입니다. module-ad 클래스의 상하여백을 15px로, 좌우여백을 10px로 설정하는 단순한 코드입니다.나머지 코드들은 없어도 되지만 혹시 추후에 필요할까 싶어 그냥 같이 추가했습니다.이렇게 하면 사이드바에 광고가 한쪽에 쏠리지 않고~ 중앙에 딱 나옵니다.4. 느린 로딩.. 치명적이 스킨의 치명적인 문제였습니다. 깔끔하고 이쁜 디자인이 좋았는데 PC로 접속하면 이전 스킨에 비해 로딩 시간이 꽤 길었습니다. 더 큰 문제는 스마트폰으로 접속을 하면 화면 뜨는데 5초?6초 정도 걸렸다는 점입니다.이 문제에 대해 개발자님은fouc부분은 skin.html 파일에서 검색하셔야 됩니다. 티스토리 구조상 변경불가능한 부분들을 페이지 로드후 자바스크립트등을 이용하여 강제로 위치이동 및 디자인을 변경하는 부분들을 감추기위해 숨겨놓았다 보여지게 하는 부분에서 답답함을 느끼시곤하더군요. 해당부분들이 fouc 클래스명이 붙어있으니 하나씩 제거하시면서 상태를 확인하시면 됩니다.해당 스킨이 구버전의 IE 브라우저들 또한 대응하다보니 좀 더 무겁게 느껴질수 있습니다. 만들 당시 제 능력의 한계인 것이죠. 저 또한 국내에서 저의 인터넷환경을 고려하며 만들었던 스킨인지라 외국환경에서는 더욱 느리게 느낄수 있겠네요 ㅠ.ㅠpreload는 본문에 적혀있듯 스킨 옵션설정 main.js 상단에서 true, false 값을 통해 설정이 가능합니다.라고 말했습니다. 답답한 정도가 아니라.. 모바일로 테스트하면 심각한 수준이었습니다. ㅜㅜ너무나 큰 문제였기에 바로 스킨을 변경하려다가.. 위의 답변에서 언급된 fouc가 생각났습니다.skin.html에 fouc클래스는 5개가 있는데 이 중에서 제일 마지막의 fouc 1개만 제거하니.. 포스팅을 볼 때 로딩속도가 정상적으로 빨라졌습니다.위의 사진은 수정된 코드이며 원래 코드는 아래와 같았습니다.<div class="e-content post-content fouc"></div>위 코드에서 fouc를 제거하면 됩니다. 이 부분의 fouc를 제거하면 포스트의 로딩 속도가 빨라집니다.포스팅을 볼 때가 아닌 글 목록을 볼 때는 여전히 느린데 이 부분 해결을 위해선 3번째 fouc를 제거해야 하는 것 같습니다.<div class="list-row pos-right ratio-fixed ratio-4by3 crop-center lts-narrow fouc clearfix">그런데 위의 fouc를 제거하면.. 목록에서 사진 뜨는 부분이 신경쓰여 다른 해결방법을 찾고 있습니다.위의 코드에서 fouc를 제거했습니다.그리고 추가로 사용하는 jquery의 버전을 올리면 로딩 속도가 좀 더 개선됩니다.스킨 업로드 전의 skin.html 혹은스킨 업로드 후 관리자 > 꾸미기 > 스킨 편집 > html 편집에서 확인 가능한 코드의 후반부에<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>위 코드처럼 jquery를 가져오는 부분이 있습니다. 이 부분을<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>위처럼 수정하면 꽤나 속도가 개선됩니다.jquery변경 전의 속도jquery변경 후의 속도제가 웹 쪽은 전문가가 아니라 ㅎㅎ 정확히 왜 이렇게 속도가 빨라지는 지는 모르겠네요.어쨋든 크롬의 개발자 도구에서 속도 측정 결과.. jqeury를 바꾸면 속도가 빨라집니다.참고하시기 바랍니다~참고http://ooppa.tistory.com/1754http://cocosoft.kr/구글에서 제공하는 홈페이지 속도 측정 사이트 : https://developers.google.com/speed/pagespeed/insights/
            



                            
        
	
		
			 
			
		
		
			
			
			
			
			(adsbygoogle = window.adsbygoogle || []).push({});
			
		
	

        

                            
        
   if((document.getElementById('adsense1'))!=null){
      document.getElementById('adsense1').innerHTML='<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-6991483396049556" data-ad-slot="2182965933" data-ad-format="auto"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});


   if((document.getElementById('adsense2'))!=null){
      document.getElementById('adsense2').innerHTML='<ins class="adsbygoogle" style="display:inline-block;width:200px;height:90px" data-ad-client="ca-pub-6991483396049556" data-ad-slot="9136625820"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});


   if((document.getElementById('adsense3'))!=null){
      document.getElementById('adsense3').innerHTML='<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-6991483396049556" data-ad-slot="5564232771" data-ad-format="auto"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});


   if((document.getElementById('adsense4'))!=null){
      document.getElementById('adsense4').innerHTML='<ins class="adsbygoogle" style="display:inline-block;width:200px;height:90px" data-ad-client="ca-pub-6991483396049556" data-ad-slot="1931684491"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});


   if((document.getElementById('adsense5'))!=null){
      document.getElementById('adsense5').innerHTML='<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-6991483396049556" data-ad-slot="7436142672" data-ad-format="auto"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});


   if((document.getElementById('adsense6'))!=null){
      document.getElementById('adsense6').innerHTML='<ins class="adsbygoogle"  style="display:block" data-ad-client="ca-pub-6991483396049556"  data-ad-slot="4993791718" data-ad-format="link" data-full-width-responsive="false"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});


   if((document.getElementById('adsense7'))!=null){
      document.getElementById('adsense7').innerHTML='<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6991483396049556" data-ad-slot="5007965744" data-ad-format="link" data-full-width-responsive="true"></ins>';
   }(adsbygoogle = window.adsbygoogle || []).push({});








     (adsbygoogle = window.adsbygoogle || []).push({});


        

</div>

위 코드에서 fouc를 제거하면 됩니다. 이 부분의 fouc를 제거하면 포스트의 로딩 속도가 빨라집니다.

포스팅을 볼 때가 아닌 글 목록을 볼 때는 여전히 느린데 이 부분 해결을 위해선 3번째 fouc를 제거해야 하는 것 같습니다.

<div class="list-row pos-right ratio-fixed ratio-4by3 crop-center lts-narrow fouc clearfix">

그런데 위의 fouc를 제거하면.. 목록에서 사진 뜨는 부분이 신경쓰여 다른 해결방법을 찾고 있습니다.

위의 코드에서 fouc를 제거했습니다.

그리고 추가로 사용하는 jquery의 버전을 올리면 로딩 속도가 좀 더 개선됩니다.

스킨 업로드 전의 skin.html 혹은

스킨 업로드 후 관리자 > 꾸미기 > 스킨 편집 > html 편집에서 확인 가능한 코드의 후반부에

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

위 코드처럼 jquery를 가져오는 부분이 있습니다. 이 부분을

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>

위처럼 수정하면 꽤나 속도가 개선됩니다.

jquery변경 전의 속도

jquery변경 후의 속도

제가 웹 쪽은 전문가가 아니라 ㅎㅎ 정확히 왜 이렇게 속도가 빨라지는 지는 모르겠네요.

어쨋든 크롬의 개발자 도구에서 속도 측정 결과.. jqeury를 바꾸면 속도가 빨라집니다.

참고하시기 바랍니다~

참고

http://ooppa.tistory.com/1754

http://cocosoft.kr/

구글에서 제공하는 홈페이지 속도 측정 사이트 : https://developers.google.com/speed/pagespeed/insights/