요약 : ajaxForm 플러그인 beforeSubmit 옵션에 function(){ return $('.myForm').valid(); } 를 넣어 주면 된다.

나는 폼 관련 처리를 할 때 가장 많이 사용하게 되는 게 jQuery ajaxForm 플러그인과 validation 플러그인인 것 같다.

그런데 이 둘을 동시에 사용하게 되면 validate 플러그인이 작동을 하지 않는다.

이 때 해결책은 간단하다. ajaxForm 문서를 살펴 보면 beforeSubmit이라는 옵션이 있는 것을 볼 수 있다. 서브밋하기 직전에 수동으로 validate를 작동하면 된다.

$('.myForm').ajaxForm({
  beforeSubmit: function(){
    return $('.myForm').valid();
  },
  success: thisIsSuccess
});

이렇게 문서를 잘 보면 문제를 잘 해결할 수 있다.

관련글:

1. jQuery ajaxForm plugin을 사용해 보자
2. jQuery Form Validation Plugin 폼 검증 플러그인 간단 사용법
3. ckeditor에서 jquery ajaxform 사용하게 해 주는 플러그인
4. [jQuery] 플러그인 만들기 (2) 기본값 설정
5. [jQuery] 플러그인 만들기 (1)

내 블로그 검색어 유입 순위를 보고 깜짝 놀랐다.

‘아이폰 iOS5 하트’가 5등 먹었다. 그러나 연결되는 글은 안타깝게도 iOS5에서 단축키 기능을 사용하는 것에 대한 설명이다.

왠지 모를 책임을 통감하고 오늘은 하트 넣는 방법을 설명해 드리겠다.

일단 아이폰 한국어 키보드엔 하트가 없다.(이럴 수가!)

그래서 하트를 넣으려면 일본어 키보드를 넣거나, 이모티콘 키보드를 넣으면 된다.

그러나 내가 추천하는 방법은 iOS5의 새로운 기능인 키보드 단축키 기능을 활용해서 자신이 자주 사용하는 특문 몇 개만 넣어 두는 방법이다.

이모티콘 키보드 사용

설정 > 일반 > 키보드 > 다국어 키보드 > 새로운 키보드 추가 > 이모티콘 선택

가장 간단한 방법이지만, 아이폰끼리만 사용하는 특수문자기 때문에 일반폰에 보내면 깨진다.

일본어 자판 사용 – 특수문자 하트 사용하기

일본어 키보드엔 특수문자 하트가 있다. 따라서 일본어 키보드를 추가하고 사용하면 모든 기기에 호환되는 하트를 넣을 수 있다.

설정 > 일반 > 키보드 > 다국어 키보드 > 새로운 키보드 추가 > 일본어(Ten Key) 선택

일본어 키보드에서 하트를 입력하는 방법은 다음과 같다. 일본어 키보드 자판에서

좌측 하단 지구본 터치 > ☆123 터치 > 1을 두 번 터치 

이러면 하트를 만날 수 있다. 일본어 키보드 자판엔 다양한 특문이 있으니 활용하면 된다.

키보드 단축키 기능 사용

사실 이게 내가 제일 좋아하는 방식이다. 특문 하나 때문에 키보드를 추가하는 건, 타자칠 때 꽤 사람 번거롭게 만든다.

일단 아이폰에서 하트를 복사해 둔다. 이메일로 보내든가 문자로 보내든가 웹에서 긁든가 그런 건 알아서 준비한다.

설정 > 일반 > 키보드 > 단축키

위 메뉴에 들어가서, ㅎㅌ 따위의 문자열과 ♥나 ♡를 연결하면 된다. 이런 식으로 다양한 특문을 연결해 놓고 쓰면 유용하다. 나는 ㄲㅅ와 《》 표시를 연결해 두고 사용한다. 책 제목을 적을 때 정말 유용하다.

워드프레스 플러그인 중에 Google Analyticator라는 게 있다. 포럼도 있다. 여기 있는 코드를 활용하면 아주 간단하게 추적을 할 수 있다. (워드 프레스를 사용하는 사람이라면 설치하고 설정에서 활성화해 주면 끝이다.)

위 플러그인을 다운받아 압축을 풀면 external-tracking.js 라는 파일도 있다. 이게 외부 링크와 다운로드 링크를 추적하는 코드다. 이놈을 그냥 파일에 넣으면 되는데, 코드 두 줄을 위에 삽입해 줘야 한다.

플러그인 설정은 js에 쓸 수가 없기 때문에 js파일에 포함돼 있지 않은 거다. 그래서 수동으로 넣어 줘야 하는 거다. 코드는 간단하다.

var analyticsFileTypes = ['pdf','zip','mp3'];
var analyticsEventTracking = 'enabled';

이렇게 파일의 맨 위에다 넣는다. 위의 파일타입 부분에 원하는 파일 타입들을 넣어 주면 되겠다. 그리고 페이지에 포함한다. 그러면 끝!

관련글:

1. [구글 아날리틱스] 트위터, 페이스북 퍼가기 추적 (소셜 네트워크 트래킹)
2. 구글 아날리틱스 통계를 바탕화면에 띄워놓고 실시간으로 보자
3. [구글 아날리틱스] 여러 개의 URL을 하나의 URL로 통계 잡기(ex. /asdf.html 을 /asdf 로 잡기)
4. [번역] 구글 아날리틱스 5의 9가지 멋진 기능
5. [PHP] 구글 아날리틱스 통계 그래프를 홈페이지에 달기

요약 : Frontpage Manager는 별로다. 태그와 한글 처리를 제대로 못한다. Auto Excerpt Everywhere 플러그인이 좋다. 자동으로 모든 곳에 적용되고 한글 처리도 잘 한다.

블로그 툴들은 기본적으로 첫화면에 최신글을 보여 주거나 여러 개의 글을 펼쳐서 보여 준다. 이러면 일단 보기가 별로다. 느린 컴에선 속도도 느려질 수 있다. 관리하는 내 입장에서 통계를 잡을 때 별로고, 트래픽도 부담이다. 그래서 첫 화면에선 목록과 앞부분 문장을 보여 주는 게 좋다고 생각한다.

지금까지 Frontpage Manager를 사용해 왔는데, 이유는 간단했다. 다른 걸 못 찾아서였다. 그런데 아무래도 짜증이 났다. Read More 같은 단어에 한글을 사용하면 깨졌다. 글자 수 제한을 걸 때 역시 한글을 사용하면 깨졌다. 그래서 아예 내가 커스터마이징까지 했다.

그러다가 오늘 문득 생각이 들었다. “다른 플러그인을 찾으면 되잖아!” 그래서 좀더 검색을 해 봤다. wordpress frontpage plugin으로 검색해 봤다. 그리고 여러 글을 읽었다. 그 와중에 발견한 게 바로 Auto Excerpt Everywhere 플러그인(개발자 홈페이지)이다.

정말 간단했다. 설치만 하니까 카테고리, 기본 검색, 첫 페이지 모두에 적용이 됐다. 한글 처리도 잘 했다. 그래, 별 다섯 개 받을 만하네. 앞으론 이 놈을 쓰고 추천해야겠다.

관련글:

1. [워드프레스] 카테고리 한꺼번에 바꿔주는 플러그인
2. [워드프레스] custom field까지 설정할 수 있는 강력한 검색 플러그인 : Relevanssi – A Better Search
3. [워드프레스] 블로그의 깨진 링크를 찾아 주는 플러그인 Broken Link Checker
4. ie6에서 margin: auto 하면 문제가 있다
5. 워드프레스 3.2를 소개한다. 자기 PHP 버전을 확인하라.

요약 : 자기 사이트의 어떤 페이지에 악성 코드가 유포되고 있는지 확인하고 싶은 사람들은 아래 폼에 사이트 주소를 입력해 보면 되겠다.

내 이야기 – 구글 웹마스터 도구가 내 웹사이트에 악성 코드가 있다고 우긴다

얼마 전부터 구글 웹마스터 도구에 들어가면 내 블로그에서 악성 코드가 감지됐다고 나온다. 나는 사이트를 사용하는 데 아무 문제가 없었기 때문에 의아했다.

검토 요청을 두 번이나 했는데 해제되지 않았다. 코드를 모두 다운받아 백신으로 검사를 해 보기도 했다. 악성코드는 발견되지 않았고, 크롬과 구글 검색에서도 사이트를 이용하는 데 아무 문제가 없었다.

그래도 메세지가 자꾸 나오는 건 찜찜하기 때문에 안내문에 있는대로 StopBadware.org에 방문해 봤다.

홈 화면에 있는 내용은 악성 코드에는 어떤 게 있는지에 대한 설명이었다. 자바스크립트, .htaccess 파일 변경, 그리고 iframe 방식의 악성 코드가 있다고 설명하고 있었다.

어떤 페이지가 악성 코드에 감염됐는지 확인하는 방법

그리고 어떤 페이지가 악성 코드에 감염됐는지를 알려면 아래처럼 URL을 써서 들어가 보라고 했다.

http://www.google.com/safebrowsing/diagnostic?site=mytory.co.kr

나이스! 저렇게 쳐 봤더니 아무 문제가 없다고 나왔다.

mytory.co.kr의 현재 상태는 어떤가요?? 의심스러운 사이트로 등록되어 있나요?

현재 이 사이트는 의심스러운 사이트로 등록되지 않았습니다.

최근 90일 동안 이 사이트의 일부에서 의심스러운 활동이 9회 발생한 것으로 기록되었습니다.

Google이 이 사이트를 방문했을 때 어떤 현상이 발생했나요?

최근 90일 동안 해당 사이트의 173개 페이지를 테스트한 결과 0개 페이지에서 악성 소프트웨어가 사용자의 동의 없이 다운로드 및 설치되는 것으로 나타났습니다. Google이 이 사이트를 마지막으로 방문한 것은 2012-02-10이고, 최근 90일 동안에는 이 사이트에서 의심스러운 콘텐츠가 전혀 발견되지 않았습니다.이 사이트는 AS4766 (Korea Telecom)을(를) 포함한 1개의 네트워크에서 호스팅되었습니다.

이 사이트가 멀웨어를 확산시키는 중개 역할을 한 적이 있나요?

mytory.co.kr은(는) 최근 90일 동안 웹사이트를 감염시키는 중개 역할을 하지 않은 것으로 보입니다.

이 사이트가 멀웨어를 호스팅한 적이 있나요?

아니요, 이 사이트는 최근 90일 동안 악성 소프트웨어를 호스팅하지 않았습니다.

다음 단계:

• 이전 페이지로 돌아가기
• 이 웹사이트의 소유자는 Google 웹마스터 도구를 이용해 사이트 점검을 요청할 수 있습니다. 점검 절차에 대해 자세히 알아보려면 Google의 웹마스터 도움말 센터를 참조하세요.

아니, 의심스러운 거 안 했다면서 왜 자꾸 웹마스터 센터에선 나한테 그러는 거냐고! 여튼간에 그래서 다시 검토 요청을 했다.

관련글:

1. bing 웹마스터 센터
2. [크롬] 개발자 도구에서 아작스 추적 활성화하기

▶jqMobi 웹사이트 | jqMobi 데모

아이폰에서 돌려 봤는데 확실히 반응이 jQuery Mobile보다 빠르다. 근데 이게 지속 가능해야 할 텐데. 지금 섣불리 적용했다가 나중에 jQuery Mobile 성능이 열라 좋아지면 어쩌지? 물론, jQuery Mobile은 훨씬 넓은 기기에 적용하는 걸 목적으로 하는 터라 그렇게 되진 않을 지도 모르지만 말이다.

여튼간에 갈무리해 둔다. 속도가 맘에 든다.

문법이 jQuery Mobile과 같은지 다른지는 확인 안 해 봤다.

대충 살펴 봤는데 함수와 HTML 구조는 많이 비슷한 것 같다.(jQuery 기본 함수는 당연히 다 쓸 수 있을 것이고, 내부구조를 덮어 쓴 것일 터다.) 그렇다면 어느 정도 이전하는 게 쉽겠다는 생각이 든다. 그러나 1분 정도 살펴 본 것이기 때문에 섣불리 내 말을 믿고 결정을 내리진 않기 바란다. (jQuery Mobile로 만든 프로젝트에서 js만 jq.mobi로 바꾸는 걸 해봤는데 js만 바꾸는 걸로는 안 되고 나름의 문법 수정을 거쳐야 하는 듯하다.)

아래는 jqMobi, jQuery Mobile, Sencha Touch를 비교한 jqMobi 측의 영상이다.

readme.md

아래는 jqMobi를 다운받으면 포함돼 있는 readme.md 파일 내용을 그대로 옮기고 일부 번역한 것이다. 도움이 될 거다. 영어라는 점만 빼면  OTL;;

jqMobi – HTML5를 타겟으로 한 자바스크립트 프레임워크

jqMobi는 HTML5 브라우저를 타겟으로 한 자바스크립트 프레임워크다. W3C 쿼리를 지원하는 번개처럼 빠른 쿼리 셀렉터 라이브러리를 사용한다.

이것은 세 부분으로 구성돼 있다.

1) jqMobi – 쿼리 셀렉터 라이브러리

2) jqUi – 웹킷 브라우저[크롬, 사파리, 안드로이드 기본 브라우저 등 - 녹풍]에서 돌아가는 모바일 어플리케이션을 위한 UI/UX 라이브러리. Kitchen Sink 폴더에 가서 데모를 보라.

3) jqPlugins – 웹킷 브라우저에서 돌아가는 모바일 어플리케이션을 위한 플러그인들.

jqMobi에 대해

모바일 개발을 하면서, 우리는 유명한 쿼리 셀렉터 라이브러리들에 만족할 수가 없다는 것을 금세 알게 됐다. 그것들은 때로 성능이 별로였고, 용량이 컸고, 구식 데스크톱 브라우저(인터넷 익스플로러 6)를 지원했다. 모바일 개발을 타겟으로 하는 새로운 라이브러리가 몇 개 있었지만, 스피드 테스트를 해 보면 실제로는 느렸다.

우리는 우리 개발 커뮤니티에서 이야기를 시작했고, 그들에게 뭘 원하는지 물었다. 핵심은 다음과 같았다.

1. 빨라야 한다. ( Fast performance)
2. 코드가 적어야 한다. (Small code base)
3. 실제로 필요한 명령만 지원하면 된다. (Only needs to support a small subset of commands)

다른 라이브러리를 개선하려고 노력하기보다는, 다른 프레임워크 밖에서 우리가 새로 짓는 게 낫다는 것을 알게 됐다. but recognizing the groundwork other frameworks laid out. 이렇게 함으로써, 우리는 속도를 향상시킬 수 있는 간단한 방법을 찾았다. 우리 테스트를 보면, 단순 반복 작업에서 2배 이상 빠르다는 것을 알 수 있다.

그룹작업에서도 비슷했다.

jqMobi 사용하기

jqMobi를 쓰려면, html 파일에 script를 포함해야 한다. 미리 마련해 둔, 용량을 최소화시킨 버전을 사용할 수 있다.

<script src="jq.mobi.min.js"></script>

이것은 작업을 할 수 있는 객체 두 개를 만들 것이다. 이것은 이미 있는 $ 객체를 덮어쓰지 않는다.

$("#main")
jq("#main")

쿼리 셀렉터 Query Selector

W3C에서 지정한 쿼리를 지원한다. 이게 의미하는 바는 다음과 같은 방식을 사용할 수 있다는 거다.

 $("input[type='text']")

다음과 같이 사용할 수는 없다. 브라우저에서 지원하지 않는 것은 jq.mobi도 지원하지 않는다.

 $("input:text")

몇몇 함수에서는 셀렉터를 몇 개 더 사용할 수 있다. 이것은 문자열, 배열 혹은 jqMobi 객체가 될 수 있다. 우리는 현재 함수를 지원하지는 않는다.

문법:

기본적인 호출

 $("#id").hide()

돔 엘리먼트, 셀렉터, 노드 목록, 혹은 HTML 문자열을 특정할 수도 있다.

 $("span").bind("click",function(){console.log("clicked");});
 // -> 모든 span 엘리먼트를 찾아서 click 이벤트를 건다.

HTML 문자열을 넘겨 주면 그러면 객체를 만들어 준다.

var myDiv=$("<div id='foo'>") //Creates a div object and returns it

jqMobi API 함수들

[아래 함수들은 jQuery 사용자라면 알 만한 것들이라서 번역하다가 말았다.]

 .length() // 선택한 모든 엘리먼트의 개수를 리턴한다.
 .find() // 인자값에 넣은 셀렉터에 맞는 자식 엘리먼트를 리턴. $('#myId').find('span.myClass') 하는 식으로 쓴다.
 .html() // .innerHTML을 리턴.
 .html('new html') // 내부의 내용을 new html로 바꿔치기한다.
 .text() // 내부의 텍스트를 반환한다. .innerTEXT 와 같다.
 .text('new text') // 내부의 텍스트를 new text로 바꿔치기한다.
 .css('property') //Gets the first elements desired css property
 .css('property','value') //Sets the elements css property to value
 .empty() //Sets the elements .innerHTML to an empty string
 .hide() //Sets the elements display css attribute to "none"
 .show() //Sets the elements display css attribute to "block"
 .toggle() //Toggles the elements display css attribute
 .val() //Gets the first elements value property
 .val("value") //Sets the elements value property
 .attr("attribute")// Gets the first elements desired attribute
 .attr("attribute","value") //Sets the elements attribute with the value
 .removeAttr("attribute") //Removes the attribute from the elements
 .remove() //Remove an element from the Dom
 .addClass("className") //Adds the css clas name to the selected elements
 .removeClass("className") //Removes a css class from the selected elements
 .hasClass("className") //Checks the first element to see if the css class exists
 .hasClass("className",_element) //Checks the passed in element to see if the css class exists
 .bind("event",function(){}) //Binds a function to the event listener selected to the selected elements
 .unbind("event") //Unbinds a function to the event listener selected to the selected elements
 .trigger("event",data) //Trigger an event on the selected elements and pass in optional data
 .append(element) //Appends an element to the selected elements
 .prepend() //Prepends an element to the selected elements
 .get() //Returns the first element from the selected elements
 .get(2) //Returns the third element from the selected elements
 .offset() //셀렉터로 선택한 놈들 중 첫 번째 놈의, 화면에서의 위치를 구해 준다. [참고 : jQuery .offset - 녹풍]
 .data(param,value)// data-* 형식의 어트리뷰트를 세팅한다.
 .data(param) //data-* 형식의 어트리뷰트를 가져온다.
 .parent(selector) //Returns the parent nodes based off selector
 .children(selector) //Returns the children of the elements
 .siblings(selector) //Returns the siblings the elemnts
 .filter(selector) //Filters the elements based off selector
 .not(selector) //Filters the elements based off the selector. Returns matches that do NOT match the selector
 .end() //Used in conjuction with filtered results to get the previous jqMobi object
 .isArray(param) //Returns true/false if param is an array
 .isFunction(param) //Returns true/false if param is a function
 .isObject(param) //Returns true/false if param is an object

jqMobi Ajax 호출

.get(url,callback)
//Makes an Ajax request to the URL and executes the callback funtion with the result

.post(url,data,callback,dataType) 
//Makes an Ajax POST request to the URL with the data and executes the callback with the result. An optional dataType can be passed in, as some webservices require the header

.getJSON(url,data,callback) 
//Makes an ajax request with the data and executes callback function passing in a JSON object from the Ajax response into the callback function.

좀더 제어하는 게 필요하면 다음과 같이 사용할 수 있다.

.ajax {
   type:'POST', //defaults to GET
   url:'/api/getinfo', //defaults to window.location
   contentType:'application/json', //defaults to application/x-www-form-urlencoded
   headers:{},
   dataType:'application/json', //defaults to text/html
   data:{username:foo}, //Can be a Key/Value pair string or object.  If it's an object, $.serialize is called to turn it into a Key/Value pair string
   success:function(data){}, //function to call on successful Ajax request
   error:function(data){}, //function to call when an error exists in the Ajax request
}

URL에 =? 패턴이 있으면, jsonP request가 만들어질 거다. 이런 것들은 오직 GET request만 된다.

jqMobi Helper 호출

.param() //Serialize a JSON object into KVP for a querystring
 .parseJSON(string) //Backwards compatability JSON parsing call. Uses the browsers native JSON parser
 .parseXML(string) //Parses a string and returns a XML document version

jqMobi OS 체크 기능

 $.os.webkit //True if webkit found in the user agent
 $.os.android //True if anroid useragent
 $.os.ipad //True if iPad useragent
 $.os.iphone //True if iPhone user agent
 $.os.webos //True if WebOS detected
 $.os.touchpad //True if WebOS and Touchpad user agent
 $.os.ios //True if iPad or iPhone
 $.os.blackberry //True if Blackberry PlayBook or OS >=6

플러그인

jqMobi는 플러그인을 붙일 수 있도록 확장성있게 만들어졌다. 플러그인을 만들기 위해 대부분이 하는 것처럼 메인 jqMobi 객체의 레퍼런스에 보내서 $.fn을 확장하면 된다.

(function($){
  $.fn['foo']=function(){
     alert("bar");
  }
})(jq);

Contribute

누구나 코드를 받아서 코어 코드에 기여할 수 있다. 그리고 코드를 요청할 수 있다. 우리가 일회성 기능을 추가하고 싶어하지 않는다는 것을 명심하라.이것은 플러그인으로 잘 다뤄질 것이다.

Bugs

버그를 찾았을 때 보고하기 위해 github를 이용해 주기 바란다.그리고 다음 것들을 알려 달라.

1. Any error messages from the console
2. Line numbers of offending code
3. Test cases
4. Description of the Error
5. Expected result
6. Browser/Device you are testing on

License

jqMobi is is licensed under the terms of the MIT License, see the included license.txt file.

관련글:

1. [jQuery plugin] 오른쪽 위에 반투명 메세지 박스 띄우는 플러그인 jgrowl
2. [링크] jQuery를 이용한 네비게이션 바(상단 메뉴)
3. jQuery를 이용해 스크롤바 따라다니는 레이어 만들기(IE6,IE7,IE8,크롬,사파리,파폭)
4. [동영상]구글 애드센스 수익 지급받기
5. [링크] jQuery 이미지 슬라이드 갤러리/뷰어 모음

아래 링크 건 글을 참고해서 드롭박스 용량을 5기가 추가했다 ㅋㅋㅋ 만쉐~! 근데 꼭 알아야 할 사항이 그 글에 빠져 있는 듯해 내가 추가로 적었다.

이 글에서 유일하게 빠져있는 점은, 이 글에 링크돼 있는 드롭박스가 베타버전이며, 베타버전을 설치해야만 용량늘리기를 할 수 있다는 점이다. 그래도 나역시 드롭박스가 설치돼 있음에도 불구하고 위 글에 링크된 파일을 다운받아서 새로 설치했다.

자동실행도 안 되서 애먹었는데, 내 글의 맨 하단에 보면 해결책이 있다.

나머지는 이 글에서 시키는대로 하면 된다. 아마 드롭박스가 카메라에서 사진과 동영상을 바로 드롭박스 폴더로 꺼내 주는 서비스를 하면서 베타 테스트를 하고 있는 듯하다. 한 번 할 때마다 500MB씩 10회 제공해서 총 5기가를 주는데, 위 글을 한 방에 5기가를 받는 방법을 설명한 글이다.

▶드랍박스 용량 5기가 무료로 더 늘리기 강좌

내가 설명해 볼까?

위 글은 이미지와 함께 친절히 설명돼 있다. 난 시간이 없어서 이미지는 못 붙이겠고, 다만 논리적으로 설명해 보겠다.

위 글의 핵심은 5기가 분량의 동영상과 사진을 동기화하는 부분이다. 재치만점 아이디어 만점이다.

1. 일단, USB에 5기가 이상의 동영상과 사진을 담는다. 꼭 한 번에 할 필요는 없으니 1기가 정도 담아서 다섯 번 해도 된다. 아이폰도 된다.
2. USB를 꽂고 자동실행이 나오면 드롭박스에 보내는 걸 선택한다. 영어로 나오겠지만 설마 못 알아 보지는 않겠지;; (자동실행이 안 되면 이 글 하단을 참고하라)
3. 일단 USB에서 컴퓨터의 드롭박스 폴더에 Camera Uploads 라는 폴더가 새고 생기고 거기로 복사가 시작된다. 복사가 끝날 때까지 기다린다.
4. 복사가 끝나면 동기화가 시작된다. 화면 우측 하단 트래이에 들어가 있는 드롭박스 아이콘에 마우스 우클릭을 하고 Pause Sync를 누른다. 그러면 동기화가 정지된다.
5. Camera Uploads 폴더에 가 보면 파일명이 날짜로 변해서 다 들어 있을 거다. 전부 선택해서 지워 버린다. 그러면 드롭박스 서버에는 총 5기가 분량의 파일을 올렸다가 지운 걸로 인식되나보다.
6. 지운 후 다시 우측 하단 트래이 영역의 드롭박스 아이콘에 마우스 우클릭하고 Resume Sync 를 선택해 준다. 자, 싱크할 게 뭐 있나? 폴더 다 지웠으니 지웠다는 것만 싱크가 될 거다.
7. ㅇㅋㅇㅋ 좋아 좋아. 5기가를 올렸다가 지웠으니 5기가 추가 용량을 준다! 이렇게 되고 끝!

이 이벤트는 뭔가를 올리면 500메가를 주는 이벤트다. 따라서 4.5기가를 초과해서 올리면 아마 5기가를 주게 될 거 같다. 이상!

윈도우 자동실행이 안 되는 경우

그리고 윈도우 자동실행이 안 되는 경우는 ‘Step by Step: Windows 7에서 자동 실행이 안됨’을 참고하면 된다. 여기 나오는 해결책 4개를 차례로 해 보라. 나는 레지스트리를 수정하는 방식으로 해서 성공했다. 윈도우 자동실행이 안 되서 애좀 먹었다.

드롭박스 이벤트 소개 원문

드롭박스 자체의 이벤트 페이지 같은 건 없고, 포럼에서 유저들을 대상으로 이벤트하는 것 같다. 여기가 드롭박스 자체의 이벤트 소개다. 물론 영어다.

베타 버전이 새로 나올 때마다 예전 글은 닫고 새 글을 올리는 것 같다. 그래서 내가 지금 링크한 놈(v1.3.15)도 곧 구식이 될 수 있다. 그러면 포럼에서 베타로 검색한 후 최신버전을 받으면 된다.

참고로 세 번째 있는 15는 그냥 정수로 생각해야 한다. 예컨대, 1.3.7과 1.3.15 중에는 1.3.15가 더 최신버전인 거다.

난 1.3.13 버전으로 했다. 내가 처음에 소개한 블로그의 글에 있는 게 이 버전이다. 최신 버전을 쓰면 설명한 꼼수가 안 될지도 모르겠다는 생각이 들어서 그냥 안전하게 블로그의 글에 있는 파일을 다운받아서 했다. ㅋ

관련글:

1. 드롭박스 – 특별한 웹하드
2. 드롭박스, 친구 추천 없이 용량 늘리기

이 글은 제이콥 닐슨의 글 Mobile Sites vs. Apps: The Coming Strategy Shift 를 요약한 것입니다.

닐슨의 요약 : 모바일 앱이 현재는 모바일 사이트보다 사용성이 좋다. 그러나 미래에는 모바일 사이트가 전략적 우위를 점하게 될 거다.

모바일에 진출할 때 많은 회사들이 앱인지 웹인지 묻는다. 이걸 제대로 못하면 망할 거다. 모바일에서 데스크탑 사이트를 거의 못 보게 만들어 놓은 회사들은 근본적으로 모바일 사용이란 걸 얻을 수가 없을 거다.

하지만 만약 모바일 유저에게 어필하고 있다면 이제 모바일 앱을 만들어야 할까 모바일 사이트를 만들어야 할까 질문하게 될 거다. 이건 미래의 가능성을 얼마나 보느냐에 따라 대답이 달라진다.

현재의 모바일 전략 : 앱이 최고

• 모바일 사이트가 데스크탑 사이트보다 낫다. 하지만 앱이 훨씬 낫다. (닐슨의 모바일 사용성 보고서)
• 앱은 각 디바이스의 제한사항에 맞춰 최적화할 수 있다. 브라우저에서 모바일 웹은 그러지 못한다.
• 네이티브 애플리케이션은 데스크탑을 포함해 모든 플랫폼에서 웹보다 우위에 있다. 물론 데스크탑은 워낙 강력해서 웹의 성능도 뛰어나고, 그래서 웹으로 많은 일을 할 수 있다.
• 반면 모바일 웹은 사용성이 빈약하다 : 작은 화면, 느린 연결속도, 비싼 상호작용 비용(특히 타이핑. 더블클릭과 위에 올려놓기를 못하는 것도), 손가락은 너무 두꺼워서 정교한 조작을 할 수 없다 : 디바이스가 취약하면 최적화를 더 잘 해야 한다.
• 대부분의 앱스토어는 결제 수단을 갖추고 있어서, 콘텐츠 제공자에게 돈벌이 기회를 준다. 웹에서는 그렇지 못하다.
• 마지막으로, 인터넷 대역폭에 대한 닐슨의 법칙과 컴퓨터 파워에 대한 무어의 법칙을 고려하자. 인터넷 대역폭은 향후 10년 동안 57배 빨라질 테지만, 컴퓨터 하드웨어는 100배 강력해질 거다.(지금에 비하면 몬스터급 하드웨어) 다른 말로 하면, 네이티브 코드를 돌리는 건, 인터넷에서 뭔가를 다운로드하는 것보다 두 배 큰 장점을 갖게 될 거라는 거다.

미래의 모바일 전략 : 사이트가 최고

• 미래엔 모바일이 낫다.
• 컴퓨터가 100배 강력해질 거라는 말이, 아이폰14가 아이폰4S보다 100배 빠를 거라는 말은 아니다. 배터리 같은 거 포함해서 100배 강력해진다는 말이다. 근데 다운로드 속도는 실제로 57배쯤 빨라질 거다.
• 앱의 비용이 비싸진다 : 모바일 운영체제의 종류가 증가하고, 같은 운영체제에서도 서브 카테고리가 생길 거기 때문이다. 예컨대 iOS는 이미 아이폰과 아이패드로 갈라졌다.(아이패드 사용성 보고서) 둘의 UI는 완전히 다르다. 안드로이드도 킨들 파이어가 나왔다.
• 반면에 모바일 사이트는 3단계 정도만 맞추면 된다. 모바일 사이즈, 중간 사이즈, 데스크탑 사이즈. 웹의 기본 디자인은 6.8인치와 7.5인치 화면 모두에서 잘 돌아갈 거다. (5인치 폰에는 근본적으로 다른 디자인이 필요하다. 내용을 훨씬 요약적으로 전달해야 한다.)
• 가장 중요한 것은 HTML5 같은 기술이 모바일 사용성을 지속적으로 개선한다는 거다. 우리는 이미 파이낸셜 타임스와 플레이보이가 수익구조 문제로 모바일 웹을 앱처럼 꾸며서 사용하는 걸 보고 있다.(파이낸셜 타임스의 모바일 웹) 미래엔 앱스토어의 검열, 수익구조 문제뿐 아니라 더 효과적인 구현 때문에 웹으로 가는 경우도 생길 거다.
• 마지막 이득은 써드파티 어플리케이션을 통합하는 데 드는 비용이 싸다는 것이다. 앱은 이게 어렵다. 장기적으로 보면 인터넷이 작고 닫힌 환경(각 모바일 운영체제에 맞춰진 앱스토어)을 이길 거다.

언제 전략을 갈아타야 하나?

이건 6만 4천 달러짜리 질문이다. 정확히 말하면 대부분의 회사에게 그렇다. 어떤 회사에겐 백만 달러짜리 질문일 거다.

불행히도, 난 모른다. 사용성 통찰은 사용자들에게 다양한 환경에 뭐가 가장 좋은지 말해줄 수 있어도 환경이 실제 세계에서 언제 변할지 예언해 주진 않는다. 경험상, 내 기대보다 환경은 훨씬 느리게 변한다.

나는 키보드 없는 모바일 디바이스에 대해 말한 적이 있다. 또, 몇 달 뒤, 유럽 업체들이 웹 없는 모바일 폰에 열중하다가 대륙의 업체들에게 주도권을 뺏기게 될 거라고 예측한 바 있다. 두 예측은 모두 맞았다. 7년이나 지나서 아이폰이 나오면서 말이다.

더 안 좋은 경우도 있다. 2001년에 나는 모바일 기기가 곧 쓸만해 질 거라고 말했다. 물론이다. 그런데 그 ‘곧’은 6년을 의미했다.

좋은 모바일 디자인은 내가 느끼기에 거의 가까이 왔다. 나는 무엇이 필요한지는 잘 안다. 하지만 그게 얼마나 어려운지는 모른다. 하지만, “맑은 시야와 짧은 거리를 혼동하지 말라”는 유명한 말을 생각하자. 고백하지만, 이 칼럼을 쓴 처음 10년 동안은, 신기술의 잠재력에 너무 열정적이어서 틀린 예측을 했다. 반면, 예측이 맞았을 때는 보수적이었을 때다.

결론적으로: 길게 보면 모바일 사이트가 낫다. 하지만, 언제 그렇게 될지는 확실치 않다. 지금 모바일 사용자에게 최고의 경험을 주고 싶다면 내 조언은 앱을 개발하라는 거다.

더 알고 싶다면

▶원문인 Mobile Sites vs. Apps: The Coming Strategy Shift 의 하단에 가면 있다. 어차피 영어니까. 여기 가면 Usability of Mobile Websites & Applications라는 298달러짜리 PDF책자 판매 링크와 닐슨이 개최하는 각종 세미나 정보가 있다. 물론 유료겠지.

일단 코드부터.

/**
 * Google Analytics 이벤트 추적을 위한 글로벌 변수
 */
var _gaq = _gaq || [];

$(document).ready(function(){
  이벤트걸기_구글아날리틱스로_소셜네트워크_추적();
});

function 이벤트걸기_구글아날리틱스로_소셜네트워크_추적(){

  //Google+는 알아서 추적되므로 걸 필요가 없다.

  var title = document.title;
  var path = location.pathname.replace(/.html/,'');

  $('.retweet_this').click(function(){
    _gaq.push(['_trackSocial', 'twitter', 'share', title, path]);
    $(this).unbind('click');
  });

  $('.me2day_button').click(function(){
    _gaq.push(['_trackSocial', 'me2day', 'share', title, path]);
    $(this).unbind('click');
  });

  $('.facebook_button').click(function(){
    _gaq.push(['_trackSocial', 'facebook', 'share', title, path]);
    $(this).unbind('click');
  });

  //페이스북 좋아요 버튼 추적
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like', title, path]);
      });
      FB.Event.subscribe('edge.remove', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'unlike', title, path]);
      });
      FB.Event.subscribe('message.send', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'send', title, path]);
      });
    }
  } catch (e) {}  

  //트위터 팔로우 버튼 추적
  twttr.events.bind('follow', function(event) {
    if (event) {
      _gaq.push(['_trackSocial', 'twitter', 'follow', title, path]);
    }
  });
}

구글 아날리틱스가 제공하는 소셜 트래킹

일단 참고한 문서는 Social Interaction Analytics(소셜 네트워크 상호작용 분석) 이다. 소셜 추적에 사용되는 Tracking Code: Social Plug-in Analytics(추적 코드: 소셜 플러그인 분석 – _trackSocial() 메서드에 대한 설명이다) 도 참고했다.

이거 외에도 구글이 제공하는 소셜 트래킹 예제 코드를 참고할 수 있다.

구글 아날리틱스는 방문자가 내 웹사이트에서 어디어디를 다녀갔는지, 얼마나 머물렀는지, 어디서 왔는데, 어떤 브라우저를 쓰는지 등등 다양한 것을 추적해 주지만, 웹사이트 분석에서 매우 중요한 소셜 네트워크 상호작용이 얼마나 일어나는지는 말해 주지 못한다. 왜?

1. 페이스북 좋아요, 트위터 트윗 버튼은 모두 iframe을 사용한다.
2. 커스텀 URL로 퍼가기를 만들더라도, 이건 모두 외부 URL로 빠지는 것이기 때문에 자동으로 추적되지 않는다.

그런데 사이트의 상호작용을 추적하는 것은 매우 중요하다. 분석은 단지 누가 얼마나 왔냐에 그쳐선 안 되고, 누가 얼마나 와서 무엇을 했는가가 중요하다. 내 사이트에 오래 있었던 게 원하는 걸 못 찾고 헤매서인지, 원하는 걸 찾고 기분이 좋아져서 더 돌아다닌 것인지 알 수 없다. 이럴 때 누군가 “좋아요”를 누른 것을 알게 된다면, 이 사람은 내 사이트가 좋아서 돌아다녔다는 것을 알 수 있다.

여튼 웹사이트 분석 분야에서 최신 트렌드는 사용자의 마음을 읽어내려는 분석이다. 이걸 정성적 분석이라고 한다. 한자로는 定性的. 대비되는 단어는 정량적 분석이다.

여튼, 방문자들의 소셜 네트워크 활동을 추적해서 통계를 내는 건 중요한 일이다. 그래서 처음엔 구글 아날리틱스의 단순 이벤트 기능을 활용해서 그렇게 하려고 시도하다가, 개발자 문서에서 재밌는 걸 발견했던 것이다. Social Tracking Method(소셜 네트워크 추적 함수)라는.

단순 링크는 추적 명령을 내리기 쉽다

위의 코드에서 맨 윗줄의 .retweet_this 링크를 보자. 이건 내가 직접 만든 링크다. 링크 코드는 아래와 같다.

<span class="retweet_this">
  <a target="_blank" href="http://twitter.com/share?text=%22%EC%82%AC%ED%8C%8C%ED%8B%B0%EC%8A%A4%ED%83%80+%EB%B4%89%EA%B8%B0%2C+%EA%B7%B8+%ED%9B%84+10%EB%85%84%22&amp;url=http://left21.com/article/1234&amp;via=left21twit" title="트위터로 퍼가요">
    <img src="http://left21.com/images/icon_twitter_21x21.png" alt="트위터로 퍼가요">
  </a>
</span>

코드를 보면 알 수 있겠지만, 그냥 내가 만든 코드다. 트위터에서 받은 게 아니다. 즉, iframe이 아니라 그냥 a 태그다. 따라서 아래처럼만 써 주면 알아서 추적을 한다.

  $('.retweet_this').click(function(){
    _gaq.push(['_trackSocial', 'twitter', 'share', title, path]);
    $(this).unbind('click');
  });

retweet_this 클래스를 가진 객체를 클릭하면 바로 twitter 에 대한 share가 일어난 것으로 기록하게 한 거다.

위 코드에서 눈여겨 볼 것이 바로 _gaq.push 부분이다. 각 인자값에 대한 설명은 Setting Up Social Analytics 항목에 잘 나와 있는데, 하나씩 설명을 해 보자.

일단 함수는 이게 기본형이다.

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

함수를 사용하려면 _gaq.push 에 인자값으로 넣어 주는 배열의 맨 앞에 함수 이름을 써 주면 된다. 그래서 이 경우엔 맨 처음에 들어간 놈이 ‘_trackSocial’이다. 이건 그냥 이렇게 써야 하는 거다. 나머지가 진정한 인자값이다. 설명해 보겠다.

1. network : twitter, facebook, me2day 따위, 즉, 소셜 네트워크의 이름을 쓴다. 정해져 있는 건 없으니 알아서 쓰면 된다.
2. socialAction : like, share, tweet, follow, me2 따위를 쓴다. 역시 정해져 있는 건 없다.
3. opt_target : 앞에 opt가 붙은 이유는 필수 요소가 아니기 때문이다. 소셜 네트워크 상호작용이 일어난 곳을 지칭할 수 있는 거라면 뭐든 쓰면 된다. 내 코드를 보면 알겠지만, 나는 document.title 을 넣었다. 구글 예제에는 URL을 넣어 놨더라. 이 인자값은 입력하지 않아도 되며, 그러면 자동으로 URL이 들어가게 된다.
4. opt_pagePath : 경로를 적어 주는 부분이다. 내 코드를 보면 알겠지만, ?이하 쿼리를 무시할 수 있도록 location.path 를 사용했다. 도메인까지는 적지 않는 모양이다. 구글 예제엔 path와 ?이하 쿼리 부분을 모두 추적하게 해 놨더라. 역시 이 인자값은 입력하지 않으면 자동으로 path와 ?이하 쿼리 부분을 기록한다.

$(this).unbind('click');

이 코드는 왜 쓴 걸까? 링크로 된 퍼가기 버튼이기 때문이다. 만약 이렇게 클릭 이벤트를 해제하지 않으면, 한 사용자가 퍼가기 버튼을 두 번 눌렀을 때 소셜 상호작용이 2회로 추가되게 된다. 그런데 한 사용자가 퍼가기 버튼을 왜 두 번 누르겠는가? 뭔가 잘못됐기 때문에 그럴 거다. 그러면 이건 1회로 쳐야 하는 거다. 그러니까 최초로 눌렀을 때만 횟수에 추가하고, 다음에 또 눌렀을 때는 횟수에 추가하지 않기 위해서 이렇게 한 거다.

페이스북 좋아요/좋아요 취소/보내기 버튼 추적

일단 구글+는 아날리틱스가 알아서 자동으로 추적하므로 굳이 추적 함수를 따로 적어 줄 필요가 없다.

앞에서 내가 설명한 a 태그로 된 링크 버튼과 달리 트위터나 페이스북에서 직접 제공하는 좋아요 버튼이나 트윗 버튼은 iframe 방식으로 돼 있다. 해당 iframe을 감싸고 있는 span 객체에 click 이벤트를 걸어 봤지만, 추적하지 못하는 것을 확인했다.

따라서 트위터와 페이스북에서 직접 제공하는 좋아요/트윗 버튼을 추적하려면 구글에서 제공하는 방식을 따라야 한다. 정확히 말하면, 구글에서 제공하는 방식도 트위터와 페이스북에서 제공하는 API를 보고 만든 것이다. 따라서 정리하자면, 이 방법은 각 소셜네트워크 서비스가 제공하는 API의 콜백 함수에 구글 아날리틱스 추적 함수 실행을 추가해 주는 것이라고 할 수 있다.

이 방법에 따른 페이스북 추적 코드는 아래와 같다.

  //페이스북 좋아요 버튼 추적
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like', title, path]);
      });
      FB.Event.subscribe('edge.remove', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'unlike', title, path]);
      });
      FB.Event.subscribe('message.send', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'send', title, path]);
      });
    }
  } catch (e) {}

FB는 페이스북 좋아요/좋아요 취소/보내기 등의 작동을 할 때 사용하는 객체다.

34번째~37번째 줄을 보자. 이건 만약, FB 객체도 있고, FB.Event도 있고, FB.Event.subscribe 도 있으면 FB.Event.subscribe의 콜백에다가 콜백 함수를 넣어 주는 것이다.

'edge.create' 라는 인자값은 edge.create 라는 이벤트가 일어났을 때 이놈을 콜백으로 넣으라는 말이 되겠다. edge.create는 우리가 쉽게 아는 말로 하면 ‘좋아요’가 되겠다. 그래서 구글 아날리틱스 추적 함수에는 like라고 이름을 붙여 준 것이다.

그 아래쪽의 콜백 거는 코드 두 개는 좋아요 취소와 보내기에 해당하는 놈들이다. 내가 이걸 붙인 사이트에는 좋아요 버튼밖에 없어서 보내기에 해당하는 건 추적할 필요가 없었지만, 그래도 나중에 혹시 추가할 지 모르기 때문에 그냥 보내기까지 추적하도록 세팅했다.

트위터 트윗/팔로우 버튼 추적

트위터 역시 기본적으로 페이스북 좋아요 추적과 마찬가지다.

  //트위터 팔로우 버튼 추적
  twttr.events.bind('follow', function(event) {
    if (event) {
      _gaq.push(['_trackSocial', 'twitter', 'follow', title, path]);
    }
  });

트위터가 사용하는 객체는 twttr 다. 여기서는 콜백 함수를 사용하기 위해 twttr.events.bind 함수를 사용한다. 그리고 이벤트명을 적어 줘야 하는데, jQuery bind 함수를 써 본 사람은 알겠지만, 첫 번째 인자값으로 이벤트명을 문자열로 넣어 준다.

내가 위 코드를 넣은 사이트에서는 트위터가 제공하는 걸로는 follow 버튼만 사용하고 있기 때문에 follow만 추적하라고 저렇게 썼지만, 트윗 버튼을 단 사람은 이벤트명을 'tweet'이라고 적어 줘야 한다. 실제 구글이 제공하는 예제 코드에서는 트윗만 추적한다.

즉, 두 개 다 넣어 주면 되는 거다.

아날리틱스에 알려 주는 함수 실행부에 대해서는 굳이 또 설명하지 않겠다.

확인해 보기

구글 아날리틱스에서 소셜 활동을 확인하는 건 간단하다. 일단 구글 아날리틱스의 최신 버전을 사용하고 있어야 한다. 우측 상단을 보면 새 버전 사용 뭐 이런 말이 있을 거다.

그리고 표준보고서 > 잠재고객 > 소셜 항목에 가면 있다. 추적 내용을 볼 수 있다.

비동기식 통신의 한계를 극복하는 _gaq 변수

일단 구글 아날리틱스의 최신 추적 코드를 사용한다면 _gaq 변수를 쓸 줄 알아야 한다. 설명을 보면 나와 있는데, 이렇게 세팅을 해 준다.

var _gaq = _gaq || [];

일단 코드의 뜻은 _gaq가 있으면 _gaq를 그대로 사용하고, 없으면 빈 배열을 만들라는 거다.

빈 배열은 왜 만들까?

간단한 원리인데, 최신 방식의 구글 아날리틱스는 비동기식 자바스크립트로 구동된다. 페이지가 로딩된 후에 구글 아날리틱스의 js를 받아 온다는 거다. 그런데 미처 구글 아날리틱스의 스크립트가 다 로드되기 전에 사용자가 페이스북 좋아요 버튼을 누른다면? 추적이 안 될 위험이 있다. 이걸 회피하기 위해 일단 _gaq 배열을 만들어 버리는 거다.

push 함수는 알겠지만, 배열에 추가로 내용을 집어넣는 함수다. 만약 구글 아날리틱스 스크립트가 다 로드되기 전에 _gaq 변수에 내용이 들어간다면, 나중에 로드된 구글 아날리틱스 js는 이 배열 안에 있는 정보를 구글 아날리틱스 서버로 보낸다.

다 로딩된 다음에도 잘 작동한다. 구글 아날리틱스에서 로드된 _gaq 객체는 push라는 함수를 갖고 있다. 그래서 함수 문법 그대로 _gaq.push를 실행해 주면 바로 구글 아날리틱스 서버로 정보를 전달하게 된다.

구글 짱이다 ㅋㅋ

이상 구글 아날리틱스로 소셜 네트워크 상호작용 추적하기를 마친다.

[추신] 뭐 굳이 이런 것까지 말해야 할까 싶긴 하지만, 이건 전적으로 내 웹사이트에서 일어나는 상호작용만 추적하는 거다. URL을 복사해서 붙여넣기하는 방식으로 퍼간 거? 추적 안 된다. 북마클릿으로 퍼간 거? 역시나 추적 안 된다.

관련글:

1. [Google Analytics] pageTracker is not defined 라는 메세지는 무엇일까?
2. 페이스북 공유/좋아요 했을 때 이미지 지정해 주기
3. 페이스북 관련 개발 공부용 링크들
4. [javascript] keypress에서 keyCode는 사용하지 않는다. charCode 혹은 which를 사용한다.
5. [링크] 페이스북 플랫폼 업그레이드에 따른 프로필 변경사

jQueryUI는 기본적으로 날짜 선택 UI인 datepicker를 제공한다. 하지만 시간 선택 UI를 제공하지는 않는다. 그래서 timepicker plugin들을 찾아 봤지만 그닥 만족스럽진 않았다.

그런데 어제 굉장히 괜찮은 놈을 발견했다. 바로 Any+Time 이라는 놈이다. 라이센스는 Creative Commons BY-NC-SA 3.0 이다. 간단히 말하면 비영리에 한해 무료다.

UI는 아래와 같다.

테마라고 써 있는 부분에서 알 수 있듯이, jQueryUI의 기본 테마를 그대로 이용한다.

이렇게 날짜와 시간을 한꺼번에 선택하게 할 수도 있다. 하지만 이정도까지 UI를 쓰면 좀 어지럽다.

▶웹사이트 가기 | 데모는 코드설명 중간중간에 있다. demo로 검색하라.

관련글:

1. jquery time picker 시간 선택 플러그인
2. [jQuery:링크] 단계별 진행 플러그인
3. [jQuery] 열라 이쁜 툴팁 플러그인(티스토리 각주 스타일)
4. jQuery 툴팁 플러그인 – 마우스 올리면 설명이 나오게 해 주는 플러그인
5. [소개:영어] 꼭 알아야 할 신종 jQuery 플러그인 10종