![닫기 [x]](http://dw1.s81c.com/i/c.gif){kind=small}
2010년 5월 25일: 이 시리즈의 정보, 요약 및 참고자료 섹션에 이 시리즈의 Part 2에 대한 링크가 추가되었다.
HTML 5는 과장된 기술이지만 거기에는 그럴만한 이유가 있다. 이 기술은 데스크탑 애플리케이션 기능을 브라우저로 가져오는 기술적인 티핑 포인트가 될 것이기 때문이다. 기존 브라우저에서도 전망이 좋지만 모바일 브라우저에서는 그 가능성이 더욱 높다. 게다가 가장 유명한 모바일 브라우저에 HTML 5 스펙의 여러 중요한 부분이 이미 채택 및 구현되어 있다. 5편의 기사로 구성된 이 시리즈에서는 HTML 5에 포함되어 있는 신기술 중 모바일 웹 애플리케이션 개발에 큰 영향을 줄 몇 가지 기술에 대해 자세히 살펴본다. 이 시리즈의 각 기사에서는 최신 모바일 웹 브라우저에서 사용할 수 있는 HTML 5 기능(예를 들어, iPhone 및 Android 기반 장치에서 사용되고 있는 기능)을 보여 주는 실질적인 모바일 웹 애플리케이션을 개발한다.
이 기사에서는 최신 웹 기술을 사용하여 웹 애플리케이션을 개발한다. 이 기사에 있는 대부분의 코드는 웹 개발자들이 주로 사용하는 HTML, Javascript 및 CSS로 구성되어 있다. 독자에게 필요한 가장 중요한 항목은 테스트할 브라우저이다. 이 기사에서는 Mozilla Firefox 3.5+를 사용하기를 권장한다. 왜냐하면 이 브라우저가 geolocation을 지원하는 데스크탑 브라우저이기 때문이다. 물론 모바일 브라우저에서도 테스트를 수행해야 하므로 최신 iPhone 및 Android SDK도 있어야 한다. 이 기사에서는 iPhone SDK 3.1.3 및 Android SDK 2.1을 사용했다. 참고자료 섹션에 제공된 링크를 참조한다.
Geolocation 자체는 조금 새로운 기술이며 사용자 위치를 확인하는 기능을 제공한다. 하지만 이 정보를 확인한 후 사용자에게 보고한다면 별로 유용하지 않을 것이다. 사람들이 자신의 정확한 위도 및 경도에 관심을 갖는 이유가 무엇일까? 위치를 사용할 수 있는 다른 데이터 및 서비스와 함께 이 기술을 사용하면 흥미로운 결과를 얻을 수 있다. 이러한 서비스는 거의 모두 사용자의 위도 및 경도를 입력으로 받는다. 이러한 정보만 필요한 경우도 있다. 이제 이 정보를 얻는 방법에 대해 알아보자. Listing 1에서는 이 작업을 위한 표준 JavaScript API를 보여 준다.
Listing 1. 사용자 찾기: getCurrentPosition
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); |
이는 geolocation의 핵심 API이다. 이 API만 사용하는 애플리케이션도 많이 있다. geolocation
오브젝트는 표준 네비게이터 오브젝트의 일부이다. 두 개의 메소드가 있지만 가장 일반적으로 사용되는
메소드는 getCurrentPosition이다. 사용자의 위치에 액세스하기 위해서는
비용이 소요되며(우주에 있는 인공 위성과의 통신 필요) 사용자의 동의가 필요하다. 따라서 이 작업은
비동기 작업으로 수행된다. 이 메소드의 매개변수로는 성공 및 실패를 위한 각각의 콜백 함수가 있다.
success 함수에는 Position 유형의 단일 매개변수가 전달된다. 이 오브젝트에는
두 특성이 있다. 한 특성은 timestamp 특성이고 나머지 하나는 Coordinates 유형의
coords라는 특성이다. Coordinates 오브젝트에는 다음과 같은 여러 특성이 있다.
- latitude
- longitude
- altitude
- accuracy
- altitudeAccuracy
- heading
- speed
latitude, longitude 및 accuracy를 제외하고는 이러한 모든 특성을 모든 장치에서 사용할 수 있는 것은 아니다. geolocation API가 지원되고 장치에서 해당 위치를 확인할 수 있는 경우에는 latitude, longitude 및 accuracy를 사용할 수 있다.
error callback 함수에는 PositionError 유형의
단일 매개변수가 전달된다. PositionError 인스턴스에는 code 및 message라는 두
가지 특성이 있다. message는 장치 관련 특성으로 디버깅에 유용하다. code에는 다음 세 값 중 하나가 있어야
한다.
PERMISSION_DENIED (1)POSITION_UNAVAILABLE (2)TIMEOUT (3)
애플리케이션에서는 이 코드를 사용하여 오류 메시지를 사용자에게 표시해야 한다.
또한 W3C 스펙에는 세 번째 매개변수에 대한 옵션이 지정되어 있다. 이러한 옵션 중에는 사용자의 위치를 확인하는 데 소요되는 시간에 대한 제한시간 등이 있다. 하지만 이 매개변수는 iPhone과 같은 장치에서 아직 지원되지 않고 있으므로 사용하지 않는 것이 좋다. 지금까지 API를 자세히 알아보았으므로 이제 간단한 사용 예제를 살펴보자.
요즘에는 매시업의 시작 기초 예제에서 Twitter를 자주 사용한다. 이 기사의 첫 번째 예제에서는 Twitter의 search API를 사용한다. 이 API는 한 위치를 중심으로 지정된 반경 내에 있는 트윗을 검색하는 기능을 지원한다. Listing 2에서는 로컬 Twitter 검색을 보여 준다.
Listing 2. 로컬 Twitter 검색
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width"/>
<title>Local Twitter Search</title>
<script type="text/javascript">
function startSearch(){
var gps = navigator.geolocation;
if (gps){
gps.getCurrentPosition(searchTwitter,
function(error){
alert("Got an error, code: " + error.code + " message: "
+ error.message);
});
} else {
searchTwitter();
}
}
function searchTwitter(position){
var query = "http://search.twitter.com/search.json?callback=showResults&q=";
query += $("kwBox").value;
if (position){
var lat = position.coords.latitude;
var long = position.coords.longitude;
query += "&geocode=" + escape(lat + "," + long + ",50mi");
}
var script = document.createElement("script");
script.src = query;
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>
</head>
<body>
<div id="main">
<label for="kwBox">Search Twitter:</label>
<input type="text" id="kwBox"/>
<input type="button" value="Go!" onclick="startSearch()"/>
</div>
<div id="results">
</div>
</body>
</html>
|
사용자는 텍스트 상자에 검색 조건을 입력할 수 있다. 단추를 클릭하면 startSearch
함수가 호출된다. 그리고 이 함수에서 geolocation API를 사용하게 된다. 먼저 geolocation API를 사용할 수 있는지
확인한다. 확인할 수 있으면 getCurrentPosition API를 호출한다. success callback의
경우 searchTwitter 함수를 사용한다. error callback 함수의
경우에는 단순히 오류 정보를 표시하는 간단한 클로저를 전달한다.
searchTwitter 함수는 브라우저에서 위치가 성공적으로 결정되었을
때 호출된다. 이제 이 함수에 전달된 위치를 사용하여 geocode 매개변수를
Twitter 검색 쿼리에 추가한다. Listing 2의 예제에서는 결정된 위치를 중심으로
50마일 이내에 있는 트윗을 검색한다. Twitter를 호출하려면 JSONP라는 기술인 동적 스크립트 태그를
사용한다. Twitter의 search API에서 지원되는 이 태그를 사용하면 브라우저에서 Twitter 검색을 직접
호출할 수 있기 때문에 서버가 전혀 필요하지 않다. 이 태그는 쿼리의 callback
매개변수로 지정된다. 이 예제에서는 showResults로 설정되었으며 이는 호출될
함수의 이름이다. 이 함수는 UI를 작성하는 데만 사용되기 때문에 Listing 2에 포함되어
있지 않지만 이 기사에서 제공하는 소스 코드에서 볼 수 있다(다운로드 참조). 그림
1에서는 iPhone에서 실행 중인 Listing 2의 코드에 대한 화면 캡처를 보여 준다.
그림 1. iPhone에서 Twitter 검색하기
다른 여러 위치 인식 애플리케이션과 마찬가지로 이 애플리케이션에서도 한 번만 위치를 가져오면 된다. 하지만 다른 애플리케이션의 경우에는 사용자가 이동 중이기 때문에 사용자를 추적해야 한다. 그러한 애플리케이션에서는 다른 고급 geolocation API를 사용해야 한다.
애플리케이션에서 사용자의 현재 위치가 필요한 경우도 있지만 이를 위해서는 사용자의 위치가
변경될 때마다 업데이트해야 한다. 이를 위한 API가 watchPosition이다. 이
API는 getCurrentPosition과 매우 유사하며 동일한 매개변수를 사용한다. 한
가지 주요 차이점은 이 API가 ID를 리턴한다는 것이다. 이 ID는 마지막 geolocation API인 clearWatch와
함께 사용할 수 있다. 이 함수는 watchPosition에서 리턴한 ID를 사용한다. watchPosition을
호출한 후에는 clearWatch가 호출될 때까지 브라우저에서는 사용자가 전달한
success callback 함수에게 지속적으로 업데이트를 보낸다. 사용자의 위치를 지속적으로 받게 되면 모바일
장치의 배터리가 빠르게 소진되므로 이러한 API를 사용할 때는 많은 주의를 기울여야 한다. 이제 예제를 살펴보자.
이 예제에서는 Google의 Map API를 사용한다. 이러한 API는 모바일 장치 특히, iPhone 및 Android 플랫폼에서 효율적으로 사용할 수 있도록 최적화되어 있다. 따라서 모바일 웹 개발자 특히, 위치 인식 애플리케이션을 작성 중인 개발자에게 매우 매력적인 API이다. 아래의 샘플 애플리케이션에서는 지도 상에서 사용자의 위치를 보여 주며 사용자의 위치가 바뀔 때마다 지도를 업데이트한다. Listing 3에서는 맵핑 코드를 보여 준다.
Listing 3. 애플리케이션을 Geolocation에 맵핑하기
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>I'm tracking you!</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=true"></script>
<script type="text/javascript">
var trackerId = 0;
var geocoder;
var theUser = {};
var map = {};
function initialize() {
geocoder = new google.maps.Geocoder();
if (navigator.geolocation){
var gps = navigator.geolocation;
gps.getCurrentPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.
latitude,pos.coords.longitude);
var opts = {zoom:12, center:latLng, mapTypeId:
google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map($("map_canvas"), opts);
theUser = new google.maps.Marker({
position: latLng,
map: map,
title: "You!"
});
showLocation(pos);
});
trackerId = gps.watchPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.
coords.longitude);
map.setCenter(latLng);
theUser.setPosition(latLng);
showLocation(pos);
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="superbar">
<span class="msg">Current location:
<span id="location"></span>
</span>
<input type="button" value="Stop tracking me!"
onclick="stopTracking()"/>
</div>
<div id="map_canvas" style="width:100%; height:90%; float:left;
border: 1px solid black;">
</div>
</body>
</html>
|
문서의 본문이 로드되면 initialize 함수가 호출된다. 이 함수는
브라우저에서 geolocation이 지원되는지 여부를 확인한다. geolocation이 지원되면 Listing 2의
예제와 유사하게 getCurrentPosition을 호출한다. 위치를 받은 후에는
Google Map API를 사용하여 지도를 작성한다. 위도 및 경도를 사용하여 google.maps.LatLng의
인스턴스를 작성하는 방법에 주의한다. 이 오브젝트는 지도의 중앙을 잡는 데 사용된다. 그런 다음
지도에서 사용자의 현재 위치를 나타내는 마커를 작성한다. 이 마커는 geolocation API로부터 받은
위도와 경도를 다시 한 번 사용한다.
지도를 작성하고 지도 위에 마커를 배치한 후에는 사용자 추적을 시작한다. watchPosition에서
리턴한 ID를 캡처한다. 새 위치가 수신될 때마다 새 위치를 기준으로 지도의 중앙을 다시 잡고 마커를
해당 위치로 이동한다. Listing 4에서는 살펴볼 필요가 있는 두 개의 함수를 더 보여 준다.
Listing 4. 좌표 코딩 및 추적 취소 함수
function showLocation(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
if (geocoder) {
geocoder.geocode({'latLng': latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$("location").innerHTML = results[1].formatted_address;
}
}
});
}
}
function stopTracking(){
if (trackerId){
navigator.geolocation.clearWatch(trackerId);
}
}
|
Listing 3을 보면 지도가 처음 그려질 때와 사용자의 위치에 대한 업데이트가
수신될 때 showLocation 함수가 호출된다. Listing 4에서
이 함수를 보여 준다. 이 함수는 google.maps.Geocoder의 인스턴스(Listing
3의 initialize 함수 시작 부분에서 작성됨)를 사용한다. 이 API를
사용하면 좌표 코딩을 수행하거나 주소를 받아서 맵핑 좌표(위도 및 경도)로 전환할 수 있다. 이 API는
맵핑 좌표를 받아서 실제 주소를 리턴하는 역좌표 코딩도 수행한다. 이 경우에는 geolocation API에서
생성된 좌표를 받은 후 Google Maps API를 사용하여 역으로 좌표 코딩을 수행한다. 그러면 결과가 화면에
표시된다.
Listing 4의 마지막 함수는 stopTracking
함수이다. 이 함수는 사용자가 Listing 3의 HTML에서 작성한 단추를 클릭할
때 호출된다. 이 함수에서는 watchPosition 함수를 처음 호출할 때
받은 trackerId를 사용한다. 이 ID를 clearWatch
함수에 전달하면 브라우저/장치가 사용자 위치 수신을 중지하고 JavaScript 호출도 중지한다. 그림
2에서는 사용 중인 추적 애플리케이션의 화면 캡처를 보여 준다.
그림 2. 추적 애플리케이션
물론 추적 기능을 실제로 테스트하려면 위치를 변경해야 한다. Google App Engine은 매우 유용한 도구이다. 왜냐하면 이 도구를 사용하면 웹 애플리케이션을 공개적으로 연결할 수 있는 곳에 쉽게 업로드할 수 있기 때문이다. 그런 다음에는 휴대폰이 잘 연결되는 어디에서나 모바일 장치에서 직접 테스트할 수 있다. 그런 다음에는 대중 교통을 이용하거나 지인에게 자동차로 주변을 운전하도록 부탁한 후 웹 애플리케이션이 변경되는 위치에 응답하는 모습을 확인할 수 있다.
이 기사에서는 모바일 웹 애플리케이션에서 geolocation API를 사용하는 방법을 살펴보았다. GPS는 매우 멋진 기능이지만 복잡하다. 하지만 지금까지 살펴본 것처럼 geolocation에 대한 W3C 표준에서는 매우 간단한 API를 제공한다. 이 API는 손쉽게 사용자의 위치를 받고 지속적으로 추적할 수 있다. 그 다음부터는 위치를 지원하는 다양한 웹 서비스에 좌표를 전달할 수 있다. 그리고 이 기사를 읽고 있는 독자 중에는 고유한 위치 인식 서비스를 개발 중인 개발자도 있을 것이다. 이 시리즈의 Part 2에서는 HTML 5 및 모바일 웹 애플리케이션에서 로컬 스토리지를 활용하여 모바일 웹 애플리케이션의 성능을 향상시키는 방법에 대해 설명한다.
| 설명 | 이름 | 크기 | 다운로드 방식 |
|---|---|---|---|
| Article source code | geo.zip | 3KB | HTTP |
교육
- Creating
mobile Web applications with HTML 5, Part 2: Unlock local storage for mobile Web applications with HTML 5(Michael Galpin 저,
developerWorks, 2010년 5월): 무선 애플리케이션을 위한 HTML 5의 새로운 주요 기능에 대해 설명한다. 로컬 스토리지의 표준화와 간단한
API를 사용하여 대량 데이터를 클라이언트에 저장하고 성능을 향상시킨다.
- 모바일
웹용 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 Specification(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 기술 행사 및 웹 캐스트: 이들 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
- Twitter의 developerWorks: developerWorks의 최신 소식을 접할 수 있다.
- developerWorks
팟캐스트: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
제품 및 기술 얻기
- Modernizr project: HTML 5
기능을 확인할 수 있는 localStorage, Web Workers, applicationCache 등을 포함한 다양한 유틸리티를 다운로드할 수 있다.
- Android Developers
웹 사이트: Android SDK를 다운로드하고 API 참조를 액세스하고 Android에 관한 최신 뉴스를 볼 수 있다.
- iPhone SDK:
iPad, iPhone 및 iPod touch 애플리케이션 개발을 위한 최신 iPhone SDK를 다운로드할 수 있다.
- Android Open
Source Project: Android 모바일 플랫폼의 오픈 소스 코드를 다운로드할 수 있다.
- Google
App Engine SDK 다운로드: Google을 사용하는 확장형 웹 애플리케이션을 빌드하는 기능을 지원하는 Java™ 및 Python 도구를
다운로드할 수 있다.
- IBM
제품 평가판: IBM SOA Sandbox의 온라인 시험판을
다운로드하거나 살펴보고 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구
및 미들웨어 제품을 사용해 보자.
토론
- XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.
- developerWorks
포럼 & 블로그: 이러한 블로그를 읽어보고 참여할 수 있다.
태그
태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.
인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.
내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.
인기 기사 태그 |
내 기사 태그태그 목록으로 건너뛰기
인기 기사 태그 |
내 기사 태그