[4기 부산 오세빈] Chrome App을 만들어보자!

안녕하세요! 부산 삼성 S/W 멤버십 22-1 오세빈입니다.

이번에는 Google에서 서비스 하고 있는 Chrome App에 대해서 한번 알아보도록 하겠습니다. 사실 크롬에서 동작하는 애플리케이션의 경우 몇개로 나뉘게 됩니다.

크롬 브라우저 안에서 동작하는 웹 애플리케이션(Web Application) 그리고 위쪽 탭쪽에 있는 플러그인, 또 하나는 패키지 앱(Packaged App)입니다. 

Packaged App 같은 경우는 얼마전에 2012 Google I/O 프리젠테이션에서 발표를 했습니다 그 당시 넥서스7이나 구글 글라스와 같은 제품의 발표로 인해 기술적인 부분은 기억에 남지 않으실 수도 있습니다 하지만 분명한 것은 구글은 Chrome 부분에서도 꾸준히 프로젝트를 진행해왔다는 것입니다.

아마 Chrome 기반의 크롬 북을 겨냥한게 아닐까 생각이 듭니다. 그만큼 깔끔하고 미려(?)하게 윈도우를 뛰울 수 있습니다.

저는 크롬 애플리케이션을 몇개 쓰고있는데요~ 한번 보도록 합시다. 저보다 더 많은 프로그램을 쓰실 수 도 있고 아마 쓰지 않으실 수 도 있을겁니다. 하지만 대부분의 앱들이 크롬 브라우저 안에서 동작하도록 되어 있습니다. 많이 상용화되지 않아있는 부분인데 크롬에서 제공하는 기본앱들도 존재합니다.

현재 크롬 스토어에서 데스크톱에서 실행되는 App이라고 홍보를 하고 있습니다.

그중에서 제가 가장 자주 쓰는 앱은 Any.do 라는 것인데 일정 관리하는데 아주 편리합니다. 크롬 브라우저 엔진을 통해서 동작하기 때문에 Mac 과 Window 어느것이든지 상관없이 플랫폼에 독립적으로 잘~돌아갑니다. 밑에 스크린샷에서 보듯이 크롬 브라우저 밖에서 독립적으로 마치 데스크탑 앱처럼 동작합니다.

자! 그러면 소개는 여기까지 하고, 실제 Packaged App을 만들어 보도록 하겠습니다. 먼저 설치된 앱을 보려면 크롬 브라우저에서 오른쪽 상단의 옵션 버튼을 클릭하고 도구 ㅡ> 확장 프로그램으로 가시면 됩니다.

그러면 밑에 그림과 같이 설치된 확장 프로그램 목록이 뜨게 됩니다. 그리고 상단의 개발자 모드에 체크를 하게 되면 앱을 수동으로 설치 가능합니다. 만약에 앱을 제작했다면 여기서 바로 크롬 브라우저에 설치해볼 수 있습니다.

developer.google.com 에 들어가시면 구글에서 개발하고 있는 여러 Product를 확인할 수 있습니다. 그중 Chrome Apps 로 들어가시면 됩니다.

http://developer.chrome.com/apps/about_apps.html

자 그러면 실제로 앱을 만들어봅시다. Packaged App에서 필요한건 단 3가지 입니다. 

1. manifest.json

2. background.js

3. window.html

앱에 관련된 여러가지 설정 및 퍼미션 등이 Manifest 파일에 들어가게 됩니다. Adnroid 와 비슷한 부분이죠. html은 앱의 View를 담당하게 됩니다. Adnroid에서 xml 과 비슷하다고 생각하시면 됩니다. 그리고 가장 중요한 JavaScript 에서 실제 앱에 대한 로직을 구현하면 됩니다.

예제 샘플 코드를 한번 살펴보겠습니다.

name, description, version, app, icon 등을 설정하게 되는데, background : script 부분에 밑의 JavaScript 파일을 등록해놓으면 해당 앱이 실행될 때 로드하게 됩니다.

background.js 파일에서는 앱이 실행될 때 아래 파일 window.html 을 View로 이용해서 실행하게 됩니다. html 파일에서 다른 JavaScript로 된 라이브러리 파일을 로드해서 써도 됩니다.

이제 이 세가지 파일을 한 폴더에 놓고 크롬 브라우저에서 로드 하면 됩니다. 좀전에 보신 확장 프로그램 설정 창에서 다음과 같은 버튼 3개가 있습니다. 그중에서 "압축해제된 확장 프로그램 로드" 를 클릭해서 위에서 만든 파일을 로드하면됩니다. 

만약에 직접 만든 앱을 스토어를 통해 업로드 하고 싶다면 "확장 프로그램 압축" 을 통해서 파일 압축해서 올려야 합니다. 구글에 크롭 앱 개발자로 등록을 먼저 해야하구요.

같은 폴더안에 이미지파일을 넣어놓고 html 파일에서 로드하면 위의 그림과 같이 샘플 앱을 만들 수 있습니다. 마치 네이티브 프로그램처럼 브라우저 밖에서 독립적인 윈도우를 가지고 동작합니다.

앞으로 네이티브로 동작하는 프로그램을 만들 때 이처럼 JavaScript 파일과 html 파일만으로도 충분히 만들 수 있을듯 합니다.

http://developer.chrome.com/apps/samples.html

위의 링크에 들어가면 많은 샘플 앱들이 소스가 오픈되어있습니다. Chrome 엔진에서 제공하는 여러가지 API 들을 사용하는 앱들이기 때문에 많은 공부가 될겁니다.

두번째 창의과제로 크롬 앱을 활용했었는데 html 을 이용해서 View 부분을 손쉽게 디자인할 수 있기 때문에 금방 멋진 앱을 만들 수 있습니다.