jQuery Mobile에 대한 소개


요즈음 웹 개발에 있어서 하나의 중추적인 트렌드로 자리 잡은 것이 바로 모바일 웹 개발이다. 모바일 웹 개발이라고 하면 흔히 하는 생각으로 막연하다는 느낌부터 들 것이다. 1세대의 모바일 웹 개발은 확실히 HTML보다 가벼워야 했고 하드웨어의 제한 사항이 큰 편이었기 때문에 WML과 같은 메타 언어의 존재감이나 그 수요가 분명했다. 하지만 모바일 기기와 일반 PC의 사양 차이가 날이갈수록 좁혀짐은 물론 이제 모바일 기기가 경우에 따라서는 일반 PC나 랩톱 컴퓨터보다 훨씬 더 유용해지고 쓰임새가 많아지게 되면서 이런 구분이 모호해지게 된다.


필자 역시 모바일 웹 개발을 해야 할 필요성을 자주 느끼게 되었다. 당장 가지고 있는 스마트폰인 Windows Phone 7.1 (이름하여 망고폰)을 비롯해서 주변 지인들이 빠짐없이 가지고 있는 아이폰, 아이팟, 아이패드, 그리고 안드로이드 계열이나 크롬 북을 포함하여 상당히 많은 수의 브라우저들을 고려하는 모바일 웹 사이트가 필요했다. 물론 이들 모두 일정 수준 이상의 HTML5와 CSS3, 그리고 자바스크립트 렌더링 엔진을 갖추고 있긴 하지만 특유의 해상도 제한이나 성능 제한, 그리고 결정적으로 고밀도의 선택이 가능했던 마우스를 대신하여 터치 인터페이스에 최적화된, 이전보다 훨씬 둔감한 조작을 이해할 수 있는 인터페이스를 디자인해야 한다는 것이 난제가 되었다.


기존 웹 기술을 최대한 보존하면서도 검증된 프레임워크의 이점을 누릴 수 있는 방법이 없을까 고민하다가 아주 훌륭한 프레임워크를 테스트해보게 되었고 그 내용을 블로그를 통하여 간단하게 소개하고자 한다. 바로 jQuery Mobile이다.


jQuery Mobile과 jQuery의 차이점?


그냥 얼핏 듣기에 jQuery Mobile과 jQuery는 큰 차이점이 없어보인다. 오히려 어떻게 보면 jQuery의 축소 버전이 아닌가 하는 생각이 들 수도 있다. 하지만 이 둘 사이의 정확한 관계는, jQuery Core를 기반으로 만들어진 Extension이 jQuery Mobile이며, jQuery Mobile은 단순히 기능 집합을 축소한 것이 아니라 오히려 모바일 환경에 알맞도록 확장시킨 일종의 확장팩에 해당되는 개념이다.


사실, 여러분이 어떻게 jQuery Mobile을 사용하는가에 따라서 jQuery 특유의 자바스크립트 기술을 전혀 사용하지 않을 수도 있다. jQuery Mobile이 제공하는 몇 가지 규칙에 맞추어 웹 페이지를 프로그래밍한다면 나머지 시각 효과, 간단한 검색 기능, 심지어 대화 상자 기능까지 자동으로 jQuery Mobile이 알아서 처리해주기 때문이다.


jQuery Mobile을 가장 잘 활용할 수 있는 방법


이제까지 여러분은 자바스크립트 모듈을 어떤 방식으로 사용해왔는가? 대개는 웹 사이트 안에 들어가는 부속품 정도로 여기고 이것을 같은 웹 사이트 안에서 서비스하도록 구성하는 일이 많았다. 그리고 웹 서버에 대한 트래픽이나 부하가 일어나지 않도록 하기 위하여 적절한 Cache Timeout 설정을 사용하여 클라이언트가 jQuery 라이브러리를 지속적으로 재사용할 수 있는 방안을 적용해왔을 것이다.


그렇지만 기왕 최적화를 할 요량이면 밀어 붙일 수 있는 곳까지는 밀어붙여보는 것도 나쁘지 않을 것이다. jQuery는 물론 jQuery Mobile까지 여러분의 웹 서버가 아닌 곳으로 레퍼런스를 걸 수 있는 방법이 요즈음 유행하고 있다. 즉, CDN 서버를 이용하는 방식으로, jQuery를 비롯한 몇 가지 유명한 자바스크립트 및 공통적인 웹 자원들을 공개적으로 서비스하는 곳이 있고 이곳의 라이브러리를 가져다 쓰는 방식이다.



jQuery의 경우 jQuery 프로젝트 팀이 자체적으로 운영하는 CDN 서비스가 있으며, Microsoft의 ASP.NET AJAX CDN, 그리고 잘 알려진 Google의 CDN 서비스까지 모두 세 가지 유형의 CDN 서비스를 사용하여 jQuery 및 jQuery Mobile 자바스크립트 라이브러리를 개별 웹 페이지에 붙여넣을 수 있다.


CDN에 대해서 간단히 설명하면, CDN 네임스페이스 상의 특정한 URL에 대해서 요청이 발생하면 해당 리소스에 대한 사본을 CDN 네트워크 상에서 현재 위치로부터 가장 가깝거나 혹은 빠른 응답 속도를 보이는 서버로부터 데이터를 가져와 클라이언트로 내려보내는 서비스이다. 물론 이 과정을 수행할 수 있도록 하기 위하여 원본 서버가 필요하고 이 원본 서버로부터 데이터를 가져와서 네트워크 상에 고속으로 배포하는 작업은 필수적이다. 글로벌 CDN으로 불리는 서비스들은 당연히 이러한 CDN에 큰 비용을 투자할 수 있는, 그리고 전세계적인 네트워크 망을 보유할 수 있는 기업이어야 할 필요성이 있으며 이러한 기업으로는 대표적으로 Google과 Microsoft가 있는 셈이다.


Microsoft CDN을 이용하여 jQuery 시작하기


각각의 CDN 서비스들마다 자바스크립트를 제공하는 방법에는 차이점도 있고 장단점도 있지만 여기서는 Microsoft의 CDN 서비스를 사용하는 경우를 예로 들어 설명하고자 한다. 당연한 이야이기이지만 Microsoft CDN에서는 jQuery를 Visual Web Developer의 JavaScript Intellisense와 연계할 수 있는 vsdoc 버전의 자바스크립트 라이브러리를 CDN 버전으로 제공받을 수 있다. Microsoft CDN 서비스로부터 여러분이 가져오고 싶은 자바스크립트 코드를 카탈로그로부터 가져오기 위하여 아래 웹 사이트를 찾아볼 수 있다.


http://www.asp.net/ajaxlibrary/cdn.ashx


위의 웹 사이트에 구체적인 설명이 잘 나와있지만 이 웹 페이지에서는 여러분이 상황에 맞게 쓸 수 있도록 코드 조각을 정리하여 설명하려고 한다.


만약 여러분이 jQuery 1.5.1 버전을 http 버전 프로토콜로 연결하려고 하면 아래와 같이 <HEAD> 태그 내부에 Child Element로 기술하면 된다.


http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js


만약 HTTPS 기반 웹 사이트를 사용 중이고 여기서 CDN을 사용하려고 한다면 프로토콜 접두사만 바꾸면 HTTPS 버전의 CDN도 이용할 수 있다.


https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js


만약 VSDOC 버전을 연결하려고 하면 아래와 같이 min 대신 vsdoc으로 이름을 바꾸면 된다.


http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.vsdoc.js


jQuery UI를 사용하기 위해서는 CSS 파일, 이미지 파일, 그리고 자바스크립트 파일에 대한 참조가 필요한데, CSS 파일에 대한 참조만 정확하다면 이미지 파일들의 경로는 신경쓰지 않아도 된다. 그리고 jQuery UI는 jQuery를 기반으로 하는 프레임워크이므로 jQuery에 대한 참조가 필수이다. 그리고 테마는 여러분이 http://www.asp.net/ajaxlibrary/CDNjQueryUI1816.ashx 페이지에서 1.8.16 버전에 해당되는 미리 제공되는 테마 중에서 하나를 택하여 CSS 파일에 대한 참조만 정확히 지정하면 된다. 이런 설정을 바탕으로 jQuery UI를 CDN에서 가져올 때 Redmond 테마 버전으로 가져오고자 한다면 아래와 같이 코드 조각을 쓸 수 있다.


<link rel=”stylesheet” href=”http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css” media=”all” type=”text/css” />
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js


그리고 jQuery Mobile을 사용하려 한다면 아래와 같이 작성한다.


<link rel=”stylesheet” src=”http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.css” media=”all” type=”text/css” />
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js
http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.js


jQuery Mobile의 경우 HTML5 마크업을 사용하는 것이 중요하다. Custom Attribute에 대한 지원이 필수적이기 때문이다. 이 부분에 대한 설명은 다음 기회로 넘기기로 하겠다.

댓글 남기기