JS, CSS 압축을 통한 웹 페이지 로딩 속도 향상



인터넷 속도가 원악 빨라져서 모바일 앱과는 다르게 홈페이지 로딩에 대한 별도의 처리를 하지 않는다. 하지만 반응형웹인경우 홈페이지를  PC버전뿐만 아니라 모바일에서 사용하게 되면 로딩속도가 무척 느려지게 된다. 

성능을 조금 이라도 올리기위해서는 모바일용에 맞도록 가볍게 제작을 하면 되지만, 반응형웹이라 따로 제작이 불가능 하다. 그래서 JS와 CSS를 압축해서 조금이라도 사용하는 파일의 크기를 줄이면된다. 


http://www.refresh-sf.com/yui/

개인적으로 위의사이트를 추천한다.


이 사이트를 이용하면 CSS, JS를 압축을 해준다. 압축은 필요없는 공백과 띄어쓰기된 부분을 한줄로 바꿈으로 파일의 용량을 줄이게 된다. 보통 약 20%정도의 파일 사이즈를 줄일 수있다.


코드편집시 한줄로 바껴있기 때문에 보기가 무척 힘드니 원본은 수정시에 보고 실제 사용할 파일을 압축해서 올리면 된다. 

 





Dragend를 이용한 좌우제스쳐 웹페이지 구현

요즘 네이버나 다음 포털 모바일 웹 사이트를 보면 좌우 제스쳐시 페이지가 바뀌는 것을 볼 수 있다. 안드로이드에서는 ViewPager이라는 기능으로 웹에서도 이런 기능을 오픈소스를 이용한다면 쉽게 구현이 가능하다. 이런 기능을 오픈소스가 몇가지가 있지만 개인적으로 Dragend를 추천한다.

간소화된 JS를 이용하여 쉽게 좌우제스쳐 페이지를 쉽게 구현가능하다.

아래는 Dragend를 이용하여 간단한 체스쳐가 되는 페이지를 만들어 보았다. 좌우로 제스쳐를 하면 페이지가 바뀌는것을 볼 수있다.

코드

  <div id="demo">
    <ul>
      <li class="first dragend-page">
      <li class="dragend-page">
      <li class="middle dragend-page">
      <li class="dragend-page">
      <li class="last dragend-page">
    </ul>
  </div>

  <script type="text/javascript" src="../../dragend.js"></script>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var container = document.getElementById("demo");
      new Dragend(container, {
        afterInitialize: function() {
          container.style.visibility = "visible";
        }
      });
    }, false)
  </script>

위의 단 몇줄 만으로 페이지를 구성하는 하다. ul의 li에 오픈소스로 구현된 dragend-page를 class로 설정 후 script에서 div의 id를 읽어와서 상황에 따라 페이지 상태를 처리 하는 방식이다.

데스크탑 환경에서는 이미지를 보여줄때, 또는 자동 롤링기능으로 활용 할 수 있으며, 모바일 웹페이지는 포털사이트처럼 제한된 페이지에서 사용가능한 좋은 UX이기에 활용성또한 대단히 높다.

나눔고딕 웹폰트 무료 호스팅 해주는 곳

블로그를 꾸미다보면 폰트도 자유자제로 바꾸고 싶은 욕심이 들것이다. 폰트도 저작권이 있어서 아무거나 넣기도 힘들다. 네이버에서 나눔서체를 무료로 배포 하고 있기때문에 나눔고딕을 폰트로 쓰면 좋은데, 초보자들에게는 쉽지 않다.

보통 브라우저별로 웹폰트 확장자가 다르기 때문에 브라우저별로 폰트 파일로 만들어서 업로드 한다음 CSS에서 폰트 로드되게 해야 한다. 하지만 이런 나눔고딕 폰트를 무료로 호스팅 해주는 Mobilis가 있기에 아래와 같이 쉽게 구현 할 수 있다.  직접 폰트파일을 업로드 하지 않아도 된다.

그리고 Font-Face 라는 곳을 추천한다. 이곳에도 쉽게 사용할 수 있도록 코드뿐만 아니라, 호스팅도 지원한다.

웹폰트는 사파리는 ttf, 크롬이나 파이어폭스는 woff라는 확장자를 가진다. 아래 코드는 IE를 제외한 브라우저는 무료로호스팅 하는 곳에서 웹폰트파일을 받아오고, IE는 직접 업로드 해서 불러온 것이다.

CSS의 가장 윗부분에 붙여넣으면 적용 된다.

/* 사파리 */
@font-face { 
    font-family:'NanumGothicWeb'; 
    font-style:normal; 
    font-weight:400; 
    src: url('http://api.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.ttf') format('truetype');
}

/* 크롬, 파이어폭스 */
@font-face { 
    font-family:'NanumGothicWeb'; 
    font-style:normal; 
    font-weight:400; 
    src: url('http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.woff') format('woff');
}

/* IE */
@font-face {
    font-family:나눔고딕, 
    MalgunGothic; 
    src:local('나눔고딕'), url(./images/NanumGothic.eot) format('truetype');
};



@charset "utf-8";

*{
        font-family: 'NanumGothicWeb', 나눔고딕;
}

body {
        font-family: 'NanumGothic', 나눔고딕;
}

div {
        font-family: 'NanumGothic', 나눔고딕;
}

부트스트랩 Responsive Utility를 이용한 해상도의 최적화된 레이아웃 구성

Bootstrap의 가장 핵심적인 반응형 웹을 구축 할수 있는 기반이 되는  Responsice Utility Classes를 제공한다. 이 class를 이용하면 화면에 크기변경에 따른 Callback을 해주기 때문에, 메뉴를 보였다가 화면이 작을 경우 숨기는등 해상도 변경에 따른 작업을 할 수 있다.


responsive.less에 클래스가 호출 되는 해상도를 정의 할 수 있다. 









































Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible



기본적으로 위의 해상도에 따라 class가 호출 되며, 사용방법은 아주 간단하다. <span>에 특정 해상도로 변했을때 하는 작업을 하면 된다.





phone
tablet
desktop





아래는 실제 코드로 테스트를 해보았다. 아래는 해상도별로 메시지가 바뀐다.


현재 화면은 폰에 최적화 되어있습니다.

현재 화면은 테블릿에 최적화 되어있습니다.

현재 화면은 데크스톱에 최적화 되어있습니다.



언제 사용하기 좋을까?


구글 에드센스 광고를 붙일경우 크기가 고정이기 때문에, 가로로 긴 광고를 붙이면 테블릿이나 폰의 경우에는 짤리게 된다. 이런 경우에 각각의 해상도에 따라서 화면에 최적화된 광고를 넣으면 좋을 것이다. 




이런 식으로 특정 고정된 크기가 있을 경우 해상도 별로 처리하는 경우 많은 도움이 된다.


부트스트랩 2.3.2 기반으로 작성된 글입니다.





SyntaxHighlighter XML 표준으로 강제 변환하지 않는 방법

SyntaxHighlighter XML 표준으로 강제 변환하지 않는 방법

SyntaxHighlighter로 xml코드를 보여 줄때 xml표준 형식으로 바꿔버린다. 그래서 안드로이드 xml 레이아웃의 경우 길게 늘어져 보기가 힘들어지는데, 

대처 방법은 ”   ” &lt; ” 로 치환 하면 된다.

▷표준으로 바꿔버리는 xml 




    
        
        
        
        
        
    
    
        
    
             
        

▷원하는 대로 표시 되는 xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >
        
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textSize="22sp"
            android:textStyle="bold" />
        
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:onClick="onBack"
            android:layout_alignParentLeft="true"
            android:gravity="right|center_vertical"/>
        
    </RelativeLayout>
        
    <ListView
         android:id="@android:id/list"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_weight="1"
         android:cacheColorHint="@android:color/transparent"
         android:listSelector="@android:color/transparent" />
             
</LinearLayout>

SyntaxHighlighter버그인지 아니면 원래 이런건지, 확실한 해결책은 아닌 것 같다. 좀 더 확인 해 볼 필요가 있겠다.

브라우저별 사용자 폰트 적용하기

브라우저별 사용자 폰트 적용하기

얼마전 부터 티스토리 블로그를 시작하면서 꾸미기에 한창 열을 올리고 있다. 옛날에 CSS를 잠시 해봤었는데, 기억이 가물 가물 해서 주위사람들에게도 물어 보고해서 이제는 어느정도 내가 원하는대로 꾸밀 수 있게 되었다. 

웹이든, 앱이든 모든것의 기본은 폰트다. 폰트하나로 하늘과 땅차이의 디자인을 느낄 수 있다.

그래서 기본인 고딕체를 버리고 나눔고딕을 선택 했다. 나눔고딕을 선택한 이유는 일단 무료다. Rix, 윤디자인체들이 이쁘지만 웹폰트지원안하는 경우도 있고, 라이센스가 비싸다. 

IE의 경우 옛날부터 커스텀 폰트를 사용하는 법을 알았는데, 사파리나, 크롬, 파이어폭스는 안먹히는것이다.

자료를 좀 찾아 보니 브라우저별로 폰트적용하는 CSS들이 다르다는 것을 알았다.

아래는 브라우저별로 다르게 font-face를 적용한 css이다.

/* 사파리 */
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; 
src: url('./images/NanumGothicCompact.ttf') format('truetype');}

/* 크롬, 파이어폭스 */
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; 
src: url('./images/NanumGothic.woff') format('woff');}

/* IE */
@font-face {font-family:나눔고딕;
src:local('나눔고딕'), url(./images/NanumGothic.eot) format('truetype');};

브라우저별로 지원하는 포멧이 다르다.

사파리 TTF

크롬, 파이어폭스 WOFF

인터넷익스플로러 EOT

한가지 팁을 준다면 나눔고딕 폰트를 포멧별로 호스팅해주는 사이트가 있으니 직접 서버에 업로드 할 필요 없이 쓸 수 있으니 참고하자.

http://api.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.ttf

http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.woff

Google+ 플랫폼을 이용한 블로그(티스토리)에 +1 Button 플러그인 사용

Google+ 플랫폼을 이용한 블로그(티스토리)에 +1 Button 플러그인 사용


 


 


얼마전 Facebook 소셜 플러그인을 이용해 댓글 기능및 좋아요 버튼등에 대한 글을 올린적이 있다.


2013/02/25 – [개발관련/Web] – Facebook Social Plugins을 이용한 블로그(티스토리)에 댓글 기능 추가


 


 


요즘 들어 SNS 서비스중인 플랫폼 업계가 이러한 확장성을 높이기위해 플러그인을 제공하고 있다.


이번에 소개할 플러그인으로 구글+ 플랫폼에서 제공하는 +1 Button이다.


 


 



 


구글+ 플랫폼은 안드로이드에서 막강하다. 안드로이드는 기본적으로 구글의 계정을 이용하게 되어 있기 때문에 이미 구글+에 로그인 되어있다는 최대의 장점을 들 수있다.


안드로이드 플랫폼 뿐만 아니라 iOS, 웹들도 API를 지원하고 있다.


 


 


그럼 블로그(티스토리)에 +1 Button을 넣어보자.


 


먼저 https://developers.google.com/+/web/+1button 에 방문하여 버튼사이즈, 언어, 가로넓이등을 지정하면 옆에 CODE가 나온다.


 


 




 


 






 


 


CODE를 잠시보면, Facebook의 소셜플러그인 과 비슷하다.


 


해당 위치에 CODE 를 넣으면 되는데, data-href=”http://www.kmshack.kr[ ##article_rep_link## ]”만 해당 페이지의 URL 을 주면 된다.


 






 


 


위와 같은 +1 Button 을 볼 수있다.


+1 Button은 +1기능 뿐아니라 공유도 할 수 있다.


또한 Google+ Platform을 이용하면 얼마전 공개된 Sign-in과 Badge, Share, Snippet 등의 플러그인을 사용 할 수 있다.