디지털 혁신이 가져온 미디어 르네상스

새로운 방식의 미디어 소비방법

이 글은 월간 웹[w.e.b.] 8월호 에 기고한 글입니다.

미디어를 활용하는 기기로서의 디지털 디바이스를 살펴볼 때, 아이폰으로 대변되는 터치기반 모바일 디바이스의 출현은 근래들어 가장 큰 변화라고 볼 수 있습니다. 그전까지 우리가 사용하던 모든 디지털 디바이스는 데스크탑 PC를 제외하고는 “들고 다니기는 하지만 다양한 미디어의 소비는 어려운 기기“ 였기 때문입니다.

그 중에서도 대표적인 아이폰에 의해 변경된 모바일에서의 미디어의 소비 방법은 크게 2가지 입니다.

“입력방식 과 Full Web Browsing”

아이폰에 의해 시작된 정전식 터치기반 모바일 디바이스의 출현은 사람들의 터치방식과 UI 자체를 바꾸는 역할을 합니다. 아이폰 이전의 많은 PDA들은 감압식 터치방식을 채용하여 스타일러스라고 불리는 조그만 펜을 가지고 있어야 화면에 정확한 터치가 가능했습니다. 이 스타일러스로는 화면의 조그만 버튼을 선택하거나 , 웹 페이지를 볼 때 조그만 스크롤바를 움직여야 하거나 하는등 세밀하고 정확한 동작을 필요로 합니다. 즉, 우리가 모바일 디바이스라고 부르긴 했지만 이동중엔 별 조작이 필요없는 동영상을 제외하고는 이북/인터넷 등 다양한 미디어를 마음대로 소비하기 어려웠습니다.

정전식 터치기반 디바이스들이 많아지면서 예전 처럼 스타일러스같은 작은 펜을 이용해서 입력하는게 아니라 사람의 손가락으로 빠르게 입력을 가능하게 하고, 펜보다는 다소 굵고 뭉툭한 터치를 하는 인간의 손가락을 이용하기에 핑거터치에 더욱 최적화된 UI 들이 나오게 되었습니다. 이로 인해 남녀노소가 모두 특별한 입력장치를 사용하지 않고 쉽게 입력할 수 있도록 변화된 것입니다. 동영상을 플레이하고, 신문기사를 읽고 책을 보거나 할 때 어떤 것이던 몇 번의 입력이 필요한데, 이 모든 것들을 손가락으로 터치할 수 있도록 함으로써 이런 다양한 미디어를 소비하는 입력방법자체가 쉬워진 것입니다. 추가적으로 여기에 가속도계(Accelerometer) , 자이로스코프(Gyroscope) , 자력계(Magnetometer) 등의 센서가 포함됨으로써 현재 위치 및 이동에 대한 정보를 입력(취득)할 수 있게 되면서 다양한 기능구현 및 카메라와 연동을 통한 AR 기능이 가능해졌습니다.

또한 아이폰에서 시작되다시피한 진정한 개념의 Full Web Browsing 은 웹에 있는 모든 미디어 컨텐츠를 이동 중에도 충분히 소화할 수 있도록 하는 발판을 열어주었습니다. 아직도 국내 웹 사이트에 아주 많이 사용되고 있는 플래시 때문에 모바일 기기에서의 웹브라우징은 반쪽이라는 얘기도 나오긴 하지만, 전세계적으로 HTML5 가 이슈화 되면서 모바일에서는 플래시 사용부분이 많이 HTML5 로 대체가 되고 있으며, 이로 인해 어떤 인터넷 미디어라도 바로 모바일기기에서 지원할 수 있도록 바뀌고 있습니다. 물론 모바일에서와 데스크탑에서의 사용방법은 많이 다르기 때문에 HTML5, CSS3, Javascript API의 힘을 빌어 모바일에 좀 더 최적화된 형태의 웹사이트들이 많이 작성되고 있습니다.

모건 스탠리 발표에 의하면 2014년이 되면 모바일 인터넷 사용자가 데스크탑 인터넷 사용자를 넘어설 것이라고 합니다.

또한, 가트너의 발표에 의하면 2015년에는 청소년 대상 신규 구매하는 PC의 50% , 기업용에는 약 10% 까지 터치기반 디바이스가 보급될 것으로 예상한다고 합니다. 즉, 이제는 미디어를 만드는 방법자체가 예전처럼 데스크탑/마우스 기반에서 소비하기 쉽게 만드는 것뿐만 아니라, 모바일/터치 기반에서도 소비하기 쉽게 만드는 것으로 변하고 있습니다. 터치기반 디바이스가 현재는 작은 모바일 기기를 중심으로 이용되고 있지만, 아이패드의 예를 들어보면 가트너가 바라보는 미래의 미디어/컨텐츠 소비방법을 엿볼 수 있습니다.

터치 디바이스는 단순히 글자를 읽는 것만이 아니라 컨텐츠 자체와 사용자가 상호작용 할 수 있는 방법을 제시해줄 수 있다는 강점을 가지고 있습니다. The Elements 와 같은 iPad 앱은 우리가 중/고등학교 화학시간에 단순히 외우기 용도로만 사용되던 주기율표가 어떻게 바뀔 수 있는지를 보여줍니다.

독특한 모양의 각 원소 이미지들은 단순한 사진이 아니라 사용자가 손으로 회전이 가능한 이미지 데이터로, 각 원소를 터치해보면 각 원소에 대한 자세한 설명과 함께 동영상을 보여주고, 실제 이 원소가 사용된 일상 속의 사물까지 멀티미디어 데이터로 보여줍니다. 이 역시 터치에 기반하고 있기 때문에 보다 쉽고 빠르게 사용이 가능한 것으로, 터치 디바이스가 에듀테인먼트(Edutainment) 에서 어떤 장점을 보여주는지를 극명하게 보여주는 예라고 볼 수 있습니다.

미국 IT 전문지인 Wired 가 2010년 6월호를 아이패드용으로 출시하면서 첫 24시간동안 2만 4천 다운로드를 기록 7월에 9만 다운로드를 넘어서 Wired의 가판 판매부수인 82000부를 넘어섰습니다. 기존 잡지를 만드는 방식을 탈피하여, 동영상/소리 등 다양한 멀티미디어 컨텐츠를 사용하는 방식으로 제작된 Wired 잡지 App은 터치에 반응하는 다양한 요소(360도 회전, 동영상, 확대축소, 한 페이지에서 여러 가지 내용을 볼 수 있도록 해주는 갤러리 형태의 버튼들)들을 첨부함으로써 마치 숨겨진 기능을 찾아 내보라는 듯 구독자에게 재미요소를 제공해줍니다.

디지털 기술을 이용한 출판물의 변화는 약간 하향세를 보이던 잡지형식의 매체를 되살려 놓을 수 있을 것이라는 예상이 많습니다. 물론 디지털 기술을 접목하는 것은 이미 PC버전의 멀티미디어 CD 롬이나 인터넷을 이용한 방식이 있었지만, 터치기술과 모바일 디바이스에서의 사용으로 인해, 데스크탑에서 앉아서 보는 것이 아니라, 일반 잡지처럼 어디서나 볼 수 있다는 차이점이 있기 때문이기도 합니다.

아이패드용 Wired 앱은 Adobe 의 InDesign CS5 버전을 이용해 제작 (수정 :  InDesign 으로 만든 잡지를 소스로 삼아, Adobe 가 WIRED 를 위해 만든 Mac OS 10 용 InDesign 플러그인을 통해 밑작업을 하고, 이 데이터를 Adobe 가 WIRED 를 위해 개발한 툴에 넣어서 만들게 됩니다. ) 되었으며, 이는 터치기반 디바이스에서의 새로운 잡지 형태 출판물제작에 새로운 지평을 열 것으로 예상됩니다. 아직은 Adobe 밖에 시도를 하고 있지 않지만, HTML5 가 더욱 시장에 자리잡게 되면 웹 기술을 접목한 출판물 제작시스템도 충분히 가능할 것이라고 봅니다. 예를 들어 iBooks 와 같은 eBook 전용 앱에 국한되지 않고, 웹 브라우저 자체를 이북리더로 활용하는 Monocle 과 같은 프로젝트 또한 터치기반 모바일디바이스에 폭넓게 사용될 수 있는 기술입니다.

이북리더인 아이패드/아이폰의 iBooks 는 EPUB 또는 PDF 형식의 출판물에만 대응하는 것으로 알려져 있지만, 실제로 내부적으로는 웹 브라우저와 비슷한 엔진을 이용하여 구현되어 있습니다. 즉 Javascript 나 CSS 같은 웹에서 사용하던 많은 내용들을 바로 사용할 수가 있어서, 이를 이용하여 eBook 내부에서 Javascript 를 이용하여 Flickr 에서 사진 이미지를 불러오는 형태의 시도(수정: 현재 iBooks 내부에서 외부로의 Remote URL 접근은 막혀있으며, 이 예제는 Javascript 를 위한 Interactivity 를 보여주는 시도입니다. 즉 이미지 자체는 EPUB 내에 있으며, Javascript 를 이용해 동적으로 보여주기만 합니다. 예제 이미지를 Flickr 에서 다운받아서 사용한것입니다. EPUB 내에서의 Remote 접근에 대해서는 Security 문제가 있다는 얘기가 있으며, 아직 논의가 진행되고 있습니다. )들도 보이고 있습니다.

참고 : http://blog.threepress.org/2010/06/24/javascript-and-interactivity-in-ibooks/

아이패드 출시 초기부터 애플은 HTML5, CSS3, Javascript 를 사용하여 개발된 주요 iPad Ready 웹사이트들을 리스트 업 해두고 있습니다. http://www.apple.com/ipad/ready-for-ipad/ 초기에 10여개 밖에 되지 않았던 이 사이트들은 아이패드의 폭발적인 판매와 함께 점점 늘어나고 있습니다. 기본적으로 많은 사이트들이 Flash 전용으로 되어있던 온라인 비디오 플레이를 HTML5 도 동시지원하고 있습니다. 아이패드가 도입되지 않는 우리나라에서도 아직은 Flash 가 동작하지 않는 모바일기기들이 훨씬 더 많기 때문에, 이런 추세는 국내에도 점점 보급되고 있습니다.

지금까지의 많은 UI 들이 처음부터 마우스 입력장치를 이용하여 사용하는 것으로 개발되어 왔기에, 모든 UI 컴포넌트들이 마우스에 의한 세밀한 입력이 이루어지도록 만들어졌습니다. 하지만 터치 디바이스의 보급으로 손으로 입력이 가능하도록 하는 UI Design 이 생겨나게 됩니다. 아이폰의 CocoaTouch 가 가장 큰 예라고 볼 수 있으며, 안드로이드의 모든 UI 들도 터치에 알맞게 구성되어 있습니다. 이렇게 변경된 UI 를 웹에도 적용하는 jQTouch, iUI, WebApp.net 같은 프레임워크들이 나오게 되었고, jQTouch 는 Raphael, Ext JS 와 결합하여 아이폰/안드로이드/아이패드 와 데스크탑 디바이스까지 동시에 지원하는 Sencha Touch 로 발전하고 있습니다. 애플이 발표한 iAd 도 HTML5 와 Javascript , CSS3 기술을 이용하여 모든 UI 컴포넌트를 구성하고 있습니다.터치기반 디바이스의 보급과 함께 웹을 비롯한 모든 디지털 컨텐츠 구성시에도 터치를 고려하는 디자인이 필요하게 될 것입니다.

이제까지는 웹 기술이 데스크탑에서의 활용에만 주로 사용되어 왔지만, 모바일과 터치기반 디바이스로 오면서 부터는 모든 미디어를 만들어내고 소비하는 플랫폼으로서의 역할로 변하고 있습니다. 현재는 HTML5 의 Video , Audio 기능 및 GeoLocation 기능등이 주로 사용되고 있으며 점점 html-device, DAP, JIL, BONDI 같은 Device 와의 연동 ( 카메라의 사용 , 핸드폰 자체기능을 웹과 연동하는 방법 )에 대한 스펙들이 생겨나고 있습니다. HTML5의 빠른 확산과 함께 터치기반 모바일 디바이스로의 변화가 가속될 것이고, 이런 변화 속에서 모바일 웹과 터치입력방식의 변화에 재빨리 익숙해지고 활용하지 못하는 미디어들은 빠르게 도태할 것입니다.

참고사이트

• HTML5 – http://dev.w3.org/html5/spec/ , http://diveintohtml5.org/
• Monocle – http://monocle.inventivelabs.com.au/
• JQTouch – http://jqtouch.com/
• Sencha – http://www.sencha.com/
• iUI – http://code.google.com/p/iui/
• WebApp.Net – http://webapp-net.com/
• W3C DAP – http://www.w3.org/2009/dap/
• JIL – http://www.jil.org/
• BONDI – http://bondi.omtp.org/
• Html-device – http://dev.w3.org/html5/html-device/

짧은 지면에 기술관점의 내용을 담다보니 조금 설명이 부족한듯 합니다만,  제가 하고 싶었던 얘기는 “모바일, 터치, HTML5 기반의 Rich 웹” 이 3가지가 앞으로의 미디어가 추구해야할 큰 변화중의 하나라는 것입니다.

웹 어플리케이션들이 다양해 지면서 Javascript로 다양한 Binary 파일들을 읽는 시도들이 나오고 있습니다.

관련링크를 정리해 봅니다. 거의 소스가 공개되어있으므로 내부코드를 참고해보세요.

• Javascript – Ajax Binary Reader
  현재 JavaScript 자체는 바이너리 데이타를 지원하지 않기 때문에 charCodeAt 함수와 & , | ,  << , >> 같은 비트연산자를 이용하여 바이너리 데이타를 읽어내야 합니다. 이 Binary Reader 라이브러리는 이 비트연산자를 이용한 Binary-Parser 라이브러리에 기초하여 , readChar / readString / readInt8 / readFloat / seek / getPosition 같은 함수를 제공합니다. 데모에서 GIF 파일을 읽어서 헤더에서 파일의 Width,Height 를 읽어오는걸 보여주고 있습니다. 어떤 용도로든 Javascript 내에서 Binary 파일을 읽어야 한다면 꼭 참고해야할 라이브러리입니다.
• Flash Runtime with Javascript – Gordon
  몇달전에 큰 이슈를 불러일으켰던 Tobias Schneider 의  Gordon 은 Javascript 를 이용해서 Flash 파일 ( SWF ) 을 실행하는것을 보여주고 있습니다. SVG 를 이용해서 벡터 그래픽을 처리하며, 속도향상을 위해 Web Workers 를 이용해서 백그라운드에서 처리하기도 합니다.  Github에 오픈소스로 공개되어 있습니다. 내부의 stream.js 를 보면 앞의 Binary-Parser 와 비슷한 함수들을 작성해서 사용하는걸 알수 있으며, Javascript 만으로 ZIP 압축까지 풀어냅니다. Flash 를 HTML5/Javascript 로 변환하는 좀더 확장된 데모를 선보였던 Smokescreen 도 있습니다만, 아직 소스가 공개되지 않았습니다.
• WPS : Postscript for the Web
  WPS 는 HTML5 Canvas 와 Javascript 를 이용한 Postscript 와 PDF 인터프리터입니다. PS 와 PDF 자체가 엄청 방대한 포맷이라 아직 일부분밖에 구현이 안되긴 했지만, 기대해볼만한 프로젝트 입니다. 이게 어느정도 실현되면 아무런 플러그인의 도움없이도 웹 브라우저에서 PDF 파일을 볼수 있게 될지도..
• Shapefile-JS
  GIS 관련 작업을 하시는 분들에게 익숙한 Shape ( SHP ) 파일은 ESRI 사의 GIS 툴에서 사용되다가 공개된 포맷입니다. 주로  점 / 선 / 폴리곤 으로 되어있는 지리 데이타를 표시하기에 좋은데요. 이 SHP 파일을 Javascript 로 읽어서 HTML Canvas 에 그려주는 라이브러리입니다. 내부의 속성들은 요즘은 잊혀져 버린 dBase ( dbf )포맷으로 되어있는데 이걸 자바스크립트로 읽는 dbf.js 도 들어있습니다.
• JSNES : A Javascript NES Emulator
  NES ( Nintent Entertainment System ) 은  우리에게 패미콤/현대 컴보이로 잘 알려진 닌텐도의 8비트 게임 콘솔입니다. 1983년 발매되어 6천만대 이상이 판매되었습니다. 이 NES 를 HTML5 의 Canvas 와 Javascript 를 이용하여 에뮬레이트 하는 라이브러리입니다. ROM 파일을 AJAX를 이용해서 동적으로 로드하여 실행합니다. 심지어 Sound 까지도 지원됩니다. 오픈소스로 GitHub에 공개되어있습니다. 데모페이지에는 보글보글,곤두라,동키콩,젤다의전설,슈퍼마리오 등 명작 게임들이 링크되어 있습니다. 한번 즐겨보세요. 크롬에서 가장 빠르게 동작됩니다.
• JSC64 – Javascript Commodore Emulator
  앞의 NES 와 마찬가지로 게임기인 Commodore64 를 에뮬레이트 합니다. NES 에 비해서는 게임이 좀 단순합니다 ^^
• jsGB – A Gameboy emulator in Javascript
  닌텐도의 Gameboy 를 에뮬레이트 합니다. 제작자인 Imran Nazar 가 어떻게 만들었는지를 블로그에서 자세히 설명하고 있습니다. Z80 CPU 를 어떻게 에뮬레이트 했는지 설명해주고 있는데 Z80 단어만 들어도 향수가 느껴지는군요.

GuruLinks 는 제가 제 트위터 ( @xguru ) 에서 소개했던 링크들을 모아서 소개하는 포스트입니다.

제 트위터를 팔로우 하시면 더 다양한정보를 빠르게 접하실수 있습니다

하루에 한가지 상품만을 특별한 가격에 판매하는 원어데이형 쇼핑몰의 원조였던 미국 woot.com 의 인기에 힘입어, 국내에도 많은 원어데이형 쇼핑몰들이 생겨났습니다. 2년반 전에 이 원어데이 쇼핑몰들을 정리한 포스트를 한번 적으면서 하루에 한가지 쇼핑몰 한눈에 보기 페이지 – http://oneday.xguru.net 을 만들었고, 아직도 저를 비롯해서 ^^ 많은 분들이 이용하고 계십니다.

근래 들어서 다시 한번 유행이 되고있는 것은 Groupon 때문에 유명해진 하루에 한가지 서비스 공동구매 방식입니다. 기존의 원어데이형 쇼핑몰들이 주로 물건들에 집중되고 있던것을 탈피하여, 음식점/미용실/공연 등 다양한 오프라인 서비스에 촛점을 맞추고 있고, 오프라인 매장의 특성상 지역별로 나눠지기때문에 지역기반 공동구매 서비스라고도 하죠. 어차피 오프라인 매장에서 이용을 해야하므로, 온라인에서는 쿠폰을 판매하는 방식이라고 보면 됩니다 ( 그래서 Groupon 의 이름이 Group + Coupon 인것이겠죠 ) . 최저가로 상품을 구매할 수 있던 원어데이 하고는 약간 다르게, 거의 50% 이상의 할인율을 보여주므로 사용자를 유혹하게 되구요. 최저 구매자 수를 넘어야만 이런 초대박 할인 거래가 성립되기 때문에 먼저 참여한 사람들이 다시 입소문을 내게하는 방식으로 홍보효과도 누릴수 있습니다.

국내에서도 다양한 Groupon 클론 서비스들이 생겨나고 있어서 한번 정리해봤습니다.

• 티켓몬스터 (티몬) http://tmon.co.kr
  처음엔 서울만 한정이었지만 지금은 강남(압구정/신사/강남) , 강북(홍대/명동/이태원) 으로 나눠 서비스하고 있으며, 곧 분당/부산도 오픈할 예정입니다.
• 데일리픽 http://www.dailypick.co.kr
  인기 맛집만 한정하여 50% 할인을 합니다.
• 위폰 http://wipon.co.kr – 개방형 협업구매 서비스
• 키위 http://qiwi.co.kr/ – 맛집/뷰티/레포츠/문화/여행/공연등 다양한 주제로 진행합니다.
• 딜즈온 http://dealson.co.kr
• 쇼킹온 http://showkingon.com/
• 슈거딜 http://www.sugardeal.co.kr/
• 파티윈 http://www.partywin.co.kr
• Cherryday http://cherryday.co.kr
• — 여기까지는 이미 오픈되어서 공동구매 지름도우미에 포함되었습니다. —
• 할인의 추억 http://www.couponmemory.com/ - 현재 대구만 오픈, 부산/대전/서울 등 오픈예정
• 반토막 http://bantomakticket.co.kr/ - 8/2일 오픈 예정
• 쿠팡 http://www.coupang.com/ - 8 월초 오픈예정
• 하프바코드 http://halfbarcode.co.kr – 오픈 예정
• 원데이 플레이스 http://onedayplace.com/ – 오픈 예정

이 외에도 몇개 쇼핑몰들이 준비를 하고 있는듯 합니다. 오픈하는 대로 추가해 놓겠습니다. 추가를 원하시는 몰담당자 분들은 oneday @ xguru.net 으로 메일주세요.

그리고, 역시 매일 각 사이트를 돌아다니기는 힘들고 해서 예전에 만든 지름도우미 처럼 공동구매 지름도우미 라는 페이지를 하나 만들었습니다.

공동구매 지름도우미의 주소는 http://group.zirum.net 입니다.

아래와 같이 각 티몬/데일리픽/위폰/키위/쇼킹온/딜즈온/슈거딜/파티윈/체리데이 서비스의 오늘 상품들을 한눈에 보실수 있습니다.

국내 사이트 들이 더 생기는 대로 계속 추가해 놓겠습니다.

공동구매 지름도우미 바로가기 → http://group.zirum.net

RSS 도 제공됩니다 http://feeds.feedburner.com/zirum/group 입니다.

Web 용 User Interface/User Experience 에 대한 링크들 모음입니다. GuruLinks 는 제 트위터를 통해 공유했던 링크들을 재소개 하는 포스팅입니다.

• 43 Essential Controls for Web Applications
  사용하기 편한 웹 어플리케이션은 깔끔한 UI 컨트롤을 사용하여 유저가 편하게 서비스를 쓸수있도록 해줍니다. Windows 나 Mac OSX 나 자신들만의 기본 UI Control 셋을 가지고 있지만, 많은 어플리케이션들은 자신만의 컨트롤들을 만들어 더욱 훌륭한 어플리케이션들을 만들어 내고 있죠. Web Application 에서도 더욱 멋진 UX (User eXperience)를 제공하기 위해 최근에 Web App 에서 많이 사용되는 43개의 컨트롤들을 정리한 링크입니다.
  디자인 회의시 출력해서 사용할수 있는 Index Card 용 PDF 버전도 제공됩니다.
• User-Centered Design
  웹 사이트 개발단계에서 유저중심으로 디자인을 하는 방법론입니다. Step-By-Step 가이드 맵도 제공합니다.
  가장 좋은건 웹사이트 개발 Kick-Off Meeting 시에 물어봐야 하는 질문들을 정리한 문서입니다. ( MS Word Doc 160KB )
• Designing for Social Traction
  소셜 웹사이트 개발/디자인시에 만나게 되는 3가지 주요 문제점. “가입시키기 ( Sign Up ) / 첫번째 사용 ( First-time Use ) / 계속 사용시키기 ( Ongoing Engagement ) ” 를 어떻게 해결하는지를 설명하는 120장 짜리 슬라이드입니다. 웹 기획/개발자 께서는 꼭 한번 읽어보시기 바랍니다.

  
  
• Designing Social Interfaces
  소셜 인터페이스를 디자인하는 5가지 단계, 5개의 원칙,5개의 안티패턴을 보여줍니다. 설명이 없어서 좀 아쉬운 슬라이드이긴 한데, 슬라이드 작성자가 eBook 으로 판매하고 있습니다.

  
  
• Designing Web Interfaces
  동명의 책에 기초한 Web Interface 디자인시 참고할만한 원칙/패턴들을 보여주는 슬라이드 입니다. 327장이나 됩니다.

  
  

HTML5 를 이용한 많은 Web Application(웹 어플리케이션, 웹 앱)들 이 만들어 지고 있지만, 데스크탑 환경에선 아직 이슈가 남아있습니다. 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 Internet Explorer ( 6.0 ~ 8.0 ) 가 아직 HTML5 지원이 미진하기 때문이죠. 이 때문에 HTML5 웹 어플리케이션들은 Firefox , Chrome , Safari 같은 타 브라우저를 통해서만 확인이 가능합니다. 대다수의 국내 비 IT 유저들이 IE 를 사용하고 있기에 수많은 HTML5 데모 사이트들은 IT 유저들만 공감하는 사이트들로 보여지고 있습니다.

하지만 모바일 환경으로 오면 얘기가 달라집니다. 현재 모바일 웹 트래픽의 대부분을 차지하고 있는 것이 iPhone, Android 이고 이 두개의 플랫폼이 HTML5 를 잘 지원하고 있는 WebKit 기반의 브라우저를 사용하기 때문입니다.

왜 HTML5 가 모바일에서 중요한가 ?

현재 스마트폰 시장은 서로 다른 OS를 가진 기기들이 다투고 있습니다. 애플의 iOS , 구글의 안드로이드, 블랙베리 OS , 노키아 심비안 & Maemo, Windows Mobile 과 연말에 출시될 Windows Phone 7 까지.. 데스크탑 OS 환경과는 사뭇 다르죠. 각각의 OS 에 맞는 어플리케이션 ( Native App , 네이티브 앱 ) 을 작성하기 위해서는 전혀 다른 언어/플랫폼들을 이해해야 합니다. 대표적으로 애플 iOS 의 경우 Objective-C 와 CocoaTouch 를 , 안드로이드는 Java 와 안드로이드 프레임워크들을 배워야 하죠.

모바일 기반의 서비스를 제공해야는 회사들은 선택을 하거나, 순위를 두어야 합니다. 모든 플랫폼용 네이티브 앱을 만들기에는 투자비용이 너무 크기 때문이죠. 아이폰이 국내 출시된 후 많은 업체들이 아이폰용 앱을 앞다투어 출시했습니다만, 올해 들어서는 다양한 안드로이드 폰들이 출시되면서 안드로이드용 앱까지 한번 더 개발을 진행하고 있습니다. 자원이 충분한 회사라면 각각의 플랫폼용으로 만드는게 가능하겠지만, 그렇지 못한 스타트업 들이나, 중소기업들에서는 참 어려운 선택일수 밖에 없습니다. 국내의 경우 핸드폰 시장 점유율 1위인 SKT 가 안드로이드에만 집중하고 있으니 아이폰이 아무리 이슈라고 해도 아이폰/안드로이드는 동시에 지원해야 하는 상황인것이죠.

구글의 부사장인 Vic Gundotra 는 작년에 한 인터뷰에서 다음과 같은 말을 했습니다.

Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform

- Vic Gundotra, Google Engineering VP

인터넷의 거물 구글 조차도 모든 모바일 플랫폼용으로 앱을 만들어 지원하기에는 돈이 없다! 라는 것이죠. 물론 이건 HTML5 에 집중하겠다고한 구글의 입장을 대변한, 약간 정치적인 발언이긴 합니다만 이 말은 많은 인터넷 업체들에게도 적용되는 것이라고 볼수 있습니다. 즉, 각각의 앱스토어에 대응하기보다는 HTML5 를 이용한 모바일 웹앱으로 동시에 여러가지 디바이스를 지원하는 것이 미래적인 접근방법이라는 것이죠.

2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호” 의 내용을 한번 보실까요 ?

「전자정부서비스 호환성 준수지침」개정 고시

1. 개정이유 
   모바일 전자정부 서비스 제공 시 국민들의 보편적 접근성 제고 등을 위하여 국가기관, 지방자치단체, 공공기관이 준수해야 할 사항을 추가로 규정
2. 추진경위
   <생략>
3. 주요 개정내용
   • 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
     – 단, ‘모바일 웹’ 방식이 기술적으로 어렵거나, 속도 및 비용이 현저하게 차이나는 경우는 ‘모바일 앱’ 방식도 허용
   • 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
     • 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공
     • 국제표준화기구에서 제공하는 표준 사용 의무화
     • 단말정보저장소(DDR), 미디어쿼리(Media Queries) 및 기타기술을 활용하여, 다양한 사용자 단말에 적합하도록 콘텐츠 제공 노력

국민의 세금으로 만들어지는 전자정부서비스야 말로 다양한 스마트폰 사용자들이 모두 혜택받을 수 있도록 모바일 웹 방식을 권장하는게 올바른 방향일것 같습니다.

HTML5 는 Web App을 만들어 다양한 네이티브 플랫폼들을 동시에 지원하기 위한 최적의 솔루션입니다.

Web App vs. Native App

Web App ( 웹 앱 ) 이라고 하면, 웹 기술을 이용하여 만들어진 어플리케이션을 말합니다. 즉, 컨텐츠 리딩을 위해 사용되던 단방향성이던 웹사이트와 달리 사용자와의 인터랙션을 통하여 데스크탑에서의 Application 같은 사용성을 주는 앱을 의미하며, 위젯이라는 단어도 종종 사용되는데 웹 앱은 이 위젯을 포함한 좀 더 넓은 범위로 보는게 맞습니다.

HTML5 를 이용해서 만들어진 Web App 과 iPhone / Android 환경에서의 Native App 을 비교해 보겠습니다.

1)     PhoneGap 등 Hybrid App Framework 사용하여 앱 만든후 등록시 필요함

2)     Phonegap , QuickConnect 를 통하여 카메라/연락처 정보등 사용가능 - 따로 진행중인 W3C DAP , OMTP BONDI , JIL 등의 스펙으로 디바이스 접근가능(차후)

Mobile Web App 의 종류

Web App 이라고 해서 기존의 Web Site 에 비해 특별한 것은 아니지만, 모바일 관점, 특히 HTML5 기술을 기반으로 하는  Web App 들의 경우 다음과 같이 나눠 볼수 있습니다.

1. Online Web Application
   
   • 기존의 모바일 웹페이지를 포함한 웹 앱을 의미한다.
   • HTML5, CSS3 등을 통하여 모바일 에서의 UI / UX 를 향상한다.
   • GeoLocation API 를 이용하여 위치가 고정되지 않는 모바일의 장점을 활용한다.
   • 주로 포털이나 컨텐츠를 리딩하는 형태의 앱이 많다.

2. Offline Enabled Web Application
   
   • Application Cache , LocalStorage , Web SQL Database 를 활용하여 오프라인에서도 사용이 가능한 웹 앱을 의미한다.
   • 처음 접속시에 주요데이타를 캐쉬하여 재 접속시에 네트웍 트래픽을 최소화한다.
   • 오프라인상태에서 행한 동작들에 대해서 온라인시 서버의 데이터와 싱크한다.
   • 이메일 어플리케이션과 같은 컨텐츠 리딩 & 작성 앱에 적절하다.
     * 모바일 Gmail 사이트는 이미 완벽한 오프라인 메일 앱으로 동작한다.

3. Offline Web Application
   
   • 한번 서버에 접속해서 다운받으면 계속 오프라인으로 사용 가능한 앱.
   • Application Cache 와 Web SQL Database 를 활용
   • 서버와의 동기화를 필요로 하지 않는 게임, 유틸리티, EBook

4. Hybrid Web Application
   
   • Native App 과 Web App을 합친 형태의 앱.
   • 앱 스토어를 통한 다운로드 가능.
   • 모바일 디바이스로 다운로드후에는 앱 속성에 따라 서버와의 AJAX 통신도 가능
   • Native 수준의 다양한 앱 작성가능

모바일 웹 앱이 이렇게 4가지로 명확하게 분리되는 것은 아니지만, 이를 통해 모바일에서 어떤 종류의 웹 앱이 만들어 질 수 있는지를 알 수 있습니다.

HTML5 Key Elements for Mobile

모바일에서 HTML5 가 특별히 다른 태그를 활용하는 것은 아닙니다. 다만 몇몇 Javascript API 와 Video/Audio/Canvas 태그등 몇 개가 모바일 환경에서 아주 유용하게 쓰일수 있습니다.

• Offline 지원 : LocalStorage , Web Database , App Cache
• 미디어 처리 : Video , Audio , Canvas
• 입력 지원 : Advanced Forms
• 위치 정보 : GeoLocation ( 연계표준 )

Offline 지원의 경우 항상 인터넷에 연결되어 있는 데스크탑과 달리 모바일 환경은 꼭 3G 와 같은 네트웍에 항시 연결되어있지 않은 WIFI 전용 기기 ( iPod Touch , iPad ) 들도 있으며, 3G 환경이라 할지라도 네트웍 트래픽을 최소화 하는 것이 아주 중요합니다.

또한 HTML5 의 중요 스펙중 몇 가지는 아직 주요 브라우저에서도 지원되지 않습니다. ( iOS 4 , Android  ) 이건 현재 HTML5 가 Draft 상태이기도 하고, 아직은 HTML5 를 이용한 Web App 의 초기단계이기 때문입니다. 점점 사용자가 많아지면 추가될 것이라고 생각됩니다.

• WebSocket
• FileReader
• IndexedDB
• Web Workers

현재로선 모바일에서의 HTML5 사용은 주로 Offline 지원을 통한 Local App 으로서의 동작 및 트래픽 최적화, Geo Location 을 통한 위치정보 연동이 가장 많이 쓰이고 있습니다.

HTML5 on Mobile

모바일에서의 HTML5 사용은 점점 확대될 것입니다. Native App 을 대체하지는 못하겠지만, Web App은 멀티 플랫폼에 대응할수 있는 하나의 중요한 대안입니다. 향후에 출시되는 모든 Mobile 기기들은 HTML5 대응이 필수가 될 것이고, 각 웹사이트들은 모바일기기에 맞게 화면만 작게만든 초기의 모바일 페이지에서 벗어나, 더욱 App 스러운 형태로 바뀌게 될 것입니다.

지금까지 모바일 환경에서 약간 동떨어져 있던 웹 개발자들도 모바일 시장의 한 주류가 될것이므로, 계속적으로 공부하고 공유하면서 기술을 발전시켜야 합니다.  이건 단지 클라이언트단의 모바일 환경만이 아니라, 서버측도 모바일 & 실시간 웹에 맞게 발전해야 할것입니다.

제가 블로그를 개편하면서 블로그에 붙인 소제목이 “Beyond Web – HTML5 and Mobile” 입니다. 개인적으로 이 블로그에서 앞으로 Mobile 과 HTML5 분야에 대해서 다양하게 글을 쓰겠다는 저의 작은 결심 입니다

Slide & Book

이 글은 7월2일날 열린 HTML5 오픈 컨퍼런스 에서 제가 발표했던 내용을 간략히 정리한 것이구요. 발표자료는 아래 공개합니다. 아직 Slideshare 가 HTML5 형태의 임베딩은 지원하지 않아서, 스마트폰으로 보시는 분들은 모바일용으로 보기

프리젠테이션에는 좀더 많은 내용과 각 Web App 들에 대한 예제사이트들도 포함되어 있으니, 한번 각 사이트들도 들어가셔서 보시면 잘 이해가 되실것 같습니다. 이 자료보다 조금 더 심화된 내용은 먼저 공개한 HTML5 로 아이폰 앱 만들기 를 참고해주세요.

또한, 책으로 제작해서 배포된 “HTML5 실전 가이드” 의 PDF 파일도 공개되었습니다. 다운받으셔서 출력해서 보시면 되구요. 전 이중에 5장에 HTML5 를 이용한 모바일 앱 만들기 실전예제 부분을 담당했고, 간단한 HTML5 웹앱 예제코드 2개를 담았습니다. 참고하시고 궁금한점은 블로그나 트위터로 질문주세요.

• WP Super Cache : 워드프레스의 모든 페이지를 캐쉬하여 PHP / Mysql 실행속도를 최소화 해 줍니다.
• WP Touch : 아이폰/안드로이드 같은 모바일 페이지를 지원해줍니다.
• StatPress : 강력한 방문자 통계툴입니다.
• Revision Control : 각 포스트의 수정시 저장되는 Revision 에 대한 상세설정을 제공합니다.
• WP PageNavi : 포스트 검색결과/Archive 같이 여러페이지로 보일때 좀더 편한 네비게이션 기능을 제공
• Topsy Retweet Button : 트위터 Retweet 버튼입니다. 숫자통계까지 보여줍니다.
• Simple Yearly Archive : 전체 포스트를 Year 단위로 보여줍니다. 제 블로그 최상단에 Archive 를 눌러보세요.
• Google XML Sitemaps : 서치엔진을 위한 XML 을 생성해줍니다.
• All in one SEO pack : SEO ( Search Engine Optimization ) 관련 모든기능을 하나로 제공하는 플러그인
• Akismet : 스팸방지 솔루션
• Adsense Integrator : 애드센스 삽입 및 필터링

• 포스트 : 508 개
• 코멘트 : 11200 개
• 태그 : 1350 개

2009년 이후로 HTML5 는 예전 AJAX 때와 비슷하게 웹 개발의 대세 처럼 인식되고 있습니다. 이 추세는 애플/구글 이 HTML5 에 대한 적극적인 지원을 표명하면서 더욱 활발해 지고 있는데요. 애플/구글 둘다 모바일에서 아이폰/안드로이드로 대결구도가 펼쳐지면서 앞서거니 뒷서거니 HTML5 를 이용한 혁신을 이끌어 내고 있습니다.

전 개인적으로 모바일 웹 어플리케이션에 관심을 가지고, 모바일 시작페이지인 m.xguru.net sizac.kr을 비롯하여 , 지름도우미 with RedLaser 처럼 앱과 웹을 연동하거나, 아이폰에 사진으로 전화걸기 아이콘 만들기 – QuickGuru 처럼 데스크탑/모바일이 연동된 아이폰 웹 어플리케이션을 테스트해 왔습니다.

이제 HTML5 를 이용해서 좀 더 네이티브 앱과 비슷한 웹 앱(Web App)을 만드는 방법을 소개합니다.

아래 자료는 6월12~13일간 열린 KT 의 Econovation 개발자 캠프에서 먼저 발표를 했는데요. 아직은 국내 아이폰 앱 개발자분들이 Objective-C 를 이용한 네이티브 앱에 관심들이 많으셔서 그런지, 조금 생소한 주제였던듯 합니다. 하지만 모바일에서의 HTML5 를 이용한 어플리케이션 개발은 분명한 장점을 가지고 있습니다. 한번만 작성하면 아이폰/안드로이드/블랙베리/심비안등 여러개의 플랫폼에 큰 문제없이 바로 적용이 가능하다는 것이죠. 강의에서는 이 모바일에서의 HTML5 를 이용한 개발의 장점에 대해 설명하고 어떻게 앱을 만드는지를 소개하려고 노력했습니다.

HTML5 로 iPhone App 만들기

자료의 내용은 4가지 주제로 이루어 집니다.

• HTML5 – HTML5 자체의 기능에 대한 설명입니다. 이건 따로 웹사이트에 HTML5 slide 오픈소스를 수정해서 자료를 만들어 두었습니다. http://dev.xguru.net/html5 에서 보실수 있습니다.
• iPhone Web Application 아이폰의 웹 어플리케이션 작성방법에 대한 간략한 소개입니다. 기존 웹 사이트 관리자들도 참고하실만 합니다
• jQTouch, iUI , WebApp.Net 웹에서 아이폰 UI 스타일을 표현하기 위한 UI 프레임워크 들을 간략히 소개합니다.
• PhoneGap 웹 어플리케이션을 아이폰 네이티브 어플리케이션으로 만들어주는 Phonegap 프레임워크를 소개합니다.

기본적으로 HTML,CSS,Javascript 에 대한 약간의 지식은 있다고 가정하고 작성을 했구요. ^^;

강의는 먼저 HTML5 의 기능중에서 모바일에 중요한 기능들을 설명하고, 아이폰에서 웹 앱을 만드는 방법에 대한 소개, 그리고 웹에서 아이폰 스타일의 UI 를 작성하는 방법 , 그리고이렇게 작성된 웹 앱을 네이티브 앱으로 만들어주는 Phonegap 을 소개하는 순으로 진행됩니다. 제가 말이 좀 많고 빠른편이라 슬라이드에는 설명은 그리 많지 않습니다. ^^;

아무래도 발표용 자료로 만든것이라 슬라이드만 보고 전체를 이해하시기에는 조금 어려울듯도 한데요. 궁금한 부분 있으시면 저에게 문의 주세요.
앞으로 미진한 부분을 조금씩 보강해 나가겠습니다. 혹시 필요하시다면 이 주제에 대한 세미나 요청은 메일로 보내 주세요

• 구글 SearchStories – Toy Story 편
  구글이 슈퍼볼광고때 방영했던 가슴뭉클한 광고 Search Stories 의 토이 스토리 편입니다.
  영화홍보와 적절히 섞여서 재미와 정보를 동시에 주고 있네요. 혹시 못보셨다면 슈퍼볼 광고때 나왔던 Parisian Love 도 필감입니다.
  
  
• Contra 와 Tetris : Mashup
  오락실에서 주로 하던 곤두라(Contra) 와 테트리스 기억하시나요? 두개를 적절히 조합한 매쉬업 동영상입니다. 맨뒤까지 보시면 한개의 게임이 더 나옵니다
  
  
• 최고의 랩탑 – Best Laptop Ever
  누구나 꿈꾸던 최고의 랩탑. 저도 한대만 있었으면 합니다
  
  
• Azureus Rising
  디지탈 영화들이 많이 나오고 있는데, Proof of Concept 으로 만든 디지탈 영화 동영상입니다. 멋지네요.
  전체화면으로 사운드 크게 하고 보시길 권해드립니다.
  
  

• 내용을 저장해두고 다시 읽어보고 싶은 좋은글 – Instapaper 서비스 이용하여 저장
• URL 저장해두고 언젠가 찾아보고픈 글 ( 주로 기술정보 ) – 북마크로 기록
• 트위터 에서 본 좋은 트윗 – Favorite 체크

1. Twitter 와의 연동
   • 특정 사용자의 트윗을 계속 보면서 링크가 있으면 그걸 모두 북마크에 추가하기
   • 특정 사용자의 Favorite 를 모두 북마크에 추가하기
   • * 여러명은 안되지만, 어떤 트위터 클라이언트에서든 그냥 Favorite 하는것만으로 북마크로 추가됩니다.
2. Delicious , Instapaper , Read It Later , Google Reader
   각각의 서비스에 등록되는 북마크를 자동으로 Pinboard 에 추가해 줍니다. 이거 연동이 너무 잘되어 있어서 모든 북마크를 모아두기에 딱 좋습니다.
3. 이메일로 북마크 등록도 가능 – 아이폰/블랙베리에서 링크만 그냥 메일로 던지면 됩니다.
4. 일반 북마크가 아닌 Note 형태로 등록도 됩니다. 특정 URL 에 대해서 아예 노트를 적어 놓을수 있어서 나중에 정리도 가능합니다.

구루에게 물어보세요 http://ask.xguru.net

제가 사용하는 아이디 Guru (구루) 는 ‘빛‘을 의미하는 산스크리트어입니다. 이 빛은 어둠에서 길을 인도하는 존재란 뜻으로 큰 지식을 가진 스승님을 지칭합니다. 그래서 xguru는 모든걸(x) 잘하는, 많은 사람에게 도움이 되는 사람이 되어보자라는 의미로 지은 것입니다. 그냥 구루 또는 엑스구루 라고 불러주시면 됩니다

1. 질문만 할 때는 가입이 필요없습니다. 물론 회원가입후 질문하게 되면 질문/답변이 자신의 계정에서 관리되어 보기가 좋습니다
2. 회원 가입시에는 아이디/암호/이메일 만으로 가능합니다.
3. 회원으로 가입하면 질문/답변에 덧글&답변 등록이 가능합니다.
4. 이메일 알림기능을 지원하며, 질문에 대한 답변 등록/자신의 답변에 덧글 등록/자신의 답변이 선택 되는것 등을 알려줍니다.
5. 이메일 수신은 개별 질문마다 받기/안받기 선택 가능합니다.
6. Twitter 연동기능이 있습니다. 트위터 ID가 있으시면 회원 가입후 자신의 계정정보 화면에서 트위터 ID 연동이 가능합니다. (OAuth를 이용합니다)
   
   • 공식 트위터 계정은 @AskXGuru 입니다.
   • 질문 등록시 @AskXGuru 계정에 등록되며, 질문자가 트위터 아이디 인증된 사용자라면 by @ID 형태로 질문자도 알려줍니다.
   • 답변 등록시 @AskXGuru 계정에 질문자/등록자의 트위터 ID 가 기재되어 트윗되므로 질문자는 답변 등록시 바로 트위터로 알수있습니다.
   • 이 사이트의 회원ID 는 트위터 ID와는 다릅니다. 트위터 사용자가 아니라도 사용이 가능하게 하기 위해서입니다.
7. 질문자는 자신의 질문에 대한 답변중 최고의 답변 (추천 답변)을 선택할수 있습니다.
8. 각 활동내역은 점수로 관리되며, 차후에 제가 만들 다른 서비스와 연계할 예정입니다.
9. 아이폰에서도 잘 보입니다. 혹시 CSS 만으로 더 이쁘게 해주실 수 있는분은 도움주세요!