HTML5가 바꿔가는 애플리케이션 세상

이전 블로그에서 네이티브 앱(Native App)과 웹 애플리케이션(Web Application)을 비교하며 그 차이와 한계에 대해 설명했다. 여기서는 HTML5의 등장으로 어떻게 데스크탑/모바일 웹 애플리케이션들이 한계를 극복하고 있고, 실제로 애플리케이션에 어떤 차이를 가져오는지에 대해 두 가지 내용을 기준으로 – 구글 I/O 컨퍼런스, NextStop.com – 이야기해보고자 한다.

HTML5에서 제공하는 새로운 기능에 대해서는 여러 곳에서 더 자세한 정보를 찾을 수 있기 때문에 (Mickey Kim(@mickeyk)님의 블로그 중 “HTML 5란 무엇이며 왜 중요한지에 대한 이야기” 참고), 여기에서 간략히만 설명하면, Google과 Apple이 리드하며 개발하고 있는 HTML의 새로운 규약이고, 기존에 웹이 가지는 한계(비디오 재생을 위한 표준화된 방법이 없음, 디바이스에 액세스할 수 없음, 멀티태스킹 못함,…)를 극복하고자 하는 다양한 기술 (Canvas, Device Access, Worker, Push, Video tag…)등이 포함되어 있다.

구글 개발자 컨퍼런스 Google I/O 2010

지지난주 (5월 19일) 샌프란시스코에서 열렸던 구글 개발자 컨퍼런스 Google I/O에서의 최대 화두는 HTML5였다. (여기서 잠깐 다른 얘기. Google IO 키노트 연설을 한 Vic Gundotra(VP of Engineering)는 I/O가 Input과 Output을 의미하기도 하지만, 다른 한편으로는 Innovation과 Openness의 약자이기도 하다고 이야기했다. 왜 컨퍼런스 이름을 I/O라고 지었는지 궁금했었는데, 구글의 정신을 표현한 멋진 네이밍이다.)

첫째날 키노트 연설에서는 웹 기술의 발전에 대한 설명과 함께 HTML5의 새로운 기술들을 사용하고 있는 다양한 회사들이 나와 HTML5를 어떻게 적용하고 있는지, 그래서 어떤 일들을 하고 있는지에 대해 설명했다. 정말 재미있는 예들이 많았다. 여기서 중요 장면을 몇 가지 소개해 보겠다.

Forrester Research의 조사 결과에 의하면 사람들이 점점 웹에서 더 많은 시간을 보내고 있다고 한다. 아는 이야기도 나의 생활 패턴도 그렇게 변했지만, 이렇게 그래프로 보니 놀라게 된다.
2004년부터 우리가 많이 쓰는 애플리케이션들이 웹으로 옮겨가고 있다.
이와 함께 HTML5가 발전해내가고 있는데, 실제로 많은 브라우저들이 이를 이미 지원하고 있고, 올해 말에는 IE를 제외한 모든 브라우저가 HTML5의 주요 기능을 제공하게 될 것이라고 예측하고 있다.

데스크탑에서는 이렇게 많은 브라우저에서 지원이 되는데, 모바일 브라우저에서의 상황은 어떨까? 물론 단말기 대수로 생각하면 HTML5를 지원하는 폰의 비율이 높지 않을 것이다. 그러나 구글이 수집한 아래 자료에 의하면 HTML5를 지원하는 모바일 브라우저에서 사람들이 훨씬 더 많은 검색을 하고 있다. 즉, 갯수는 작지면 사용량이 월등히 높은 것이다. 이는 최근 급속도로 성장한 스마트폰 사업과 결코 무관하지 않다.

HTML5가 지원되는 모바일 브라우저에서 훨씬 더 많은 검색이 일어나고 있다.

그리고 나서 HTML5를 활용하고 있는 많은 회사들이 등장해 어떤 새로운 기능들을 써서 브라우저용 애플리케이션을 만들었는지 설명하였다. 첫 번째 등장한 회사는 DarkRoom, Sketchpad라는 웹 애플리케이션을 만든 MugTug이다. 아래는 실행 화면이다.

웹에서 즐기는 그림판, Sketchpad
웹 기반의 사진 편집 애플리케이션, Darkroom

웹사이트를 직접 방문해서 한 번씩 해보시길 (Internet Explorer에서는 지원이 안될 수도 있습니다.) 권한다. 두 가지 사실에 놀라게 된다. 첫째는 웹에서 이런 것도 가능하다는 것이고, 둘째는 그 성능이다. 네이티브 애플리케이션만큼 빠를 수는 없겠지만, 크게 불편을 느끼지 않을 만큼 성능이 좋다.

아래 유투브 동영상의 12:18부터 감상하면 더 많은 예를 볼 수 있다.

모바일에서의 HTML5

이제 모바일 이야기로 넘어가보자. Google I/O의 둘째날 키노트 연설에서는 HTML5가 모바일에서는 어떻게 적용되고 있는지에 대해서 설명하고 실제 그 기능을 안드로이드 디바이스에서 시연하였다. 아래, 네 가지 데모이다.

1. Geolocation (위치 정보)

이전 블로그에서도 소개했지만, GPS 등을 이용해서 위치 정보를 알아내는 기능은 이미 브라우저에 구현되어 있다.

2. Accelerometer (엑셀러로미터)

모바일 브라우저에서, 단말기에 내장된 액셀러로미터 정보를 가져오는 것을 시연하는 모습이다.

3. 카메라

브라우저에서 카메라를 구동시킬 수 있고, 카메라로 찍은 사진은 웹 서버에 보내져 브라우저에서 곧 볼 수 있다.

4. 마이크

브라우저에서 마이크를 통해 들어오는 정보를 받을 수 있고, 이를 서버에 보낼 수 있다.

케이스 스터디: NextStop의 웹 애플리케이션

NextStop의 웹 애플리케이션

이번에는 NextStop.com이라는 회사의 창업자들과의 인터뷰를 통해, 그들이 실제로 아이폰 전용 앱 대신 HTML5를 사용한 웹 애플리케이션을 채택하게 된 배경, 그리고 HTML의 한계를 구체적으로 어떻게 극복하고 있는지에 대해 설명해보고자 한다.

NextStop의 두 창업자는, 아이폰 네이티브 앱 대신 웹 애플리케이션을 선택한 이유를 다음과 같은 네 가지로 설명하고 있다.

1. 웹이 훨씬 개발하기 쉽고 반복해서 수정하기 쉽다. 하루에 네 번씩 업데이트를 하고 있는데, 네이티브 앱으로 한다면 업데이트에 훨씬 시간이 오래 걸린 것이다.

2. 많은 앱의 경우 굳이 네이티브 앱으로 만들 필요가 없다. 하드코어 프로세싱 파워가 필요한 게임을 만드는 것도 아닌데 말이다. 빠르고 반응성 좋은 웹 애플리케이션을 HTML5를 사용하면 만들 수 있다.

3. 다른 웹 페이지랑 연결하기가 쉽다. 예를 들어, 마음에 드는 레스토랑을 발견했는데 그 웹사이트를 방문하고 싶다면, 굳이 브라우저를 떠나거나 애플리케이션을 떠나지 않고 아주 자연스럽게 그 페이지로 갈 수 있고, 갔다가 다시 돌아오기도 쉽다.

4.”바탕화면에서 추가하기” 기능을 이용하면 바로 가기 버튼을 홈에 넣을 수 있어서 유저 입장에서는 네이티브 애플리케이션처럼 접근할 수 있다.

브라우저 기반의 애플리케이션에서 내가 가장 크게 느꼈던 불편은 페이지 전환에 시간이 많이 걸린다는 것이었는데, HTML5를 써서 그 문제를 얼마나 개선했는지 궁금해서 iPod Touch를 이용해서 아이폰/안드로이드 전용 웹사이트에 접속해 보았다.

상당히 놀랐다. 오른쪽, 왼쪽 버튼을 눌러 다음 사진 보기 기능이 있는데, 누르면 거의 곧바로 반응한다. 대부분 다른 웹사이트에서 문제가 되는 긴 로딩 시간이 없었다. 인터뷰를 보니 캐싱을 사용해서 그렇게 구현했다고 한다. 즉, 이전 페이지와 다음 페이지를 미리 로드해 와서 저장해두기 때문에 매번 이미지를 불러오느라 시간을 쓰지 않는다. 게다가 보았던 페이지로 되돌아갔을 때도, 그 페이지가 이미 저장이 되어 있기 때문에 시간이 걸리지 않는다.

멀티터치를 이용해서 브라우저 위에 떠 있는 지도를 확대하고 축소할 수도 있다.

심지어, 카메라로 사진을 찍어 올리는 기능이라든지, 폰에 저장된 사진 라이브러리에서 사진을 웹페이지에 업로드하는 기능도 있다. 다만, HTML에서 아직은 이를 지원하지고 않고 있어서 이를 이용하기 위해서는 별도의 아이폰 앱을 다운로드해서 설치해두어야한다고 한다. 아래는 브라우저에서 카메라를 구동하고, 사진을 찍은 후 다시 브라우저에서 확인하는 장면이다.

HTML5, 아직은 더 갈 길이 있지만, 지금의 발전 속도라면 네이티브 앱과 웹 애플리케이션의 차이는 점차 줄어들 것이 분명하고, 더 많은 애플리케이션이 HTML과 JavaScript를 이용하여 개발될 것은 자명하다. 그렇다면 모든 네이티브 앱(native app)이 웹으로 옮겨가게 될까? 그렇지는 않다. 컴퓨터에서 많은 앱이 브라우저로 옮겨져서 우리의 삶이 이미 브라우저 위에서 이루어지고 있지만 여전히 데스크탑 애플리케이션을 써야 훨씬 편한 몇몇 케이스가 있듯, 모바일에서도 마찬가지로 많은 기능이 웹으로 옮겨지겠지만 여전히 네이티브 앱을 쓸 수밖에 없거나, 그게 더 사용하기 편해서 사람들이 네이티브 앱을 선호하는 케이스는 여전히 존재할 것이고, 그런 것들은 여전히 네이티브 앱으로 남을 것이다.

7 thoughts on “HTML5가 바꿔가는 애플리케이션 세상

  1. 잘읽고갑니다. Html5로 더 발전할 웹 앱이 기대가 되는군요. 브라우저만 지원하면되니 기기별로 따로 포팅할 필요도 없고 말이죠.

  2. Nextstop 사례와 좋은 글 감사히 읽고 갑니다..
    HTML5의 등장으로,
    이전 포스트에서 언급하셨던 long-click등의 한계외에도 웹 어플리케이션의 가능성을 크게 확장시켜 주는 군요 ^^
    개인적으로는 웹기반의 가장 큰 한계를 오프라인 상에서는 동작이 어렵다는 것으로 생각했었는데 Nextstop의 캐시를 보니 모바일에서도 브라우저가 캐시/오프라인 지원만 좀 해주면 아무 문제될 게 없겠다 싶습니다 🙂
    애플 등의 입장에서 본다면, 웹 기반의 앱들이 계속 나올 경우 애플 앱스토어 기반의 통제력과 수익에 달갑지만은 않을 것 같기도 한데, 어떻게 또한번 모바일 세상이 변화를 맞을지 기대가 됩니다. 🙂

    1. 저도 오프라인상에서 동작이 어려운 걸 큰 한계로 생각했는데 완벽하게는 아니겠지만 어느정도는 캐싱을 써서 해결될 수 있으리라 생각합니다. 애플 입장에서는 이런 걸 달갑게 생각하지 않을 것 같은데, 그래도 사파리에서 HTML5를 열심히 지원하고 있습니다.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s