jQuery개발자가 밝히는 jQuery Mobile의 장점

자바스크립트를 웹디자이너도 쉽게 사용할 수 있는 친근감이 있도록 만든 것이 바로 jQuery로 이를 만든 John Resig가 다음으로 주목하고 있는 것이 모바일이다. 2010년 10월 처음 알파판이 릴리즈된 jQuery Mobile은 모바일 웹 어플 프레임웍으로 많은 개발자의 관심을 받고 있다.

크로스 브라우저나 브라우저 고유 문제를 피하기 위해 인터렉션을 간단하게 추가하려면 jQuery와 같은 자바스크립트 라이브러리를 이용해야 한다. jQuery는 DOM에 접근하거나 이벤트 추가 및 Ajax를 실행하려는 웹 어플의 개발에 뺴놓을 수 없는 중요한 기능을 가지고 있다. 엄청 다양하고 편리한 기능을 가지는 jQuery는 어떤 웹 어플 구축에 대해서도 최적화된 도구가 되었다.

 

jQuery Mobile은 jQuery 노하우를 살려 개발된 프레임웍이다. jQuery Mobile은 jQuery를 기반으로 만들어 낼 수 있지만, 뛰어난 모바일 어플을 만들기 위해 빠질 수 없는 위젯이나 레이아웃 구조를 모두 가지고 있다. jQuery Mobile로 만든 페이지는 아이폰이나 안드로이드 등의 스마트폰 웹브라우저나 타블렛에서도 기능이 한정되어 있는 모바일 기기에서도 잘 실행된다.

 

jQuery Mobile에는 편리한 요소가 많이 추가되어 있지만, 그 중에서 1개는 HTML5와 CSS3를 조합하는 기능이 있다. 예로, jQuery Mobile에서는 HTML5의 data-*속성을 사용하여 다양한 GUI를 간단하게 생성할 수 있다. 어떤 텍스트링크를 버튼으로 만들고 싶다면,

<a href="index.html" data-role="button">삭제</a>

위와 같이 a태그 요소에 data-role="button"을 추가한 것만으로 완료된다.

아이콘을 추가하고 싶다면, data-icon="delete"를 사용하여 만들 수 있다.

<a href="index.html" data-role="button" data-icon="delete">삭제</a>

래퍼로 data-role="controlgroup"을 사용하면 여러개의 버튼을 쉽게 그룹화할 수 있다.

<div data-role="controlgroup" data-type="horizontal">    <a href="index.html" data-role="button" data-icon="arrow-u">위로</a>    <a href="index.html" data-role="button" data-icon="arrow-d">아래로</a>    <a href="index.html" data-role="button" data-icon="delete">삭제</a>  </div>

또한 jQuery Mobile은 CSS3 기능을 활용하는 것으로 이미지 사용을 줄여, 모바일 기기에 보내지는 파일 크기를 줄여준다. 이동통신 회선이 빨라지고 있지만, 모바일 전용으로 가능한 파일 크기를 제한한다면 사용자의 사용감을 크게 향상될 수 있다.