[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

submit

[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

submit

[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

submit

[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

submit

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
Tags html5

submit

[HTML5] HTML5 개요와 기술적 특징

Posted in 모바일/HTML5 // Posted at 2010. 7. 21. 12:24

HTML5에 대한 개괄적인 내용들을 정리해 보았다
이 문서는 HTML5 & API 입문 이라는 책과 관련 블로그 및 온라인 자료를 바탕으로 작성되었다

따라서 순수 창작물이 아니라 정리 및 요약을 목적으로 작성되었으며 일부 개인적 의견이
덧붙여지기도 하였음을 밝혀둔다


HTML5 개요와 기술적 특징

 

2010.06.14

 

근래 HTML5에 대한 관심이 뜨겁다. 웹이 더 이상 문서 공유나 문서 표현만을 위한 것이 아니라 하나의 응용프로그램으로써의 면모를 점점 갖추어 나가고 있다. 플러그인 기술과 스크립트의 조화로 웹이 응용프로그램화 되어 왔지만 이는 표준적인 HTML 스펙을 벗어나는 기술의 복잡한 결합으로 가능한 것이었다

HTML5는 웹을 둘러싼 난무한 비 표준을 지양하고 지능적이고 실행가능 한 웹 구현을 위해 탄생한 차세대 웹 표준 기술이다. 본 문서에서는 현재 이슈가 되고 있는 HTML5의 개요와 기술적 특징에 대해 기술한다

 

HTML5 등장 배경

웹 문서에서 웹 응용프로그램으로의 진화

웹에서 문서를 표현하고 문서간 연결(하이퍼링크)을 주 목적으로 탄생한 HTML은 웹 환경이 보편화되고 발전함에 따라 표준적인 방식으로 구현되는 웹 응용프로그램 수준을 요구하는 시대적 흐름에 의해 탄생하게 되었다. 또한 방대하게 퍼져있는 웹 문서를 의미 있게 구조화하고 효과적으로 탐색, 해석 할 수 있는 시멘틱(semantic) 웹 실현을 위한 표준이기도 하다

 

HTML5 정의

HTML5 HTML의 차기 주요 제안으로써 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차세대 표준안이다. 플래시나 실버라이트와 같은 별도의 플러그인 없이 웹에서 표준적인 방식으로 멀티미디어를 재생하고 로컬 자원을 이용하는 등의 응용프로그램 수준의 웹을 개발하기 위한 기술의 총칭이다

현재 W3C를 주축으로 한 애플, 모질라, 구글, 오페라, 마이크로소프트 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이기도 하다

 

HTML History

HTML 1990년 초부터 지속적으로 업그레이드 되어 왔다

특히 시멘틱 웹의 실현을 목적으로 한 XHTML 추진과 HTML5로의 방향전환이 주목할 만한 업계의 트랜드를 말해 준다

 

1990

웹 창시자인 팀 버너스리에 의해 설계 및 개발 시작

 

1993 6

IETF에 의해 버전 1.0 표준 채택

 

1995 11

버전 2.0 RFC 표준화

 

1997 1

W3C 버전 3.2 권고

 

1997 12

W3C 버전 4.0 권고

 

1999 12

W3C 버전 4.01 권고

(이후 W3C에서 HTML을 더 이상 업데이트 하지 않을 것을 선언)

 

2000 1 ~

W3C 시멘틱 웹 실현을 위한 XHTML 1.0 개발추진. 이후 XHTML2 개발

2009 7

XHTML2 사양 제정 중지 선언

 

2004 6

XHTML 보급 실패와 시대 흐름에 부응하기 위한 HTML 업데이트 제안

애플, 모질라, 오페라 제안 -> W3C 거절 -> WHATWG 결성

-> 웹 어플리케이션 1.0이라는 이름으로 세부 명세 작업 시작

 

2007

W3C에서 HTML W/G를 결성하고 WHATWG와 공동작업 시작

2008 1

W3C에 의해 HTML5 초안 공개

2009 5

Google I/O 개발자 콘퍼런스, ‘차세대 웹 표준으로 적극 추천됨.

(전 세계 개발자들의 주목을 받기 시작함)

2009 10

WHATWG가 최종심사청구를 선언하고 표준화 작업을 W3C로 넘김

W33C: HTML5 표준화 작업 진행

WHATWG: HTML 업데이트 작업 계속 진행

2010 6월 현재

W3C의 표준화 프로세스 중 최종 초안 상태

2012년경

권고 후보 예정(실제 브라우저에 표준 전체 기능 적용 요청)

이후 정식 권고


 

브라우저 및 호환성

현재 HTML5가 초안(Working Draft) 상태이기는 하지만 많은 브라우저 업체들이 이미 HTML5 기능들을

지원하고 있다

 

2010년 현재 지원되는 브라우저 목록

파이어폭스 3.5 이상, 크롬 3.0 이상, 사파리 3 이상, 오페라 10.0 이상, IE 9 이상

기능

크롬

파이어폭스

사파리

오페라

안드로이드

웹 플랫폼

Canvas

O

O

O

O

-

SVG

O

O

O

O

-

Video

O

O

O

O

O

Geolocation

O

O

O(iPhone)

O

O

오프라인 웹 응용

O

O

O

O (mobile)

O

Web Database

O

O

O

O (mobile)

O

Web Worker

O

O

O

O (mobile)

-

 

미 지원 브라우저 처리

HTML5는 자체적으로 이 기술을 지원하지 않는 브라우저를 위해 Fall Back 장치를 두고 있다

(태그 무시, 대안 텍스트 표시)

 

브라우저 호환성 확인:

지원되는 브라우저 내에서도 HTML5 세부 지원 여부가 조금씩 상이하다. 다음의 URL에서 상세한
브라우저 호환성 확인이 가능하다 (참고:
http://caniuse.com/)

 

HTML5 현황

전 세계적인 브라우저 업체들이 이미 HTML5 개발에 협력하고 있으며 자사의 브라우저에 HTML5

지원하고 있다. 경쟁 기술인 실버라이트를 먼저 선보인 마이크로소프트에서도 HTML5 지원에 동참하고 있는 실정이다. 또한 플래시 개발사인 어도비에서도 자사의 웹 저작도구인 드림위버 신제품에 HTML5
편집 기능을 포함시켰다. 아래는 HTML5에 대한 업계의 관심과 공식적 행보의 예이다

 

애플: W3C HTML WG의 공동의장으로 활동하면서 HTML5 표준화에 적극 동참.

자사 제품에 플래시 배제. HTML5 적극 지원

사파리개발자센터를 통해 HTML5 데모 및 가이드 제공   

구글: 구글 기어스(Google Gears) 포기, HTML5 집중 선언, HTML5 기반 유투브 서비스 시작

마이크로소프트: IE9 HTML5 지원 발표. IE3 TestDrive 사이트에 HTML5 영역 제공

오페라: 오페라 개발자 센터를 통해 HTML5 데모 및 가이드 제공

              

사례 및 데모

퀘이크 2: http://www.youtube.com/watch?v=XhMN0wlITLk (플레이 동영상)

HTML5Canvas Audio LocalStorage , WebSocket, WebGL등의 기술을 이용해
GWT(Google Web Tookit)
팀에서 퀘이크 2 HTML5로 포팅하여 에뮬레이션 한 것
 (웹 브라우저에서 초당 60프레임까지 가능)

오픈 소스: http://code.google.com/p/quake2-gwt-port/



이미지 편집기: http://mugtug.com/darkroom/
포토샵과 유사한 기능 제공. HTML5 Canvas 사용



둠과 유사한 컨셉트의 게임 데모: http://www.benjoffe.com/code/demos/canvascape/

마리오카트 컨셉트의 게임 데모: http://www.nihilogic.dk/labs/mariokart/

웹 노트 데모: http://webkit.org/demos/sticky-notes/index.html

 

웹 응용프로그램을 위한 HTML5 주요 기술

HTML5는 마크 업 태그인 HTML 요소와 CSS3 그리고 자바스크립트를 통칭한 개념이다

그리고 Web Workers Web SQL Database 와 같은 응용프로그램 API들은 각각 독립된 사양이지만
일반적으로 이 모든 기술을 통칭하여 HTML5 라 해도 무방하다. 아래 표는 HTML5의 주요 기술적
특징을 요약한다

 

기능

설명

시멘틱 요소

 

문서의 구조와 데이터의 의미를 보다 명확히 하기 위한 시멘틱 요소가 추가됨

검색 엔진 및 문서 해석기 등에서 웹 문서 판별이 정확하고 용이해 짐

<section>, <article>, <aside>, <header>, <footer>, <address>

웹폼 요소

사용자 입력 양식 개선되고 추가됨

range, color, datetime 와 같은 입력 양식이 추가되어 스크립트 없이 표현 가능

2D 드로링 요소

웹 상에서 2차원 그래픽을 표현하기 위한 태그(canvas) API 지원

모양, 텍스트, 애니메이션, 전환 등의 효과를 줄 수 있음

3D 드로잉 요소

Canvas 3D(WebGL)을 통한 3D 그래픽 표현 지원

WebGL을 기반으로 3D 애플리케이션 또는 게임 개발을 돕는 자바스크립트 3D 엔진

멀티미디어

웹 상에서 비디오, 오디오를 표현하기 위한 태그 및 API 지원

Web Storage

웹 사이트의 정보를 사용자의 pc에 저장할 수 있는 매커니즘을 제공함.

기존 쿠키의 용량 제한 및 트래픽 부담의 단점을 해소

Web Database

로컬 데이터베이스 및 표준 SQL 질의를 수행할 수 있는 API 제공

Application Cache

인터넷이 연결되지 않은 상태에서 오프라인 응용프로그램 구현이 가능토록 지원

Web Worker

비 동기 백그라운드 처리 수행이 가능한 API 제공.

멀티 쓰레드 웹 응용프로그램 개발이 가능해 짐

Web Sockets

웹 상에서 양방향 통신이 가능한 API 제공

서버 푸시

서버로부터의 데이터를 푸시(push) 받을 수 있는 Server-Sent Events 제공

Geolocation

지리 정보 및 위치 정보를 이용할 수 있는 API 제공(장치 종속적임)

Drag & Drop

웹 페이지 내 혹은 외부 개체를 웹 페이지로 드래그, 드랍이 가능한 API 제공

Notifications

웹에서 메신저의 알림 기능이 가능한 API제공

File API

로컬 파일을 내용을 읽을 수 있는 API 지원

SVG

XML기반의 2차원 벡터 그래픽 표현하는 외부 마크업을 HTML 안에 삽입 가능

CSS3

투명도, 그림자, 둥근 모서리, 다중 컬럼 레이아웃 등 새로운 스타일 요소 추가

 

 

향상된 시맨틱(semantic)

시멘틱 태그(semantic tags)

시멘틱은 의미가 있는’, ‘의미의라고 해석된다.

기존의 표현(Display) 위주의 웹 문서에 데이터(Data)의 구조적 개념을 추가하기 위한 노력이라 할 수
있다.
웹이 시멘틱(semantic)해지면 웹 문서는 의미 있게 구조화, 조직화 되며 이를 해석하는 검색 엔진이나 문서 해석기에서는 보다 정확하게 웹 문서를 판별하고 해석 및 처리할 수 있게 된다.

 

시멘틱 웹의 실현을 위한 W3C의 대표적인 노력의 산물이 XHTML이다. W3C는 한 때 시멘틱 웹을
지향하는 XHTML을 차세대 웹 표준으로 추진한 적이 있다. XHTML HTML XML형식으로 기술할 수
있도록 하여 XML 자체의 장점인 데이터의 구조화 및 의미화 그리고 확장성을 웹 문서에 적용하기
위한 기술이다

 

물론 XHTML 자체는 널리 보급되지 못했으나 시멘틱 웹은 여전히 차세대 웹 환경의 주요한 이슈이다

HTML5 역시 시멘틱 웹을 지향하며 다양한 시멘틱 태그(Tag)들이 새로이 추가되었다

아래는 HTML5에서 새로 추가된 시멘틱 태그에 대한 설명이다

 

section

웹 페이지에 있는 하나의 문서 영역을 표현한다. 문서의 아웃라인을 구성한다

article

문서 영역에서 독립적인 컨텐트를 표현한다

포스트, 뉴스, 블로그의 본문과 같이 자체저으로 배포될 수 있는 항목을 구성한다

header

문서나 영역을 설명을 위한 헤더 영역을 표현한다

footer

저자, 저작권, 문서 꼬리말 등을 위한 풋터 영역을 표현한다

aside

광고 블록과 같은 주변 컨텐트와 별도로 다루어져야 하는 영역을 표현한다

hgroup

여러 개의 제목(h1~h6)을 하나로 정리한다

nav

문서 전체 혹은 섹션의 네이게이션 영역을 표현한다

address

섹션에 관한 문의처 정보를 표현한다

time

문서가 작성된 날짜 및 시간을 표현한다

 

 

마이크로데이타(MicroData)

웹 문서에 삽입된 데이터의 관련된 속성들을 조직화하여 정의할 수 있다

예를 들어 부동산 관련 페이지에 (house)’이라는 데이터를 정의하기 위해 가격,’위치’,’평수와 같은
관련 속성을 모아서 집이라는 하나의 아이템으로 정의할 수 있다.

이렇게 되면 HTML문서 자체를 데이터 소스로 다루는 프로그램에서 용이하게 사용 가능해 진다

 

향상된 웹 양식(Web Form)

입력박스나 체크박스, 선택창, 출력 버턴과 같은 기존 웹 입력양식이 상당부분 개선 및 추가되었다

기존 입력 타입이 text로 한정된 반면 HTML5에서는 email, tel, datetime 과 같이 입력형식자체를 지원하는 새로운 타입 요소들이 추가되었다. 또한 입력 값 검증이나 입력 보조 수단 등 스크립트에 의존했던
기존 기능들을 HTML 자체적으로 처리할 수 있도록 지원한다

 

input 타입

email, tel, url, search, datetime, number, range, color, week, month, time
) input type=range  

progress

작업의 진행 중을 표시하는 프로그레스 바 표현

meter

비율이나 수치를 시각적으로 표현

입력 값 검증

required, pattern, maxLength, min, mex, step

입력 보조 수단

placeholder, autofocus, autocomplete

 

2D/3D 드로잉(Drawing) 지원

Canvas 를 활용한 2D 그래픽

HTML 문서에 정의된 canvas 영역 내 각종 도형이나 선, 이미지 등 2D 그래픽을 그릴 수 있다

http://mugtug.com/darkroom/ : canvas를 이용한 이미지 편집기 데모

 

WebGL 을 활용한 3D 그래픽

WebGL을 이용한 3D 그래픽용 Canvas 도 추진 중 이다

WebGL은 오픈 그래픽 라이브러리인 OpenGL(OpenGL ES 2.0)에 기반한 웹 표준 그래픽 라이브러리이다

WebGL을 이용하면 브라우저에 별도의 플러그 인 없이 완벽하게 하드웨어 가속되는 3D그래픽을 표현할 수 있게 된다.

주요 브라우저 벤더사인 애플, 구글, 모질라 및 오페라와 하드웨어 업체인 AMD 및 엔비디아 등이 WebGL Working Group 멤버로 활동하고 있다. 그리고 구글의 웹 용 3D API O3D 플러그 인 기술을 포기하고 WebGL 을 선택했다

 

Copperlicht: WebGL 기반 자바스크립트 3D 엔진(Ambiera 사 개발)

http://www.ambiera.com/copperlicht/index.html

 

SVG

XML기반의 2차원 벡터 그래픽 표현하는 SVG HTML 안에 삽입 가능하다.

SVG W3C에 의해 제안된 XML 그래픽 표준으로 고품질의 다이내믹한 그래픽을 만들 수 있는 기술이다

HTML5에서는 MathML SVG와 같은 외부 마크 업을 직접 HTML 안에 삽입할 수 있도록 하였다

http://raphaeljs.com/ : SVG 데모

 

멀티미디어 지원

Video

HTML 문서에 별도의 윈도우미디어와 같은 별도의 플러그 인 없이 동영상을 재생할 수 있다

현재 유투브에서 HTML5 기반 동영상 서비스를 제공하고 있으며 스크립트를 통해 동영상을 제어할 수
있다

 

Audio

HTML 문서에 별도의 플러그 인 없이 오디오를 재생할 수 있다. 스크립트를 통해 오디오를 제어할 수 있다

 

표준화 되지 않은 코덱 문제

멀티미디어 형식에 대한 표준이 HTML5 사양에는 포함되지 않았다.

따라서 멀티미디어 재생을 위한 코덱의 비 표준화로 현재 브라우저마다 동영상 재생 형식이 서로 다르다

비디오 코덱으로는 H.264 Theora 가 있으며 오디오 코덱으로는 AAC,MP3 Vorbis 형식이
HTML5
용으로 사용되고 있다.

모질라와 오페라는 라이선스가 없는 오픈 소스 Theora를 선호하며 애플과 구글은 H.264 코덱을 선호한다

또한 마이크로소프트의 IE.9 에서는 H.264코덱만 지원한다고 발표한 바 있다


오디오 코덱 역시 라이선스가 없는 Vorbis형식과 특허로 제한되어 있는 MP3, ACC 형식으로 이분화 되어 있다. 그리고 또 하나의 변수로 최근 구글이 동영상 코덱 개발사인 On2를 인수해 VP8 코덱을 오픈
하기로 하였다. 이에 모질라 및 오페라 등이 동참하기로 하였지만 애플의 참여는 알 수 없는 상황이다.

 

따라서 표준이 정립되기 전까지는 두 형식에 대한 브라우저 호환성을 유지해야 하는 부담이 있다

아래 표는 브라우저 별 지원되는 비디오/오디오 코덱 정보이다

 

파일 형식

비디오 코덱

오디오 코덱

사파리

MP4

MPEG/H.264

AAC/MP3

크롬

Ogg/MP4

Theora/H.264

Vorbis/AAC/MP3

파이어폭스

Ogg

Theora

Vorbis

(스마트폰 브라우저의 경우 해상도 및 초당 프레임 등 추가 제약사항이 있을 수 있음)

 

로컬 저장소 및 오프라인 어플리케이션 지원

웹 사이트의 정보를 클라이언트 PC에 저장할 수 있는 메커니즘이 향상되었다

기존의 쿠키의 단점을 보완하고 로컬 데이터베이스를 지원하며 오프라인 응용프로그램을 위한
어플리케이션 캐시가 지원된다

 

Web Storage

이전 버전의 쿠키와 대응되는 개념이며 쿠키의 단점을 해소 및 보완한 저장소를 지원한다

아래와 같이 쿠키의 단점이 보완되었다

- 개수 및 용량 제한이 없음

- 매 요청마다 서버로 전송이 이루어 지지 않음

- 유효 기간 제한이 없음

- 스크립트 객체를 저장할 수 있음(객체의 복사본이 저장됨)

 

전역적인 저장소 개념인 LocalStorage와 브라우저(윈도우)별 저장소 개념인 SessionStorage가 있다

보안성에 있어서는 쿠키와 유사하다

 

Web SQL Database

클라이언트 PC의 저장소를 관계형 데이타베이스처럼 사용할 수 있다

데이터를 체계적으로 저장할 수 있으며 표준 SQL 질의를 통해 데이터를 액세스 할 수 있다

동기 및 비 동기 처리를 지원하며 도메인 별로 DB가 분리되어 있으며 최대 용량에 대한 제한은 브라우저에 따라 다를 수 있다

 

Application Cache

인터넷에 연결할 수 없는 오프라인 환경이 되었을 때에도 웹 사이트를 이용할 수 있도록 하는 메커니즘인

오프라인 어플리케이션을 Application Cache 로 지원한다

클라이언트에 캐시 될 파일 목록을 매니페스트에 정의하고 이 파일들은 인터넷 연결 없이도 볼 수 있게 된다. 또한 캐시 된 파일에 대한 업데이트 매커니즘도 제공된다.

Web Storage Web SQL Database 와 연계하여 완벽한 오프라인 어플리케이션을 구현할 수 있다

 

비동기 프로그래밍 그리고 양방향 통신

Web Worker

JavaScript 코드를 백그라운드에서 실행시킬 수 있어 멀티스레드 웹 어플리케이션 개발이 가능해졌다

워커(Worker)라 불리는 백그라운드 쓰레드는 UI(DOM) 와는 완전히 분리된 환경에서 동작한다

 

Web Sockets

Web Sockets을 통해 웹 브라우저와 웹 서버간 양방향 통신이 가능해졌다

기존의 웹 환경에서 서버의 데이터는 폴링(polling)방식으로 받아 왔으나 Web Sockets을 이용하면 진정한 의미의 푸시(push)형 양방향 데이터 송/수진이 가능해진다.

Web Sockets HTTP 프로토콜에 기반한다. 따라서 웹 서버 측에서도 이를 지원해야 한다

현재 아파치, jetty, Tornado 웹 서버가 Web Sockets를 지원한다

 

Server-Sent Events

웹 환경에서 서버 푸시(push) 통신 방식을 효과적으로 구현하기 위한 Comet을 표준화한 기술이다

정기적인 폴링과 응답 데이터 해석 처리를 자동화 해 준다

 

Desktop Experience

Notifications

Notifications 을 이용하여 메신저의 알림 창과 유사한 기능을 구현할 수 있다

 

Drag & Drop

웹 문서 내 혹은 서로 다른 웹 문서간 그리고 외부 응용프로그램의 데이터를 웹 문서로 끌어다 놓을 수
있는 기능이 지원된다. 기존 데스크 탑의 경험을 웹에서도 구현할 수 있게 되었다

 

Rich Text Editor

HTML5에서는 워드 문서나 텍스트 편집기와 같은 리치 텍스트 편집용 API가 표준으로 규정되었다

따라서 위지윅(WYSIWYG) 에디터나 맞춤법 검사 기능 등을 웹 문서에 구현할 수 있다

 

위치기반 어플리케이션 지원

Geolocation

HTML5가 실행되는 장치의 위치 정보를 액세스 하기 위한 Geolocation API가 제공된다

장치로부터 위도와 경도 및 표고, 장치의 진행 방향 및 진행 속도 정보를 얻을 수 있다

http://iroute.mobi/ : 아이폰 용 웹 네이게이션 데모

 

문서간 메시지 전송

로 다른 도메인 또는 서로 다른 웹 페이지간 메시지를 주고 받을 수 있는 커뮤니케이션 API가 제공된다

이 기능은 기본 웹 페이지의 서버 이외의 서버에서 호스트되는 위젯과 어플을 개발하는데 매우 유용하다

또한 데이터 송/수신 시 비 동기로 메시지를 주고 받을 수 있어 느슨한 결합 형태의 공유가 가능하다

 

향상된 스타일시트(CSS3)

투명도 조절, 둥근 모서리, 그림자와 같은 웹 문서에 다양한 효과를 줄 수 있는 요소가 추가되었으며

신문 구성과 같은 다중 컬럼 레이아웃 및 새로운 색상 값 새로운 폰트 지원, 텍스트 랩핑 및 스트로크와
같은 다양한 표현 기능이 향상되었다

 

추가 진행중인 기술들

XMLHttpRequest Level2

Ajax의 기초가 되는 XMLHttpRequest 사양의 업그레이드가 진행되고 있다

기존사양을 업그레이드 한 것으로 다음과 같은 추가 기능이 제공된다

- 크로스 도메인 송/수신

- 요청의 진행 상황 확인 가능

- 파일이나 바이너리 데이터 등 송신할 수 있는 데이터의 형식이 추가됨

 

Inexed Database

클라이언트 데이터베이스의 한 종류로 현재 HTML5 사양으로 정해진 Web Storage Web SQL Database의 불편한 점을 해결하고자 추가된 사양이다. 인덱스 된 Key-Value Storage라 할 수 있으며 사용이 편리하고 기능이 많은 API이다

 

File API

웹 어플리케이션에서 사용자 PC의 파일을 액세스 할 수 있는 API이다

보안상 이유로 모든 파일 접근은 불가하고 허가된 영역의 파일만 액세스 가능하다

드래그 & 드롭 한 파일이나 파일 선택 폼에서 사용자가 지정한 파일 등에 액세스 할 수 있다

 

Summary

HTML5는 현재 표준이 확립된 기술이 아니라 진행중인 기술이다. 즉 표준을 위한 작업이 계속 진행 및
추가되고 있는 상황이며 각 브라우저 별로 그 지원 범위 및 방향이 조금씩 상이하기도 하다.

그러나 W3C는 물론 애플 및 구글, 마이크로소프트, 모질라 등 세계적 기업들이 적극적으로 동참하고
있는 기술 표준이며 이미 아이폰과 아이패드와 같은 장치에 기능이 탑재되어 출시되었다


또한 파이어폭스, 사파리, 오페라, 크롬 등 대부분 브라우저의 최신 버전에는 HTML5를 여지없이
지원하고 있으며 마이크로소프트의 IE 다음버전인 9에서도 전폭 지원할 예정이다


더불어 아이폰을 시작으로 한 스마트 폰의 급속한 보급으로 모바일 웹에 대한 관심이 커지고 있다

이는 IE 기반의 브라우저 환경에 한계를 드러냈으며 표준적인 웹 기술의 필요성이 대두되고 있다

또한 플래시나 실버라이트와 같은 밴더 종속적인 기술의 한계도 드러내고 있다

HTML5는 모든 것의 해결책은 아니지만 많은 것의 대안이 될 것임에 분명하다

HTML5 2012년경 그 모습이 완성되어 나갈 것으로 예상되며 많은 기업에서 이를 기반으로 한 웹 응용프로그램을 출시하여 기술이 본격적으로 활성화 될 것으로 보인다

Tags html5

submit

HTML5 책, HTML5 & API 입문

Posted in 모바일/HTML5 // Posted at 2010. 7. 9. 14:07

내가 본, HTML5를 주제로 한 첫번째 책이다
그간 온라인을 통해서만 HTML5 기술을 습득해 왔는데, 책이 나왔다길래 바로 구입했다
모바일 플랫폼 중 1차로 모바일 웹 부분을 담당하게 될 것 같고 관심도 있고 해서 보게 되었다



한글로 된 첫 번째 HTML5 기술 서적이지만 일본서적의 한글 번역본이다
저자는 '시라이시 슌페이'라는 일본사람이다

이 책 이후로 올 6월에 한국 저자가 발간한 책이 추가로 나온 것 같다

책에서는 HTML5에 관련한 대부분의 기술 요소들을 다루고 있으며 간단한 데모 코드도 제시하고 있다
HTML5와 관련한 전반적인 기술 요소를 빠르게 훓어 볼 수 있는 책이다

HTML5 마크업이야 워낙 직관적이라 쉬울 테고, API 부분도 나름대로 깔끔하게 정리한 느낌이다
반면 API 부분의 깊이 있는 탐색은 좀 부족하지 않나 싶다

책을 보기 시작하여 일주일이 채 되지 않아 다 보게 되었다
기존 인터넷을 통해 일부 선행 학습을 한 탓에 쉽게 볼 수 있었던 것 같다
짧은 시간에 많은 정보를 쉽게 습득했다는 점에서 좋은 점수를 줄 만 하다

조금 더 깊은 내공을 위해서는 또 다시 인터넷을 통해 공부하고 적용해 봐야 겠다

Tags html5

submit

브라우저의 HTML5 호환성 점수

Posted in 모바일/HTML5 // Posted at 2010. 7. 5. 14:15

HTML5은 차세대 웹 표준으로 자리를 잡겠지만 현재까지는 표준안이 완성된 것은 아니다
따라서 각 브라우저에서 HTML5의 각종 태그와 API에 대한 지원이 서로 상이하다

http://www.html5test.com/ 에서는 현재 브라우저가 HTML5를 얼마나 지원하는지 검사해 준다
HTML5의 각 세부 요소별로 점수를 계산하여 300점 만점 기준으로 종합 점수를 보여준다

아래는 내 PC에 설치된 IE, 크롬, 사파리, 파이어폭스를 검사 해 본 결과이다

IE 8.0                   :  27 점
크롬 5.0                : 197점   
파이어폭스 3.6.6   : 139점
오페라 10.60         : 159점
사파리 5.0             : 207점

사파리가 가장 좋은 점수를 받았다
역시 플래시를 거부하고 HTML5 를 적극지원하겠다던 애플다운 행보인 것 같다
구글의 크롬 역시 높은 점수를 기록했으며 파이어폭스나 오페라는 그저그런 수준인 듯...
(뭐얌.. 지원할 꺼면 언능언능 지원하던지 않구선.. )

마이크로소프트의 경우 다음버전인 IE9에서는 HTML58를 전폭 지원한다고 했으니 다음에 검사한번
해 봐야 겠다

Tags html5

submit

HTML5 도입, 서버측 기술은 ?

Posted in 모바일/HTML5 // Posted at 2010. 6. 29. 18:38

모바일 웹 사이트 개발을 위해 HTML5를 선택하기로 했지만, 이는 클라이언트 기술일 뿐 막상
서버측 기술은 어떤걸 쓰야 할지 고민이다

문제는 웹 표준이다. 모든 모바일 장비에서 원활히 돌아가야 하기에 표준을 준수하는게 중요하다

ASP.NET 을 사용하자니 각종 서버 컨트롤과 웸폼, 뷰스테이트, 포스트백 등의 매커니즘을 위해
닷넷 프레임워크 차원에서 자동 생성하는 HTML 태그들이 마음에 걸린다.
아직 상세히 테스트를 해 보진 않았지만 예상하기에 대략 호환성에 문제가 있지 않을까 싶다

그러면 ASP냐? 이건 뭐.. MS 자체에서도 기술지원을 그만 둔 과거 기술이기에 시대를 거스르고
싶진 않다. 그러면 JSP, PHP? 이건 내가 잘 모르는 기술이다. 물론 이 환경이 꼭 필요하다면 개발자를
채용해서 담담하도록 하면 되지만, 이 기술들이 필수로 필요하다는 이유가 없다

그러면 ASP.NET 을 ASP 처럼 구현한다?
즉 서버 컨트롤이나 자동 바인딩, 포스트 백 등등 ASP.NET 웹폼 기술은 전혀 사용하지 않고 요청에 대한 처리만 담당하고 프리젠테이션 부문의 디스플레이는 일일이 수동으로 하는 것이다

뭐, 대략 가능은 하겠으나 그리 땡기지는 않는다

우연히 회사 동료랑 예기하다가 MVC 패턴을 고려하게 되었다
닷넷에서도 MVC 프레임워크를 철저히(?) 제공해 주며 이전 서버컨트롤의 난무함(?)이 없다고 하니
일단은 가장 적합한 모델이지 않나 싶다

닷넷이 제공하는 MVC 프레임워크에서 프리젠테이션 컨트롤들과 데이터 연동을 어떤 식으로 하는지
확인해 봐야 겠다

Tags html5

submit