[모바일]검색결과, 144건
- HTML5 관련 유용한 레퍼(참조) 사이트 2010.08.26
- [HTML5] Video & Audio 2010.08.24 6
- [HTML5] Canvas 2010.08.19 3
- [HTML5] Web SQL Database 2010.08.17
- [HTML5] 오프라인 웹 어플리케이션 2010.08.12
- [HTML5] Web Storage 2010.08.11 1
- [HTML5] 드래그 앤 드롭 (Drag & Drop) 2010.08.10 3
- [HTML5] Geolocation 2010.08.09 1
- [HTML5] Web Workers (웹 워커) 2010.08.05 1
- [JQuery] JQuery 사용 환경 설정 2010.08.04
- [JQTouch] 모바일 웹 UI 라이브러리 2010.08.04
- 오픈페인트(OpenFeint) 2010.07.30
- HTML5 Demo, A Look At HTML5 and its Canvas Tag 2010.07.29
- 아이폰 에뮬레이터? 2010.07.21
- 트위터, new tweet 갱신 알림 프로세스 조사 2010.07.21
HTML5 가 웹 개발의 새로운 지평을 열어 놓은 것만은 분명한 것 같다
이러한 흐름을 반영이라도 하듯이,
양질의 HTML5 레퍼 사이트가 속속 등장하고 굉장히 좋은 정보를 제공하고 있다.
아래 소개되는 사이트들을 참고하면 HTML5 를 보다 빨리 그리고 정확하게 습득할 수 있다
HTML5 학습 참조 사이트
W3C HTML5
소개: HTML5 표준화 작업을 진행하는 주체인 W3C에서 제공하는 HTML5 스펙 소개
URL: http://www.w3.org/TR/html5/
WHATWG(Web Hypertext Application Technology Working Group) HTML5
소개: HTML5 스펙을 실질적으로 주도하고 있는 워킹그룹에서 제공하는 HMLT5 사양서
URL: http://www.whatwg.org/specs/web-apps/current-work/multipage/
HTML5 ROCKS (구글)
소개: 구글에서 제공하는 HTML5 관련 학습 및 데모 제공 사이트
URL: http://www.html5rocks.com/
http://playground.html5rocks.com/ (실제 데모 실습을 해 볼 수 있음, so cool~)
HTML5 Showcase (애플)
소개: 애플에서 제공하는 HTML5 관련 학습 및 데모 제공 사이트
URL: http://www.apple.com/html5/
http://developer.apple.com/safaridemos/
Mozilla 개발자 센터(MDC) HTML5
소개: 모질라에서 제공하는 HTML5 학습 사이트
URL: https://developer.mozilla.org/en/HTML/HTML5
https://developer.mozilla.org/ko/HTML/HTML5 (한국어버전)
Opera 개발자 센터(Dev.Opera) HTML5
소개: 오페라에서 제공하는 HTML5 학습 사이트
URL: http://dev.opera.com/articles/tags/open%20web/
w3schools
소개: HTML, CSS, HTML5, JavaScript 와 같은 클라이언트 기술은 물론 asp,php 와 같은
서버스크립트, 웹서비스, SVG, Flash 등 거의 모든 웹 관련 레퍼런스를 제공하는 사이트
URL: http://www.w3schools.com/
Dive Into HTML5
소개: Oreilly 출판사의 HTML5 Up and Running 라는 책의 근간이 되는 사이트
URL: http://diveintohtml5.org/
<html>5 doctor
소개: 몇몇 개발자들이 모여서 만든 HTML5 학습 사이트
URL: http://html5doctor.com/
html5demoes
소개: FF(Full Frontal) 컨퍼런스 모임에서 제공하는 HTML5 데모 사이트
URL: http://html5demos.com/
Caniuse
소개: HTML5, CSS, SVG 등의 브라우저 호환성 테이블 제공 및 데모사이트로의 연결 제공
URL: http://caniuse.com/
IBM Developer Works 에 실린 HTML5 컬럼
- HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html
- HTML5를 사용하여 모바일 장치 웹 애플리케이션 작성하기
https://www.ibm.com/developerworks/kr/library/wa-offlineweb/
- HTML 5로 모바일 웹 애플리케이션 작성하기
https://www.ibm.com/developerworks/kr/library/x-html5mobile1/
- HTML5를 사용하여 웹 애플리케이션 빌드하기
http://www.ibm.com/developerworks/kr/library/wa-html5webapp/
HTML5 로 제작된 사이트 소개
HTML Games
소개: HTML5 로 개발된 온라인 게임을 모아놓은 사이트, 일면 HTML5 게임 포탈
URL: http://html5games.com/
<html>5 gallery
소개: HTML5 로 개발된 사이트를 소개하는 사이트
URL: http://html5gallery.com/
mr.doob
소개: HTML5 , Javascript Deom
URL: http://mrdoob.com/
js do.it
소개: HTML5, Javascript, CSS 공유 사이트(일본)
URL: http://jsdo.it/
Darkroom
소개: HTML5 로 제작된 그래픽 툴
URL: http://mugtug.com/darkroom/
littlecoogie
소개: HTML5 로 제작된 쇼핑몰
URL: http://www.littlecoogie.com/
9elements.com
소개: HTML5 Canvas로 제작, HTML5 관련 데모 링크 제공
URL: http://9elements.com/io/projects/html5/canvas/
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] Notifications (알림) (2) | 2010.08.30 |
|---|---|
| [HTML5] 웹 양식(Web Form)의 개선, 폼 태그 (4) | 2010.08.26 |
| [HTML5] Video & Audio (6) | 2010.08.24 |
| [HTML5] Canvas (3) | 2010.08.19 |
| [HTML5] Web SQL Database (0) | 2010.08.17 |
멀티미디어 지원
HTML 5 를 지원하는 브라우저는 비디오, 오디오와 같은 멀티미디어 형식을 자체적으로 지원한다
HTML 5 는 이러한 멀티미디어 파일을 웹 페이지에 삽입할 수 있는 태그를 정의하고 있으며
재생과 관련한 각종 제어를 수행할 수 있는 스크립트 API가 제공된다
이전의 브라우저 환경
HTML 5가 등장하기 전, 브라우저 환경에서는 멀티미디어 재생을 자체적으로 할 수 없었다
대신 외부 기술, 즉 브라우저에 별도로 설치되는 플러그인(Plug in)의 힘을 빌어 멀티미디어를 표현할 수 있었다. 멀티미디어 재생을 위한 플로그인 기술로는 다음과 같은 것들이 있다
- 윈도우 미디어 플레이어
- 어도비 플래시 플레이어
- 애플 퀵타임 플레이어
- 마이크로소프트 실버라이트
이러한 플러그인이 브라우저에 따로 설치되어야만 멀티미디어 재생이 가능하였으며 이는 곧 표준과는 거리가 먼 개념이 되어 버렸다
웹 응용환경의 일관되고 표준적인 플랫폼을 지향하는 HTML5가 멀티미디어 재생을 위한 스펙이 마련된 것은 어찌보면 당연한 순리라 하겠다. 그 만큼 현재의 웹은 멀티미디어를 빼고 논할 수는 없는 것이다
브라우저 지원 현황
다른 HTML5 스펙과는 달리 비디오,오디오는 브라우저 별로 지원되는 코덱이 상이하다
즉 HTML 5 의 멀티미디어 구현은 지원하더라도 각기 다른 코덱을 지원하는 것이다
Video, Audio 스펙은 표준으로 정해졌지만 코덱은 아직 표준으로 정해진 것이 없기 때문이다
따라서 브라우저가 Video,Audio 를 지원하다고 해도 어떤 코덱을 지원하는 것인지 추가 확인이 필요하다. 우선 Video,Audio 를 지원하는 브라우저 현황을 살펴보자
Video, Audio 지원 현황
- Video 지원 현황
- Audio 지원 현황
출처: http://caniuse.com/
대부분의 최신 브라우저에서 Video, Audio를 지원하고 있다
또한 다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다
alert("현재 브라우저는 비디오를 지원합니다")
}
else{
alert("현재 브라우저는 비디오를 지원하지 않습니다")
}
이제 브라우저별로 각기 달리 지원되는 코덱에 대해 살펴보자
코덱 지원 현황
멀티미디어 형식에 대한 표준이 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 |
출처: HTML5 & API 입문, 시라이시 슌페이 저)
Video & Audio 재생하기
웹 페이지에 멀티미디어 형식을 삽입하고 재생하고 컨트롤 하는 기본적인 태그에 대해 알아보자
<video> , <audio> 태그
비디오, 오디오를 단순히 재생한 시키고자 할 경우 간단한 마크업 만으로도 충분하다
비디오 재생을 위한 <video> 태그와 오디오 재생을 위한 <audio> 태그가 제공되며
각 태그에 멀티미디어 파일의 위치(소스)를 제공해 주기만 하면 된다
<html>
<head></head>
<body>
<video controls autoplay loop
src="http://www.double.co.nz/video_test/transformers480.ogg"></video>
<br>
<audio controls autoplay loop
src="http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3"></audio>
</body>
</html>
구글 크롬 브라우저 실행화면
간단한 태그만으로 웹 페이지에 비디오,오디오 형식을 재생할 수 있다
예제에서 사용된 <video>,<audio> 태그의 속성은 다음과 같다
- src: 비디오, 오디오 파일(소스)를 지정한다
- controls: 재생을 컨트롤 하는 컨트롤 바를 보이게 한다
- autoplay: 자동으로 재생을 시작한다
대체 요소 출력
HTML5 의 비디오, 오디오가 지원되지 않는 브라우저를 위한 대체요소 출력이 지원된다
아래와 같이 <video>,<audio> 태그 사이에 대체요소를 정의하면 된다
HTML5 Video 를 지원하지 않는 브라우저 입니다
</video>
<br>
<audio src="http://www.miaowmusic.com/audio/mp3/Miaow-07-Bubble.mp3">
HTML5 Audio 를 지원하지 않는 브라우저 입니다
</audio>
위 코드를 MS IE 8.0 이하 버전에서 실행해 보면 대체 텍스트가 표시될 것이다
Video & Audio 제어하기
HTML5 에는 비디오, 오디오의 재생과 관련한 다양한 스크립트 API를 정의하고 있다
재생과 관련된 제어라 함은 시작, 중지, 일시정지, 재생위치파악, 재생길이, 재생속도, 볼륨크기, 음소거 등이 있으며 재생 간 발생하는 각종 이벤트 처리를 일컫는다
스크립트 API를 통해 제어를 하기 위해서는 Video(Audio)의 DOM 객체를 대상으로 수행하면 된다
video1.play(); //비디오를 재생함
Video, Audio 를 위한 다양하고 많은 속성과 함수 그리고 이벤트들이 제공된다
다음이 url에서 멀티미디어 관련 API 들을 확인해 보기 바란다
몇 가지 주요한 API를 알아보고 관련 데모를 제작해 보도록 하자
주요 속성
- src: 멀티미디어 파일 소스 지정
- currentTime: 현재 재생 위치를 초 단위로 반환
- duration: 전체 재생시간을 초 단위로 반환
- paused: 일시정지 여부 반환
- ended: 재생 종료 어부 반환
- muted: 음소거 여부 반환
- volume: 볼륨 값(0.0 ~ 1.0 범위를 가짐)
- error: 에러 정보를 반환
- networkState: 멀티미디어 파일과 관련된 네트워크 상태 반환(접속전, 로딩 중, 완료, 로딩 실패 등)
주요 함수
- load(): 멀티미디어를 읽어 들임(재생하지는 않음)
- play(): 멀티미디어를 재생함
- pause(): 일시 정지
주요 이벤트
- play: 재생될 때 발생
- progress: 멀티미디어 파일을 로딩중에 지속적(그리고 간헐적) 발생
- timeupdate: 재생 중에 지속적 발생
- ended: 재생 종료시 발생
- error: 멀티미디어 로딩, 재생과 관련한 에러가 있을 시 발생
자주 응용 될 법한 주요 API에 대한 설명이다. 추가 API 설명은 반드시 관련 자료를 다로 보기 바란다
비디오 데모 만들어 보기
주요 속성과 함수, 이벤트 몇 가지를 응용하여 비디오 재생을 제어하는 간단한 데모를 만들어 보자
- 데모 실행 화면
아래 화면은 데모를 구글 크롬에서 실행한 화면이다.
progress 이벤트에서 구현한 데이터 로딩 부분이 정상 동작 하지 않는다(하단 undefined)
재생, 정지, 음소거, 볼륨 등은 모두 정상 동작한다
그리고 아래 화면은 파이어폭스에서 데모를 실행한 화면이다
파이어폭스의 경우 모든 기능이 잘 동작한다(데이터 로딩 부분 역시 정상 동작함)
그러나 볼륨을 위한 range input 컨트롤이 아직 지원되지 않는 것 같다
이렇듯 브라우저별로 몇 가지 상이한 동작을 하는 것은 HTML5 가 아직 표준화가 완료되지 않는 것을 의미한다. 이제 데모 코드를 살펴 보자
<html>
<head></head>
<body>
<video id="video1" controls
src="http://www.double.co.nz/video_test/transformers480.ogg"></video>
<br>
<button onclick="play()">재생</button>
<button onclick="pause()">일시정지</button>
<button onclick="mute()">음소거</button>
볼륨:<input id="volumecontrol" type="range" max="1" step="any" onchange="updateVolume()">
<div id="time"></div>
<div id="downLoadState"></div>
</body>
</html>
<script type="text/javascript">
var video1 = document.getElementById("video1");
//비디오 재생
function play(){
video1.play();
video1.volume = volumecontrol.value;
}
//비디오 일시정지
function pause(){
video1.pause();
}
//음소거
function mute(){
video1.muted = !video1.muted;
}
//볼륨조절
function updateVolume() {
video1.volume = volumecontrol.value;
}
//timeupdate 이벤트 구현(재생시간 현황 표시)
video1.addEventListener("timeupdate",
function(){
document.getElementById("time").innerHTML =
Math.floor(video1.currentTime) + "/" + Math.floor(video1.duration) + "(초)";
}
, false
);
//progress 이벤트 구현(비디오 다운로드 현황 표시)
video1.addEventListener("progress",
function(e){
var downLoadState = document.getElementById("downLoadState");
if(video1.networkState == 2){
downLoadState.innerHTML = e.loaded + "/" + e.total + "byte";
}
else if(video1.networkState == 3){
downLoadState.innerHTML = "완료";
}
}
, false
);
</script>
브라우저 호환성 확보
앞서 Video, Audio 에 대한 브라우저 지원 현황을 알아 보았다
Video, Audio 는 두 가지 지원 현황을 파악해야 한다고 했는데 요약하자면 다음과 같다
1) Video, Audio 지원 현황
2) 코덱 지원 현황
즉 브라우저가 Video, Audio 자체를 지원하다고 하더라도 지원되는 코덱이 서로 상이하기 때문에
브라우저가 지원하는 코덱정보를 정확히 알고 있어야 원활한 서비스가 가능하다는 것이다
HTML5 멀티미디어 구현을 위해 브라우저 호환성을 확보하기 위한 모든 방법을 알아 보자
1) Video 지원 여부 확인하기
앞에서 알아 본 방법이다.
if(!!document.createElement('video').canPlayType) ...
으로 브라우저가 Video 태그를 지원하는지 체크할 수 잇다
2) 대체 요소 출력
역시 앞에서 알아 본 방법이다. 태그 사이에 대체 요소를 출력한다
<video src="http://www.double.co.nz/video_test/transformers480.ogg">
HTML5 Video 를 지원하지 않는 브라우저 입니다
</video>
3) 코덱 호환성 확보
마지막으로 브라우저별로 상이한 코덱 지원을 검사하여 정상적인 동작을 보장해야 한다
예를들어 사파리의 경우 H.264 를 지원하고 파이어폭스의 경우 Theora를 지원하기 때문에
모든 브라우저에서 정상 동작 시키기 위해서는 각 브라우저가 지원하는 형식으로 서비스를 해야 한다
브라우저가 특정 코덱을 지원하는지 검사하려면 Video 의 canPlayType() 함수를 이용하면 된다
아래 코드는 theora 비디어코덱과 vorbis 오디오 코덱으로 구성된 ogg컨테이너 형식의 멀티미디어를
지원하는지 체크하는 코드이다
return video1.canPlayType('video/ogg; codecs="theora, vorbis"'
그리고 더 쉽게 코덱 호환성을 확보 할 수 있는 방법이 있는데,
바로 <video>,<audio> 태그 사이에 정의되는 <source> 태그를 이용하는 방법이다
<soruce> 태그는 멀티미디어 파일의 위치(소스)를 지정하는 src 속성의 역할과 동일하다
다만 이 태그는 여러개를 중복해서 정의할 수 있는데, 이 경우 멀티미디어 파일의 형식 즉 코덱정보를 명시하여 지정할 수 있다. 브라우저는 여러개의 <source> 태그를 차례대로 검사해서 자신이 지원하는 코덱과 일치하는 <source> 를 채택하여 재생시킨다
그리고 <source> 태그를 이용하면 HTML5 이전의 멀티미디어 환경 즉 플래시나 실버라이트와 같은
형식의 지정도 가능하다. 즉 브라우저가 HTML5 자체를 지원하지 않을 경우 플래시로 대체하는 코드 작성이 가능하다는 것이다(물론 각 버전에 맞는 동영상이 미리 준비되어 있어야 겠지만...)
결과적으로 <soruce> 태그를 이용하여 코덱과 관련한 브라우저 호환성을 쉽게 확보할 수 있는 것이다
아래 코드는 코덱 호환성 확보를 위한 몇 가지 샘플 코드이다
(출처: http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/)
<video controls>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
video not supported
</video>
- ogv, applet 지원
<video controls>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'
onerror="fallback(this.parentNode)">
<object type="application/x-java-applet" width="480" height="288">
<param name="archive" value="cortado-ovt-stripped-wm_r51500.jar">
<param name="code" value="com.fluendo.player.Cortado.class">
<param name="url" value="video.ogv">
video and Java not supported
</object>
</video>
- mp4, swf 지원
<video controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
onerror="fallback(this.parentNode)">
<object data="videoplayer.swf">
<param name="flashvars" value="video.mp4">
video and Flash not supported
</object>
</video>
HTML Video, Audio 태그가 지원되지 않을 때 플래시나 윈도우 미디어로 대체하는 스크립트를
제공해 주는 다음의 사이트를 참고하기 바란다
마지막으로 Video, Audio 와 관련된 데브 오페라 사이트를 참고해 추가 학습하도록 하자
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] 웹 양식(Web Form)의 개선, 폼 태그 (4) | 2010.08.26 |
|---|---|
| HTML5 관련 유용한 레퍼(참조) 사이트 (0) | 2010.08.26 |
| [HTML5] Canvas (3) | 2010.08.19 |
| [HTML5] Web SQL Database (0) | 2010.08.17 |
| [HTML5] 오프라인 웹 어플리케이션 (0) | 2010.08.12 |
HTML5 의 많은 새로운 기능 중 가장 자주 언급되어 왔던 것이 아마 Canvas(캔버스) 일 것이다
Canvas 는 Web Workers 나 Web Storage와 같은 다른 HTML5 스펙보다 덜 기술적이며 보다 직관적이다.
개발자 뿐만 아니라 비개발자들 역시 Canvas의 개념을 쉽게 이해할 수 있고 흥미를 보여왔기 때문에 가장 먼저 그리고 가장 흔하게 소개된 HTML5 기술인 것이다
Canvas 는 말 그대로 그림을 그릴 수 있는 화폭, 즉 그림판과 같다
그것도 다른 곳에 아닌 브라우저 위에서 동작하는 그림판인 것이다
Canvas 위에 선, 도형, 텍스트, 이미지와 같은 그래픽을 표현할 수 있고 색깔, 그림자, 패턴과 같은 여러 효과를 적용할 수 있다. 그리고 기본적으로 Canvas 는 2차원 그래픽 표현을 위한 스펙이지만 추가로
WebGL를 기반으로 하는 3D 그래픽용 Canvas 의 스펙 개발이 진행중이다
브라우저 지원 현황
브라우저 지원 현황 역시 다른 HTML5 기술보다 더 일반적이다
다시 말해 대부분의 브라우저에서 Canvas를 지원한다는 의미이다
 |
그림1. 브라우저별 2D Canvas 지원 현황 (출처: http://caniuse.com/)
IE9 이전 버전에서 Canvas 지원하기
현재까지 출시된 IE8 까지는 HTML5 지원이 거의 되지 않는다
Canvas 역시 IE9 이전 버전에서는 동작하지 않는다
다만 구글에서 제공하는 크롬프레임을 설치하면 IE9 이전버전에서도 HTML5 를 동작시킬 수 있다
그러나 Canvas의 경우 더 쉽게 IE에 적용할 방법이 있다.
ExplorerCanvas 라이브러리를 이용하면 이전버전의 IE에서도 Canvas를 동작시킬 수 있게 된다
(ExplorerCanvas는 이전 버전의 IE에서 Canvas API가 동작할 수 있도록 해 주는 오픈소스 자바스크립트 라이브러리이다)
정의하여 IE일 경우 이 스크립트가 적용되도록 처리하면 된다
<head>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
...
Canvas 학습 지원 사이트
Canvas로 구현할 수 있는 것은 아주 많다
개념적으로 보편적인 기술인 만큼 그 응용 개발 역시 매우 다양하게 펼칠 수 있다
그러나 응용도 기본이 갖춰져야 제대로 되는 만큼 기본사용법의 정확한 숙지가 필요하다
이 글에서도 기본적인 사용법과 간단한 데모를 작성해 보겠지만,
그전에 Canvas 학습을 도와주는 훌륭한 사이트가 있어 소개한다
이 두 사이트에서 제공하는 Canvas 튜토리얼은 정확한 기본기를 갖추고 응용력을 기르는데 충분한 도움을 줄 것이다. Canvas를 적용할 서비스는 굉장히 많으며 특히 게임과 같은 동적이고 화려한 그래픽이 필요한 서비스에는 활용도가 무궁무진할 것이다. 잘 정리된 기본 학습 도구를 활용하는 것이 매우 중요하므로 위 사이트들을 꼭 참고하기 바란다
Canvas 다루기
지금부터 Canvas를 다루는 기본적인 방법에 대해 알아 보도록 하자
<canvas> 태그와 그리기 컨텍스트
그림을 그리기 위해서는 제일 먼저 브라우저에 화폭이 준비되어 있어야 한다
<canvas>라는 마크업 태그를 이용하여 브라우저에 캔버스 영역을 지정할 수 있다
HTML 문서에 <canvas> 태그를 삽입하는 것 만으로 브라우저에 그림판이 준비된다
다만 캔버스는 기본적으로 테투리가 없기 때문에 위 코드만으로는 브라우저에서 캔버스를 눈으로 확인하기는 힘들다. 따라서 스타일을 적용해 캔버스의 테두리를 보이게 하는 것이 좋을 수 있다
style="position: relative; border: 1px solid #000;"></canvas>
그리고 이 캔버스를 이용해 그리기를 수행하려면 '그리기 컨텍스트'를 얻어야 한다
그리기 컨텍스트는 앞서 정의한 <canvas> DOM 객체의 getContext 메서드로 얻을 수 있다
var context = canvas.getContext("2d"); //DOM 객체로부터 2D 컨텍스트를 얻는다
이후 그리기 작업은 '그리기 컨텍스트'를 통해 이루어진다
캔버스의 좌표
캔버스에 각종 도형 및 선과 같은 2차원 그래픽 작업을 할 때 각 점의 위치를 지정해야 하는데
이는 캔버스의 2차원 좌표가 기준이 된다
사각형 모양을 하고 있는 캔버스는 제일 왼쪽 상단 꼭지점이 (0,0) 시작점이 된다
(0,0) 시작점을 기준으로 그리고자 하는 도형의 가로 위치 x 와 세로위치 y 좌표를 지정하면 된다
그림2. Canvas의 좌표 (출처: http://diveintohtml5.org/canvas.html)
그리기 작업
1) 사각형 그리기
그리기의 가장 기본이 되는 도형이다. Canvas API 에서 사각형을 위한 함수를 따로 제공하고 있다
아래와 같은 사각형 함수인데, 모두 같은 매개변수를 취하고 있다
x,y : 사각형의 시작점 좌표(왼쪽 위 모서리 지점), width,height: 사각형의 너비,높이
fillRect(x, y, width, height) : 색으로 채운 사각형을 그린다
strokeRect(x, y, width, height) : 선만 있는 사각형을 그린다
clearRect(x, y, width, height) : 사각형 영역을 지운다
아래 그림은 간단한 사각형 그리기 샘플이다
차례로 속이 찬 사각형과, 윤곽만 있는 사각형, 그리고 절반이 지워진 사각형이다
아래 결과 화면과 코드를 참고하기 바란다
<html>
<head></head>
<body>
<canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas>
</body>
</html>
<script type="text/javascript">
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100); //색으로채운 사각형
context.strokeRect(120,10,100,100); //윤곽만 있는 사각형
context.fillRect(230,10,100,100); //색으로 채운 사각형
context.clearRect(230,10,50,50); //앞 사각형의 절반을 지움
</script>
2) 각종 도형 및 선 그리기
사각형과는 달리, 삼각형, 오각형, 육각형 및 원과 같은 도형은 선들을 연결하여 직접 그려줘야 한다
완성된 도형은 선들의 집합체이며 각각의 선들을 패스(Path) 라 한다
(엄밀히 말하자면 각 선은 서브패스이며 서브패스 전체를 가리켜 패스라 한다)
결국 도형을 그린다는 것은 각 선을 연결한다는 의미이며 이는 패스(Path)를 그리는 과정인 것이다
패스(Path)그리기 순서
첫째, 패스 그리기를 시작을 알린다
: beginPath() 함수로 canvas에 패스그리기를 알린다. 이전의 패스는 모두 초기화된다
둘째, 패스 경로 즉 시작점과 종료점을 지정한다
: moveTo(x,y) 함수로 패스의 시작점을 지정하고 lineTo(x,y) 함수로 패스가 이어질 점을 지정한다
셋째, 패스 경로를 따라 실제로 그린다
: 이전 과정까지는 패스 즉 경로에 대한 정보를 셋팅하는 것이다
실제 지정된 패스를 따라 선을 그려야 하는데, 이는 stroke(), fill()과 같은 잉크(ink)함수가 이용된다
삼각형 그리기
간단한 삼각형 그리기 샘플을 보자.
아래와 같은 삼각형을 그리기 위해 패스그리기를 수행한 예이다
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
context.beginPath(); //패스 그리기 시작
context.moveTo(50,10); //패스 시작점 지정
context.lineTo(20 ,100); //패스 이동점 지정
context.lineTo(80 ,100);
context.lineTo(50 ,10);
context.stroke(); //윤관선 그리기
//context.fill(); //색 채우기
</script>
beginPath() 로 패스그리기의 시작을 알리고 moveTo()로 패스 시작점을 설정한다
그리고 lineTo() 를 이용하여 패스의 경로를, 그리는 방향 대로 이동한다
마지막으로 stroke()로 패스의 윤곽선을 그린다
주석처리된 fill() 함수로 패스를 그릴 경우 패스 속이 색(기존 검정색)으로 채워지게 된다
이런식으로 삼각형은 물론, 사각형, 오각형,.. N각형의 도형을 맘껏 그릴 수 있다
원 그리기
앞서 살펴본 삼각형 그리기는 직선을 연결한 도형일 경우에는 적합하지만 곡선이나 원을
그릴 수는 없다. 즉 lineTo() 함수는 직선을 그리는 함수이다
원이나 곡선 역시 패스 그리기의 일종으로 앞서 살펴본 과정을 그대로 따른다
다만 직선을 그리는 함수인 lineTo() 대신 원을 그리는 함수인 arc() 나 배지곡선을 그리는 함수인 quadraticCurveTo() 함수를 이용하면 된다
간단한 원그리기 샘플을 살펴 보자
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
context.beginPath(); //패스 그리기 시작
context.arc(70,70,50,0, 2*Math.PI, true); //원그리기
context.stroke(); //윤관선 그리기
</script>
패스 닫기
패스를 이용해 도형을 마음껏 그릴 수 있으려면 관련 학습을 조금 더 해야 한다
패스와 관련된 추가 학습은 다른 사이트를 참고하도록 하며 이 글에서는 명시적으로 패스를 닫는 closePath() 함수에 대해 알아보면서 패스 정리를 마치고자 한다
closePath()는 패스를 명시적으로 닫는 역할을 한다
반드시 사용해야 하는 것은 아니지만 명시적으로 closePath()를 호출해 주면
마지막 패스의 좌표와 시작좌표를 자동으로 연결해 주기 때문에 편리하다
다음은 앞서 살펴본 삼각형 그리기 예에서 마지막 패스를 생략하고 closePath()를 대신 사용하였다
즉 마지막 lineTo() 함수가 없어도 자동으로 시작점과 연결해 주기 때문에 결과는 동일하다
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
context.beginPath(); //패스 그리기 시작
context.moveTo(50,10); //패스 시작점 지정
context.lineTo(20 ,100); //패스 이동점 지정
context.lineTo(80 ,100);
context.closePath(); //마지막 패스 이동점 대신 패스를 명시적으로 닫는다
context.stroke(); //윤관선 그리기
</script>
스타일 및 효과
캔버스에 그리기 작업을 할 경우 별다른 스타일을 지정하지 않으면 기본 스타일이 적용된다
앞서 살펴본 샘플에서 도형의 안,팎의 색이 검정색이었던 것은 기본값이기 때문이다
스타일을 적용하면 도형의 색 지정 뿐만 아니라 그라데이션 효과, 그림자 효과등을 줄 수 있다
색 지정
우선 간단히 색을 지정하는 예를 보자. 앞서 살펴본 사각형 그리기 예에서 색을 지정한다
채우기 스타일은 fillStyle 로 윤곽선 스타일은 strokeStyle 로 색을 지정하면 된다
색을 지정할 때 blue, red 와 같은 문자는 물론 #ffffff 혹은 rgb(255,0,0) 등 모든 CSS 컬러를 사용할 수 있다. 색을 지정하지 않았을 땐 기본값으로 #000000(검정색) 이 된다
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(10,10,100,100); //파란색으로 채운 사각형
context.strokeStyle = "red";
context.strokeRect(120,10,100,100); //빨가색 윤곽선 사각형
</script>
그라데이션 효과
fillStyle 이나 strokeStyle를 통해 색깔 지정 뿐만 아니라 그라데이션 효과도 줄 수 있다
그라데이션은 선형그라데이션과 원형그라데이션 두 가지 종류가 있다
선형 그라데이션
: (x,y) 지점에서 (x1,y1) 까지 직선으로 색조가 변화한다
createLinearGradient(x,y,x1,y1) 함수 이용
원형 그리데이션
: 중심이 (x,y), 반지름 r인 원에서 중심이 (x1,y1), 반지름이 r1 인 원 사이의 색조가 변화한다
createRadialGradient(x,y,r,x1,y1,r1) 함수 이용
createXXXGradient 함수로 그라데이션의 형태를 지정한 후,
addColorStop(offset, color) 함수를 이용하여 각 지점에 이용될 색을 지정한다
offset는 0.0(시작점) 에서 1.0 (끝점) 사이의 위치 값을 나타내며 해당 위치의 색을 지정한다
사각형에 선형 그라데이션 효과를 준 예를 살펴 보자
두 사각형 모두 선형 그라데이션 효과를 준 것이며 직선 방향을 조정하여 가로,세로 효과를 줬다
(화살표는 색조 변화 방향을 나타냄)
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"blue");
context.fillStyle = gradient;
context.fillRect(10,10,100,100);
gradient = context.createLinearGradient(0,0,0,100);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"red");
context.strokeStyle = gradient;
context.strokeRect(120,10,100,100);
</script>
그림자 효과
선이나 도형에 그림자 효과를 줄 수 있다.
shadowOffsetX, shadowOffsetY 함수를 이용하여 원본 도형의 위치를 기준으로 그림자의 위치를 지정할 수 있으며 shadowColor 로 그림자 색상 shadowBlur로 그림자의 흐리기를 조정할 수 있다
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
context.shadowColor = "green";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 2;
context.fillStyle = "blue";
context.fillRect(10,10,100,100);
</script>
이미지 및 텍스트 그리기
캔버스에는 선이나 각종 도형 이외에도 이미지 파일을 삽입하거나 텍스트를 직접 그릴 수도 있다
캔버스에 텍스트 그리기를 이용하면 글자에 각종 효과를 줄 수 있는 장점이 있다
그리고 이미지 역시 각종 이미지 처리를 할 수 있다는 장점이 있겠다
텍스트 그리기
우선 캔버스에 텍스트를 그리는 예를 살펴 보자
다른 도형 그리기와 마찬가지로 채워진 텍스트 혹은 윤곽선만 있는 텍스트를 그릴 수 있다
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
var msg = "Hello, Canvas!"
context.font = "20px '맑은 고딕'";
context.fillText(msg, 10 ,50);
context.font = "40px 'Tahoma'";
context.strokeText(msg, 10 ,100);
</script>
이미지 그리기
drawImage 함수를 이용하여 캔버스에 이미지 파일을 삽입할 수 있다
주의할 점은 drawImage의 호출 시점이다. 이미지가 모두 로딩된 이후에 이 함수를 호출해야 한다
따라서 이미지 로딩이 완료될 때 발생하는 onload 이벤트에서 이 함수를 사용하는 것이 일반적이다
눈의 즐거움을 위해 손담비 사진을 이용해 샘플을 만들어 보자 ^.^
Image 객체의 onload 이벤트에서 drawImage 함수가 호출되는 것을 눈여겨 보기 바라며
이미지를 이용하여 사각형을 그릴 때 채우기 패턴으로 사용할 수도 있다
예에서는 손담비 이미지를 기반으로 패턴을 생성하여 사각형의 채우기 스타일로 사용하고 있다
그리고 회전효과도 가미했다(이미지 그리기와는 무관하지만...)
var canvas = document.getElementById("cv");
var context = canvas.getContext("2d");
var image = new Image();
image.onload = function(){
context.rotate(20*Math.PI/180); //회전효과
context.drawImage(image,30,10); //이미지 그리기
var pattern = context.createPattern(image,"repeat"); //반복패턴정의
context.fillStyle = pattern; //fill 패턴 지정
context.fillRect(200,10,200,250); //이미지로 사각형을 채운다
}
image.src = "sondambi.bmp";
</script>
Canvas 초기화
그림을 그리다 모두 지우고 싶을 때가 있다
캔버스에 각종 그래픽 작업을 하다가 모든 것을 지우고 다시 시작하고 싶은,
일명 리셋(reset)을 하고 싶다면 매우 단순하게 초기화를 할 수 있다
캔버스의 너비나 높이 속성을 다시 설정하는 것만으로 캔버스는 완전 초기화 된다
캔버스에 그려진 내용 뿐만 아니라 그리기컨텍스트의 각종 속성도 기본값으로 돌아 온다
canvas.width = canvas.width;
}
마무리 데모
이제 이 글을 마치기 전에 마무리 데모를 살펴 보자
사실 이 글에서 소개된 캔버스 다루기 내용은 극히 일부에 지나지 않는다.
2D 그래픽 처리와 관련한 다양한 기법과 API들이 존재한다.
반드시 관련 자료를 참고하여 추가 학습을 하길 권하며 3D 캔버스인 WebGL도 필요하다면 관련 자료를
찾아 보기 바란다
마지막 데모는 마우스로 그림을 그릴 수 있는 그림판이다
캔버스에 마우스를 데고 자유자재로 움직이면, 선이 마우스를 따라 그려지는 샘플이다
아래 데모 실행화면을 보자. 필자가 캔버스에 대고 그린 그림이다 -.-;
전체 소스
<html>
<head>
<title>Canvas Paint Example</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<div id="container">
<canvas id="drawCanvas" width="400" height="300"
style=" position: relative; border: 1px solid #000;"></canvas>
</div>
</body>
</html>
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load', InitEvent, false);
}
var canvas, context, tool;
function InitEvent () {
canvas = document.getElementById('drawCanvas');
if (!canvas) {
alert("캔버스 객체를 찾을 수 없음");
return;
}
if (!canvas.getContext) {
alert("Drawing Contextf를 찾을 수 없음");
return;
}
context = canvas.getContext('2d');
if (!context) {
alert("getContext() 함수를 호출 할 수 없음");
return;
}
tool = new tool_pencil();
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
function tool_pencil ()
{
var tool = this;
this.started = false;
this.mousedown = function (ev)
{
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev)
{
if (tool.started)
{
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// 마우스 떼면 그리기 작업을 중단한다
this.mouseup = function (ev)
{
if (tool.started){
tool.mousemove(ev);
tool.started = false;
}
};
}
// Canvas요소 내의 좌표를 결정 한다.
function ev_canvas (ev)
{
if (ev.layerX || ev.layerX == 0)
{ // Firefox 브라우저
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0)
{ // Opera 브라우저
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// tool의 이벤트 핸들러를 호출한다.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
</script>
'모바일 > HTML5' 카테고리의 다른 글
| HTML5 관련 유용한 레퍼(참조) 사이트 (0) | 2010.08.26 |
|---|---|
| [HTML5] Video & Audio (6) | 2010.08.24 |
| [HTML5] Web SQL Database (0) | 2010.08.17 |
| [HTML5] 오프라인 웹 어플리케이션 (0) | 2010.08.12 |
| [HTML5] Web Storage (1) | 2010.08.11 |
브라우저에 데이타베이스?
HTML5 의 로컬 저장소는 이전에 알아본 Web Storage 이외에도 관계형 데이타베이스가 추가로
제공된다. 일명 Web SQL Database 가 그것이다
(Web SQL Database 를 지원하는 브라우저는 자체적으로 경량의 관계형 DB를 내장하고 있다)
Web Storage 의 경우 비교적 적은양의 간단한 데이터를 저장하기에 적합한 로컬 저장소인 반면
Web SQL Database 는 보다 구조적이고 체계화된 관계형 데이터를 대랑으로 저장하기에 적합하다
이것은 마치 파일이라는 저장소와 MS SQL 이나 Oracle 과 같은 관계형 데이타베이스의 차이라 하겠다
물론 Web SQL Database가 Oracle 와 같이 서버급, 대용량 DBMS의 면모를 모두 갖추지는 않았지만,
안정적이고 경량의 관계형 자료구조를 지원하고 표준 SQL 질의를 통해 데이터를 보다 유연하게 다룰 수 있다는 점과 클라이언트(브라우저)에 직접 내장되어 있다는 점에서 매우 유용한 기능이라 할 수 있다
Web SQL Database 는 아이폰과 같은 모바일 환경에 많이 채용된 경량의 무료 DB엔진인 SQLite를
기반으로 하고 있다
브라우저 지원 현황
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 Web SQL Database 지원 표이다
(데스크탑 용 브라우저 기준이다)
|
위 표를 보면 사파리와 크롬, 오페라 브라우저는 Web SQL Database 를 지원한다
그러나 파이어폭스가 지원하지 않는것이 조금 의아하다
파이어폭스는 대부분의 HTML 5 신 기술을 채택하고 있는데 말이다
그리고 IE 9 역시 지원이 불투명하다. 조금 뒤에 그 이유를 알아 본다
참고로 아이폰의 사파리 역시 Web SQL Database를 지원한다
다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다
alert("현재 브라우저는 Web SQL Database를 지원합니다")
}
else{
alert("현재 브라우저는 Web SQL Database를 지원하지 않습니다")
}
Indexed Database
Indexed Database는 새로 등장한 또다른 로컬 저장소 스펙이다
2009년 말까지 사양 책정이 진행중이던 Web SQL Database 의 대안으로 탄생했다
즉 현재 Web SQL Database 는 사양 책정이 중지된 상태이며, IndexedDB 라는 새로운 스펙이
대안으로 떠오르고 있는 것이다
Indexed Database 는 자바스크립트 객체 단위의 데이터 저장이 용이하고 그 객체를 대상으로
인덱스를 걸 수 있어 간단한 구현과 효율적인 검색을 수행할 수 있다
관계형 데이타베이스의 경우 저장되는 데이터의 스키마의 유연성이 떨어질 수 있고 SQL 이라는 별도의 독립된 언어를 기반으로 하기 때문에 브라우저간 표준화및 호환성에 문제될 소지가 있다
(MS SQL과 오라클이 자체 비표준 SQL을 지원하는 것처럼 변형된 SQL이 발생할 수 있다는 것이다)
반면 Indexed Database 는 SQL 언어와는 무관하며 단순한 저장구조(Key-Value Storage)를 갖추고 있으며 간단한 자바스크립트 API 만으로도 데이터베이스 조작이 가능하여 보다 브라우저 친화적이고 표준화 작업을 쉽게 이끌 수 있다는 장점이 있다
결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉은 관계형DB보다는
Indexed Database와 같은 객체기반의 비관계형 DB가 더 어울린다고 할 수 있겠다
앞서 파이어폭스와 IE9 브라우저가 Web SQL Database 를 지원하지 않는다고 하였는데,
그 이유가 바로 이들 브라우저에서는 Indexed Database 를 지원하는 것으로 방향을 잡았기 때문이다
데모 만들어 보기
Indexed Database 가 Web SQL Database 의 대안으로 그 사양 책정이 진행중이지만
Web SQL Database 역시 아직은 유효하고 효과적인 로컬 DB 이다
아이폰 및 데스크탑의 사파리 및 크롬에서 이를 지원하고 있기 때문에 무용지물은 아니다
간단한 데모를 만들어 봄으로써 사용법을 숙지하도록 하자
아래와 같이 코드를 작성하는 간략히 설명하자면,
myDB 라는 데이타베이스를 생성(오픈)하고 Test 라는 테이블을 만든다
Test 테이블에 id,name 이라는 두개의 컬럼을 가지도록 한다
이후 Test 테이블에 값을 저장하고 전체를 조회하는 데모이다
<html>
<head>
<script type="text/JavaScript">
var db;
function createDB(){
db = window.openDatabase("myDB","1.0", "테스트용DB", 1024*1024);
}
function createTable(){
db.transaction(function(tx){
tx.executeSql("create table Test(id,name)");
});
}
function insertData(){
db.transaction(function(tx){
tx.executeSql("insert into Test values(?,?)",[txtID.value,txtName.value]);
});
}
function selectData(){
db.transaction(function(tx){
tx.executeSql("select * from Test",[],
function(tx,result){
for(var i = 0; i < result.rows.length; i++){
var row = result.rows.item(i);
document.getElementById('table1').innerHTML += "<tr><td>" + row['id'] + "</td><td>" + row['name'] + "</td></tr>";
}
});
});
}
</script>
</head>
<body>
<button onclick="createDB()">DB 생성</button>
<br>
<button onclick="createTable()">테이블생성</button>
<br>
ID: <input type="text" id="txtID"> , NAME: <input type="text" id="txtName">
<button onclick="insertData()">데이터 입력</button>
<br>
<button onclick="selectData()">데이타 조회</button>
<br>
<table id="table1"></table>
</body>
</html>
데모 실행 화면
구글 크롬 브라우저에서 데모를 실행한 모습이다
개발자 도구를 통해 로컬 DB의 정보를 확인 할 수 있다
기존에 MS SQL과 같은 DBMS와 연동해 본 경험이 있다면,
Web SQL Database의 API는 매우 친근하다는 것을 느낄 것이다
표준 SQL 질의가 그대로 적용되며 몇 가지 특징적 요소가 다를 뿐이다
DB 용량과 관련해서는 브라우저마다 설정이 다르므로 주의할 부분이다
또한 기존 생성한 테이블 스카마 변경 및 버전관리 부분은 관련 API를 찾아보도록 하자
그리고 Web SQL Database 는 기본적으로 비동기로 작업이 이루어진다
데이타베이스 관련 작업이 백그라운드에서 이루어지므로 UI에 영향을 최소화 한다
동기 API 구현방법도 스펙에 포함되어 있지만 현재 브라우저마다 지원여부가 다르며
굳이 동기형태의 구현이 필요해 보이지도 않는다. 관련 자료를 참고하도록 하자
마지막으로 Web SQL Database 역시 Web Storage 와 같이 도메인(사이트) 단위로 DB가 분리된다
즉 특정 도메인에서 생성한 DB는 다른 도메인에서는 접근할 수 없다는 것이다
참고>
http://www.html5rocks.com/tutorials/webdatabase/todo/
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] Video & Audio (6) | 2010.08.24 |
|---|---|
| [HTML5] Canvas (3) | 2010.08.19 |
| [HTML5] 오프라인 웹 어플리케이션 (0) | 2010.08.12 |
| [HTML5] Web Storage (1) | 2010.08.11 |
| [HTML5] 드래그 앤 드롭 (Drag & Drop) (3) | 2010.08.10 |
인터넷 연결 없이 웹 사이트를 사용한다?
인터넷에 연결이 되어 있지 않은 상황에서 웹 사이트를 이용하는 것을 상상해 본 적이 있는가?
웹 사이트는 인터넷 연결을 기반으로 하는 WWW 서비스이다
따라서 네트워크 저 넘어에 있는 웹 사이트에 접속하기 위해서는 인터넷 연결이 필수이다
그러나 HTML 5 는 이러한 웹의 룰(rule)을 깨(?) 버렸다
HTML 5 에서는 인터넷 연결 없이 웹 사이트 이용이 가능한 스펙들을 포함하고 있다
오프라인 웹 실현의 중심이 되는 스펙이 바로 어플리케이션 캐시(Application Cache) 이다
구글의 캘린더 서비스를 사용해 본 적이 있는가?
오프라인 웹 어플리케이션의 전형적인 예이기도 한 구글 캘린더는,
일정 관리를 제공해 주는 서비스인데 인터넷 연결 없는 오프라인 환경에서도 사용이 가능하다
(물론 읽기 전용으로만 사용이 가능하다)
 |
 |
캘린더 페이지를 실행할 수 있고 일정 목록을 조회할 수 있다 (오프라인 캘린더는 읽기 전용이다)
구글 캘린더 뿐만 아니라 구글 독스(Docs), Gmail 등이 오프라인 환경을 지원한다
웹 사이트가 혹은 웹 사이트의 어떠한 기능이,
오프라인에서 동작 가능하다는 것은 웹을 기반으로 하는 서비스 분야에 많은 장점을 가져다 준다
인터넷이 연결되어 있지 않아도 서비스를 이용할 수 있다는 확장성과 서버와의 통신을 줄여
네트워크 트래픽을 감소한다는 성능적 장점도 취할 수 있다
특히 이동성이 부각되는 모바일 환경에서는 더욱 매력적인 환경일 것이다
모바일 환경은 언제 네트워크가 끊길지 모르는 특징이 있으며 경량의 트래픽은 매우 중요한 이슈이다
어플리케이션 캐시(Application Cache) 개요
HTML 5 의 어플리케이션 캐시는 html, css, js 파일 및 이미지 파일, 폰트 파일 등
웹 페이지를 구성하는 각종 웹 리소스들을 클라이언트 단 다운로드 해서 캐싱해 둠으로써
인터넷 접속 없이 해당 리소스들을 이용할 수 있도록 하는 기술이다
매니페스트라는 일종의 구성파일에 캐시 될 웹 리소스를 (개발자가) 정의할 수 있으며
이 구성파일을 메인 페이지(혹은 서비스 되는 어떤 페이지)에 명시하는 것 만으로
어플리케이션 캐시가 자동으로 동작한다. 매우 심플하다
매니페스트 파일에는 캐시될 리소스 이외에도 반드시 네트워크를 통해서만 접근 가능한
리소스를 별도로 지정할 수 있으며 존재 하지 않는 리소스 요청에 대한 대체 리소스 지정도 가능하다
또한 어플리케이션 캐시와 관련된 여러 유용한 자바스크립트 API를 제공해 주는데,
캐싱 상태 조회, 캐시 갱신, 각종 캐시 관련 이벤트 등이 있다
이러한 API를 이용하면 어플리케이션 캐시 동작을 보다 세세하게 제어할 수 있게 된다
임시 인터넷파일과 어플리케이션 캐시
HTML 5 이전 환경에서도 웹 브라우저에서 임시 인터넷파일이라는 장치를 두어
클라이언트에 웹 리소스를 다운로드 해 두고 인터넷이 아닌 하드디스크로부터
리소스를 액세스 하는 매커니즘이 제공된다.
이렇게 함으로써 동일한 웹 리소스 요청은 웹이 아닌 로컬 파일을 액세스 하게 되어
성능을 향상시킨다
아래 그림은 IE 의 임시 인터넷파일에 대한 설정 화면이다
뭔가... 어플리케이션 캐시와 유사한 느낌이지 않는가?
어플리케이션 캐시 역시 웹 리소스를 클라이언트에 다운로드 해서 웹이 아닌 로컬 자원을
사용하는 것이니 말이다
그러나 여기에는 핵심적인 차이가 있다
바로 '오프라인 사용이 가능한가?' 라는 것이다
임시 인터넷파일과 어플리케이션 캐시의 차이점을 살펴 보자
- 오프라인 사용이 가능한가?
어플리케이션 캐시의 가장 핵심적인 컨셉은 오프라인 어플리케이션이 가능하다는 것이다
기존 임시 인터넷파일이 비록, 웹 리소스를 클라이언트에 다운받아 두고
이를 사용한다고 해도 오프라인 상황에서는 무용지물이라는 점이다
다시말해, 임시 인터넷파일도 html, css, js, 이미지 파일 등이 클라이언트에 캐시되지만
버전의 변경 체크를 위해 온라인을 통해 각 파일의 변경 여부를 매번 확인한다는 것이다
브라우저는 웹에 있는 리소스와 로컬에 있는 리소스를 비교하여 변경이 없으면 캐시된 리소스를
이용하고 변경되었으면 웹에서 다시 다운로드 받도록 한다
반면 어플리케이션 캐시는 최초 한번만 다운로드 되면 이후로는 각 파일의 변경 체크를 위해
온라인을 확인하지 않는다
결과적으로 어플리케이션 캐시는 인터넷 연결이 완전히 끊긴 상황에서도 잘 동작하지만
임시 인터넷파일은 온라인일 때에만 정상 동작하게 되는 것이다
- 모든 파일을 확인 하는가?
임시 인터넷파일이 경우 캐시된 모든 리소스에 대한 변경 사항을 체크 하지만
어플리케이션 캐시는 매니페스트 파일의 변경만 체크한다
따라서 캐시된 모든 파일을 확인하는 것보다 효과적이라 할 수 있다
- 캐시 항목의 설정이 자유로운가?
임시 인터넷파일이 경우 웹 브라우저가 알아서 리소스들을 캐시한다
이는 웹 사이트 설계자나 개발자가 개입할 여지가 별로 없다는 것이다
반면 어플리케이션 캐시는 캐시될 항목과 그렇지 않은 항목을 자유자재로 지정할 수 있다
- 기타 캐시 관련 세세한 조작이 가능한가?
앞서 살펴본대로, 어플리케이션 캐시를 위한 다양한 자바스크립트 API가 존재한다
이는 캐시와 업데이트, 캐시 발생 간 이벤트 제어 등이 가능하여 보다 세밀한 제어를 할 수 있다
몇 가지 차이점을 알아봤지만 궁긍적인 차이점은
오프라인 웹 어플리케이션이 가능한가 여부에서 판가름 난다고 할 수 있다
브라우저 지원 현황
어플리케이션 캐시를 지원하는 브라우저 현황을 살펴보자
아래 표는 http://caniuse.com/ 에서 제공하는 브라우저(버전)별 어플리케이션 캐시 지원 표이다
|
대부분의 브라우저에서 어플리케이션 캐시를 지원하고 있다
그리고 표 하단의 Note 에서도 나와 있듯이,
아이폰의 사파리에서 테스트를 해 보니 정상적으로 동작하는 것을 확인하였다
다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다
alert("현재 브라우저는 어플리케이션 캐시를 지원합니다")
}
else{
alert("현재 브라우저는 어플리케이션 캐시를 지원하지 않습니다")
}
캐시 매니페스트(Cache Manifest) 파일
어플리케이션 캐시의 동작에 핵심이 되는 파일이다
이 파일의 특성과 작성 방식을 아는 것이 곧 어플리케이션 캐시를 아는 것과 다름이 없다
캐시 매니페스트는 실제로 캐시될 웹 리소스에 대한 정의를 포함하는 일종의 설정파일이다
브라우저는 이 파일에 명시된 리소스를 기반으로 로컬 캐시 항목을 결정한다
또한 캐시된 리소스가 서버에서 업데이트 되었다면 이를 다시 새 버전으로 캐시해야 하는데
이 역시 캐시 매니페스트 파일의 업데이트 여부가 기준이 된다
그럼 가장 간단한 형태의 매니페스트 파일 예를 보자
# Version 1.0.0.0
ac.html
ac.js
ac.css
매니페스트 파일의 확장자는 .manifest 로 하고, 첫줄은 CACHE MANIFEST 라고 정의해야 한다
그리고 그 아래로 캐시될 웹 리소스들을 정의한다(각 항목은 줄바꿈으로 구분됨)
(#... 은 파일의 주석이다)
그리고 메인페이지(혹은 어떤 페이지)에서 매니페스트 파일을 지정해 주면 된다
이후 이 페이지가 호출 되면 캐시는 동작하게된다
<html manifest="cache.manifest">
....
캐시 매니페스트파일과 MIME 타입
클라이언트의 웹 브라우저는 매니페스트 파일을 기준으로 캐시 여부를 판단한다
따라서 매니페스트 파일은 클라이언트가 접근할 수 있어야 하며 파일의 MIMIE 타입을
알맞게 설정해 줘야 한다
마이크로 소프트의 웹 서버인 IIS 의 경우 인터넷서비스 관리자 화면에서 MIME 타입 설정이 가능하다
.manifest 확장자에 대한 MIME 타입을 text/cache-manifest 로 설정한다
캐시 매니페스트 파일의 3가시 섹션
캐시 매니페스트 파일에는 캐시될 리소스 지정 이외에도
대체 리소스 및 반드시 온라인 액세스를 해야 하는 리소스의 지정도 가능하다
CACHE 섹션
가장 핵심이 되는 섹션이다. 클라이언트에 캐시되어야 할 항목을 지정한다
Cache 섹션으로 지정된 웹 리소스는 오프라인에서도 접근이 가능하게 된다
섹션의 기본값이다. 즉 섹션을 직접 명시하지 않으면 기본적으로 CACHE 섹션이 된다
그리고 CACHE 섹션에 명시하지 않아도 자동으로 캐시되는 파일이 있는데,
바로 manifest 속성을 지정한 html 파일이다
NETWORK 섹션
CACHE 섹션과 반대 되는 개념이다. 반드시 온라인 상태에서만 접근 가능한 항목을 지정한다
업데이트가 매우 잦거나 동적으로 변화하는 웹 리소스를 지정할 때 유용하다
FALLBACK 섹션
대체 리소스를 지정하는 섹션이다
요청한 URL에 해당하는 리소스가 존재하지 않을 때 이를 대신해서 표시할 리소스를 지정한다
다른 요소와는 달리 (공백 혹은 탭을 기준으로) 좌/우 쌍으로 지정한다
예) 다음은 home 폴더에 요청한 리소스가 없을 경우 fallback.html 이 대체리소스로 사용되는 예이다
./home fallback.html
섹션의 기본 값은 CACHE 섹션이며, '섹션이름 :(콜론)' 으로 시작한다
데모 만들어 보기
이제 간단한 어플리캐이션 캐시 데모를 제작해 보자. 파일 구성은 다음과 같다
ac.html : HTML 파일 (manifest 속성이 지정된 페이지)
ac.js : 자바스크립트 파일 (어플리케이션 캐시 지원 유/무를 체크하는 로직 포함)
ac.css : 스타일시트 파일 (문자열을 박스로 감싸는 간단한 스타일 지정)
mkex.jpg : 샘플이미지
mkex2.jpg : 샘플이미지2 (NETWORK 섹션 지정)
위 파일 중 mkex2.jpg 는 NETWORK 섹션으로 지정하여 반드시 온라인 상태에서만 액세스 가능하도록
설정하고 나머지 파일들은 CACHE 섹션으로 지정하여 오프라인 액세스가 가능하도록 지정한다
chace.manifest 파일과 html 파일을 아래와 같이 정의한다
- cache.manifest 파일
# Version 1.0.0.0
CACHE:
ac.html
ac.js
ac.css
mkex.jpg
NETWORK:
mkex2.jpg
- ac.html 파일
<html manifest="cache.manifest">
<head>
<link rel="stylesheet" type="text/css" href="ac.css">
<script type="text/JavaScript" src="ac.js"></script>
<script type="text/JavaScript">
var isSupportCache = supports_offline();
if(supports_offline) {
alert("현재 브라우저는 어플리케이션 캐시를 지원합니다")
}
else{
alert("현재 브라우저는 어플리케이션 캐시를 지원하지 않습니다")
}
</script>
</head>
<body>
<div class='etcBox'> Hello, Application Cache ! </div>
<img src="mkex.jpg"><br>
<img src="mkex2.jpg"><br>
</body>
</html>
예제 실행(온라인 상태에서 첫 실행)
이제 온라인 상태에서 데모 페이지를 실행해 보자
파이어폭스 브라우저에서 데모를 처음 실행하면 다음과 같이 오프라인을 허가할지 여부를 묻게 된다
메니페시트 파일에 지정된 URL은 같은 도메인으로 제한된다
따라서 데모를 처음 실행하면 해당 도메인에 대한 오프라인 액세스 허용 유/무를 묻는 것이다
'허가'를 선택하면 브라우저는
매니페스트 파일을 다운로드 하여 그 안에 명시된 각 CACHE 섹션 항목들에 대해 로컬 캐싱을 해 둔다
이후 CACHE 섹션의 항목들은 로컬에 캐싱된 것을 이용하게 된다
오프라인 상태에서 다시 실행
해당 페이지를 다시 실행해 보는데, 이번에는 오프라인 상태에서 실행 해 보자
네트워크가 차단된 상태에서 해당 페이지를 호출해도 문제없이 실행되는 것을 알 수 있다
(해당 페이지는 물론 스타일 시트, 스크립트 로직이 모두 정상 동작한다)
즉 온라인이 아닌 오프라인에 캐시된 리소스를 이용하기 때문에 네트워크 접속 없이도 가능하게 된 것이다 (참고로 인터넷 임시파일은 오프라인 상태에서는 무용지물이다)
다만 캐시 매니페스트파일의 NETWORK 섹션에 지정한 mkex2.jpg 이미지는 표시되지 않았다
NETWORK 섹션은 반드시 온라인 상태에서만 접근 가능한 항목이기에 당연하다
참고>
파이어폭스의 '오프라인으로 작업' 메뉴를 통한 오프라인 테스트는 정상동작 하지 않았다
실제로 네트워크 카드를 '사용 안함'으로 하여 테스트를 수행 해 보았다
캐시 업데이트
매니페스트 파일에 지정된 CACHE 섹션 항목들은, 첫 요청 이후 모든 재 요청은 로컬에서 처리된다
즉 a.html 파일이 캐시되었다면 앞으로 이 파일에 대한 모든 액세스는 클라이언트에 캐시된 것이
이용되며 서버로의 요청은 이루어 지지 않는다
만일 a.html 파일이 서버에서 업데이트 되었다면 이를 반영할 수 있어야 하는데
이때에도 역시 캐시매니페시트 파일이 기준이 된다
브라우저는 캐시된 모든 항목들의 변경 사항을 일일이 확인하는 대신
캐시매니페스트 파일의 변경 사항만을 확인하여 캐시 업데이트 여부를 판단한게 된다
매 요청시 마다 캐시매니페스트 파일의 변경 여부를 확인하여,
이 파일이 변경 된 경우 모든 캐시 항목들을 다운로드하여 다시 캐싱 하는 것이다
따라서 클라이언트에 캐시된 리소스를 업데이트 하기 위해서 캐시매니페스트 파일을 변경하면 된다
캐시 매니페스트 파일의 버전(주석) 을 통한 업데이트 관리
캐시 업데이트가 매니페스트 파일의 변경을 기준으로 하기 때문에 이 파일의 업데이트 관리 방법
염두해 둘 필요가 있다.
캐시 업데이트가, 매니페시트 파일에 정의된 파일명의 변경이나 추가,제거라면 매니페스트 파일을
직접 수정하면 되지만, 기존 캐시된 파일안의 내용만 변경된다면 파일명 변경이 일어나지 않기 때문에
딱히 매니페시트 파일을 수정할 것이 없게 된다.
그러나 캐시는 업데이트 되어야 하므로 매니페스트파일을 어떤 식으로든 수정을 해야 한다
(그래야 브라우저는 캐시를 업데이트 할 것이다)
따라서 이런 저런 경우를 다 포함하는 방법이 바로,
매니페스트 파일에 버전 문자열을 주석으로 정의해 두는 것이다
앞서 데모에서도 매니페스트파일에 버전번호를 주석으로 달았는데,
이것이 바로 캐시 업데이트를 위한 것이다. 이렇게 버전 번호를 업데이트 시 마다 변경해 주면
매니페스트파일이 변경된 것과 같으므로 브라우저에게 다시 캐시하도록 할 수 있게 되는 것이다
어플리케이션 캐시 관련 스크립느 API
어플리케이션 캐시는 기본적으로 매니페스트파일을 기준으로 동작하지만
추가 세세한 제어를 위해 스크립트 API 및 몇 가지 이벤트를 지원한다
어플리케이션 캐시 API 의 핵심객체는 applicationCache 객체이며
이 객체의 status 속성으로 캐시 상태를 점검할 수 있다
또한 update() 함수로 캐시 업데이트를 명시적으로 수행할 수 있으며
updaterdady 이벤트를 수신하여 최신 캐시를 얻은 시점을 제어할 수 있다
더불어 업데이트 에러를 알려 주는 error 이벤트, 캐시 완료를 알려 주는 cached 이벤트 등이 있다
또한 progress 이벤트는 업데이트 진행 중에 발생함으로 이 이벤트를 이용하면, 대량 캐시 업데이트 시
진행상태바와 같은 도우미 UI를 제공할 수 있게 된다
기타 몇 가지 유용한 API 와 이벤트가 제공되니 캐시 업데이트를 더욱 세세하게 제어하고 싶으면
관련 자료를 참조하기 바란다
진정한 오프라인 웹 어플리케이션
어플리케이션 캐시가 오프라인 웹 어플리케이션의 근간이 되는 기술이긴 하지만,
보다 철저한 오프라인을 지원하기 위해서는 뭔가 부족함이 있어 보인다
인터넷 연결을 끊어 졌을 때,
URL을 기반으로 하는 웹 리소스에 대한 오프라인 액세스 뿐만 아니라
데이터 조회, 수정, 삭제 등 동적 데이터 관리도 가능하게 하려면 이 기술만으로는 부족하다
동적 데이터 관리를 오프라인 상태에서도 가능토록 하려면, 클라이언트 저장소 기술이 접목되어야 하는데 HTML 5 의 스펙 중 Web Storage, Web Database 등이 이 시나리오에 적합해 보인다
따라서 진정으로 동적 동작이 가능한 오프라인 웹 어플리케이션을 개발하기 위해서는
어플리케이션 캐시와 더불어 Web Storage, Web Database 와 같은 클라이언트 저장소 기술을
같이 사용해야 할 것이다
참고> 리소스가 캐시되는 위치
어플리케이션 캐시는 서버의 리소스를 오프라인에서 사용할 수 있는 것이기 때문에
클라이언트 PC 어딘가에는 해당 리소스를 저장해 둘 필요가 있다
이는 브라우저마다 조금씩 그 위치가 다르긴 하지만 폴더의 구조만 봐도 어느정도 알 수 있다
이 글이 테스트된 파이어폭스의 경우 아래와 같은 경로에 위치하고 있다
(현재 나의 PC 기준이다)
C:\Documents and Settings\사용자이름\Local Settings\Application Data\Mozilla\Firefox\Profiles\o5ywhov7.default\OfflineCache
참고>
http://www.html5rocks.com/tutorials/appcache/beginner/
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] Canvas (3) | 2010.08.19 |
|---|---|
| [HTML5] Web SQL Database (0) | 2010.08.17 |
| [HTML5] Web Storage (1) | 2010.08.11 |
| [HTML5] 드래그 앤 드롭 (Drag & Drop) (3) | 2010.08.10 |
| [HTML5] Geolocation (1) | 2010.08.09 |
클라이언트에 데이터를 저장하다
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 에서도 지원하는 것으로 나와있다
그리고 아이폰의 사파리에서 테스트를 해 보니 정상적으로 동작하는 것을 확인하였다
다음의 코드로 브라우저 지원 여부를 체크해 볼 수 있다
alert("현재 브라우저는 WebStorage를 지원합니다")
}
else{
alert("현재 브라우저는 WebStorage를 지원하지 않습니다")
}
Web Storage 데모 만들어 보기
로컬스토로지와 세션스토로지를 이용하는 간단한 데모를 만들어 보자
<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 |
끌어다 놓기(드래그 앤 드롭, 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 입문 책의 소스코드를 기반으로 했음을 밝힌다)
<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 |
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 메서드를 이용하여
콜백 메서드만 정의하면 된다. 아래는 간단한 코드 샘플이다
(위치 정보 확인 작업은 비동기로 이루어진다)
<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 |
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 를 이용해서 스크립트 작업을 하면 웹 표준에 위배되는지 걱정하지 않아도 되며
매우 간단한 문법구조로 많은 처리를 할 수 있는 장점이 있다
또한 스크립트의 안정성도 뛰어나 결과적으로 스크립트 작업의 생산성을 극대화 할 수 있게 된다
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
'모바일 > Javascript' 카테고리의 다른 글
| RGraph, HTML5 그래프 라이브러리 소개 (0) | 2010.09.14 |
|---|---|
| Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사 (0) | 2010.09.06 |
| [JQTouch] 모바일 웹 UI 라이브러리 (0) | 2010.08.04 |
| 아놔.. JQTouch, iUI 도 있구먼.. (0) | 2010.07.13 |
| [Book] JQuery 책 구매 (0) | 2010.07.12 |
JQuery 의 UI 라이브러리에 해당하며 JQuery 플러그인이라고 한다
http://www.jqtouch.com/
현재 1.0 베타 2 버전이 배포되고 있다
사파리와 같은 웹킷(WebKit) 기반의 브라우저에서 UI 개발을 마치 전용 앱(App)의 느낌과 사용성으로
제작할 수 있는 라이브러리이다
http://www.jqtouch.com/preview/demos/main/ 에서 몇 가지 데모를 확인할 수 있다
아래 그림은 http://www.testiphone.com/ 에서 아이폰 에뮬레이터로 실행해 본 모습니다
데스크탑 웹과는 그 표현면에서 많은 차이가 있으며,
모바일 기기에 적합한 레이아웃과 느낌 등 사용성을 최적화 할 수 있다는 장점이 있다
'모바일 > Javascript' 카테고리의 다른 글
| Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사 (0) | 2010.09.06 |
|---|---|
| [JQuery] JQuery 사용 환경 설정 (0) | 2010.08.04 |
| 아놔.. JQTouch, iUI 도 있구먼.. (0) | 2010.07.13 |
| [Book] JQuery 책 구매 (0) | 2010.07.12 |
| 다음(Daum), Sparrow framework (0) | 2010.07.08 |
팀장님이 알려주신 오픈페인트 서비스
오전에 관련 앱과 게임을 다운받아 보고 조금 사용해 봤다
외국에서 개발한 이 서비스는 아이폰 무료 게임들의 게임 스코어 정보를 저장하여 다른 사람과
랭킹 정보를 공유할 수 있도록 해주며 친구를 맺게 하여 지속적인 공유가 가능토록 한다
또한 채팅 및 게시판과 같은 커뮤니티 기능을 제공하며 트위터와 페이스북과의 연계성도 가지고 있다
예를 들어 특정 게임 실행 후 스코어를 트위터에 바로 등록할 수 있는 기능이 있다
트위터에 자동으로 등록된 글을 보니 게임 시코어는 물론 해당 게임의 앱스토어 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
'모바일' 카테고리의 다른 글
| MobiOne, 아이폰 에뮬레이터 (5) | 2010.08.31 |
|---|---|
| 모바일 웹 마켓(오픈앱마켓,OPENAPPMKT) (0) | 2010.08.30 |
| 아이폰 에뮬레이터? (0) | 2010.07.21 |
| 트위터, new tweet 갱신 알림 프로세스 조사 (0) | 2010.07.21 |
| 모바일 결제 시스템 조사 (1) | 2010.07.21 |
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 |
아이폰의 사파리 브라우징을 제공하는 사이트가 있었구먼
http://www.testiphone.com/
떱! 난 그것도 모르고 여태껏 내 아이폰 열어서 수동으로 확인했구먼...
이런.. 역시... Know Where 얌... 모르면 손발이 고생한다더니.. ㅎ
'모바일' 카테고리의 다른 글
| 모바일 웹 마켓(오픈앱마켓,OPENAPPMKT) (0) | 2010.08.30 |
|---|---|
| 오픈페인트(OpenFeint) (0) | 2010.07.30 |
| 트위터, new tweet 갱신 알림 프로세스 조사 (0) | 2010.07.21 |
| 모바일 결제 시스템 조사 (1) | 2010.07.21 |
| 뷰 포트(Viewport) (8) | 2010.07.14 |
싶어졌다
트위터 사이트를 열어 두면 아래 그림처럼 자동으로 새로 올라온 트윗이 있다고 알려 준다
사실 웹 표준을 준수하는 사이트의 자동 알림과 같은 기능은 대체로 폴링(pollling) 방식일 것이며
비동기로 호출해야 하기 때문에 AJAX 가 사용되리라는 것은 웬만한 웹 개발자면 다 아는 내용이다
따라서 심도있는 조사? 라는 것이 있을 수 없겠지만... 어쨋던 한번 들여다 보고 싶어졌다 ㅎㅎ
일단 Fiddler 와 네트워크패킷분석기라는 2개의 툴로 요청과 응답을 캡쳐 해 봤다
예상대로 AJAX를 통한 비동기 호출이었고 데이타 교환 포맷은 JSON 을 사용하는 듯 하다
아래는 트위터가 자동으로 호출하는 요청 패킷의 헤더 정보의 일부이다
XMLHttpRequest 로 부터 AJAX 통신을 유추할 수 있다. 그리고 JSON 포맷을 수용하고 있다
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 특유의(?) 데이터 포맷인 바디 구성이 눈에 띈다
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 |
