[HTML5] Web Storage

Posted in 모바일/HTML5 // Posted at 2010. 8. 11. 12:46

클라이언트에 데이터를 저장하다
HTML 5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인
Web Storage(웹 스토로지) 스펙이 포함되었다

Web Storage 의 개념은 심플하다
'키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다

그리고 영구저장소(localStorage) 와 임시저장소(sessionStorage)를 따로 두어
데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다

Web Storage 는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다
사실 거의 차이가 없어 보이기도 하다. 다만 몇 가지 쿠키의 단점를 극복하는 개선점이 도입되었다

그럼 쿠키(Cookie)는?
쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구 이다
HTML 5 에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제하는 것은 아니다
HTML 5 환경에서도 여전히 쿠키를 이용할 수 있다
다만 어떤 것을 사용할 지는 사용자 선택의 몫이라 하겠다

Web Storage 차이점 (쿠키의 단점?)

- 쿠키는 매번 서버로 전송 된다
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다
Web Storage 는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다
이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 되겠다

- 단순 문자열을 넘어 (스크립트) 객체정보를 저장할 수 있다
문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을
제공해 주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다

- 용량의 제한이 없다
쿠키는 개수와 용량에 있어 제한을 걸어 두고 있다
하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20 개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB 로 제한되어 있다. Web Storage 는 이러한 제한이 없다
(그러나 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있다.
 그리고 대부분의 시나리오에서 쿠키의 제한으로 까지 데이터를 저장할 일이 없다)

- 영구 데이터 저장이 가능하다
쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다.
만료일자로 지정된 날짜에 쿠키는 제거되는 것이다.(만료일자를 지정하지 않으면 세션 쿠키가 된다)

만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결하기도 하였다
(그러나 과연 수 년이 지나도록  쿠키가 유지되어야 할 필요가 있을까?)

WebStorage 는 만료기간의 설정이 없다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것이다
이것이 특별히 장점이 되는지는 잘 모르겠지만 쿠키와의 차이점이라는 것은 분명하다
-----

쿠키와 WebStorage 의 차이점과 개선사항에 대해 알아 보았는데 개인적으로,
Web Storage 가 쿠키보다 훨씬 좋은 이유는 없다고 본다.
다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용해 보인다
(특히 경량 환경인 모바일에서는 더욱 더)

그리고 쿠키는 더 상세한 설정이 가능해 어떤 환경에서는 더 적합해 보이기 까지 한다
쿠키에 대한 자세한 내용은 다음의 글을 참고하도록 하자
=> Cookie 제대로 알고 사용하자


로컬 스토로지(localStorage)와 세션 스토로지(SessionStorage)

Web Storgae 는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다

우선 기본적으로 Web Storage 는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다
다시말해, A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다는 것이다
이것은 데이터의 보안적 측면에서 당연한 원칙이라 하겠다

- 로컬 스토로지
로컬 스토로지 저장한 데이터를 (명시적으로) 지우지 않는 이상 영구적으로 보관한다
앞서 말한대로, 도메인마다 별도로 로컬 스토로지가 생성된다
windows 전역 객체의 localStorage 라는 컬렉션을 통해 저장/조회가 이루어진다

- 세션 스토로지
세션스토로지는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다
세션스토로지는 windows 전역 객체의 sessionStorage 라는 컬렉션을 통해 저장/조회가 이루어진다

데이터 유지 측면:
세션 스토로지는 데이터가 지속적으로 보관되지 않는다
이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는
브라우저 컨텍스트 내에서만 데이터가 유지된다

로컬 스토로지는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를
사용할 수 있는 반면, 세션 스토로지는 브라우저가 종료되면 데이터도 같이 지워진다.
브라우저가 종료되면 세션 스토로지도 삭제된다는 것이다

데이터 범위 측면:
세션 스토로지 역시 Web Storage 의 기본 보안 처럼 도메인별로 별도로 생성된다
여기에 더불어 세션 스토로지는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면
서로 다른 영역이 된다(즉 브라우저 컨텍스트가 다르다)

탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때,
이 두 페이지의 세션 스토로지는 각각 별개의 영역으로 서로 침범하지 못한다는 의미이다
(도메인만 같으면 전역적으로 공유 가능한 로컬스토로지와 구분되는 특징이라 하겠다)


브라우저 지원 현황
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Web Storage 지원 표이다
(데스크탑 용 브라우저 기준이다)





대부분의 브라우저에서 Web Storage 를 지원하고 있다
특이한 것은 MS의 IE 의 경우 8.0 까지는 대부분의 HTML5 신기능이 지원되지 않는 반면
Web Storage 는 IE 8.0 에서도 지원하는 것으로 나와있다

그리고 아이폰의 사파리에서 테스트를 해 보니 정상적으로 동작하는 것을 확인하였다

다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다

if( ('localStorage' in window) && window['localStorage'] !== null) {
    alert("현재 브라우저는 WebStorage를 지원합니다")
}
else{
    alert("현재 브라우저는 WebStorage를 지원하지 않습니다")
}


Web Storage 데모 만들어 보기
로컬스토로지와 세션스토로지를 이용하는 간단한 데모를 만들어 보자
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">                     
      //로컬스토로지에 저장               
      function setLocalStorage(){
        var textBox = document.querySelector('#textBox1');
        window.localStorage['key1'] = textBox.value;
      }     
      //로컬스토로지 조회
      function getLocalStorage(){
        var textBox = document.querySelector('#textBox2');
        textBox.value = window.localStorage['key1'];
      }
     
      //세션스토로지에 저장
      function setSessionStorage(){
        var textBox = document.querySelector('#textBox3');
        window.sessionStorage['key1'] = textBox.value;
      }     
      //세션스토로지 조회
      function getSessionStorage(){
        var textBox = document.querySelector('#textBox4');
        textBox.value = window.sessionStorage['key1'];
      }   
    </script> 
  </head>
  <body> 
    <input type="text" id="textBox1">
    <button onclick="setLocalStorage()">로컬스토로지 저장</button>
    <br>   
    <input type="text" id="textBox2">
    <button onclick="getLocalStorage()">로컬스토로지 조회</button>   
    <hr>   
    <input type="text" id="textBox3">
    <button onclick="setSessionStorage()">세션스토로지 저장</button>
    <br>   
    <input type="text" id="textBox4">
    <button onclick="getSessionStorage()">세션스토로지 조회</button>         
  </body>
</html>


아래는 실행화면인데 로컬스토로지와 세션스토로지의 저장소가 각각 분리되어 있는 것을 알 수 있다
그리고 각 스토로지에 Local Files 라고 되어 있는 것은 현재 데모 실행 환경이
로컬 파일 기반인 file//..... 로 되어 있기 때문이다
만일 특정 도메인에서 실행한다면 Local Files 대신 도메인 명이 나타날 것이다

그리고 새로운 탭을 열어서 같은 페이지를 실행 해 보면,
이전 탭 페이지에서 실행한 로컬스토로지 값은 여전히 유효한 반면
 세션스토로지는 서로 공유되지 않고 별도의 저장소를 따로 가진다는 것을 알 수 있다



세션 스토로지와 새창(window.open)
앞서 세션 스토로지는 탭 브라우징이나 새로 실행한 브라우저끼리는 별도의 저장 영역이라 하였다
그렇다면 페이지에서 window.open으로 생성한 새로운 창과 기존 창과의 세션 스토로지 공유는 어떨까?

실제로 어떤 페이지에서 프로그램 논리에 의해 open 하는 창은 물리적으로는 새창이지만,
논리적으로 전혀 별개의 창이라 볼 수 없다.
즉 세션 스토로지 데이터가 이 둘간의 공유가 이루어지는 것이 더 합당해 보인다는 말이다

HTML5 Web Storage 은 이러한 경우 조금 중간적 적인 입장을 취하고 있는 듯 하다
즉 windows.open 으로 띄운 새 창은 새로운 브라우저 컨텍스트로 인식하여
세션스토로지가 따로 생성,관리되지만 최초 데이터는 복사되어 진다는 것이다

다시말해 A 페이지에서 저장한 세션스토로지 값이 새창을 띄울 때 복사되어 전달되고
이후부터는 이 둘의 영역은 전혀 별개의 영역이 된다는 것이다 

결국 세션 스토로지는 각각의 브라우저(윈도우, 창, 실제로는 브라우저 컨텍스트)는 서로 독립된
각각의 세션 스토로지를 가진다는 특징이 있는 것
이다


클라이언트에서는 값을 얼마든지 수정할 수 있다
Web Storage 의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 클라이언트,
즉 사용자를 막고 있지는 않다. 클라이언트는 얼마든지 저장된 값을 (임의로) 수정할 수 있다
이것은 이전 쿠키와 완전 동일한 개념이다

아래 그림은 구글 크롬 브라우저에서 개발자 도구를 실행한 모습인데,
Wb Storage 에 저장된 값을 수정하거나 삭제 할 수 있는 것을 알 수 있다



클라이언트가 저장된 값을 임의로 변경 할 수 있다는 것은 쿠키와 동일한 개념으로 별다른 보안 취약점을 더 가진 것은 아니다. 따라서 웹 사이트 개발자는 사용자에 의한 이러한 임의 변경에 항상 예의 주시하고 방어 코드의 작성을 잊지 말아야 하겠다

다음의 사이트에서 추가 내용과 데모를 확인해 보기 바란다
http://www.ibm.com/developerworks/kr/library/x-html5mobile2/
http://html5demos.com/storage

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Web SQL Database  (0) 2010.08.17
[HTML5] 오프라인 웹 어플리케이션  (0) 2010.08.12
[HTML5] 드래그 앤 드롭 (Drag & Drop)  (3) 2010.08.10
[HTML5] Geolocation  (1) 2010.08.09
[HTML5] Web Workers (웹 워커)  (1) 2010.08.05

[HTML5] 드래그 앤 드롭 (Drag & Drop)

Posted in 모바일/HTML5 // Posted at 2010. 8. 10. 17:27

끌어다 놓기(드래그 앤 드롭, Drag & Drop)
끌어다 놓기는 사용자 편의성을 고려한 편리한 UI 기능이라 할 수 있는데,
아래 그림에서 보는 바와 같이 영역 A -> 영역 B로 특정 콘텐트를 마우스로 이동하는 것을 말한다



아래 그림은 구글 캘랜더에서 할일목록을 드래그 앤 드롭을 통해 다른 날짜로 이동하고 있는 모습이다


이러한 UI의 사용자 액션은 직관적이며 편리한 기능이다. 
윈폼 닷넷과 같은 윈도우 응용프로그램에서는 드래그 앤 드롭과 관련된 API 가 이미 제공되고 있다
그러나 웹 환경에서는 지금까지 전용 API는 제공되지 않고 유사 구현을 위해 복잡한 자바스크립트
이벤트(mouse 관련 이벤트를 직접 구현함)를 다루어야 했다

HTML 5 의 Drag & Drop API
HTML 5 에는 드래그 앤 드롭을 위한 전용 API 가 제공된다
이 API는 기존 윈도우 응용프로그램의 드래그 앤 드롭 API와 개념적으로 상당히 유사하다
과거처럼 자바스크립트의 마우스 관련 이벤트와는 전혀 상관이 없으며 
드래그 대상, 드롭 대상, 이동 콘텐트 등의 정보를 기반으로 동작한다

또한 웹 페이지 내 콘텐트의 이동 뿐만 아니라 웹 페이지 간, 웹 페이지와 다른 응용프로그램 간
드래그 앤 드롭이 가능
하기 때문에 이전 웹 환경과는 완연히 구분되는 기능이라 할 수 있겠다


지원되는 브라우저 현황
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Drag & Drop 지원 표이다
(데스크탑 용 브라우저 기준이다)




위 표를 보면 파이어폭스, 사파리, 크롬은 지원한다고 나와 있는 반면,
막상 테스트를 해 보니 파이어폭스를 제외하고는 제대로 동작하지 않았다
(크롬, 사파리 최선 버전 브라우저에서 Drag & Drop 정상 동작 하지 않음)
(표에서는 지원된다고 나와 있으니 조금 더 확인이 필요 할 것 같다)

그리고 아이폰의 사파리도 지원하지 않는 것으로 보인다
아이폰 사파리 브라우저에서 테스트를 해 봤지만 전혀 동작하지 않았다


Drag & Drop API
대부분의 HTML 5 스크립트 API들은 고도로 추상화 되었기 때문에 매우 사용하기가 쉽다
드래그 앤 드롭 API 역시 이용하는 데 어려움이 없으며 기존 윈도우 응용프로그램의 API 개념과
상당부분 유사하다. 드래그 앤 드롭 API 이해를 위해서는 다음의 것들을 이해하면 된다

- 드래그 대상(Source)
드래그 대상은 말 그대로 끌어올 것에 해당한다.
HTML 요소에 draggable 속성 값을 true로 설정하면 드래그 대상이 될 수 있다

- 드롭 대상(Target)
드롭 대상은 말 그대로 끌어다 놓을 곳에 해당한다
HTML 요소들의 기본 값은 드롭을 받아 들이지 않게 되어 있다
따라서 드롭이 가능하도록 설정하려면 이벤트의 preventDefault() 함수로 기본 값을 취소해야 한다

- 드래그 데이터(Data)
드래그 데이터는 말 그대로 이동할 대상 콘텐트에 해당한다.
이동할 데이터는 DataTransfer 객체를 통해 이루어 지는데
드래그 대상에서 이 객체에 값을 저장하고 드롭 대상에서 이 객체의 값을 꺼내어 오는 방식이다

- 드롭 이벤트들
드래그 앤 드롭과 관련해 총 7가지 이벤트가 존재한다
이 이벤트들은 드래그 앤 드롭 과정에서 (거의) 순차적으로 발생하며 드래그,드롭 대상에서
자신에게 맞는 이벤트 처리를 해 주면 된다

: dragstart 이벤트
드래그 대상에서 정의해야 하는 이벤트 이다
드래그가 시작될 때 발생하며 드래그 대상에서는 이 이벤트를 수신하여 이동할 데이터를 DataTransfer 객체에 채우게 된다

: dragenter 이벤트
드롭 대상에서 정의해야 하는 이벤트이다
이동할 데이터를 마우스로 끌어서 드롭 대상에 들어 오는 순간 발생한다

: dragover 이벤트
드롭 대상에서 정의해야 하는 이벤트이다
이동할 데이터를 마우스로 끌어서 드롭 대상에 올려 놓는 동안 계속해서 발생하는 이벤트이다

: drop 이벤트
드롭 대상에서 정의해야 하는 이벤트이다
마우스로 끌어서 놓는 순간 발생한다. 드롭 대상에서는 이 이벤트르 수신하여
DataTransfer 객체로부터 데이터를 꺼내 오고 드롭 대상에 끼워 넣는 작업을 하게 된다

이외에도 drag 이벤트, dragleave 이벤트, dragend 이벤트 등이 추가로 존재하지만
위에 설명한 4가지 이벤트로 기본적인 드래그 & 드롭 구현이 가능하다


Drag & Drop 데모 만들어 보기
이제 간단한 드래그 앤 드롭 데모를 만들어 보자
문서 내에서 select 박스 간 데이터를 이동하는 예제이다
(아래 코드는 시라이시 슌페이의 HTML5 & API 입문 책의 소스코드를 기반으로 했음을 밝힌다)

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">
 
    function onDragStart(event){
      document.getElementById("msg").innerHTML += "onDragStart->";
     
      //드래그 대상 요소가 option 일 경우에만 가능토록 함
      if(event.target.tagName.toLowerCase() == "option"){
     
        //dataTransfer 객체에 이동할 요소의 ID를 "selectOption"라는 이름으로 등록함
        event.dataTransfer.setData("selectOption", event.target.id);
      }
      else{
        //만일 드래그 대상 요소가 option이 아닐 경우 취소함
        event.preventDefault();
      }
    }       
   
    function onDragEnter(event){
      document.getElementById("msg").innerHTML += "onDragEnter->";
     
      //드래그 대상이 selectOption 일 경우에만 드롭 가능토록 설정함
      var types = event.dataTransfer.types;
      for(var i = 0; i < types.length; i++){
        if(types[i] == "selectOption"){
          event.preventDefault();
          return;
        }
      }
    }
   
    function onDragOver(event){
      document.getElementById("msg").innerHTML += "onDragOver->";
     
      //드롭이 가능하도록 기본 상태를 취소함
      event.preventDefault();
    }       
   
    function onDrop(event){  
      document.getElementById("msg").innerHTML += "onDrop";  
     
      //dataTransfer 객체로 부터 데이터를 꺼내옴
      var id = event.dataTransfer.getData("selectOption");
     
      //현재 문서객체에서 해당 요소를 가져옴
      var optionElement = document.getElementById(id);
     
      //데이터가 존재하고 드래그 대상과 드롭 대상이 같지 않을 경우 드롭 실행
      if(optionElement && optionElement.parentNode != event.currentTarget){
        //드래그 대상에서 이동할 데이터 삭제
        optionElement.parentNode.removeChild(optionElement);
       
        //드롭 대상에 데이터 추가
        event.currentTarget.appendChild(optionElement);
      }
           
      //드롭 완료 후 이벤트 버블링을 막기 위해 호출           
      event.stopPropagation();
           
    }
   
  </script>
  </head>
 
  <body>
         
    <!-- 드래그 대상 요소 -->
    <select size= 4 id="select1" ondragstart="onDragStart(event)">
      <option id="option1_1" draggable="true">옵션1-1</option> <!-- 드래그 데이터 -->
      <option id="option1_2" draggable="true">옵션1-2</option> <!-- 드래그 데이터 -->
      <option id="option1_3" draggable="true">옵션1-3</option> <!-- 드래그 데이터 -->
    </select>
   
    <!-- 드롭 대상 요소 -->
    <select size= 4 id="select2"
       ondragenter="onDragEnter(event)"
      ondragover="onDragOver(event)"
      ondrop="onDrop(event)"
>
      <option id="option2_1">옵션2-1</option>
      <option id="option2_2">옵션2-2</option>
      <option id="option2_3">옵션2-3</option>
    </select>
   
    <br><br><div id="msg"></div>
   
  </body>
</html>

소스코드의 주석에 상세히 설명을 달았지만 간단히 전체적인 흐름을 설명하자면,
드래그 대상(Source)은 왼쪽 select 박스의 option 항목들이며,
드롭 대상(Target)은 오른쪽 select 박스이다

드래그 대상인 option 요소에 draggable="true" 속성을 부여해 드래그 가능한 상태로 설정하였다
그리고 dragstart 이벤트를 구현하여 드래그 액션이 시작될 때 dataTransfer 객체에
드래그 데이터(여기서는 option 의 ID)를 저장하고 있다

드롭 대상인 오른쪽 select 박스에는 dragenter, dragover, drop 이벤트를 구현하여
preventDefault 함수 호출로 select 박스가 드롭이 가능하도록 설정하였으며
dataTransfer 객체에서 드래그 데이터(여기서는 option 의 ID)를 꺼내온다
이렇게 꺼내온 드래그 데이터를  문서객체에서 조회하여 드래그 대상에서는 제거하고 드롭 대상에
추가하는 로직으로 구성되어 있다

그리고 추가로 드래그 관련 이벤트의 호출 순서를 보기 위한 코드가 각 이벤트에 추가되어 있다

아래는 데모의 실행 화면이다. 먼저 드래그가 중에 캡쳐한 화면이며,



아래는 드래그, 드롭이 완룐된 화면이다.
select 박스 하단을 보면 드래그 관련 이벤트의 호출 흐름을 나타내고 있다



본 예제에서는 문서내 요소간 드래그&드롭을 구현해 봤지만, 문서간 문서와 다른 응용프로그램 간
드래그&드롭도 가능하다. 이는 관련 자료를 살펴 보기 바란다

마지막으로 아래 사이트에서 드래그 & 드롭 관련 데모를 추가로 확인해 보자
http://ljouanneau.com/lab/html5/demodragdrop.html
http://html5demos.com/drag


 

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] 오프라인 웹 어플리케이션  (0) 2010.08.12
[HTML5] Web Storage  (1) 2010.08.11
[HTML5] Geolocation  (1) 2010.08.09
[HTML5] Web Workers (웹 워커)  (1) 2010.08.05
HTML5 Demo, A Look At HTML5 and its Canvas Tag  (0) 2010.07.29

[HTML5] Geolocation

Posted in 모바일/HTML5 // Posted at 2010. 8. 9. 15:36

HTML 5 는 위치 정보와 관련한 Geolocation 스펙을 포함하고 있다
(엄밀히 말하자면 이 스펙은 HTML Working Group 과 분리되어 있는  Geolocation Working Group
에 의해 표준화가 진행되고 있다고 한다)

Geolocatoin API를 이용하면
현재 웹 페이지가 실행되는 단말의 위도, 경도와 같은 위치 정보를 얻어 올 수 있다

Geolocation 지원 브라우저 현황
현재 IE를 제외한 대부분의 최신 웹브라우저에서 Geolocation을 지원하고 있다
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Geolocation 지원 표이다
(데스크탑 용 브라우저 기준이다)

MS IE 9 가 unknown 이라고 되어 있지만 아마 지원하게 될 것이다.
MS 가 HTML 5 지원을 강력히 표명하고 있기 때문이다

 




그리고 아래는 http://diveintohtml5.org/geolocation.html  에서 발췌한 브라우저 지원현황이다
아래 표를 보면 아이폰이나 안드로이드와 같은 모바일 환경에서도Geolocation을 지원한다고 나와있다
Geolocation 자체가 장치의 위치정보를 이용하는 것이기에 모바일 장치의 지원은 더 자연스럽다
(참고: 오페라 10.6 이후 지원됨)




위치 정보는 사용자 동의가 있어야 한다
웹 응용프로그램이 나의 정보를 이렇게 쉽게 얻어 갈 수 있는 것인가?
만일 그렇다면 굉장한 사회적(?) 문제가 될 것이다
따라서 사용자의 위치 정보는 반드시 사용자의 허가를 받아서 수집할 수 있도록 되어있다

브라우저에서 Geolotion API를 이용해서 위치 정보를 액세스 하려고 하면,
아래 보는 바와같이 사전 동의를 구하게 된다.(파이어폭스 예) 
만일 동의를 하지 않게 되면 나의 위치정보를 웹 응용프로그램이 알 수 없게 되는 것이다




Geolocation 데모 만들어 보기
웹 페이지에서 Geolocation API 를 이용해 위치정보를 액세스 하는 것은 매우 쉽다
내부적으로 장치가 제공해 주는 위치정보를 어떤 식으로 액세스 하는지 전혀 몰라도
가져다 쓰는 것은 아주 쉽다

navigator 에 정의된 geolocatoin 객체의 getCurrentPosition 메서드를 이용하여
콜백 메서드만 정의하면 된다. 아래는 간단한 코드 샘플이다
(위치 정보 확인 작업은  비동기로 이루어진다)

<div id="msg"></div>

<script type="text/javascript"> 
  if (!!navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(successCallback,errorCallback); 
  }
  else
  {
    alert("이 브라우저는 Geolocation를 지원하지 않습니다");
  }
   
  function successCallback(position)
  {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
   
    document.getElementById("msg").innerHTML = "위도" + lat + ", 경도:"+lng
  }
 
  function errorCallback(error)
  {
    alert(error.message);
  }   
</script>



그리고 이 코드를 파이어폭스에서 실행한 결과 화면이다
(데스크탑 브라우저에서 테스트 해 봤는데, 구글 크롬과 사파리의 경우 지원은 되는데 위도,경도
 정보가 불러와 지지가 않는다. 파이어폭스와 오페라, 아이폰 사파리에서 정상 동작 확인 함 )



예제를 보면 coords 로 부터 위치 정보를 읽어 들이는데 위도,경도 이외에도
표고, 위도, 경도의 오차, 디바이스 진행 속도, 진행 방향 등의 정보도 조회 가능하다
(다만 장치별 이용 가능 여부를 확인해야 함)

그리고 getCurrentPosition 은 위치 정보를 일회성으로 받아 올 때 사용하는 반면,
watchPosition 함수는 위치의 변경 정보를 계속해서 알고 싶을 경우 사용한다

즉 장치의 위치가 변경될 때 마다 계속 호출되므로 위치의 변화를 지속적으로 감지할 수 있게 된다
(역시 매 확인은 비동기로 이루어 진다) (관련 자료 참고 바람)

다음 사이트에서 Geolocation 관련 추가 학습과 데모를 확인해 보자
http://www.ibm.com/developerworks/kr/library/x-html5mobile1/
http://html5demos.com/geo
http://3liz.org/geolocation/

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Web Storage  (1) 2010.08.11
[HTML5] 드래그 앤 드롭 (Drag & Drop)  (3) 2010.08.10
[HTML5] Web Workers (웹 워커)  (1) 2010.08.05
HTML5 Demo, A Look At HTML5 and its Canvas Tag  (0) 2010.07.29
[HTML5] HTML5 개요와 기술적 특징  (5) 2010.07.21

[HTML5] Web Workers (웹 워커)

Posted in 모바일/HTML5 // Posted at 2010. 8. 5. 17:36

HTML 5 의 많은 기능 중 웹 페이지가 단순 문서 표현을 넘어 응용프로그램과 같이 동작할 수 있도록
하는 주요한 기능 중 하나가 바로 Web Workders 이다

요즘 웬만한 응용프로그램들은 멀티 프로세스, 멀티 쓰레드를 구현하고 있다
웹 페이지도 이러한 멀티 쓰레드 구현이 가능하게 된 것이다

그간 웹 페이지는 단일 쓰레드 모드에서 수행될 수 밖에 없었다
만일 값을 반환하기까지 작업이 오래 걸리는 스크립트를 수행한다면 다른 UI 작업을
스크립트 작업이 종료될 때 까지 대기해야만 했다

그러나 HTML 5 에는 Web Worker 라는 스펙을 추가 했으며 브라우저에서는 이 스펙을 기반으로
멀티 쓰레드 구동이 가능하도록 브라우저를 설계하기에 이르렀다


롱~타임(Long~ Time) 작업은 워커에게 맡기기

이제 스크립트 작업이 오래 걸린다고 해서 페이지를 멈추고 기다릴 필요가 없어졌다
웹 워커는 자바스크립트 코드를 UI 쓰레드와는 별도인 백그라운드에서 수행될 수 있도록 하는 표준적인 방법을 제공하기 때문에 웹 페이지를 가로막지 않고 스크립트를 돌릴 수 있게 되었다

다음과 같은 롱~타임 스크립트 작업에 웹워커는 안성맞춤 일 것이다
- 매우 복잡한 수학적 계산 작업
- 원격지에 있는 리소스에 대한 액세스 작업(또는 로컬 스토로지를 액세스 하는 경우)
- 백그라운드에서 조용히(?) 오랜시간 작업해야 하는 경우
- UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등

사실 웹 워커 만의 지침은 없다. 일반적인 응용프로그램의 백그라운드 작업을 연상하면 된다


브라우저가 Web Worker 를 지원하나요?
HTML 5 가 아직 산업 표준이 완료된 것이 아니기에 브라우저별로 지원 여부가 상이할 수 있다
그리고 브라우저 버전별로도 지원 유/무가 다르기도 하다

따라서 웹 페이지에 웹 워커를 동작시키기 전에, 현재 페이지를 랜더링 하고 있는 브라우저가
웹 워커를 지원하는지 체크하는 것이 필수이다 (이것은 하위 호환성을 위해서도 중요하다)

브라우저의 웹 워커 지원 유/무 체크는 매우 간단한 방법으로 할 수 있다
전역 윈도우 객체의 워커(Worker) 속성을 살펴보면 된다. 아래는 샘플 코드이다

if(!!window.Worker){
      alert("이 브라우저는 웹 워커를 지원합니다")
}
else{
      alert("이 브라우저는 웹 워커를 지원하지 않습니다")
 }


Web Workers 개념도
웹 워커는 HTML 페이지에서 Worker 라는 객체를 통해 실행된다
HTML 페이지에 Worker 객체를 생성하기 위해서는 워커의 작업을 정의한 자바스크립트파일(.js)
을 Worker 객체 생성 시 전달해 줘야 한다
ex) var worker = new Worker("worker.js")

이후 롱~타임 작업은 .js 파일에 정의된 스크립트로 수행되며,
HTML 페이지와는 서로 데이터를 주고 받을 수 있는 매커니즘이 제공되는 것이다

양쪽 모두 상대에게 데이터를 송신할 때는 postMessage 라는 메서드를 이용하며
데이터를 수신할 때는 onmessage 이벤트를 통해 전달 받는다

아래 그림은 기본적인 (단일) 워커와 HTML 페이지 간 데이터 송/수신 개념도 이다





Web Workers 브라우저 지원 현황
현재 IE를 제외한 대부분의 웹브라우저에서 웹 워커를 지원하고 있다
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 웹 워커 지원 표이다
(데스크탑 용 브라우저 기준이다)

MS IE 9 가 unknown 이라고 되어 있지만 아마 지원하게 될 것이다.
MS 가 HTML 5 지원을 강력히 표명하고 있기 때문이다






위 표는 데스크탑 버전의 브라우저 지원 현황이다
모바일 환경은 이와 좀 다를 수 있는데 대표적인 예로 사파리를 들 수 있다

사파리의 경우 데스크탑 사파리는 Web Workers 를 지원하는데 반해,
아이폰 사파리는 Web Workers 를 현재까지 지원하지 않고 있다

아이폰에 내장된 사파리의 경우 대부분의 HTML5를 지원하지만,
유독 Web Worker 는 아직 지원하지 않고 있는 것이 의아하다

현재 모바일 웹 구축 시 제일 먼저 고려되는 플랫폼이 아이폰 환경인데 말이지...


Web Workers 데모 만들어 보기
지금까지 웹 워커에 대한 개념적 내용을 살펴 보았다
그럼 이제 웹 워커를 이용한 매우 기본적인 데모 코드를 작성해 보도록 하자

웹 워커의 장점을 알려면 웹 워커를 사용하지 않을 때의 단점을 알아보고
그 단점을 웹 워커로 해결하는 식의 접근이 이해하기 보다 수월할 수 있다
따라서 먼저 웹 워커 없이 시간이 오래 걸리는 스크립트 코드를 돌려 보자

시나리오를 단순하게 하기 위해,
샘플에서는 특별히 오래 걸리는 특정 작업을 구현하기 보다는 간단하게,
주어진 시간동안 반복(loop)문을 돌리는 것으로 대신하겠다.
일종의 대기(sleep) 시간이며 다음과 같이 스크립트 함수를 작성하도록 한다

- 시간이 오래 걸리는 작업(일종의 sleep 기능)
function sleep(milliSeconds){  
    var startTime = new Date().getTime(); 
    while (new Date().getTime() < startTime + milliSeconds);
}

이제 이 코드를 HTML 페이지에 삽입하여 실행해 보도록 하자

- HTML 페이지
아래와 같이 HTML 과 스크립트를 작성한다. 대략 10초 동안 대기(sleep) 시킨다
그리고 텍스트 상자는 대기시간동안 글 작성이 가능한지 보기 위해 삽입하였다
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function sleep(milliSeconds){ 
        var startTime = new Date().getTime(); 
        while (new Date().getTime() < startTime + milliSeconds); 
      }      
      function callNotWorker(){
        sleep(10000); //10초 동안 대기 시킨다
      }    
          
    </script>
  </head>
  <body>
    <button onclick="callNotWorker()">워커없이 호출</button>   
    <br>   
    <input type="text">
  </body>
</html>

- 실행 화면
HTML 파일을 웹 브라우저(데스크 탑 사파리)에서 실행하면 약 10초 이 후 완료 메시지가 나타난다
그런데 문제는 대기 시간 10초 동안 브라우저에서 다른 작업을 할 수 없다는 것이다
브라우저를 움직일 수도 없고 텍스트 상자에 글을 입력할 수도 없는 듯 마치 꽁꽁 얼어버린 듯 하다
10초 후 메시지가 나타난 이후부터 다른 작업을 할 수 있게 되는 것이다


이것이 바로 단일 쓰레드(UI 쓰레드) 환경의 특징이다
스크립트에서 시간이 오래 걸리는 작업을 하는 동안 다른 일을 할 수가 없는 것이다

웹 워커는 이런 형태의 작업을 멀티 쓰레드 환경처럼 동작하도록 만들어 준다
즉 시간이 오래 걸리는 작업은 백그라운드에서 실행되기 때문에 UI 쓰레드는 다른 일을
동시에 할 수 있는 것이다. 그럼 웹 워커를 사용하는 버전을 수정해 보도록 하자

- 워커 정의하기(JS 파일에 정의한다)
시간이 오래 걸리는 스크립트 코드 즉 백그라운드 환경에서 실행되어야 하는 스크립트는
별도의 자바스크립트파일(worker.js) 로 작성한다

//메세지 수신하여 시간이 오래 걸리는 작업을 처리한다
onmessage = function(event){
  var receiveData = event.data;
  sleep(10000); 
    
  //워커를 호출한 곳으로 결과 메시지를 전송한다
  var sendData = receiveData + "OK~ I'm Worker"
  postMessage(sendData)
}

function sleep(milliSeconds){ 
  var startTime = new Date().getTime(); // get the current time  
  while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

- HTML 페이지
이제 이 워커(파일)을 이용하는 HTML 페이지를 아래와 같이 작성한다
앞서 정의한 worker.js 파일을 기반으로 Worker 객체를 생성하고 postMessage 메서드를 통해
워커로 메시지를 전달한다. 또한 onmessage 이벤트를 정의하여 워커로 부터 전달되는 메시지를
받을 수 있도록 한다. 그리고 워커의 작업을 중지시키려면 terminate 메서드를 호출하면 된다

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">             
      var worker;     
      function callWorker(){     
        if(!!window.Worker){ //브라우저가 웹 워커를 지원하는지 검사한다   
           
          if(worker) worker.terminate();      //워커가 이미 존재하면 종료시킨다                    
          worker = new Worker("worker.js");  //새로운 워커(객체)를 생성한다      
                      
          worker.onmessage = function(event){ //워커로부터 전달되는 메시지를 받는다
            alert(event.data);
          };
                           
          worker.postMessage("워커야! 깨어나라!"); //워커에게 메시지를 전달한다       
        }
        else{
          alert("현재 브라우저는 웹 워커를 지원하지 않습니다")
        }
      }
               
      function stopWorker(){
        if(worker){
          worker.terminate();
          alert("워커 작업이 중지되었습니다");
        }
      }
    </script>
  </head>
  <body>
    <button onclick="callWorker()">웹워커 호출</button>
    <button onclick="stopWorker()">웹워커 중지</button>   
    <br>   
    <input type="text">
  </body>
</html>

- 실행 화면
HTML 파일을 웹 브라우저(데스크 탑 사파리)에서 실행하면 10초 후에 메시지가 나타난다
또한 워커를 사용했기 때문에 브라우저가 얼어 버리는 일은 없다
즉 10초라는 대기 시간 동안에도 브라우저를 움직이거나 텍스트 상자에 글을 입력할 수 있게 되는 것이다



결과적으로 두 작업이 동시에 처리되는 병렬작업이 가능하게 되는 것이다
이러한 병렬처리는 응용프로그램의 중요한 요구사항이며 이제 워커 덕분에
웹 페이지에서도 이러한 응용 환경 구현이 가능하게 된 것이다

마지막으로 아래 사이트에서 웹워커 관련 데모를 추가로 확인해 보자
http://html5demos.com/worker

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] 드래그 앤 드롭 (Drag & Drop)  (3) 2010.08.10
[HTML5] Geolocation  (1) 2010.08.09
HTML5 Demo, A Look At HTML5 and its Canvas Tag  (0) 2010.07.29
[HTML5] HTML5 개요와 기술적 특징  (5) 2010.07.21
HTML5 책, HTML5 & API 입문  (2) 2010.07.09

[JQuery] JQuery 사용 환경 설정

Posted in 모바일/Javascript // Posted at 2010. 8. 4. 16:13

JQuery 는 오픈소스 자바스크립트 라이브러리이다

JQuery 를 이용해서 스크립트 작업을 하면 웹 표준에 위배되는지 걱정하지 않아도 되며
매우 간단한 문법구조로 많은 처리를 할 수 있는 장점이 있다
또한 스크립트의 안정성도 뛰어나 결과적으로 스크립트 작업의 생산성을 극대화 할 수 있게 된다

JQuery 를 페이지에서 사용하려고 하면 JQuery의 기반 라이브러리를 페이지에 정의해야 한다

일반적으로는 JQuery 라이브러리를 직접 다운로드 해서 페이지에 삽입하면 된다

1) JQuery 라이브러리 파일을 직접 페이지에 삽입하기
http://docs.jquery.com/Downloading_jQuery 에서 최신 버전 다운로드 받는다
(현재 최신 버전은 1.4.2 이다)

그리고 페이지의 head 영역에 해당 스크립트를 포함시킨다
<head>
    <script type="text/JavaScript" src="jquery-1.4.2.js"></script>
</head>

이제 해당 페이지에서는 JQuery 관련 기능을 이용할 수 있게 된다


2) 최소 버전 JQuery 라이브러리 사용하기

JQuery 라이브러리는 풀버전과 최소화버전 두 가지가 제공된다
최소화버전은 사이즈가 작은 대신 디버깅 환경은 제공되지 않는다는 특징이 있다
따라서 개발시에는 풀버전으로 하고 라이브 적용 때에 최소화 버전으로 변경하는 것을 생각해 볼 수 있다. 최소화 버전 역시 JQuery 홈페이지에서 다운로드 받을 수 있다
<head>
    <script type="text/JavaScript" src="jquery-1.4.2.min.js"></script>
</head>


3) 구글의 CDN 서비스 사용하기
CDN 서비스는 굉장히 빠른 속도로 컨텐트를 내려 받을 수 있는 환경을 제공한다
구글에서 JQuery 라이브러리 다운로드를 위해 CDN 서비스를 무료로 제공해 주고 있다

다음의 URL 이 JQuery 가 호스팅 된 곳이다

최소화 버전)
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

풀버전)
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

역시 이 URL을 head 에 스크립트로 명시하면 된다
<head>
  <script type="text/JavaScript"  src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
</head>


JQuery 서적에서는 구글의 CDN 서비스를 이용할 것을 다음과 같은 사유로 권장한다
- 안전하고 믿을 수 있다
- 다운로드가 빠르다
- 어디서나 사용할 수 있다(JQuery.js를 늘 들고 다니지 않아도 된다)


3. 마이크로소프트의 CDN 서비스 사용하기
마이크로소프트 역시 구글처럼 JQuery를 CDN 으로 무료 서비스를 제공한다
다음 URL이 그것이다

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

[JQTouch] 모바일 웹 UI 라이브러리

Posted in 모바일/Javascript // Posted at 2010. 8. 4. 14:58
스마트폰의 모바일 웹을 위한 UI 단 라이브러리이다
JQuery 의 UI 라이브러리에 해당하며 JQuery 플러그인이라고 한다

http://www.jqtouch.com/
현재 1.0 베타 2 버전이 배포되고 있다

사파리와 같은 웹킷(WebKit) 기반의 브라우저에서 UI 개발을 마치 전용 앱(App)의 느낌과 사용성으로
제작할 수 있는 라이브러리이다

http://www.jqtouch.com/preview/demos/main/ 에서 몇 가지 데모를 확인할 수 있다

아래 그림은 http://www.testiphone.com/ 에서 아이폰 에뮬레이터로 실행해 본 모습니다

데스크탑 웹과는 그 표현면에서 많은 차이가 있으며,
모바일 기기에 적합한 레이아웃과 느낌 등 사용성을 최적화 할 수 있다는 장점이 있다



오픈페인트(OpenFeint)

Posted in 모바일/모바일 플랫폼 // Posted at 2010. 7. 30. 11:19

팀장님이 알려주신 오픈페인트 서비스
오전에 관련 앱과 게임을 다운받아 보고 조금 사용해 봤다

외국에서 개발한 이 서비스는 아이폰 무료 게임들의 게임 스코어 정보를 저장하여 다른 사람과
랭킹 정보를 공유할 수 있도록 해주며 친구를 맺게 하여 지속적인 공유가 가능토록 한다
또한 채팅 및 게시판과 같은 커뮤니티 기능을 제공하며 트위터와 페이스북과의 연계성도 가지고 있다

예를 들어 특정 게임 실행 후 스코어를 트위터에 바로 등록할 수 있는 기능이 있다
트위터에 자동으로 등록된 글을 보니 게임 시코어는 물론 해당 게임의 앱스토어 URL도 같이 표시된다
일종의 광고인 게임 광고인 셈이다



오픈페인트에서 관련 기능을 위한 오픈 API를 제공하고 각 게임 개발자들이 이를 연동하는 구조로 보인다
물론 오픈페인트 자체 앱(App)도 존재한다
- 오픈페인트, 오픈 API 개발자 등록: https://api.openfeint.com/signup
- 오픈페인트 아이폰 앱:http://itunes.apple.com/hk/app/openfeint-game-spotlight/id349406668?mt=8
- 오픈페인트 사이트: http://www.openfeint.com/
- 오픈페인트 트위터: http://twitter.com/openfeint

랭킹정보를 서버에 저장하기 위해 자신의 아이텐티티를 서버에 제공해야 하는 소위 등록(가입)과정이 필요한데 오픈페인트에서는 매우 간단하고 쉽게 등록할 수 있도록 만들어 두었다

자신의 직접 이메일 계정과 패스워드를 기입하여 등록할 수도 있으며
임의의 숫자로 자동으로 생성된 아이디를 그대로 이용할 수도 있다.
즉 가입과정을 최대한 간소화 시킨 것이라 볼 수 있다

대략 잠시 사용해 본 내용이다.
오픈페인트는 단위 앱(App)이 아니라 기존에 있는 게임들을 위한 서비스 플랫폼인 것이다
특히 소셜 서비스 플랫폼에 가깝다고 할 수 있겠다

기존 게임개발자나 업체에서는 오픈페인트와 연동하여 손쉽게 소셜 서비스를 제공할 수 있게 되고
게임의 광고도 자연스럽게 이루어지는 효과도 볼 수 있다

앱스토어라는 거대한 플랫폼 위에 또다른 개념의 서비스 플랫폼의 전형적 예를 잘 보여준 사례로 보인다

참고> 오픈페인트 기능 소개
http://theeye.pe.kr/entry/open-social-platform-openfeint-on-iphone-games

HTML5 Demo, A Look At HTML5 and its Canvas Tag

Posted in 모바일/HTML5 // Posted at 2010. 7. 29. 17:54

HTML5 로 제작된 멋진 데모들을 제공하는 사이트이다
음.. 놀랍군.

이건 뭐.. 그럴싸한 HTML5 어플만들려면 자바스크립트를 자유자재로 다룰 수 있어야 겠구만!!

http://www.aplossystems.co.uk/articles/look_at_html_5_canvas/

자바스크립트의 영역이 이렇게 커질(?)줄 몰랐다. 아오~

우리 프로젝트에도 멋진 자바스크립트 개발자가 있어야 하겠지...

'모바일 > HTML5' 카테고리의 다른 글

[HTML5] Geolocation  (1) 2010.08.09
[HTML5] Web Workers (웹 워커)  (1) 2010.08.05
[HTML5] HTML5 개요와 기술적 특징  (5) 2010.07.21
HTML5 책, HTML5 & API 입문  (2) 2010.07.09
브라우저의 HTML5 호환성 점수  (0) 2010.07.05

아이폰 에뮬레이터?

Posted in 모바일/모바일 플랫폼 // Posted at 2010. 7. 21. 17:41

아이폰의 사파리 브라우징을 제공하는 사이트가 있었구먼

http://www.testiphone.com/

떱! 난 그것도 모르고 여태껏 내 아이폰 열어서 수동으로 확인했구먼...

이런.. 역시... Know Where 얌... 모르면 손발이 고생한다더니.. ㅎ

점심시간에 책을 읽다가 문득 트위터에서 새로운 트윗을 알려 주는 방식을 좀 자세히 들여다 보고
싶어졌다

트위터 사이트를 열어 두면 아래 그림처럼 자동으로 새로 올라온 트윗이 있다고 알려 준다



사실 웹 표준을 준수하는 사이트의 자동 알림과 같은 기능은 대체로 폴링(pollling) 방식일 것이며
비동기로 호출해야 하기 때문에 AJAX 가 사용되리라는 것은 웬만한 웹 개발자면 다 아는 내용이다

따라서 심도있는 조사? 라는 것이 있을 수 없겠지만... 어쨋던 한번 들여다 보고 싶어졌다 ㅎㅎ

일단 Fiddler 와 네트워크패킷분석기라는 2개의 툴로 요청과 응답을 캡쳐 해 봤다

예상대로 AJAX를 통한 비동기 호출이었고 데이타 교환 포맷은 JSON 을 사용하는 듯 하다

아래는 트위터가 자동으로 호출하는 요청 패킷의 헤더 정보의 일부이다
XMLHttpRequest 로 부터 AJAX 통신을 유추할 수 있다. 그리고 JSON 포맷을 수용하고 있다
GET http://twitter.com/home?since_id=19054128561&refresh=true.......... HTTP/1.1
x-requested-with: XMLHttpRequest
Accept-Language: ko
Referer: http://twitter.com/
Accept: application/json, text/javascript, */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .....
If-Modified-Since: Wed, 21 Jul 2010 05:46:23 GMT; length=120
Host: twitter.com
Connection: Keep-Alive


그리고 아래는 위 요청에 대한 응답 헤더와 바디 정보의 일부이다
응답 컨텐츠 타입이 자바스크립트이며 JSON 특유의(?) 데이터 포맷인 바디 구성이 눈에 띈다

HTTP/1.0 200 OK
Date: Wed, 21 Jul 2010 05:47:10 GMT
Status: 200 OK
Last-Modified: Wed, 21 Jul 2010 05:47:10 GMT
Content-Type: text/javascript; charset=utf-8
Content-Length: 2566
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Set-Cookie: lang=en; path=/
Set-Cookie: lang=en; path=/
Set-Cookie: dispatch_action=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT
.......
Set-Cookie: _twitter_sess=........ ; domain=.twitter.com; path=/
Connection: close

{
 
  "users": {},
 
  "#pagination":null,
      "#timeline":"<ol id='timeline' class='statuses'>\n            <li class=\"hentry u-guitarbboy status\" id=\"status_19054414770\"\n>\n  <span class=\"thumb vcard author\"><a .........=\"photo fn\" height=\"48\" src=\"http://....=\"48\" /></a></span>  <span .....</ul>\n  </span>\n</li>\n      </ol>\n"
}



비동기 호출 (갱신) 주기
그렇다면, 비동기 호출 주기는 과연 얼마로 설정했을까? 일명 폴링 주기이다

폴링주기는 웹 사이트의 성능과 웹 서버의 부담이라는 측면에서 최대한 긴 것이 좋으며
최대한 실시간 같은 갱신 효과라는 측면에서는 최대한 짧은 것이 좋다

폴링주기 설정은 사이트의 특징과 사용 패턴, 웹서버 가용성 및 규모, 네트워크 환경에 따라
환경에 맞도록 최적화 시키는 것이 중요한데, 트위터에서는 어떻게 했는지 궁금해 졌다

비동기 호출을 일정기간 캡쳐했다. 그리고 각 호출간 시간차를 살펴 보았다
재미있는 것은 폴링 주기가 일정하지 않다는 것이다

즉 호출간 매번 일정한 간격이 아니라 조금씩 다른 간격으로 호출되는 것이다
그러나 패턴은 있었다. 항상 같은 간격은 아니지만 간격의 패턴은 유지되고 있었다

대체로 살펴봤을때,
45초 -> 1분 7초 -> 45 - > 1분 7초....와 같은 패턴이 많이 보였으며,
경우에 따라 2분 32초 -> 3분 48초 -> 5분 -> 3분 48초 -> 2분 32초... 와 같은 패턴도 보였다

음... 트위터에서는 항상 같은 간격으로 호출하지 않는다는 것은 명백하다
그러나 일정한 패턴은 유지하고 있다. 그럼 이유는???

글쎄....
처음엔 어떤 상황에 따라 패턴이 분리되지 않나 싶어 꽤 오랫동안 지켜봤다
예를 들어 사이트가 로딩 된 후 사용의 행동이 오랫동안 감지 되지 않을 경우에 간격을 조정한다?
라는 식으로 말이다

즉 항상 일정한 폴링주기가 아니라 나름대로 상황에 맞게 최적의 주기를 설정한 것이 아닌가 했다.
그리고 그 상황과 패턴을 찾고 싶었다

몇 가지 가설을 세워놓고 꽤 오랫동안 패킷을 지켜봤으나 딱 떨어지지는 않았다
다시말해 폴링 주기가 일정한 패턴으로 변경되는 상황을 알 수 없었다

나의 가설이 틀렸던지 아니면 정말 랜덤일수도 있다
몇가지 주기를 설정해 두고 랜덤하게 꺼내 쓴다... 처럼...

뭐.. 어쨋던 정확한 상황을 알지 못했지만 (웬지 관련성이 있을 것만 같은) 한가지는 목격(?)했다
새로운 트윗이 생긴경우 since_id 파라메타 값이 바뀐다는 것이다
그리고 계속 이 since_id는 변화가 없다가 다시 새로운 트윗이 생기면 바뀌는 식이다

어쨋던 점심시간,, 읽고 싶은 책은 1페이지도 못 읽고 문득 든 생각때문에
몇 시간을 보내 버렸다.......

'모바일 > 모바일 플랫폼' 카테고리의 다른 글

오픈페인트(OpenFeint)  (0) 2010.07.30
아이폰 에뮬레이터?  (0) 2010.07.21
모바일 결제 시스템 조사  (1) 2010.07.21
뷰 포트(Viewport)  (8) 2010.07.14
모바일 웹, 유효성 검사  (0) 2010.07.14