이 페이지는 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용 애플리케이션을 개발할 때는 다음 항목도 설치해야 합니다.

Java 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 플래그를 사용하여 symlink를 만들 수 있습니다.

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입니다.
재생 버튼을 클릭하여 앱을 실행합니다.
- 모든 Java 애플리케이션과 마찬가지로 실행 구성을 만들어야 합니다. 일반적으로 처음에 자동으로 메시지가 표시됩니다.
- 처음에는 기기/에뮬레이터도 관리해야 합니다.

iOS

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

왼쪽 상단 (실행 및 중지 버튼 옆)에 대상 프로젝트 및 기기를 선택할 수 있는 드롭다운이 있습니다. 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 + 2x
768x1024픽셀 + 2배 (iPad 세로 모드)
1024x768픽셀 + 2배 (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 키를 사용하여 설정됩니다.
platforms/android/ant.properties를 수정 (또는 생성)하고 key.store 및 key.alias 속성을 설정합니다 (Android 개발자 문서 참고).

프로젝트 빌드:

./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 프로젝트 파일을 엽니다.

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

특별 고려사항

Chrome 앱을 처음 사용하는 경우 가장 큰 문제는 일부 웹 기능이 사용 중지된다는 점입니다. 하지만 현재 Cordova 내에서 작동하는 라이브러리도 여러 개 있습니다.

Chrome 앱이 모바일에서 즉시 작동하지 않을 수 있습니다. 모바일로 포팅할 때 발생하는 일반적인 문제는 다음과 같습니다.

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

지원되는 Chrome API

다음을 비롯한 많은 핵심 Chrome API가 모바일용 Chrome 앱에서 사용할 수 있도록 되었습니다.

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

하지만 일부 Chrome JavaScript API는 구현되지 않았습니다. 또한 일부 Chrome 데스크톱 기능은 모바일에서 사용할 수 없습니다.

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

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

Chrome 앱 개발자 도구

Android용 Chrome 앱 개발자 도구 (ADT)는 위에 설명된 대로 개발 도구 모음을 설정하지 않고도 Chrome 앱을 다운로드하고 실행할 수 있는 독립형 Android 앱입니다. Android 기기에서 기존 Chrome 앱 (이미 .crx로 패키징됨)을 빠르게 미리 보려면 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` 명령줄 도구 설치