LT blog

웹초보님의 ‘구글 크롬에 내장된 웹 애플리케이션 기능 활성화 하기 ’ 포스트에서 최신 Google 크롬(이하 ‘크롬’) dev 채널 버전, Chromium 등의 속성에 ‘--enable-apps’ 옵션을 추가함으로써 크롬, Chromium 등에 내장된 웹 애플리케이션 기능을 사용하는 방법을 소개하였다. 개인적으로 Google 애플리케이션 (이하 ‘Google Apps’) 서비스를 이용해 개인 도메인(liberotown.com)으로 메일, 캘린더, 문서도구 등을 사용하고 있다. 하지만 크롬에서 기본적으로 제공하는 메일, 캘린더, 문서도구 웹 애플리케이션에는 Google Apps 관련 옵션이 없어 소스 파일을 뜯어 보았다.

Google 크롬 웹 애플리케이션

Windows XP, Windows VISTA, Windows 7, Ubuntu^주1주2에서 기본 제공 웹 애플리케이션이 있는 주소는 각각 아래와 같다^주3.

• Windows XP
  • C:\Documents and Settings\"User Name"\Local Settings\Application Data\Google\Chrome\Application\6.0.453.1\Resources
• Windows VISTA / 7
  • C:\Users\"User Name"\AppData\Local\Google\Chrome\Application\6.0.453.1\Resources
• Ubuntu
  • /opt/google/chrome/resources

각 폴더를 보면, manifest.json 파일과 아이콘 파일이 있다. 기본 메일(Google Mail) 설정 파일(manifest.json)의 내용은 아래와 같다.

{
  "key": "XX2fMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCfjDZDDE/CHFEYjpPSDjdI3zphzGo7fSxO3+/pQs++FwvA+OpKKhmBga2Sa+f53ujDlPR8Q6mCvy1lXM4M4zD4Hg3lH2LC1wT/YXxJ28afRYW1yEo6/pbpHazij3+FneGMT2xcTyGvgoacJHXOTUqWyCN7qMOCiFDwQ6Uk1zJOPQIDAQAB",
  "name": "Google Mail",
  "version": "1",
  "icons": {
    "128": "128.png",
    "24": "24.png",
    "32": "32.png",
    "48": "48.png"
  },
  "permissions": [ "notifications" ],
  "app": {
    "urls": [
      "*://mail.google.com/mail/",
      "*://gmail.com/",
      "*://www.gmail.com/"
    ],
    "launch": {
      "web_url": "https://mail.google.com/mail/"
    }
  }
}

각 항목의 설명은 Google Chrome Extensions의 Formats: Manifest Files 에서 확인할 수 있다.

웹 애플리케이션 만들기

기본 제공 웹 애플리케이션 수정하는 방법

기본적으로 제공하는 메일, 캘린더, 문서도구 웹 애플리케이션을 수정해 Google Apps 계정을 사용하기 위해서는 각 웹 애플리케이션의 manifest.json 파일을 수정해야 한다. manifest.json 파일의 "name" 항목은 웹 애플리케이션의 이름을, "urls" 항목은 해당 애플리케이션에 표시할 주소^주4를, "web_url" 항목은 처음 접속할 주소를 설정한다. 문서 편집기에서 각 폴더에 있는 해당 파일의 "web_url" 항목을 아래와 같이 수정한다^주5.

• 메일: "web_url": "https://mail.google.com/a/"사용자 도메인"/"
• 캘린더: "web_url": "https://www.google.com/calendar/hosted/"사용자 도메인"/"
• 문서도구: "web_url": "https://docs.google.com/a/"사용자 도메인"/"

웹 애플리케이션의 이름도 바꾸려면 "name" 부분을 수정하면 된다. 기존 웹 애플리케이션을 수정해 Google Apps 계정으로 사용하는 경우 "urls" 항목은 수정할 필요가 없다. 단, 수정한 애플리케이션을 기본 제공 웹 애플리케이션과 함께 사용하려면 "key" 항목을 수정하거나 삭제해야 한다.

‘--apps-panel’ 옵션을 이용해 새 탭 페이지가 플로팅 패널 형식으로 열린 화면.

웹 애플리케이션을 새로 만드는 방법

기본으로 제공하는 웹 애플리케이션과 Google Chrome Extensions의 Formats: Manifest Files 를 참고하여 개인 웹 애플리케이션을 만들 수 있다. 아래는 Google Apps 메일(liberotown.com) 애플리케이션의 예다.

{
  // Required
  "name":"LT mail",
  "version":"1",
  // Recommended
  "description":"LT mail Web Application",
  "icons":{ "24":"24.png",
            "32":"32.png",
            "48":"48.png",
           "128":"128.png"},
  // Optional
  "permissions":["notifications"],
  "app":{
    "urls":["*://mail.google.com/mail/","*://gmail.com/","*://www.gmail.com/"],
    "launch":{"web_url":"https://mail.google.com/a/liberotown.com/"}
  }
}

같은 방식으로 일반 웹페이지의 웹 애플리케이션도 만들 수 있다. 아래는 이 블로그(LT blog) 웹 애플리케이션의 예다.

{
  // Required
  "name":"LT blog",
  "version":"1",
  // Recommended
  "description":"LT blog Web Application",
  "icons":{ "24":"24.png",
            "32":"32.png",
            "48":"48.png",
           "128":"128.png"},
  // Optional
  "permissions":["unlimited_storage","notifications"],
  "app":{
    "urls":["*://*.liberotown.com/"],
    "launch":{"web_url":"http://www.liberotown.com/"}
  }
}

LT_app.zip

LT blog 웹 애플리케이션의 예

24x24, 32x32, 48x48, 128x128픽셀의 아이콘은 별도로 구하거나 만들어서 사용한다.

탭이 낮아지고 툴바가 숨겨진 윈도용 크롬 웹 애플리케이션(왼쪽)과, 고정한 탭과 똑같은 우분투용 크롬 웹 애플리케이션(오른쪽).

웹 애플리케이션 설치하기

크롬 메뉴의 Tools > 확장 프로그램(E)^주6의 개발자 모드에서 ‘압축해제된 확장 프로그램 로드...’ 버튼을 클릭하여 웹 애플리케이션이 있는 폴더를 선택해 설치한다. 설치한 다음 내용을 수정하였다면, 해당 웹 애플리케이션을 다시 추가하면 업데이트된다.

확장 프로그램 개발자 모드의 ‘압축해제된 확장 프로그램 로드...’ 버튼.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.