2010년 6월 29일: 이 시리즈의 정보, 요약 및 참고자료 섹션에 이 시리즈의 Part 5에 대한 링크를 추가했다.

이 시리즈의 정보

HTML 5는 매우 과대 포장된 기술이지만 그럴만한 충분한 이유가 있다. HTML 5는 데스크탑 애플리케이션 기능을 브라우저로 가져오는 기술적인 정점이 될 것이다. 기존의 브라우저에서도 전망이 밝지만 모바일 브라우저에서는 잠재력이 더 크다. 게다가 가장 유명한 모바일 브라우저에 HTML 5 스펙의 여러 중요한 부분이 이미 채택 및 구현되어 있다. 5편의 기사로 구성된 이 시리즈에서는 HTML 5의 일부이며 모바일 웹 애플리케이션 개발에 많은 영향을 미칠 수 있는 여러 새로운 기술에 대해 자세히 살펴본다. 각 부분에서는 iPhone 및 Android 기반 장치에 있는 것과 같은 최신 모바일 웹 브라우저에서 사용할 수 있는 HTML 5 기능을 소개하는 실용적인 모바일 웹 애플리케이션을 개발한다.

위로

시작

이 기사에서는 최신 웹 기술을 사용하여 웹 애플리케이션을 개발한다. 이 기사에 있는 코드는 대부분 웹 개발자들이 주로 사용하는 HTML, JavaScript 및 CSS로 구성되어 있다—. 독자에게 필요한 가장 중요한 항목은 테스트할 브라우저이다. 이 기사의 코드는 언급된 일부 예외를 제외하고는 대부분 최신 데스크탑 브라우저에서 실행된다. 물론 모바일 브라우저에서도 테스트를 수행해야 하므로 최신 iPhone 및 Android SDK도 있어야 한다. 이 기사에서는 iPhone SDK 3.1.3과 Android SDK 2.1이 사용되었다. 이 기사의 샘플에서는 브라우저로부터 원격 서비스에 액세스하는 프록시 서버도 사용한다. 프록시 서버는 단순한 Java™ servlet이지만 PHP, Ruby 또는 기타 등등에서 프록시로 쉽게 대체될 수 있다. 링크는 참고자료를 참조한다.

위로

모바일 장치에서 멀티스레드 JavaScript

멀티스레드 또는 동시 프로그래밍은 대부분의 개발자에게 익숙한 것이다. 이는 대부분의 현대 프로그래밍 언어에서 어떤 방식으로든지 지원된다. 그러나 JavaScript는 동시 프로그래밍을 지원하는 언어가 아니다. 작성자는 웹 페이지에서 단순한 태스크를 수행하도록 설계된 JavaScript와 같은 언어에 대해 이러한 작업이 너무 문제가 많고 불필요하다고 생각했다. 그러나 웹 페이지가 웹 애플리케이션으로 진화하면서 JavaScript로 수행된 태스크의 복잡도는 JavaScript를 다른 언어와 동등한 수준으로 끌어 올렸다. 동시에 동시 프로그래밍을 지원하는 다른 언어로 작업하는 개발자들은 스레드와 뮤텍스와 같은 동시 프리미티브에 수반되는 놀랍도록 높은 복잡도로 인해 애를 먹으며 고생했다. 사실 최근에는 Scala, Clojure 및 F#과 같은 많은 수의 새 언어 모두 동시성의 간소화를 보장하며 진화하였다.

Web Worker 스펙은 JavaScript 및 웹 브라우저에 단순히 동시성을 추가하는 것만이 아니라 문제를 야기하는 도구를 부여하지 않고 개발자들의 능력을 강화하는 영리한 방식으로 이를 수행하는 것이다. 예를 들어, 데스크탑 애플리케이션 개발자는 애플리케이션이 I/O 자원에 대해 대기하는 동안 UI를 멈추지 않고 I/O 자원에 액세스할 수 있도록 멀티스레딩을 수 년 동안 사용해왔다. 그러나 이러한 애플리케이션은 이 다수의 스레드가 공유 자원(UI 포함)을 변경할 때에 애플리케이션을 멈추게 하거나 충돌하게 만드는 문제를 겪는 경우도 있다. Web Workers를 사용하면 이러한 일이 발생할 수 없다. 파생된 스레드는 기본 UI 스레드와 동일한 자원으로의 액세스 권한이 없다. 실제로 파생된 스레드에서 코드는 기본 UI 스레드로 실행한 코드와 동일한 파일에서 존재할 수도 없다.

심지어 Listing 1과 같이 생성자의 일부로 외부 파일을 제공해야 한다.

이 프로세스는 다음 세 가지 항목을 사용한다.

1. 기본 스레드에서 실행된 웹 페이지용 JavaScript(앞으로 이를 페이지 스크립트라고 할 것이다).
2. Web Worker 함수를 수행하기 위해 사용하는 JavaScript 오브젝트인 Worker 오브젝트.
3. 새롭게 파생된 스레드에서 실행될 스크립트. 이를 Worker 스크립트라고 할 것이다.

Listing 1에서 페이지 스크립트를 보면서 시작하자.

var worker = new Worker("worker.js");
worker.onmessage = function(message){
    // do stuff
};
worker.postMessage(someDataToDoStuffWith);

Listing 1에서 Web Workers를 사용하는 세 가지의 기본 단계를 볼 수 있다. 먼저 Worker 오브젝트를 작성하고 새 스레드에서 실행될 스크립트의 URL로 전달한다. Worker가 실행할 모든 코드는 URL이 Worker의 생성자로 전달시킨 Worker 스크립트에 들어 있어야 한다. 이 Worker 스크립트의 URL은 브라우저의 동일한 기원 정책으로 한정된다. —Web Worker를 작성하는 중인 페이지 스크립트를 로드한 페이지를 로드한 페이지와 동일한 도메인에서부터 나와야 한다.

다음으로 할 일은 onmessage 함수를 사용하여 콜백 핸들러 함수를 지정하는 것이다. 이 콜백 함수는 Worker 스크립트가 실행된 후에 호출될 것이다. message는 Worker 스크립트로부터 리턴된 데이터이며 이 메시지로 원하는 것을 모두 할 수 있다. 콜백 함수는 기본 스레드에서 실행되며 DOM으로의 액세스 권한이 있다. Worker 스크립트는 다른 스레드에서 실행되고 DOM으로의 액세스가 없기 때문에 데이터를 Worker 스크립트로부터 애플리케이션의 UI를 업데이트하기 위해 DOM을 안전하게 수정할 수 있는 기본 스레드로 다시 전송해야 한다. 이는 Web Workers의 비공유(nothing-shared) 설계의 핵심 기능이다.

Listing 1의 마지막 행에 Worker가 초기화되는 방법이 표시된다—postMessage 함수를 호출하여 수행한다. 여기에서 메시지(다시 말하지만 이것은 단지 데이터이다)를 Worker로 전달한다. 물론 postMessage는 비동기 함수이므로 호출하면 즉시 리턴한다.

이제 Worker 스크립트에 대해 살펴보자. Listing 2에서 코드는 Listing 1로부터 worker.js 파일의 내용이다.

importScripts("utils.js");
var workerState = {};
onmessage = function(message){
     workerState = message.data;
      // do stuff with the message
    postMessage({responseXml: this.responseText});
}

Worker 스크립트가 고유의 onmessage 함수가 있는 것을 볼 수 있다. 이는 기본 스레드로부터 postMessage를 호출할 때에 호출된다. 페이지 스크립트로부터 전달한 데이터는 message 오브젝트에서 postMessage 함수로 전달된다. message 오브젝트의 data 특성을 검색하여 데이터에 액세스한다. Worker 스크립트에서 데이터의 처리를 완료하면 데이터를 기본 스레드로 다시 전송하는 postMessage 함수를 호출한다. 또한 이 데이터는 수신한 메시지의 데이터 특성에 액세스하여 기본 스레드로 사용 가능하다.

지금까지 Web Workers의 단순하지만 강력한 시맨틱을 살펴보았다. 다음에는 모바일 웹 애플리케이션의 속도를 높이기 위해 이를 적용하는 방법에 대해 알아볼 것이다. 이에 들어가기에 앞서 장치 지원에 대해 논의해야 한다. 어찌 되었건 이 사항들은 모바일 웹 애플리케이션이며, 브라우저 사이의 기능 면에서 차이점을 다루는 것은 모바일 웹 애플리케이션 개발에 필수적이다.

장치 지원

Android 2.0으로 시작하여 Android 브라우저는 HTML 5 Web Worker 스펙에 대해 전체적인 지원을 해왔다. 이 기사를 쓰는 시점에 대부분의 새 Android 장치는 가장 인기있는 Motorola Droid를 포함하여 Android 2.1과 함께 제공된다. 또한 이 기능은 Maemo 운영 체제를 실행하는 Nokia 장치와 Windows Mobile 장치에서 사용 가능한 Mozilla Fennec 브라우저에서 전체적으로 지원된다. 여기에서 iPhone이 빠진 것은 주목할 만하다. iPhone OS 버전 3.1.3 및 3.2(iPad에서 실행되는 OS의 버전)는 아직 Web Workers를 지원하지 않는다. 하지만 이 기능은 이미 Safari에서 지원되어 iPhone에서 실행하는 Mobile Safari 브라우저에서 이 기능이 표시되는 것은 시간 문제에 불과할 것이다. iPhone의 독점(특히 미국)을 고려해 봤을 때 Web Workers가 있는지가 필요한 것이 아니라 있는 것을 발견했을 때 모바일 웹 애플리케이션을 향상시키기 위해 이를 사용하는 것만이 최선이다. 이러한 생각을 가지고 모바일 웹 애플리케이션을 더 빠르게 하기 위해 어떻게 Web Workers를 사용할 수 있는지 알아보자.

위로

Workers로 성능 개선하기

스마트폰 브라우저에서 Web Worker의 지원은 바람직하며 개선되고 있다. 이는 모바일 웹 애플리케이션에서 언제 Workers를 사용하려고 하는가라는 질문을 하게 된다. 정답은 간단하다. 시간이 오래 걸리는 작업을 해야 할 때면 아무때나이다. 일부 Worker 예제에서는 파이의 만 단위 숫자를 계산하는 것과 같이 복잡한 수학적 계산을 수행하기 위해 Worker를 사용한 것이 나와있다. 이러한 계산을 웹 애플리케이션에서 수행할 필요가 아마 거의 없을 것이고, 모바일 웹 애플리케이션은 더욱 없을 것이다. 하지만 원격 자원으로부터 데이터를 검색하는 것은 매우 일반적이기 때문에 이 기사의 예제에서는 이에 주목한다.

이 예제에서는 eBay로부터의 Daily Deals(매일 변경되는 거래)의 목록을 검색할 것이다. 거래 목록은 각 거래에 대한 간략한 정보가 들어 있다. 더 자세한 정보는 eBay의 Shopping API를 사용하여 얻을 수 있다. 사용자가 관심 있는 거래를 고르기 위해 거래 목록을 찾아 보는 동안 이러한 추가 정보를 프리페치하기 위해 Workers를 사용할 것이다. 웹 애플리케이션으로부터 이러한 eBay 데이터에 모두 액세스하려면 일반 프록시를 사용하여 브라우저의 동일한 기원 정책을 다루어야 할 것이다. 이 프록시에 단순한 Java servlet이 사용되었다. 이는 이 기사를 위해 코드로 포함되지만 여기에서는 표시되지 않는다. 대신에 Web Workers로 작동하는 코드에 집중하자. Listing 3에 거래 애플리케이션을 위한 기본 HTML 페이지가 표시되어 있다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name = "viewport" content = "width = device-width">
    <title>Worker Deals</title>
    <script type="text/javascript" src="common.js"></script>
  </head>
  <body onload="loadDeals()">
    <h1>Deals</h1>
    <ol id="deals">
    </ol>
    <h2>More Deals</h2>
    <ul id="moreDeals">
    </ul>
  </body>
</html>

보는 것과 같이 이는 HTML의 매우 단순한 부분이며, 쉘에 불과하다. 데이터를 검색하고 JavaScript를 사용하여 UI를 생성한다. 이는 모바일 웹 애플리케이션을 위한 최적의 설계이다. 왜냐하면 이를 통해 모든 코드와 정적 마크업이 장치에 캐시될 수 있으며 사용자는 서버로부터의 데이터를 기다리기만 하면 되기 때문이다. Listing 3에서 본문이 로드되면 Listing 4에서 애플리케이션에 대한 초기 데이터를 로드하는 loadDeals 함수를 호출하는 것에 주목한다.

var deals = [];
var sections = [];
var dealDetails = {};
var dealsUrl = "http://deals.ebay.com/feeds/xml";
function loadDeals(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
               var i = 0;
               var j = 0;
               var dealsXml = this.responseXML.firstChild;
               var childNode = {};
               for (i=0; i< dealsXml.childNodes.length;i++){
                   childNode = dealsXml.childNodes.item(i);
                   switch(childNode.localName){
                   case 'Item': 
                       deals.push(parseDeal(childNode));
                       break;
                   case "MoreDeals":
                       for (j=0;j<childNode.childNodes.length;j++){
                           var sectionXml= childNode.childNodes.item(j);
                           if (sectionXml && sectionXml.hasChildNodes()){
                               sections.push(parseSection(sectionXml));
                           }
                       }
                       break;    
                   default:
                       break;
                   }
               }
               deals.forEach(function(deal){
                   var entry = createDealUi(deal);
                   $("deals").appendChild(entry);
               });
               loadDetails(deals);
               sections.forEach(function(section){
                   var ui = createSectionUi(section);
                   $("moreDeals").appendChild(ui);
                   loadDetails(section.deals);
               });
        }
    };
    xhr.open("GET", "proxy?url=" + escape(dealsUrl));
    xhr.send(null);
}

Listing 4에는 loadDeals 함수와 애플리케이션에서 사용된 글로벌 변수가 표시된다. 거래 배열과 함께 섹션 배열을 사용한다. 이는 관련 거래의 추가 그룹이다(예: Deals under $10). 또한 dealDetails라는 이름의 맵은 그 키가 Item ID(거래 데이터로부터 받음)가 될 것이고, 그 값은 eBay Shopping API로부터 받은 더 자세한 정보이다.

첫 번째 할 일은 프록시로 Ajax를 호출하여 결과적으로 eBay Daily Deals REST API를 호출하는 것이다. 이렇게 하면 거래 목록이 XML 문서로 주어진다. Ajax 호출에 사용하는 XMLHttpRequest 오브젝트의 onreadystatechange 함수에서 문서를 구문 분석한다. 두 가지의 다른 함수인 parseDeal 및 parseSection을 사용하여 XML 노드를 더 사용하기 쉬운 JavaScript 오브젝트로 구문 분석한다. 이러한 함수는 다운로드 가능한 코드 샘플에서 찾을 수 있지만(다운로드 참조) 단지 지루한 XML 구문 분석 함수에 불과하기 때문에 여기에 포함시키지 않았다. 마지막으로 XML을 구문 분석한 후에 DOM을 수정하기 위해 createDealUi과 createSectionUi의 두 개의 함수를 더 사용한다. 이를 완료하면 UI가 그림 1과 같이 된다.

Listing 4로 다시 돌아가면 기본 거래가 로드된 후에 거래의 각 섹션에 대해 loadDetails 함수를 호출한다. 이 함수에서 eBay Shopping API를 사용하여 각 거래의 추가 세부 사항을 로드한다.—하지만 브라우저가 Web Workers를 지원하는 경우에만 해당된다. Listing 5에 loadDetails 함수가 표시되어 있다.

function loadDetails(items){
    if (!!window.Worker){
        items.forEach(function(item){
            var xmlStr = null;
            if (window.localStorage){
                xmlStr = localStorage.getItem(item.itemId);
            }
            if (xmlStr){
                var itemDetails = parseFromXml(xmlStr);
                dealDetails[itemDetails.id] = itemDetails;
            } else {
                var worker = new Worker("details.js");
                worker.onmessage = function(message){
                    var responseXmlStr =message.data.responseXml;
                    var itemDetails=parseFromXml(responseXmlStr);
                    if (window.localStorage){
                        localStorage.setItem(
                                        itemDetails.id, responseXmlStr);
                    }
                    dealDetails[itemDetails.id] = itemDetails;
                };
                    worker.postMessage(item.itemId);
            }
        });
    }
}

loadDetails에서는 먼저 글로벌 범위(window 오브젝트)에서 Worker 함수를 확인한다. 없는 경우에는 아무 일도 안 해도 된다. 있는 경우에는 먼저 XML에 대한 localStorage를 거래의 세부 사항에 대해 확인한다. 이는 모바일 웹 애플리케이션에 일반적인 로컬 캐싱 전략이고, 이 시리즈의 Part 2에 세부 사항이 설명되어있다(링크를 보려면 참고 자료를 참조한다).

XML을 로컬에서 발견하면 이를 parseFromXml 함수에서 구문 분석하고 세부 사항을 dealDetails 오브젝트로 추가한다. 로컬에서 발견하지 못하면 Web Worker를 파생시키고 postMessage를 사용하여 거래의 Item ID를 전송한다. Worker가 데이터를 검색하고 기본 스레드에 다시 게시하면 XML을 구문 분석하고 결과를 dealDetails에 추가하고 XML을 localStorage에 저장한다. Listing 6에 Worker 스크립트 details.js가 표시된다.

importScripts("common.js");
onmessage = function(message){
    var itemId = message.data;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            postMessage({responseXml: this.responseText});
        }
    };
    var urlStr = generateUrl(itemId);
    xhr.open("GET", "proxy?url=" + escape(urlStr));
    xhr.send(null);
}

Worker 스크립트는 매우 단순하다. Ajax를 사용하여 프록시를 호출하고 결국 eBay Shopping API가 호출된다. XML을 프록시로부터 수신하면 JavaScript 오브젝트 리터럴을 사용하여 기본 스레드로 다시 전송한다. Worker에서부터 XMLHttpRequest를 사용할 수 있을지라도 모두 그 responseText 특성에 돌아오고 responseXml 특성에는 절대 돌아오지 않는다. 왜냐하면 Worker 스크립트 범위 내에서 JavaScript DOM 구문 분석기가 없기 때문이다. generateUrl 함수가 common.js 파일(Listing 7에 있음)로부터 나오는 것을 참고한다. importScripts 함수를 사용하여 common.js를 가져왔다.

function generateUrl(itemId){
    var appId = "YOUR APP ID GOES HERE";
    return "http://open.api.ebay.com/shopping?callname=GetSingleItem&"+
        "responseencoding=XML&appid=" + appId + "&siteid=0&version=665"
            +"&ItemID=" + itemId;
}

이제 거래 세부 사항을 입력하는 방법에 대해 알아보았다(Web Workers를 지원하는 브라우저용). 그림 1로 다시 돌아가서 애플리케이션에서 이를 사용하는 방법에 대해 살펴보자. 각 거래의 옆에 Show Details 단추가 있음을 주목한다. 그림 2와 같이 클릭하여 UI를 수정한다.

이 UI는 showDetails 함수를 호출할 때 표시된다. Listing 8에 이 함수가 표시되어 있다.

function showDetails(id){
    var el = $(id);
    if (el.style.display == "block"){
        el.style.display = "none";
    } else {
        el.style.display = "block";
        if (!el.innerHTML){
            var details = dealDetails[id];
            if (details){
                var ui = createDetailUi(details);
                el.appendChild(ui);
            } else {
                var itemId = id;
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if (this.readyState == 4 && 
                                      this.status == 200){
                        var itemDetails = 
                                        parseFromXml(this.responseText);
                        if (window.localStorage){
                            localStorage.setItem(
                                              itemDetails.id, 
                                              this.responseText);
                        }
                        dealDetails[id] = itemDetails;
                        var ui = createDetailUi(itemDetails);
                        el.appendChild(ui);
                    }
                };
                var urlStr = generateUrl(id);
                xhr.open("GET", "proxy?url=" + escape(urlStr));
                xhr.send(null);                        
            }
        }
    }
}

표시될 거래의 ID가 전달되고, 표시될 지와 안 될지 여부를 토글한다. 첫 번째로 호출되면 세부 사항이 이미 dealDetails 맵에 저장되어 있는지 보기 위해 확인한다. 브라우저가 Web Workers를 지원하면 그 다음에 이러한 세부 사항이 이미 저장되고 이에 대한 UI가 작성되어 DOM에 추가된다. 세부 사항이 이미 로드되지 않거나 브라우저가 Workers를 지원하지 않으면 이 데이터를 로드하기 위해 Ajax를 호출한다. 이렇게 하여 애플리케이션이 Workers가 있든지 없든지 여부에 관계 없이 동등하게 원활히 작동할 수 있다. 이는 Worker가 지원되면 데이터는 이미 로드되고 UI는 즉시 응답할 것이라는 의미이다. Workers가 없으면 UI는 여전히 로드하지만 몇 초가 걸린다.

위로

요약

Web Workers는 웹 개발자에게 이국적인 새로운 기술처럼 보인다. 그러나 이 기사에서 살펴본 것과 같이 이는 매우 실용적인 애플리케이션이다. 모바일 웹 애플리케이션의 경우에는 특히 더하다. Workers는 데이터를 프리페치하거나 다른 앞선(ahead-of-time) 조작을 수행하는 데 사용되어 훨씬 더 생생한 UI를 제공할 수 있다. 이는 잠재적으로 느린 네트워크를 지나 데이터를 로드해야 하는 모바일 웹 애플리케이션의 경우에 특히 더할 수 있다. 이를 캐싱 전략과 결합하면 사용자는 애플리케이션의 간결함에 감탄할 것이다.

위로

다운로드 하십시오

다운로드 방식에 대한 정보

참고자료

교육

• HTML 5로 모바일 웹 애플리케이션 작성하기, Part 1: HTML 5, geolocation API 및 웹 서비스를 결합하여 모바일 매시업 작성하기(Michael Galpin, developerWorks, 2010년 5월): 다양한 웹 서비스에서 사용할 위치 좌표를 찾아서 추적해 보자. 유명한 웹 서비스와 HTML 5를 사용한 위치표시(geolocation) 표준의 다양한 측면을 사용하여 이 시리즈의 Part 1에서 흥미로운 모바일 매시업을 작성해 보자.
  
  
• HTML 5로 모바일 웹 애플리케이션 작성하기, Part 2: HTML 5로 모바일 웹 애플리케이션에 대한 로컬 스토리지 잠금 해제하기(Michael Galpin, developerWorks, 2010년 5월): 무선 애플리케이션을 위한 HTML 5의 새로운 주요 기능에 대해 설명한다. 로컬 스토리지의 표준화와 간단한 API를 사용하여 대량 데이터를 클라이언트에 저장하고 성능을 향상시킨다.
  
  
• HTML 5로 모바일 웹 애플리케이션 작성하기, Part 3: HTML 5를 사용하여 모바일 웹 애플리케이션을 오프라인에서 작동하게 하기(Michael Galpin, developerWorks, 2010년 6월): 인터넷 연결 여부와 관계없이 애플리케이션이 작동할 수 있도록 하고 애플리케이션이 온라인과 오프라인 사이에서 전환되는 시기를 발견하는 방법에 대해 살펴보자.
  
  
• Creating mobile Web applications with HTML 5, Part 5: Develop new visual UI features in HTML 5: Add Canvas, CSS3, and more semantic elements to mobile Web apps(Michael Galpin, developerWorks, 2010년 6월): HTML 5에서 가장 주목받는 새 UI 기능인 Canvas로 브라우저에서 전체 2D 그래픽을 제공한다. 모바일 웹 애플리케이션에서 Canvas 및 기타 시각적 요소의 사용에 대해 알아보자.
  
  
• HTML 5 Offline Application Cache 문서: 명시 파일과 애플리케이션 캐시에 관한 Apple의 더 자세한 정보를 살펴보자.
  
  
• Offline resources in Firefox: 오프라인은 단순히 모바일용이 아니다. Firefox가 Mozilla에서 이 표준을 구현하는 방법에 대해 읽어보자.
  
  
• 모바일 웹용 Ajax 애플리케이션 작성하기(Michael Galpin, developerWorks, 2010년 3월): 모바일 웹 애플리케이션의 주요 부분인 Ajax의 사용 방법에 대해 살펴보자.
  
  
• HTML 5에 추가된 새로운 요소 (한글)(Elliotte Rusty Harold, developerWorks, 2007년 8월): HTML 5는 단지 JavaScript에 관한 것이 아니다. HTML 5의 새로운 마크업 중 일부에 대해 읽어보자.
  
  
• Android와 iPhone의 브라우저 전쟁, Part 1: 새로운 돌파구, WebKit(Frank Ableson, developerWorks, 2009년 12월): HTML 5를 사용하여 모바일 웹 애플리케이션을 개발하는 것을 좋아하지만 개발한 애플리케이션이 여전히 iPhone 앱 스토어와 Android 마켓에 있기를 원하나요? 두 개의 기사로 구성된 이 시리즈의 Part 1에서는 이러한 두 가지 시장에서 살아남는 방법을 확인할 수 있다.
  
  
• Dive Into HTML 5: 이 무료 서적에서 HTML 5 감지 기술과 HTML 5의 다양한 기능을 살펴볼 수 있다.
  
  
• Safari Reference Library: iPhone용 웹 애플리케이션을 개발하는 경우에는 이 참고자료를 가까운 곳에 두자.
  
  
• W3C HTML 5 스펙(Working Draft, 2010년 3월): HTML 5에 대한 이 명확한 소스를 살펴보자.
  
  
• 필자의 더 많은 기사(Michael Galpin, developerWorks, 2006년 4월 - 현재): XML, Eclipse, Apache Geronimo, Ajax, 추가 Google API 및 기타 기술에 대한 기사를 읽어보자.
  
  
• My developerWorks: developerWorks와 관련된 경험을 개인화할 수 있다.
  
  
• IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.
  
  
• XML Technical library: developerWorks XML 영역에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다.
  
  
• developerWorks technical events and webcasts: 이들 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
  
  
• Twitter의 developerWorks 페이지: 오늘 가입하여 developerWorks 트윗을 팔로우하자.
  
  
• developerWorks podcasts: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
  
  

제품 및 기술 얻기

• Modernizr 프로젝트는 HTML 5 기능을 확인할 수 있는 다양한 유틸리티이다.
  
  
• Modernizr 프로젝트: localStorage, Web Workers, applicationCache 등을 포함하여 HTML 5 기능을 확인할 수 있는 광범위한 유틸리티를 살펴보자.
  
  
• Android Developers 웹 사이트: Android SDK를 다운로드하고 API 참조에 액세스하고 Android에 관한 최신 뉴스를 읽어보자.
  
  
• iPhone SDK: 최신 iPhone SDK를 확보하여 iPad, iPhone 및 iPod Touch 애플리케이션을 개발해 보자.
  
  
• Android Open Source Project: Android 모바일 플랫폼의 오픈 소스 코드를 확보하자.
  
  
• Google App Engine SDK: Google을 사용하는 확장형 웹 애플리케이션을 빌드하는 기능을 지원하는 Java 및 Python 도구를 다운로드할 수 있다.
  
  
• IBM 제품 평가판을 다운로드하거나 IBM SOA Sandbox의 온라인 시험판을 살펴보고 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구 및 미들웨어 제품을 사용해 볼 수 있다.
  
  

토론

• 포럼에 참여하기.
  
  
• XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.
  
  
• developerWorks 포럼 & 블로그를 통해 developerWorks 커뮤니티에 참여하자.
  
  

필자소개

Michael Galpin은 1990년대 말부터 웹 애플리케이션을 개발하고 있으며 California Institute of Technology에서 수학과를 졸업하고 현재는 캘리포니아 산호세에 있는 eBay에서 아키텍트로 근무하고 있다.

아티클 순위

의견

위로

목차

• 이 시리즈의 정보
• 시작
• 모바일 장치에서 멀티스레드 JavaScript
• Workers로 성능 개선하기
• 요약
• 다운로드 하십시오
• 참고자료
• 필자소개
• 의견