![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
모바일 개발이 착수되어, 많은 개발자들은 서로 다른 모바일 플랫폼에 대해 동일한 애플리케이션을 반복적으로 쓰는 것이 아니라 모바일 웹 경로로 가는 것을 선택하고 있다. 하지만 "웹으로 가는 것"으로 인해 포기하는 것 중 하나는 고유의 모바일 애플리케이션의 개발자들에게 유용한 애플리케이션 프레임워크이다. 그 결과, 여러 웹 애플리케이션 프레임워크가 부상하고 있다. 이 네 개 파트로 된 시리즈에서 이러한 프레임워크 중 네 가지인 SproutCore, Cappuccino, jQTouch 및 Sencha Touch에 대해 살펴볼 것이다. 이러한 프레임워크의 기능을 비교하고, 모바일 웹 애플리케이션을 빌드하기 위한 사용의 장단점을 평가할 것이다.
이 기사에서는 jQTouch의 개요를 보여준다. 이전에 언급한 대로 이 프레임워크는 jQuery를 기반으로 한다. jQuery에 대해 이미 알고 있다면 jQTouch는 매우 익숙할 것이다. jQTouch에 익숙한 것이 이 기사에 필요한 조건은 아니지만 JavaScript, HTML 및 CSS의 지식은 필요하다. 여기의 코드 모두 순전히 클라이언트측이며 어느 웹 서버에나 배치될 수 있다. 이 기사를 위해 jQTouch 1.0-beta2가 jQuery 1.3.2로 사용되었다. 이러한 도구에 대한 링크는 참고자료를 참조한다.
지금까지 이 시리즈는 Apple의 Cocoa 애플리케이션 프레임워크에서 크게 차용한 두 개의 웹 애플리케이션 프레임워크들을 고려했다. 이러한 프레임워크는 웹의 핵심 프리젠테이션 기술인 HTML과 CSS를 추상화한다. Cappuccino 프레임워크는 많은 JavaScript조차도 추상화하여, 이를 자체적인 프로그래밍 언어인 Objective-J로 바꾼다. jQTouch 프레임워크는 훨씬 다른 접근방식을 취한다. 이는 핵심 웹 기술을 포괄하며, 일반적인 보일러판 태스크를 더 간편하고 더 직관적으로 만들어준다.
jQTouch를 매력적으로 만드는 주된 사항은 jQuery의 위에 빌드한다는 점이다. 모바일별 기능과 스타일링을 애플리케이션에 추가하는 것은 기술적으로 jQuery 플러그인이다. 특히, 이는 iPhone의 기능을 활용하도록 설계된 스타일과 시각 효과를 추가한다. 많은 기능들이 다른 모바일 디바이스에서도 잘 작동한다고 하더라도 jQTouch는 당연히 iPhone을 염두에 두고 설계되었다. jQTouch 위에 빌드된 간단한 모바일 웹 애플리케이션에 대해 살펴보자.
이전에 언급한 대로 jQTouch 프레임워크는 웹 애플리케이션 개발에 대해 SproutCoure 및 Cappuccino와 같이 다른 프레임워크들과는 매우 다른 접근방식을 취한다. 이는 이러한 프레임워크와도 일부 공유점이 있다. 마찬가지로 이를 통해 서버에서부터 간단히 데이터를 검색하고 클라이언트 측에서 전체 사용자 인터페이스를 생성할 수 있다. 하지만 이러한 프레임워크와는 달리 이러한 접근방식을 사용하도록 요구하지 않는다. 정말로 이는 단지 JavaScript가 아니라 HTML과 CSS에서 빌드한다. 이를 확인하려면 기본을 사용하여 시작하자.
이 시리즈의 앞선 두 개의 기사를 읽었다면 jQTouch로 빌드할 애플리케이션은 매우 익숙할 것이다. 이는 인트라넷 웹 애플리케이션에 대한 직원 디렉토리이다. 이 시리즈의 이전 설치에 사용된 것과 동일한 데이터를 로드할 것이다. 하지만, jQTouch는 더 모바일 위주 사용자 인터페이스 요소들을 제공하기 때문에, 이는 결과적으로 더 나은 UI를 갖게 될 것이다. 테이블 형식과 목록 형식 둘 다에서 데이터를 보여줄 것이다. 목록 1과 같이 홈 화면으로 시작하면, 사용자가 데이터의 목록과 테이블 형식 사이에 선택할 수 있다.
목록 1. 애플리케이션 에센셜 및 홈 화면 코드
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Intranet Employee Directory</title>
<style type="text/css" media="screen">
@import "jqtouch/jqtouch.min.css";
</style>
<style type="text/css" media="screen">
@import "themes/jqt/theme.min.css";
</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
icon : 'icon.png'
});
</script>
</head>
<body>
<div class="home">
<div class="toolbar">
<h1>Employees</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#list-style">List</a>
</li>
<li class="arrow"><a href="#table-style">Table</a>
</li>
</ul>
</div>
</body>
</html>
|
목록 1의 코드에는 jQTouch 애플리케이션의 에센셜이 들어있다. CSS 파일 두 개와 JavaScript 파일 두 개가 포함되었다. jQTouch를 사용하려면
JavaScript 파일이 둘 다 필요하다. 이는 jQuery 라이브러리와 jQTouch 플러그인 라이브러리가 들어있다. 또한 첫 번째 CSS 파일(jqtouch.min.css)을 보유해야 한다. 다른 CSS 파일은 선택적 테마이다. jQTouch에는
두 개의 테마가 포함되어, 하나는 iPhone(Cocoa Touch) UI이고 또 다른 하나(jqt)는 더 중립적이다. 목록 1에서 jqt 테마 CSS 파일이 포함되어 있다. 마지막으로 jQTouch
오브젝트를 초기화한다. 많은 선택사항들이 이 생성자에 전달될 수 있다. 여기에서 하나의 애플리케이션 아이콘을 지정했으며,
그림 1과 같이 사용자가 애플리케이션을 '설치하는' 경우 이를 사용할 것이다.
그림 1. iPhone 홈 화면에 설치된 모바일 웹 애플리케이션
목록 1로 다시 돌아가서, 나머지 코드는 기본 HTML이다. home 클래스가 있는 div가 있다. 이 클래스에는 특별한 내용이 없다. 하지만 jQuery에 익숙하다면
이를 jQuery에서 하나의 페이지로 인식하게 될 것이다. 웹 애플리케이션에서 각 페이지(화면)는 하나의 HTML 페이지에서 div가 될 것이다. 따라서 이 경우에 이 페이지에
toolbar 클래스가 있는 맨 위에 div가 있다.
이 특수 클래스는 핵심 jQTouch CSS 파일에서 정의된 몇 가지 스타일 중 하나이다. 그 다음으로 edgetoedge 클래스—또 다른 jQTouch 스타일—가 있는 순서화되지 않은 목록이 있다. 목록의
각 항목은 HTML 페이지의 또 다른 섹션으로의 링크이다. 다시 말해, 이는 웹 애플리케이션의 페이지들 사이에 연결하기 위한 또 다른 일반적인 jQuery 패러다임이다. 그림 2는
목록 1에서 작성된 애플리케이션이 iPhone에 어떻게 나타나는지 보여준다.
그림 2. iPhone에서 홈 화면
그림 2는 상대적으로 간단한 사용자 인터페이스를 보여준다. 이를 작성하기 위해 필요한 모든 코드는 목록 1에 있다. 이 시점에서 사용하는 것은 모두 HTML이다. 목록의 요소들도 클릭 가능하여, 애플리케이션의 다른 페이지로 연결할 것이다. 하지만, 이러한 페이지들은 올바르게 작동하기 위해 일부 Ajax 로드된 데이터가 필요할 것이다. 이후에 확인 가능한 대로 Ajax는 jQuery가 뛰어난 또 다른 공간이다.
지금까지는 jQTouch의 모바일 최적화된 스타일을 활용하여 간단한 HTML을 취하여 이를 세련된 모바일 사용자 인터페이스로 변환하였다. 이제 동적 목록과 동적 테이블을 둘 다 생성하자. 먼저, 목록 2와 같이 이러한 인터페이스에 대한 데이터를 검색하자.
목록 2. Ajax로 데이터 검색하기
$(document).ready(function(){
$.getJSON('employees.json', function(data){
data.forEach(addEmployee);
});
...
});
function addEmployee(e){
addEmployeeToList(e);
addEmployeeToTable(e);
}
|
목록 2에서는 기본 jQuery 기능만 사용하고 있다. 초기 페이지가 로드되면 바로 서버에서부터 Ajax를 사용하여 데이터를 로드한다. 이는
$(document).ready 함수를 사용하여 jQuery를 간편하게 만들어주는 웹 개발의 일반적인 패러다임이다. 이 함수는 입력 매개변수로서의 함수를
취한다. 이 경우에 클로저로도 알려져 있는 익명의 인라인 함수를 사용했다. 이 클로저는 초기 페이지가 로드를 완료하면 바로 실행될 것이다. jQuery는 Ajax 요청과 응답으로 작업하기 위한
수많은 편의 기능을 제공한다. 이 경우에 데이터는 JSON으로 형식화될 것이므로, jQuery의 getJSON 함수를 사용한다. 이는 요청의 URL 엔드포인트를 표현하는
문자열을 취한다. 그 함수는 HTTP GET를 이 URL로 요청하도록 배후에서 XMLHttpRequest 오브젝트를 사용할 것이다.
그 함수는 Ajax 요청이 서버로부터 성공적으로 리턴될 때를 위해 또 다른 함수를 콜백으로 취한다. (이는 또한 오류를 처리하기 위해 또 다른 선택적
callback 함수도 취할 수 있지만, 이 예제를 간단하게 유지하기 위해 그 내용은 남겨두었다.) 다시 한 번 더, 클로저를
callback 함수로 전달하였다. 즉, 이 함수는
employee 오브젝트의 배열—이 시리즈의 이전 기사들에서 작업했던 것과 동일한 데이터—을
수신하도록 예상한다. 그러면 콜백 함수는 Array 오브젝트에서
forEach 메소드를 사용한다. 이 함수는 이전 브라우저에서 사용할 수 없었기 때문에 익숙하지 않을 수도 있다. 하지만, 이는 여기에서 대상으로 하는
점점 더 많은 현대식 브라우저들에서 사용 가능하다. 이는 매개변수로 함수를 취하고 그 함수를 배열에서 각각의 오브젝트에 순차적으로 적용한다. 또 다른 클로저를
여기에 전달시킬 수도 있지만, 이를 addEmployee라는 또 다른 함수에 참조로 전달하자. 이 함수는 직원 오브젝트를 목록과 테이블에 추가하기 위한
개별 함수들을 대표한다. 이러한 함수가 jQTouch를 사용하여 UI를 동적으로 작성하는 방법에 대해 살펴보자.
목록 1로 돌아가면 홈 화면에 두 개의 다른 페이지로의 링크가 있음을 확인하게 될 것이다. 하나는 데이터의 목록 보기이고 또 다른 하나는 데이터의 테이블 보기이다. 이는 페이지에서 jQuery의 div 사용하기 관습을 활용하여 애플리케이션의 개별 페이지를 나타낸다는 점을 이미 언급했다. 이러한 페이지의 HTML은 목록 3에 표시되어 있다.
목록 3. 목록과 테이블 HTML
<div id="list-style">
<div class="toolbar">
<h1>List</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="edgetoedge" id="eList"></ul>
</div>
<div id="table-style">
<div class="toolbar">
<h1>Table</h1>
<a class="button back" href="#">Back</a>
<a class="button flip" href="#new">+</a>
</div>
<table>
<thead>
<tr>
<td>Name</td>
<td>Phone</td>
<td>Email</td>
</tr>
</thead>
<tbody id="eTable"></tbody>
</table>
</div>
|
다시 한 번 더 말해, 위의 코드는 간단한 HTML에 불과하다. 페이지를 한 번에 하나씩 살펴보자. 목록 페이지의 경우, 다시 한 번 더 도구 모음 스타일을 사용하는 중첩된 div가 있다. 이는 앵커 텍스트와 함께 간단한 표제가 있다. 앵커에 클래스 단추 Back이 있음을 주목하자. 다시 말해, 이는 jQTouch로 제공되는 스타일이다. 이는 모바일 플랫폼에 네이티브로 나타날 페이지의 Back 단추를 작성할 것이다. 그림 3에서는 이 도구 모음 섹션이 iPhone에 어떻게 나타나는지 보여준다.
그림 3. 목록 페이지 도구 모음
확인 가능한 대로 jQTouch를 통해 매우 적은 코드로 높은 품질의 인터페이스를 간편하게 작성할 수 있다. 목록 3으로 돌아가면 순서화되지 않은 빈 목록이 있음을 확인할 수 있다. 이는 전체 화면을 수평적으로 포괄하려는 항목에 잘 맞는 jQTouch로 제공되는 edgetoedge 스타일을 사용하는 것에 주목하자. 목록 4와 같이 목록 2의
서버에서부터 검색한 데이터로 이 목록을 입력한다.
목록 4. 목록 작성하기
function addEmployeeToList(e){
var list = $("#eList");
var text = e.firstName + " " + e.lastName +
", " + e.phone + ", " + e.email;
var li = $("<li>").html(text);
list.append(li);
}
|
동적으로 HTML 요소를 작성하는 것은 일반적인 웹 개발에서 더 지루한 작업 중 하나이다. 다시 한 번 더, 여기가 바로 jQuery가 빛을 발하는 곳이다. 목록 4의 코드는 순전한 jQuery이다. 먼저 CSS 선택기를 jQuery로 전달하여 목록 3의 순서화되지 않은 목록에 대한 참조를 받는다. 목록에서 입력하려는 텍스트를 작성한 다음에 jQuery의 편의성 메소드를 사용하여 DOM 요소를 작성하고 텍스트 노드를 이에 추가한다. 마지막으로 이를 순서화되지 않은 목록에 추가한다. 그림 4에서는 모의 데이터를 사용하여 목록이 어떻게 나타나는지 보여준다.
그림 4. 목록 보기
목록을 작성하려면 일부 기본 jQuery 코드를 사용하여 서버에서부터 데이터를 검색하고 일부 표준 HTML 요소들(jQTouch 스타일을 참조하는 HTML 기본 폼과 함께)을 작성한다. 이는 위에 표시된 UI를 작성하기 위해 필요한 전부이다. 모바일 디바이스에서 이를 테스트하면, 빠르게 로드하며 원활하게 스크롤하는 것을 확인하게 될 것이다. 이제 이러한 동일한 데이터를 표시하기 위해 테이블을 어떻게 작성할 수 있는지 살펴보자.
목록 3으로 돌아가서 테이블 페이지가 목록 페이지와 유사한 것을 주목하자. 유사한 도구 모음이 있으며, 단추가 하나만 더 추가되었다. (그 단추가 수행하는 작업을 곧 살펴볼 것이다.) 이는 또한 기본 폼 테이블이 있다—다시 말해서, 헤더가 있지만 데이터는 없는 테이블이다. 데이터는 목록과 동일하게 나타날 것이다. 목록 5와 같이 테이블의 행들을 작성하기만 하면 된다.
목록 5. 테이블 행 작성하기
function addEmployeeToTable(e){
var table = $("#eTable");
var tr = $("<tr>")
.append($("<td>").html(e.firstName + " " + e.lastName))
.append($("<td>").html(e.phone))
.append($("<td>").html(e.email));
table.append(tr);
}
|
목록 5에 있는 코드는 목록 4에 있는 코드와 유사하다. HTML DOM 요소들을 작성하고 이를 함께 추가하는 jQuery의 편의성 메소드를 따를 수 있다. 내부에 세 개의 셀들로 테이블 행을 빠르게 작성하기 위해 빌더 패턴을 사용할 수 있는 추가 함수의 편의성에 주목하자. 그림 5에서 모의 데이터로 어떻게 나타나는지를 보여준다.
그림 5. 테이블 보기
예상되는 사용자 인터페이스가 그림 5에 표시되어 있다. 물론 표준 CSS를 사용하여 테이블을 조금 더 세련되게 만들 수 있다. 도구 모음의 오른쪽 맨 위에서 더하기 부호(+) 단추를 보게 될 것이다. 목록 3으로 돌아가서 다른 페이지로의 이 연결이 New라는 것을 주목하자. 또한 이 링크에서 클래스가 단추 누르기(button flip)임을 주목하자. 이렇게 하면 새 페이지로의 링크로서 역할을 담당하는 네이티브 모양의 단추를 다시 작성할 것이다. 클래스의 누르기 부분은 누르기 변환이 사용되어야 함을 jQTouch에 표시한다. 이는 현재 iPhone에서만 지원되는 독점 WebKit CSS 3D 애니메이션이며, jQTouch가 간편하게 쳐서(tap into) 사용하도록 만들어주는 많은 2D 및 3D 애니메이션 중 하나이다. 더하기 단추를 치면 새 직원 양식을 작성하기 위한 페이지가 표시된다. 목록 6에서는 이 페이지에 대한 코드를 보여준다.
목록 6. 새 직원 대화 상자
<div id="new">
<div class="toolbar">
<h1>Add Employee</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form id="addEmp" method="post">
<ul>
<li><input type="text" placeholder="First Name" id="fn"
name="firstName" />
</li>
<li><input type="text" placeholder="Last Name" id="ln"
name="lastName" />
</li>
<li><input type="email" placeholder="Email"
autocapitalize="off" id="email" name="email" />
</li>
<li><input type="tel" placeholder="Phone" id="phone"
name="phone" />
</li>
</ul>
<input type="submit" class="submit" value="Submit"/>
</form>
</div>
|
목록 6에 있는 코드는 간단한 HTML이다. 도구 모음은 이에 적용되는 toolbar 클래스가 있는 div를 사용하여 작성되었다. 이번에는 Cancel 링크가 있으며, 이는 button cancel 클래스를 사용하여 스타일화되었다. 물론, button 클래스가 이를 단추로 만든다. cancel 클래스는
back 클래스와 마찬가지로 링크가 이전 페이지로 리턴하도록 유도할 것이다. 하지만 back 클래스와는 달리 이는
이 페이지로의 전환에 사용되는 반대의 효과를 자동으로 사용할 것이다.
도구 모음 이후에 순서화되지 않은 목록 내에 랩 처리된 간단한 HTML 양식이 있다. 몇 가지 특이한 점을 확인할 수 있다. 우선, 모든 필드가 플레이스홀더 속성을 사용한다. 이는 필드가 초점을 받을 때까지
플레이스홀더 텍스트가 표시되도록 하는 하나의 HTML5 기능이다. 이는 특히 모바일 화면이 훨씬 더 작기 때문에 레이블 사용에 대한 편리한 대안이다. 이메일 입력이
false로 설정된 자동 대문자 사용 속성이 있음을 주목하자. 이는 이 필드에 입력된 텍스트에 대해 OS 레벨 자동 대문자 사용을 일시적으로 사용 안하도록
브라우저에 알리는 또 다른 iPhone 전용 기능이다. 또한 이메일과 전화 입력 둘 다 일반적이지 않은 입력들(email 및 tel)이 있음을 주목하자.
이는 초점이 이러한 입력 필드에 맞춰지면 브라우저에게 다른 키보드를 가져오도록 알리는 iPhone과 Android 브라우저 둘 다에서 지원되는 기능이다. 그림 6은
이러한 각 필드가 어떻게 표시되는지 보여준다.
그림 6. tel과 email 입력에 초점을 맞춘 Android 및 iPhone 브라우저
마지막으로 목록 6의 양식에서 주목할 사항은 Submit 단추이다.
그 클래스가 submit임을 주목하자. 이는 최소한 iPhone에서는 단추가 더 세련되게 보이도록 만드는 또 다른 jQTouch 클래스이다. 목록 7은
양식이 제출되면 jQTouch로 이벤트 핸들러를 설정하는 방법을 보여준다.
목록 7. 양식 제출 처리하기
$(document).ready(function(){
// Ajax call can be found in Listing 2
$("#addEmp").submit(function(){
var e = {
firstName : $("#fn")[0].value,
lastName : $("#ln")[0].value,
email : $("#email")[0].value,
phone : $("#phone")[0].value
};
addEmployee(e);
jQT.goBack();
return false;
});
});
|
이는 목록 2에서 살펴 본 초기화 코드의 일부임을 주목하자. 여기에서는 목록 6과 같이 양식에 참조를 얻는 또 다른 jQuery 선택기를 사용하였다.
jQuery는 양식의 submit 이벤트를 장악하는 간편한 방법을 제공한다. 다시 한 번 더, 클로저에 전달하여 이 이벤트를 처리한다. 클로저에서 JavaScript employee
오브젝트를 작성하지만, 양식에서부터 값을 검색한다. 그 다음에 목록 2에서 살펴 본 addEmployee 함수를 사용하여 새 직원을 목록과 레코드 보기 둘 다에
추가한다. 그 다음으로, jQTouch 함수인 goBack을 사용한다.
이는 이전에 살펴본 취소 단추와 유사하게 작동하여, 이전 페이지로 돌아가서 전환한다. 마지막으로 false를 리턴하여 양식이 제출되는 것을 방지한다. 분명히, 이 코드는 새 직원을 로컬 화면에만
추가한다. 직원을 공유 데이터베이스로 추가하는 데 사용할 수 있는 서버측 API를 상상할 수 있고, jQuery의 훌륭한 Ajax 및 양식 함수를 사용하여 데이터를 연속화하고 이를 서버로 다시 전송할 수
있다. 이렇게 하면 샘플 애플리케이션의 기능이 완료된다.
이제 jQTouch를 사용하는 모바일 웹 애플리케이션을 빌드하였으니, 이를 쌓는 방법을 살펴보자.
jQTouch 프레임워크가 Query의 위에 간단한 플러그인일 수 있지만, 이는 분명히 핵심 웹 기술을 수용하며 개발을 더 간편하게 만들어 jQuery 프레임워크의 철학을 확장한다. 이는 간단한 CSS 스타일을 HTML에 간편하게 적용하고 정교한 결과를 도출할 수 있는 모바일 최적화된 사용자 인터페이스 요소들을 많이 추가한다. 게다가, 페이지 전환과 같은 그 테마와 기능들은 애플리케이션에 네이티브와 같은 느낌을 부여한다.
애플리케이션 로직을 처리하는 면에서 jQTouch는 다른 프레임워크가 수행하는 것처럼 내용의 워크플로를 추상화하려고 시도하지 않는다. 그 대신에, 양식 처리, Ajax 및 페이지 전환과 같은 태스크를 더 간편하게 만드는 강력한 도구를 위해 jQuery를 따른다. 웹 애플리케이션이 작동하는 방법에 대해 익숙한 이미 숙련된 웹 개발자—및 HTML, JavaScript 및 CSS의 웹의 전원 팀과 함께—라면 아마 jQTouch가 가장 잘 맞을 것이다. 매력적이며 사용하기 편리한 모바일 웹 애플리케이션을 매우 빠르게 제작하는 것을 시작할 수 있다. 하지만, 더 구조화된 접근방식을 취하려면 그 구조를 스스로 추가해야 할 것이다. 이렇게 하면 개발자들의 팀이 작업할 대규모의 복잡한 애플리케이션에서는 엄청난 차이를 나타낼 수 있다. 추가적으로, jQTouch는 웹 애플리케이션을 작성하는 면에서 관련된 일반적인 워크플로의 변경을 시도하지 않는다—이는 워크플로에서 각 단계를 더 간편하게 만들기 위해 노력할 뿐이다. 다른 프레임워크들은 많은 단계들을 추상화하고 줄어든 보일러판으로 더 논리적인 플로를 제공하여 더 나아간다.
마지막으로, 하나의 다른 jQuery 프로젝트를 언급할 필요가 있다. 그 프로젝트는 jQuery Mobile 프로젝트(참고자료 참조)라고 적절히 이름이 붙여졌다. jQTouch와는 달리 이는 플러그인이 아니며 jQTouch를 통한 많은 일반적인 기능들을 공유하지만, 더 큰 목표가 있다. 이는 더 많은 UI 위젯을 제공하고 이들이 플랫폼을 교차하여 작업하는 것을 목표로 한다. 예를 들어, 빌드한 애플리케이션은 Android 전화기에서 적당히 작동하지만, 이는 분명히 iPhone을 염두에 둔 것이다. jQuery Mobile 애플리케이션들은 Android와 iPhone 둘 다에서 뿐만 아니라 몇 가지 다른 플랫폼들에서도 동등하게 잘 작동하도록 설계되었다. 이는 jQuery를 위한 플러그인은 아니다. 그 대신에 처음부터 철저히 모바일을 위해 빌드되었으며, 이는 더 가볍고 더 훌륭한 코드로 번역한다. jQTouch용 JavaScript 69KB 및 CSS 8KB는 jQuery Mobile용 JavaScript 12KB 및 CSS 6KB에 비교된다. 이 프로젝트의 맨 처음 알파 버전은 이 기사가 쓰여지는 동안 릴리스되어, 당연히 다듬어지지 않았다. 하지만 jQTouch에 관심이 있다면 jQuery Mobile의 최신 정보에도 관심을 기울이자.
이 기사는 jQTouch의 적은 지원으로도 웹 개발 기술을 모바일 전화기에 적용할 수 있다는 것을 보여준다. 많은 개발자들의 경우에 이는 모바일로 이동하는 가장 즉각적인 방법이 될 수 있다. 웹 개발자라면 jQTouch를 훨씬 더 매력적으로 만드는 jQuery에 대해 이미 알고 있을 것이다. 훌륭한 jQTouch 문서를 더 심도있게 살펴보고 더 많은 기능들을 알아보자. 이는 iPhone과 Android 브라우저에서 사용 가능한 많은 고급 HTML5 기능들을 모바일 웹 애플리케이션에서 보다 더 즉시 사용 가능하게 만들어준다. 이 네 부분으로 된 시리즈의 최신 기사에서 모바일에 대한 웹 수용 접근방식인 Sencha를 취하는 또 다른 프로젝트에 대해 알아보자.
| Description | Name | Size | Download method |
|---|---|---|---|
| Article source code | intradir-jqtouch.zip | 104KB | HTTP |
Information about download methods
Learn
- 모바일 웹 애플리케이션에서 Ajax 사용하기에 대한 자세한 정보는
"모바일 웹용 Ajax 애플리케이션 작성하기"(Michael Galpin저,
developerWorks, 2010년 5월)를 살펴보자.
- 모바일 웹 애플리케이션용 HTML5 기능 사용하기에 대한 자세한 정보를 보려면 다섯 개의 파트로 된 developerworks 시리즈인
"HTML 5로 모바일 웹 애플리케이션 작성하기"(Michael Galpin저,
developerWorks, 2010년 6월)를 읽어보자.
- "jQuery로 작업하기"(Michael Abernethy저, developerWorks,
2009년 2월)는 자체적인 jQuery 플러그인을 작성하는 방법을 가르쳐줄 수 있다.
- developerWorks 기사 "jQuery로 Ajax 개발을 단순화하기"(Jesse Skinner저,
developerWorks, 2007년 4월)에서 Ajax를 즐겁게 만드는 jQuery의 사용에 대해 더 자세히 알아보자.
- "Android와 iPhone의 브라우저 전쟁, Part 1: 새로운 돌파구, WebKit"
(Frank Ableson저, developerWorks, 2009년 12월)에서 모바일 브라우저의 기능을 활용할 수 있는 방법에 대해 살펴보자.
- Android SDK를 사용하여 XML을 구문 분석하는 다른 방법에 대해 더 자세히 알아보려면
"Working with XML on Android"(Michael Galpin저, developerWorks,
2009년 6월)를 읽어보자.
- HTML 5에 추가된
새로운 요소(Elliotte Rusty Harold 저, developerWorks, 2007년 8월): HTML 5는 JavaScript에만 관련된 기술이 아니다.
- Android 개발 소개(Frank Ableson저, developerWorks, 2009년 5월): Android 입문자라면 여기에서 시작해보자.
- developerWorks 웹 개발 사이트에서는 다양한 웹 기반
솔루션을 다루는 기사를 전문적으로 게시한다.
Get products and technologies
- jQTouch를 다운로드하자. 이 기사에서는 jQTouch
1.0-beta2를 사용했다.
- 기본 jQuery 사이트를 방문하여 소스 코드를 다운로드하자.
이 기사에서는 jQuery 1.3.2를 사용했다.
- Apache HTTP Server를 구할 수 있다.
- IBM 제품 평가판을 다운로드하여 DB2, Lotus, Rational, Tivoli 및 WebSphere의 애플리케이션 개발 도구와 미들웨어 제품을 사용해 보자.
Discuss
- 지금 My developerWorks 프로파일을 작성하고 모바일 웹 애플리케이션에 대한 관심 목록을 설정해 보자. My developerWorks에서 최신 정보를 자주 확인하자.
- 웹 개발에 관심이 있는 다른 developerWorks 구성원을 찾아보자.
- 지식 공유: 웹 주제를
중점적으로 다루는 developerWorks 그룹 중 하나에 참여하자.
- Roland Barcia는 자신의 블로그에서 Web 2.0 및 미들웨어에 대해 설명했다.
- developerWorks 멤버의 shared bookmarks on web topics를 따라가 보자.
- 빠른 해답: Web 2.0 Apps forum을 방문하십시오.
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
