| [javascript] JSON 사용시 유의 사항 (0) | 2009.09.08 |
|---|---|
| [Java] 절대 코더들도 까먹는 형변환 (int, double, long.. <->String) (0) | 2009.08.06 |
| [Javascript] XML <-> JSON (0) | 2009.08.01 |
| 브라우저 호환성을 고려하며 개발하기 (0) | 2009.07.30 |
| 한국의 개발 현실의 한가운데에서 잠시... (0) | 2009.07.29 |
변하고 있다. 당신이 모르고 있을 뿐
아마도 매일 인터넷 서핑을 하고 있는 당신, 웹 개발에 관심 있으신 분이 아니라면 HTML이란 단어에 많이 익숙하지 않으실 겁니다. 웹 개발자라고 하시더라도 HTML은 단순한 표현 언어라고 생각하시는 분이 많습니다. 맞습니다. 그런데, 더 이상 아닐지도 모르겠습니다. HTML5라는 말을 들어 보셨나요? 구글에 HTML5라는 키워드를 넣는 순간 많은 글이 쏟아져 나오는 것을 보시게 될 겁니다. 2007년도 글이 좀 있고, 2009년도부터 많은 글이 등록되고 있습니다. 또한, 구글을 비롯한 인터넷 업체의 발표회에서 절대 빠지지 않는 단어 중 하나는 HTML5 입니다. 대체 뭐길래? 그들은 이에 오감을 곤두세우고 있을까요?
먼저 말씀 드리면, HTML5는?
최근 10여년 간의 웹 기술 발전을 대부분 포함하는 새로운 HTML 표준 규약을 가리킵니다. 그리고, 그 이면의 HTML5는 인터넷 관련 업체들이 다음 세대 웹 시장의 주도권을 쥐기 위한 싸움의 결정체라고도 생각됩니다.
조금만 백그라운드 지식을...
HTML4는 1998년도에 정해진 표준입니다. 인터넷에서 문서를 표현하기 위한 마크업 언어(Markup Language) 표준으로 만들어 졌습니다. 한동안 잘 사용되어 왔지요. 하지만, 그래픽, 멀티미디어에 대한 요구가 많아지면서 어느 날부턴가 우리에게는 RIA, AJAX라는 표현이 많이 들리기 시작했습니다. 한잠 자고 일어나면 Flash, Flex, Silverlight, JavaFX 등등 이름이 멋진 기술들이 속속 소개되기 시작했습니다. 따라가기도 힘들고 모두 파악하기도 힘들어져 버렸습니다. 그래서 인지 심플해야 할 웹이 점점 복잡해져 버리기 시작한 것이지요. (ActiveX는 이야기도 꺼내지 않겠습니다.)
이유야 여러 가지가 있겠지만, 표준 기관이 제 역할을 못했고 시장 지배적인 회사가 기술을 선도하지 못했기 때문이라고 저는 생각합니다. 그래서, 모두가 생각하길(대부분이 맞을 수도..), 속된 말로 '더러워진 웹'을 정리할 때가 된 것입니다. 그래서, 업계의 젊은 피(?)들이 힘을 모아 이 판도를 바꾸어 보겠다고 나서게 되었습니다. 구글과 애플 그리고 오픈 소스 진영의 모질라 재단입니다.
'너무 복잡해지고 몇몇 업체의 기술이 지배하고 있는 웹 기술을 표준화하고 공개해서 사용자에게 새로운 선택(choice)의 기회를 주자!'
라는 대의 명분을 가지고 이 반란은 시작되었습니다.
잠시 딴 이야기 좀... 브라우저 뭐 쓰세요?
잠시 딴 이야기를 하겠습니다. 브라우저 무엇을 사용하시나요? 아마 IE라고 답하시는 분이 대부분일 것입니다. 맞습니다. 아직도 IE의 점유율이 70% 이상인 것이 사실입니다. 하지만, 재미난 사실은 국내에서도 이미 파이어폭스(firefox)라는 불여우 브라우저의 점유율이 30%를 넘보고 있다는 사실입니다. 조사마다 그 값은 차이가 있지만 확실한 것은 비주류 브라우저들의 반란이 시작되었다는 것입니다. 항간에는 불여우 브라우저의 점유율이 세계적으로(단기적으로) 51%를 넘었다는 기사도 있습니다.
무엇을 의미할까요?
그간 시장의 대장이라는 이유로 수없이 많은 좋은 기술을 핍박하고 누를 수 있는 힘이 점점 약해지고 있다는 것입니다. 더 이상 대장의 말 보다 대세의 말이 중요해 졌단 말이지요.
대세는 무엇?
당연히 HTML5의 표준화가 대세입니다. HTML5는 초 신기술에 대한 정의가 아닙니다. 그런데, 왜? 주목하는 것인가요? 판세를 바꿀 수 있기 때문입니다. 예전에 왕을 폐위하기 위해서는 항상 명분이 필요했습니다. 그리고, 이를 위해 법과 관련 조례 등등이 필요했지요. (꼭 아니더라도 느낌만.. ^^) 이번 표준화도 이와 비슷해 보입니다. 시장의 약자들이 모여서 HTML5를 무기로 현재 왕인 MS IE, Adobe flash 콤비의 힘을 약화 시켜서 웹 생태계를 좀 평등하게 만들겠다는 겁니다. (또 다른 왕이 되고 싶기도 하겠지요.) 다르게 말하면 'IE 완벽 호환' 이라는 단어를 웹에서 없애 버리겠다는 것이지요. 몇 년 전 만에도 거의 불가능해 보였습니다. 그런데, 처음에는 불가능해 보이던 이 반란이 몇 년에 걸쳐서 힘을 키우더니 최근에는 드디어 주목을 받기 시작한 것입니다. 앞서 말한 브라우저 지배력의 재편으로 인해 3약이 모여 1강을 협박하기에 이른 것이지요. 이미 변화는 시작되었습니다.
그럼 잠깐 알아볼까요? HTML5가 뭔지? (주의! 기술에 관심 없으면 패스!)
진짜 너무 방대하고 기술적인 스펙이라서 일일이 설명하는 것은 포기했습니다. ^^ 다만 핵심적인 키워드 5개만 짚고 넘어가겠습니다. 예제 사이트를 적절하게 이용해 주세요~
1. Canvas 를 통한 그래픽 드로잉(drawing) 지원
- 이제 Javascript로 그림을 그리는 것이 가능합니다. 사각형, 원, 자유도형 그리고 색칠하고 모두 가능합니다. 게임도 가능하겠지요?
뮤직 플레이어 (firefox3.5+ and more)
http://9elements.com/io/projects/html5/canvas/
둠과 유사한 게임 (firefox3.5+ and more)
http://www.benjoffe.com/code/demos/canvascape/
마리오카트와 유사한 게임 (firefox3.5+ and more)
http://www.nihilogic.dk/labs/mariokart/
데이터 시트 (firefox3.5+ and more)
3D 지원 (firefox3.5+ and more)
http://www.macrumors.com/2009/09/13/webgl-support-begins-to-arrive-in-webkit/
http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas/
2. Video 코덱 표준화
- 현재 Ogg Theora와 H.264가 격돌 중입니다. 코덱이 표준화 되면 동영상 플러그인이 필요 없게 됩니다. 바로 시청 가능~ 개발자 입장에서는 비디오 객체를 Javascript로 다룰 수 있게 됩니다. 기존보다 easy!
HTML5 <video>로 구현된 예제 (firefox3.5+ and more)
http://people.opera.com/brucel/demo/video/controls.html
http://www.double.co.nz/video_test/test1.html
video 객체를 script로 제어하는 예제 (firefox3.5+ and more)
http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
SVG를 연동하여 동적으로 video를 제어하는 예제 (firefox3.5+ and more)
http://www.double.co.nz/video_test/video.svg
3. Local Storage 지원
- 구글 기어(Google Gear)랑 비슷한 겁니다. 로컬 하드의 특정 영역에 DB 형태로 저장하고 꺼내고 가능합니다. 오프라인 어플리케이션! 이 가능해 집니다.
Notepad 데모 (Safari only)
http://webkit.org/demos/sticky-notes/index.html
Key, Value 쌍 저장 데모 (firefox3.5+ and more)
http://people.w3.org/mike/localstorage.html
4. Geolocation API 표준화
- 장치 API와 브라우저 간에 인터페이스를 표준화해서 위치 정보를 브라우저에서 사용할 수 있게 됩니다. 카 네비게이션 이런 것도 가능해 지겠지요?
현재의 위치를 알려주는 서비스 예제 (firefox3.5+ and more)
http://www.browsergeolocation.com/
canvas 기술로 구현한 자동차 내비게이션 컨셉 구현 예제 (firefox3.5+ and more)
http://ernestdelgado.com/public-tests/canvas-gpsmap/
(현재는 위치 정보와 연계되지 않았지만, 주요 응용 분야임)
5. Web Worker를 이용한 multi thread 지원
- multi thread를 지원하기 때문에 task의 병렬처리가 가능해 집니다. 이 기술로 얻을 수 있는 효과로는 부드러운 UI 렌더링, 백그라운드 프로세스를 이용한 로컬 데이터 업데이트 등을 들 수 있습니다.
http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml
6. 그 외에 태그 표현과 관련해서 많은 변경
- 너무 많아서 패스
http://dev.w3.org/html5/html4-differences/
http://channy.creation.net/project/html5/html4-differences/Overview_ko.html
그럼 이제 무슨 생각이 드십니까?
'뭐, 몇 개 빼고는 사용자 입장에서 장점은 없는 거 아닌가요?' 라는 생각이 드시나요? 그럴 수도 있습니다. 실제로 사용자 입장에서는 그래픽, 멀티미디어 뭐 이런 거 다 Flash가 해 줬습니다. 인터넷도 빵빵하니까 굳이 로컬에 저장 할 필요도 없습니다. 그깟 위치정보 없으면 어떻습니까?
근데 아쉽게도 하나만 알고 둘을 모르시는 것은 아닐까요? 지금까지 인터넷을 PC로만 하셨지요? 휴대폰으로 인터넷다운 인터넷을 못 해보았기 때문에 그러한 반응을 보이시는 것 같습니다. 지금까지 모바일 웹 은 항상 뒷전이었습니다. 그 이유는 일단 화면이 작고 브라우저 성능이 너무 떨어졌기 때문입니다. 네이티브 어플리케이션(native application)과 표현력의 격차가 너무나 크기 때문에 이미 눈높이가 높아진 사용자에게 모바일 웹으로는 어필하기가 어려웠습니다. 하지만, 모바일 브라우저로도 게임이 된다면? 꼭 인터넷에 연결 하지 않아도 이전에 읽었던 메일을 확인할 수 있다면? 웹에서 멀티미디어를 빵빵(? 약간 과장)하게 즐길 수 있다면? 어떠시겠습니까?
그렇습니다. HTML5는 모바일 웹에 새로운 바람을 불어 넣을 것입니다. 새로운 표준은 우리의 눈높이를 맞추기 위한 기술적인 환경을 만들어 줄 것입니다. 기존에 우리가 바라고 원하던 모바일 웹이 실현되기에 좋은 환경이 만들어 지게 되는 것입니다. 우리가 지금까지 프로그램을 깔아야만 즐길 수 있던 유용한 모바일 애플리케이션들을 곧 플랫폼과 무관하게 브라우저를 통해 디바이스(휴대폰)에서 사용하게 될 날이 올 것입니다.
이제 마치며
제가 드리는 말씀은 최신 논문을 분석해서 드리는 말씀이 아닙니다. 이미 이 분야의 전문가(?)라는 분들의 의견을 제가 편드는 쪽으로 미화해서 말씀 드리고 있습니다. ^^ (그래도 근거가 있단 말이지요.) 누구도 아직까지는 HTML5가 어떻게 될 거라고는 단언하지 못합니다. 아직 강자가 건재하기 때문입니다. 하지만, 바램이 있다면 웹이 더 이상 폐쇄적인 기술에 휘둘리지 말고 그 플랫폼 기술이 모든 오픈 되는 것입니다. 소스 코드의 오픈이 아니라 웹 플랫폼의 오픈을 말씀드리는 것입니다.
수년간 윈도우즈라는 고마운 OS에 의해 IT가 이끌어져 왔습니다. 하지만, 여기에는 분명히 장점과 단점이 존재했고 단점에 의한 폐해도 많이 보아 왔습니다. 차세대 응용 플랫폼 중 하나일 웹! 누군가가 이를 소유한 다는 것이 옳을까요? 가지고 있어야 돕는다는 논리는 이제 구식이라고 생각합니다. 이제는 같이 생각하고 같이 발전시킬 시기입니다. 그렇게 되길 희망합니다.
| HTML5 (HTML4와의 주요 차이점) (1) | 2009.09.11 |
|---|---|
| 트위터, 페이스북, 미투데이, 싸이월드... (0) | 2009.08.24 |
| Firefox 3.5 오픈 비디오 지원! (0) | 2009.08.20 |
| HTML5, XHTML2 새로운 표준은? (0) | 2009.07.21 |
| [REST ③] Security and REST Web Services by Richard Mooney (2) | 2008.07.09 |
○ 특정 기업의 독점 기술에 의존하지 않는 공개되고 표준화된 웹 환경을 만들기 위한 기술
1. 표준 codec 기반의
비디오, 오디오 재생 환경 내장
- 웹 멀티미디어 codec 표준화
-기존에는 멀티미디어 재생을 위해 외부의 plug-in을 설치해서 재생해야만 했음
(다수의 외부 플러그인
존재: Flash, Shockwave, Media Player, Quicktime...)
- HTML5에서는 표준 코덱을 선정해서 브라우저에서 플레이어를 기본 내장하도록
함
-Ogg와 H.264가 가장
유력한 후보
(Firefox,opera:Ogg, Chrome:H.264,Ogg, Safari:H.264 지원함. 단, 유동적임)
2. Graphics 지원을 위한 Canvas 제공
- 애플이 최초로 제안했으며
Mac OS X에서 Dashboard와 같은 위젯 어플리케이션을 동작 시키기 위해 소개되었음
- HTML4는 그리기(Drawing)에
대한 정의 및 기능이 없음 (글자로 구성된 문서를 보여주기 위한 포맷.
따라서, Flash와 같은 플랫폼이 발전하게 됨)
- HTML5에서는 그리기 영역과 그리기
API를 제공함, 브라우저에서 다양한 그래픽 구현이 가능함 (Flash, SilverLight와 기능이 중복되는 부분이 많음)
- 2D Canvas의 경우는 이미 대부분의 브라우저에서 지원하고 있음 (IE 지원 안함)
- 3D Canvas 의 경우에는 최근 제안 형태로 발표되기 시작함 (OpenGL ES 2.0 기반)
3. Local storage / DB 지원
- 업체별 각각의 접근 시도가 있었음. 이를 HTML5 Local Storage로 표준화
: IE의 userData, FF의 Dom Storage, Flash의 Local Shared Object,
Google Gear
- offline에서도 웹 어플리케이션을 사용 가능토록 하는 것이 주된 목적
: 항상 online이기 어려운 모바일 환경에서 더 중요해짐
|
Session Storage |
현재 열린
창에서 사용될 수 있는 session data를 저장 |
|
Local Storage |
다수의 창
간에 사용될 수 있는 특정 도메인의 데이터 저장 |
- 그 크기는 5M~10M 정도로
예상됨
4. Geolocation API 지원
- 기기에서 제공하는 위치 정보(GPS/WiFi/3G
based location)를 브라우저에서 Script API를 통해 제공받을 수 있음
- 위치 정보 : 위도, 경도, 높이, 정확도, 진행방향, 진행속도
- 1회 요청 모드(getCurrentPosition)와
반복 요청 모드(watchPosition) 존재
- 캐쉬값(maximumAge) 설정을
하면 해당 기간 동안에는 저장된 값을 사용함
- 지도 정보의 정확도(enableHighAccuracy)를
설정할 수 있음 (네이버의 시,구,동으로 표현되는 축척 개념)
5. Web Worker를 통한 백그라운드 프로세스 지원
- HTML4 지원 브라우저의 자바스크립트는 단일 프로세스로 순차적으로 동작함
- HTML5에서는 Web Worker라는
기술을 통해 다중 thread를 지원함
- 멀티프로세스 지원으로 인해 효율적인 task의 처리가 가능해 짐
: 웹 어플리케이션이 시각적으로 훨씬 빠르게 반응하도록 개발이 가능해짐
| HTML5 그 놈이 온다. (4) | 2009.09.24 |
|---|---|
| 트위터, 페이스북, 미투데이, 싸이월드... (0) | 2009.08.24 |
| Firefox 3.5 오픈 비디오 지원! (0) | 2009.08.20 |
| HTML5, XHTML2 새로운 표준은? (0) | 2009.07.21 |
| [REST ③] Security and REST Web Services by Richard Mooney (2) | 2008.07.09 |
| Microsoft OneApp 을 소개합니다. (2) | 2009.08.25 |
|---|---|
| 윈도 7 열풍! (0) | 2009.07.30 |
| 웹조각 (Web Slice) (0) | 2009.06.16 |
| 마이크로소프트가 생각하는 미래의 홈 (0) | 2009.05.20 |
| WWT, WorldWide Telescope (0) | 2009.03.31 |
JSON
은 JavaScript의 하위 세트에 기반하기 때문에, 악성 코드를 포함하고 있는 스크립트 콘텐트이다. 하지만, JSON은
할당과 호출을 배제한 JavaScript의 안전한 하위 세트이다. 따라서, 많은 JavaScript 라이브러리들은 eval() 함수를 사용하여 JSON을 JavaScript 객체로 변환한다. 이를 활용하려면, 공격자들은 잘못 형성된 JSON 객체들을 그러한 라이브러리들로 보내서 eval() 함수가 악성 코드를 실행하도록 한다. JSON의 사용을 보안화 하는 여러 방법이 있다. 첫 번째 방법은 RFC 4627에 정의된 정규식을 사용하여 JSON 데이터에 활성 부분이 포함되지 않도록 하는 것이다. Listing 8은 정규식으로 JSON 스트링을 검사하는 방법이다.
var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
text.replace(/"(\\.|[^"\\])*"/g, ' '))) &&
eval('(' + text + ')');
보다 안전한 대안은 JSON 파서를 사용하여 JSON 데이터를 파싱하는 것이다. JSON의 문법은 매우 단순하기 때문에, 성능의 차이 없이 이 같은 파서를 쉽게 구현할 수 있다.
| 안드로이드 개발 시 유의 사항 (4) | 2009.10.19 |
|---|---|
| [Java] 절대 코더들도 까먹는 형변환 (int, double, long.. <->String) (0) | 2009.08.06 |
| [Javascript] XML <-> JSON (0) | 2009.08.01 |
| 브라우저 호환성을 고려하며 개발하기 (0) | 2009.07.30 |
| 한국의 개발 현실의 한가운데에서 잠시... (0) | 2009.07.29 |
| Microsoft Go Map (0) | 2009.09.10 |
|---|---|
| 윈도 7 열풍! (0) | 2009.07.30 |
| 웹조각 (Web Slice) (0) | 2009.06.16 |
| 마이크로소프트가 생각하는 미래의 홈 (0) | 2009.05.20 |
| WWT, WorldWide Telescope (0) | 2009.03.31 |
| HTML5 그 놈이 온다. (4) | 2009.09.24 |
|---|---|
| HTML5 (HTML4와의 주요 차이점) (1) | 2009.09.11 |
| Firefox 3.5 오픈 비디오 지원! (0) | 2009.08.20 |
| HTML5, XHTML2 새로운 표준은? (0) | 2009.07.21 |
| [REST ③] Security and REST Web Services by Richard Mooney (2) | 2008.07.09 |
| HTML5 (HTML4와의 주요 차이점) (1) | 2009.09.11 |
|---|---|
| 트위터, 페이스북, 미투데이, 싸이월드... (0) | 2009.08.24 |
| HTML5, XHTML2 새로운 표준은? (0) | 2009.07.21 |
| [REST ③] Security and REST Web Services by Richard Mooney (2) | 2008.07.09 |
| [REST ②] Java Restlet을 이용한 RESTful 웹서비스의 구현 (5) | 2008.05.14 |
|
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
