크롬 웹스토어에 설치가 가능한 웹앱 만들기

사실, 웹앱이 설치가 가능하다는 말은 약간 이상합니다.

왜냐하면 해당 url로 접근하기만 하면 되기 때문이죠.

하지만 크롬 OS나 크롬 브라우저에서 웹앱의 사용이 간편하고,

특히 웹스토어에 자신의 웹앱을 올리기 위해서는,

웹스토어가 원하는 zip파일로 만들어야 합니다.


즉, 자신이 만든 웹앱를 크롬 웹스토어에 올리기 위해

 zip 파일로 만드는 일련의 과정이라고 생각하시면 됩니다.


우선 준비물은 웹앱이 있어야 합니다.

웹앱이 아직 없다면 자신의 블로그여도 괜찮습니다.

(정확히 얘기하면 해당 웹앱의 url이 있어야 된다는 뜻이겠죠.
물론 packaged app도 올릴수 있긴 합니다만 우선 제일 쉬운
해당 url이 존재하는 웹앱을 만들겠습니다.)


자 그러면, 시작해보죠!


1. 개발자 계정 만들기

아이폰이든, 안드로이드든 앱을 만들기 위해 개발자 계정이 필요하듯이

웹앱도 개발자 계정이 필요합니다.

개발자 계정은 gmail계정이 있으면 바로 만들 수 있습니다.

https://chrome.google.com/webstore/developer/dashboard (개발자 계정 만들기)


웹스토어에 자신이 만든 웹앱을 만들어 올리기(publishing) 위해서는

5달러를 결재해야 합니다.(아직 저는 안했습니다.)

gmail로 로그인후 해당 페이지를 보시면,

개발자 데쉬보드 페이지가 나옵니다.

(저 같은 경우는 테스트용 웹앱을 하나 등록해놨습니다.)

https://chrome.google.com/webstore/developer/dashboard

2. 웹스토어에 올릴 zip 파일 만들기

웹스토어에 올리기 위해서는 zip파일이 필요합니다.

hosted app, packaged app 이렇게 두 가지가 존재하는데,

hosted app은 개발자가 호스팅된 웹앱의 url이 있는 경우이고,

packaged app은 직접 개발한 소스를 모두 올리는 경우입니다.

(아직 packaged app의 정확한 스펙은 보지 않았습니다.)


여기에서는 더 쉽고, 현재 존재하는 웹앱을 올릴 수 있는 hosted app을 zip 파일로

만들어 보겠습니다.

hosted app을 zip파일로 만들 경우에는 웹스토어에 올릴 수 있고,

hosted app을 테스트 하기 위해서 크롬 브라우저에 바로 설치가 가능한 crx 파일로 만들수도 있습니다.


crx 파일이든, zip파일이든 가장 중요한 파일은

바로 manifest.json 파일입니다.


2-1. manifest.json 파일 만들기

크롬에 설치 및 웹스토어에 등록하기 위해서는 mainfest파일을 설정해야 합니다.

우선 myapp이라는 폴더를 만든후에 확장자는 '.json' 파일로 생성하시면 됩니다.

{
  "name": "Test",
  "description": "Web app test",
  "version": "1.0",
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "urls": [
      "*://uxria.com/"
    ],
    "launch": {
      "web_url": "http://uxria.com/"
    }
  }
}

name속성은 크롬 브라우저나 웹스토어에 나타나는 이름입니다.

description은 설명입니다.

version은 해당 웹앱의 버젼입니다.

icons는 해당 웹앱의 아이콘입니다. 여러 사이즈의 아이콘을 등록할 수 있습니다.

아래의 스샷처럼 icon역시 myapp 폴더안에 넣어주시면 됩니다.

중요한 점은 128 * 128의 사이즈가 제일 좋고, 반드시 png파일로 만들어야 합니다.

더 자세한 사항은 이곳 을 참조해 주세요.

app은 해당 url을 설정하는 속성입니다.


mainfest.json에 들어가는 속성의 자세한 설명은 이곳에서 확인하세요.



2-2. 크롬 브라우저에서 바로 설치가 가능한 .crx파일 만들기

우리가 지금까지 만들어 놓은 mainfest.json과 아이콘이 있으면

바로 설치가 가능한 .crx파일을 만들 수 있습니다.

1. 크롬브라우저의 설정 및 관리에서 -> 도구 -> 확장 프로그램을 클릭합니다.

2. 확장 프로그램 압축을 선택합니다.

3. 찾아보기를 선택하여 지금까지 만들었던 myapp 폴더를 지정해줍니다.


4. 확인을 누르면 해당 폴더에 crx파일과 비공개키 파일(.pem)이 생성됩니다.

(mainfast.json파일의 속성이나 속성값이 잘못 지정될 경우 생성이 안됩니다.)

5. crx파일을 크롬 브라우저로 드래그하거나 압축해제된 확장 프로그램 로드로 해당 폴더를

선택하시면 크롬 브라우저에 설치가 됩니다.

설치된 웹앱은 새로운 텝을 열게 되면 보여지게 됩니다.

2-3. zip 파일 만들기

지금까지 만들어 놓은 myapp폴더를 zip파일로 생성하면 됩니다.

(알집등의 압축프로그램을 사용하거나,

윈도우의 보내기 -> zip파일을 선택하시면 되죠.)

지금까지 크롬 웹스토어에 올리거나, 크롬브라우저에 설치가 가능한 웹앱을 제작해 봤습니다.

다음번 포스팅에서는 웹스토어에 올리는 방법에 대해서 이야기 하도록 하겠습니다.


참고 : http://code.google.com/intl/ko-KR/chrome/apps/docs/developers_guide.html