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를 어떻게 적용하고 있는지, 그래서 어떤 일들을 하고 있는지에 대해 설명했다. 정말 재미있는 예들이 많았다. 여기서 중요 장면을 몇 가지 소개해 보겠다.

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

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

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

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

모바일에서의 HTML5

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

1. Geolocation (위치 정보)

2. Accelerometer (엑셀러로미터)

3. 카메라

4. 마이크

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

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

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

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

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

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

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

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

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

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

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