이 글은 James Hugman과 Robert Nyman의 Better integration for open web apps on Android의 한국어 번역본입니다.

지금까지, 모바일 웹앱을 개발하는 것은 약간 까다로운 일이었습니다.

시간을 들여 앱을 개발한 다음, 사용자들이 그 앱을 설치하도록 하는 것은 힘든 일입니다. 더구나 웹앱에 대해서는 “설치한다”라는 개념도 제대로 정의되어 있지 않습니다.

웹앱을 설치하는 가장 흔한 방법은 홈스크린에 단축아이콘(shortcut)을 추가하는 방법입니다. 이 방법은 많은 측면에서 문제가 있습니다. 특히 웹앱을 관리하는 측면에서 – 즉, 웹앱을 실행하고, 전환하고, 삭제하는 측면에서 – 네이티브 앱과 현격한 차이를 보입니다.

웹앱이 홈스크린(Homescreen)에만 존재하고, App Drawer에는 없습니다.

웹앱이 실행중일 때, 최근 앱 목록(Recent Apps)에 제대로 표시되지 않습니다.

설령 당신이 웹앱을 사용자 단말기의 홈스크린에 무리 없이 설치할 수 있는 방법을 찾았다 하더라도, 당신의 웹앱은 종종 성능이 떨어지는 구식 웹뷰(web view) 위에서 실행될 것입니다. 이런 웹뷰(web view)는 데스크탑 브라우저에 비해 호환성도 떨어지고 실행속도도 느립니다.

우리가 개발자로서 바라는 것은 최신의 빠른 웹 실행환경(web runtime)입니다. 그리고 그런 웹 실행환경(web runtime)이 사용자의 단말기에서 언제나 최신상태로 유지될 것을 희망합니다.

사용자들이 웹앱을 네이티브 앱과 똑같은 방식으로 실행하고 관리할 수 있다면 얼마나 멋질까요?

APK Factory를 소개합니다

우리는 오랫동안 데스크탑 환경에서 웹앱이 진짜 앱처럼 동작하도록 만들기 위해 노력해왔습니다. 데스크탑에 웹앱을 설치하면 파이어폭스가 그 웹앱을 데스크탑 앱으로 다시 패키징합니다. 그렇게 다시 패키징된 앱은 시스템과 완벽하게 통합됩니다. – 크로스플랫폼 오픈 웹앱의 발전에 관한 레포트 참조.

데스크탑 시스템이 윈도우즈 환경이라면 앱이 시작메뉴(Start Menu) 안에 존재할 것이고, Mac OS X 환경이라면 앱이 론치 콘트롤(Launch Control) 안에 존재할 것입니다.

파이어폭스29부터 안드로이드에도 이런 개념이 적용됩니다.

이제 안드로이드 환경에서 웹앱을 실행할 때 최신의 현대적인 웹 실행환경(web runtime)을 이용할 수 있다는 의미입니다. 더구나, 웹 실행환경(web runtime, 즉 파이어폭스)이 일반 안드로이드 앱 형태로 제공되기 때문에 항상 최신 버전 상태를 유지할 수 있습니다. 마침내 우리는 안드로이드 내장 브라우저를 이용하지 않아도 됩니다.

ShotClock이라는 이름의 웹앱. 화면 우상단의 아이콘을 눈여겨 보세요.

사용자는 다음과 같은 이유 때문에 당신의 웹앱이 진짜 안드로이드 앱인 것처럼 느낄 것입니다.

• 웹앱이 App Drawer와 최근 앱 목록(Recent Apps)에 고유한 이름과 아이콘으로 보여질 것입니다.
• 웹앱이 네이티브 안드로이드 앱과 똑같은 방법으로 설치되고 삭제될 것입니다.
• 웹앱이 네이티브 안드로이드 앱과 똑같은 방법으로 업데이트될 것입니다.

App Drawer 안에서

최근 앱 리스트(Recent Apps)에서: 여기 있는 모든 앱들이 웹앱입니다

필요한 실행권한(permission)을 보여주며 설치됩니다

무엇보다 훌륭한 것은, 이런 변화를 실현하기 위해 개발자가 해야 할 일이 아무것도 없다는 점입니다. 멋진 웹앱을 만들었다면, 다양한 플랫폼을 지원하기 위해 필요한 다양한 패키징 방법은 고민하지 않아도 됩니다.

즉 파이어폭스 OS를 위한 최고의 앱을 만들었다면, 이미 안드로이드를 위한 최고의 앱도 만든 셈입니다.

기술에 관한 상세 설명

파이어폭스에서 당신은 window.navigator.mozApps.install(manifestUrl) 메소드를 호출해서 앱을 설치할 수 있습니다. 모든 웹사이트가 이 API를 이용할 수 있기 때문에 모든 웹사이트가 앱 스토어 역할을 수행할 수 있습니다.

manifestUrl는 manifest.json 문서를 가르키는 URL입니다. 이 문서는 앱을 실제로 로딩하지 않고도 앱에 대해 다음과 같은 정보를 알 수 있게 해줍니다.

• 앱의 이름과 설명 (필요한 숫자만큼의 다국어로 구성할 수 있음).
• 앱의 아이콘 (다양한 픽셀 수와 다양한 크기로 구성할 수 있음).
• 앱이 실행하기 위해 필요한 실행권한(permission) 목록.
• 앱이 등록하기 원하는 WebActivity 목록.
• (패키지형 앱의 경우에만,) 앱의 코드와 자원을 담고 있는 zip 파일의 URL.

우리는 안드로이드 버전 파이어폭스에서 이 메소드가 호출되면 인자로 전달되는 URL을 모질라의 APK Factory 서비스로 전달하게 구현했습니다. 그러면 APK Factory 서비스가 해당 웹앱을 위한 APK를 만듭니다.

APK Factory에서 만든 APK는 안드로이드의 멋진 리소스 프레임워크를 사용합니다. 그래서 사용자가 사용하는 언어와 화면 크기에 알맞는 적절한 아이콘과 설명문구를 사용자에게 표시합니다.

웹앱이 요구하는 실행권한(permission)도 일반적인 안드로이드 앱과 동일하게 표시됩니다. 그래서 사용자는 당신의 웹앱을 설치할 때 다른 안드로이드 네이티브 앱을 설치할 때와 똑같은 경험을 하게 됩니다.

패키지형 앱의 경우, APK 안에 웹앱을 위한 zip 파일이 포함되어 있습니다. 그래서 일단 APK를 다운로드하고나면 추가로 네트워크를 사용할 필요가 없습니다.

호스트형 앱의 경우, 앱을 처음 실행할 때 앱캐시(Appcache)에 명시한 자원들을 다운로드 합니다. 그래서 다음에 앱을 실행할 때는 네트워크 연결 없이 빠르게 실행시킬 수 있습니다.

앱이 (OS 위에서) 웹앱 형태로 실행되는지, 아니면 (브라우저 위에서) 웹 페이지 형태로 실행되는지 알고 싶다면 getSelf() 메소드를 이용하세요. 도움이 될 것입니다.

if (window.navigator.mozApps) {
  // 앱 API를 지원하는 플랫폼에서 실행되고 있음.
  window.navigator.mozApps.getSelf().onsuccess = function() {
    if (this.result) {
      // 설치된 웹앱 형태로 실행되고 있음.
    } else {
      // 브라우저 위에서 웹페이지 형태로 실행되고 있음.
      // 설치 버튼을 제공하는 것이 좋을 듯...
    }
  };
}

당신의 앱을 최신 상태로 유지시키는 방법

호스트형 앱의 경우, 늘 하던 방식으로 앱을 갱신하면 됩니다. 서버에서만 앱을 갱신하면, 당신의 사용자들은 다음에 앱을 실행할 때부터 수정된 앱을 이용할 수 있습니다. 당신은 원할 때마다 앱을 갱신할 수 있습니다. 그러면 사용자들은 앱을 실행해서 서버에 접속할 때마다 최신 버전의 앱을 얻게 됩니다.

앱의 매니페스트를 수정할 때마다, 당신의 사용자들에게는 기존에 설치된 앱을 갱신할 수 있는 APK가 전달됩니다.

예를 들어, 당신이 앱의 아이콘이나 이름을 바꾸기 위해 앱의 매니페스트를 수정하면 APK Factory 서비스가 앱을 위한 APK를 새로 생성하고, 당신의 사용자들에게 새로 설치할 버전이 있다는 알림 메시지를 전달할 것입니다.

패키지형 앱의 경우에도 같은 메카니즘이 적용됩니다. 웹앱을 위한 zip 파일을 수정하고, 앱의 매니페스트 파일에 있는 버전 넘버를 수정하면, APK Factory가 그런 변화를 반영해서 사용자들에게 갱신된 앱이 있음을 알리는 알림 메시지를 전달합니다. 당신의 사용자들은 알림 메시지를 보고 새로운 APK를 설치할 것입니다. 간단한 일입니다.

이게 전부인가요?

이것은 신나는 프로젝트입니다. 여기에는 웹 개발자가 할 일이 거의 없습니다. 그리고 개발자가 호출할 추가 API가 있는 것도 아닙니다. 그럼에도 이 프로젝트는 안드로이드 환경에서의 웹앱 활용성을 크게 향상시킵니다.

이제 우리는 웹앱을 APK로 변환시키는 방법을 마련했습니다. 이로써 우리는 웹앱과 앱 사이를 가르는 경계선을 보다 희미하게 만드는 플랫폼을 얻은 셈입니다. 직접 확인해보세요. 그래서 이 기능을 개선시킬 도움을 주세요. 구글 플레이스토어에서 파이어폭스 베타버전을 설치해보세요. Firefox Marketplace에서 앱을 설치해보세요. 그리고 당신이 느낀 점을 우리에게 알려주세요!