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

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

이 글은 월간 웹[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가지가 앞으로의 미디어가 추구해야할 큰 변화중의 하나라는 것입니다.