이 페이지는 2020년에 지원 중단된 Chrome 앱 플랫폼에 관한 문서의 일부입니다. 적어도 2025년 1월까지는 ChromeOS Enterprise 및 Education 고객에게 계속 지원됩니다. 앱 이전에 관해 자세히 알아보세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Apache Cordova를 사용하여 모바일에서 Chrome 앱 실행

모바일에서 Chrome 앱을 실행하기 위한 도구 모음은 초기 개발자 프리뷰 단계에 있습니다. 언제든지 GitHub Issue Tracker, Chrome 앱 개발자 포럼, Stack Overflow 또는 G+ 개발자 페이지를 통해 의견을 보내주세요.

데스크톱과 모바일 모두에서 실행되는 Chrome 앱

개요

HTML, CSS, JavaScript를 사용하여 기본 기능으로 모바일 앱을 빌드하는 데 사용되는 오픈소스 모바일 개발 프레임워크인 Apache Cordova에 기반한 도구 모음을 통해 Android 및 iOS에서 Chrome 앱을 실행할 수 있습니다.

Apache Cordova는 애플리케이션의 웹 코드를 네이티브 애플리케이션 셸로 래핑하고 개발자가 Google Play 및/또는 Apple App Store를 통해 하이브리드 웹 앱을 배포할 수 있도록 합니다. 기존 Chrome 앱에서 Apache Cordova를 사용하려면 cca (c ordova c hrome a pp) 명령줄 도구를 사용합니다.

추가 리소스

Cordova를 사용하여 개발할 때 유의해야 할 몇 가지 특별 고려사항이 있습니다. 이러한 사항은 고려사항 섹션에 나열되어 있습니다.
모바일에서 지원되는 Chrome API를 확인하려면 API 상태 페이지를 방문하세요.
도구 모음 없이 Android 기기에서 Chrome 앱을 미리 보려면 Chrome 앱 개발자 도구 (ADT)를 사용하세요.

이제 시작해 볼까요?

1단계: 개발 도구 설치하기

모바일용 Chrome 앱 도구 모음은 iOS 6 이상 및 Android 4.x 이상을 타겟팅할 수 있습니다.

모든 플랫폼의 개발 종속 항목

npm이 포함된 Node.js 버전 0.10.0 이상이 필요합니다.
- Windows: nodejs.org에서 다운로드할 수 있는 설치 실행 파일을 사용하여 Node.js를 설치합니다.
- OS X 또는 Linux: nodejs.org에서도 설치 실행 파일을 사용할 수 있습니다. 루트 액세스가 필요하지 않은 경우 nvm을 통해 설치하는 것이 더 편리할 수 있습니다. 예:
```
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10
```

Android 타겟팅

Android용 애플리케이션을 개발하는 경우 다음 항목도 설치해야 합니다.

자바 JDK 7 이상
Android SDK 버전 4.4.2 이상
- Android ADT 번들과 함께 제공되는 Android SDK 및 Android 개발자 도구를 설치합니다.
- sdk/tools 및 sdk/platform-tools를 PATH 환경 변수에 추가합니다.
- OS X: Android SDK와 함께 제공되는 Eclipse 버전에 JRE 6이 필요합니다. Eclipse.app을 열 때 JRE 6을 설치하라는 메시지가 표시되지 않으면 Mac App Store를 통해 다운로드합니다.
- Linux: Android SDK에는 32비트 지원 라이브러리가 필요합니다. Ubuntu에서는 apt-get install ia32-libs를 통해 이를 가져옵니다.
Apache Ant
- apache-ant-x.x.x/bin를 PATH 환경 변수에 추가합니다.

iOS 타겟팅

iOS 개발은 OS X에서만 수행할 수 있습니다. 또한 다음을 설치해야 합니다.

Xcode 명령줄 도구가 포함된 Xcode 5 이상
ios-deploy (iOS 기기에 배포하는 데 필요함)
- npm install -g ios-deploy
ios-sim (iOS 시뮬레이터에 배포하는 데 필요함)
- npm install -g ios-sim
선택사항: iOS 개발자로 등록합니다.
- 실제 기기에서 테스트하고 앱 스토어에 제출하기 위해 필요합니다.
- iPhone/iPad 시뮬레이터만 사용하려는 경우 등록을 건너뛸 수 있습니다.

`cca` 명령줄 도구 설치

npm을 통해 cca를 설치합니다.

npm install -g cca

나중에 새 버전으로 도구 모음을 업데이트하려면 npm update -g cca.

명령줄에서 다음 명령어를 실행하여 모든 것이 올바르게 설치되었는지 확인합니다.

cca checkenv

출력된 cca의 버전 번호와 Android 또는 iOS SDK 설치에 관한 확인이 표시됩니다.

2단계: 프로젝트 만들기

YourApp 디렉터리에 기본 모바일 Chrome 앱 프로젝트를 만들려면 다음을 실행합니다.

cca create YourApp

이미 Chrome 앱을 빌드했으며 이를 모바일 플랫폼으로 포팅하려는 경우 다음과 같이 --link-to 플래그를 사용하여 앱의 심볼릭 링크를 만들 수 있습니다.

cca create YourApp --link-to=path/to/manifest.json

기존 Chrome 앱 파일을 복사하려면 다음과 같이 --copy-from 플래그를 사용하면 됩니다.

cca create YourApp --copy-from=path/to/manifest.json

아직 Chrome 앱이 없으신가요? 모바일 지원이 제공되는 여러 샘플 Chrome 앱 중 하나를 사용해 보세요.

3단계: 개발

다음 두 가지 방법으로 애플리케이션을 빌드하고 실행할 수 있습니다.

옵션 A: 명령줄에서 cca 도구 사용
옵션 B: Eclipse 또는 Xcode와 같은 IDE 사용 IDE 사용은 하이브리드 모바일 애플리케이션의 실행, 구성, 디버깅을 지원하는 데 전적으로 선택사항이지만 종종 유용합니다.

옵션 A: 명령줄을 사용하여 개발 및 빌드

cca로 생성된 프로젝트 폴더의 루트에서 다음을 실행합니다.

Android

Android Emulator에서 앱을 실행하려면 다음 안내를 따르세요. cca emulate android
- 참고: 이를 위해서는 에뮬레이터를 설정해야 합니다. android avd를 실행하여 설정할 수 있습니다. android를 실행하여 추가 에뮬레이터 이미지를 다운로드합니다. Intel 이미지를 더 빠르게 실행하려면 Intel HAXM을 설치하세요.
연결된 Android 기기에서 앱을 실행하려면 다음 단계를 따르세요. cca run android

iOS

iOS 시뮬레이터에서 앱을 실행하려면 다음 안내를 따르세요. cca emulate ios
연결된 iOS 기기에서 앱을 실행하려면 다음 안내를 따르세요. cca run ios
- 참고: 이렇게 하려면 기기에 프로비저닝 프로필을 설정해야 합니다.

옵션 B: IDE를 사용하여 개발 및 빌드

Android

Eclipse에서 File -> Import를 선택합니다.
Android > Existing Android Code Into Workspace를 선택합니다.
cca를 사용하여 방금 만든 경로에서 가져옵니다.
- 가져올 프로젝트가 2개 있어야 하며 그중 하나는 *-CordovaLib입니다.
Play 버튼을 클릭하여 앱을 실행합니다.
- 모든 Java 애플리케이션과 마찬가지로 실행 구성을 만들어야 합니다. 일반적으로 이 옵션을 선택하라는 메시지가 처음으로 자동으로 표시됩니다.
- 기기/에뮬레이터도 처음 관리해야 합니다.

iOS

터미널 창에 다음을 입력하여 Xcode에서 프로젝트를 엽니다.
```
cd YourApp
open platforms/ios/*.xcodeproj
```
올바른 타겟을 빌드하고 있는지 확인합니다.

왼쪽 상단 (Run 및 Stop 버튼 옆)에는 대상 프로젝트와 기기를 선택할 수 있는 드롭다운이 있습니다. CordovaLib이 아닌 YourApp가 선택되어 있는지 확인합니다.
재생 버튼을 클릭합니다.

앱 소스 코드 변경

HTML, CSS, JavaScript 파일은 cca 프로젝트 폴더의 www 디렉터리에 있습니다.

중요: www/를 변경한 후에는 애플리케이션을 배포하기 전에 cca prepare를 실행해야 합니다. 명령줄에서 cca build, cca run 또는 cca emulate를 실행하는 경우 준비 단계가 자동으로 완료됩니다. Eclipse/XCode를 사용하여 개발하는 경우 cca prepare를 수동으로 실행해야 합니다.

디버깅

Cordova 애플리케이션을 디버그하는 것과 동일한 방법으로 모바일에서 Chrome 앱을 디버그할 수 있습니다.

4단계: 다음 단계

이제 작동하는 모바일 Chrome 앱이 있으므로 휴대기기의 환경을 개선할 수 있는 여러 방법이 있습니다.

모바일 매니페스트

모바일 플랫폼에만 적용되는 특정 Chrome 앱 설정이 있습니다. 이를 포함하는 www/manifest.mobile.json 파일을 만들었으며 구체적인 값은 플러그인 문서와 이 가이드에서 참조됩니다.

여기에서 값을 적절하게 조정해야 합니다.

아이콘

모바일 앱에는 데스크톱 Chrome 앱보다 더 많은 아이콘 해상도가 필요합니다.

Android의 경우 다음 크기가 필요합니다.

36px, 48px, 78px, 96px

iOS 앱의 경우 iOS 6 지원 여부와 iOS 7 지원 여부에 따라 필요한 크기가 달라집니다. 필요한 최소 아이콘 수는 다음과 같습니다.

iOS 6: 57px, 72px, 114px, 144px
iOS 7: 72px, 120px, 152px

전체 아이콘 목록은 manifest.json 파일에 다음과 같이 표시됩니다.

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

cca prepare를 실행할 때마다 아이콘이 각 플랫폼의 적절한 위치에 복사됩니다.

스플래시 스크린

iOS의 앱에는 앱이 로드되는 동안 짧은 스플래시 화면이 표시됩니다. 일련의 기본 Cordova 스플래시 화면은 platforms/ios/[AppName]/Resources/splash에 포함되어 있습니다.

필요한 크기는 다음과 같습니다.

320x480px + 2배
768x1024px + 2x (iPad 세로 모드)
1024px x 768px + 2x (iPad 가로 모드)
640x1146px

스플래시 화면 이미지는 현재 cca에 의해 수정되지 않습니다.

5단계: 게시

프로젝트의 platforms 디렉터리에는 Android용과 iOS용, 이렇게 완전한 두 개의 네이티브 프로젝트가 있습니다. 이러한 프로젝트의 출시 버전을 빌드하여 Google Play 또는 iOS App Store에 게시할 수 있습니다.

Play 스토어에 게시

Play 스토어에 Android 애플리케이션을 게시하려면 다음 단계를 따르세요.

두 개의 Android 버전 ID를 업데이트한 후 cca prepare를 실행합니다.
- android:versionName는 www/manifest.json의 version 키를 사용하여 설정됩니다 (이는 데스크톱 패키지 앱의 버전도 설정함).
- android:versionCode는 www/manifest.mobile.js의 versionCode 키를 사용하여 설정됩니다.
Android 개발자 문서에 설명된 대로 platforms/android/ant.properties를 수정하거나 만들고 key.store 및 key.alias 속성을 설정합니다.

프로젝트를 빌드합니다.

./platforms/android/cordova/build --release

platforms/android/ant-build/ 내에서 서명된 .apk를 찾습니다.
서명된 애플리케이션을 Google Play 개발자 콘솔에 업로드합니다.

iOS App Store에 게시

www/manifest.mobile.js에서 CFBundleVersion 키를 설정하여 앱 버전을 업데이트한 후 cca prepare를 실행합니다.
platforms/ios 디렉터리에 있는 Xcode 프로젝트 파일을 엽니다.

platform/ios/*.xcodeproj 열기
Apple의 앱 배포 가이드를 따릅니다.

특별 고려사항

Chrome 앱을 처음 사용하는 경우 가장 큰 문제는 일부 웹 기능을 사용 중지하는 것입니다. 그러나 이 중 일부는 현재 Cordova 내에서 작동합니다.

Chrome 앱은 모바일에서 즉시 작동하지 않을 수 있습니다. 모바일로 포팅과 관련된 몇 가지 일반적인 문제는 다음과 같습니다.

특히 세로 방향인 경우 작은 화면의 레이아웃 문제입니다.
- 추천 해결 방법: CSS 미디어 쿼리를 사용하여 작은 화면에 맞게 콘텐츠를 최적화하세요.
chrome.app.window를 통해 설정된 Chrome 앱 창 크기는 무시되고 대신 기기의 기본 크기를 사용합니다.
- 권장 해결 방법: 하드 코딩된 창 크기를 삭제하고 다양한 크기를 고려하여 앱을 디자인하세요.
작은 버튼과 링크는 손가락으로 탭하기 어렵습니다.
- 추천 수정사항: 터치 영역을 44x44포인트 이상으로 조정합니다.
터치스크린에 없는 마우스 올리기를 사용할 때 예기치 않은 동작이 발생합니다.
- 권장 수정사항: 마우스 오버 외에도 탭 시 드롭다운 및 도움말과 같은 UI 요소를 활성화합니다.
300ms의 탭 지연
- 권장 수정사항: FT Labs의 FastClick 자바스크립트 폴리필을 사용합니다.
- 배경 정보는 HTML5Rocks 도움말을 참조하세요.

지원되는 Chrome API

Google은 다음을 포함하여 Chrome 모바일 앱에서 사용할 수 있는 여러 핵심 Chrome API를 제공했습니다.

identity - OAuth2를 사용하여 로그인한 사용자
결제 - 모바일 앱에서 가상 상품 판매
pushMessaging - 서버에서 앱으로 메시지 푸시
소켓 - TCP와 UDP를 사용하여 네트워크를 통해 데이터를 주고받습니다.
알림 (Android만 해당) - 모바일 앱에서 리치 알림 전송
storage - 키-값 데이터를 로컬로 저장하고 검색
syncFileSystem - Google Drive에서 지원하는 파일 저장 및 검색
alarms - 주기적으로 작업을 실행
idle - 시스템의 유휴 상태가 변경되는 시점을 감지합니다.
power - 시스템의 전원 관리 기능을 재정의합니다.

하지만 모든 Chrome JavaScript API가 구현되는 것은 아닙니다. 일부 Chrome 데스크톱 기능은 모바일에서 사용할 수 없습니다.

<webview> 태그 없음
IndexedDB 없음
getUserMedia() 없음
NaCl 없음

API 상태 페이지에서 진행 상황을 추적할 수 있습니다.

Chrome 앱 개발자 도구

Android용 Chrome 앱 개발자 도구 (ADT)는 위에서 설명한 대로 개발 도구 모음을 설정하지 않고도 Chrome 앱을 다운로드하고 실행할 수 있는 독립형 Android 앱입니다. Android 기기에서 이미 .crx로 패키징된 기존 Chrome 앱을 빠르게 미리 보려면 Chrome ADT를 사용하세요.

Android용 Chrome ADT는 현재 알파 이전 버전입니다. 사용해 보려면 ChromeADT.apk 출시 노트에서 설치 및 사용 안내를 확인하세요.

Apache Cordova를 사용하여 모바일에서 Chrome 앱 실행

개요

추가 리소스

1단계: 개발 도구 설치하기

모든 플랫폼의 개발 종속 항목

Android 타겟팅

iOS 타겟팅

cca 명령줄 도구 설치

2단계: 프로젝트 만들기

3단계: 개발

옵션 A: 명령줄을 사용하여 개발 및 빌드

Android

iOS

옵션 B: IDE를 사용하여 개발 및 빌드

Android

iOS

앱 소스 코드 변경

디버깅

4단계: 다음 단계

모바일 매니페스트

아이콘

스플래시 스크린

5단계: 게시

Play 스토어에 게시

iOS App Store에 게시

특별 고려사항

지원되는 Chrome API

Chrome 앱 개발자 도구

`cca` 명령줄 도구 설치