영어로 읽기

다음을 통해 공유


Android용 PWA 또는 하이브리드 웹앱 개발 시작하기

이 가이드는 웹 및 디바이스 플랫폼(Android, iOS, Windows)에서 사용할 수 있는 단일 HTML/CSS/JavaScript 코드베이스를 사용하여 Windows에서 하이브리드 웹앱 또는 PWA(프로그레시브 웹앱)를 만드는 데 도움이 됩니다.

적절한 프레임워크와 구성 요소를 사용하여 웹 기반 애플리케이션은 사용자에게 기본 앱과 매우 유사한 방식으로 Android 디바이스에서 작동할 수 있습니다.

PWA 또는 하이브리드 웹앱의 기능

Android 디바이스에 설치할 수 있는 웹앱에는 두 가지 주요 유형이 있습니다. 주요 차이점으로, 애플리케이션 코드가 하이브리드에서는 앱 패키지에 포함되며 PWA에서는 웹 서버에 호스팅됩니다.

  • 하이브리드 웹앱: 코드(HTML, JS, CSS)는 APK로 패키징되며 Google Play 스토어를 통해 배포할 수 있습니다. 보기 엔진은 사용자의 인터넷 브라우저와 분리되어 세션이나 캐시 공유가 없습니다.

  • PWA(프로그레시브 웹앱): 코드(HTML, JS, CSS)는 웹에 있으며 APK로 패키징할 필요가 없습니다. 리소스는 서비스 작업자를 사용하여 필요에 따라 다운로드 및 업데이트됩니다. Chrome 브라우저는 앱을 렌더링하고 표시하지만 기본적으로 표시되며 일반 브라우저 주소 표시줄 등을 포함하지 않습니다. 브라우저와 스토리지, 캐시 및 세션을 공유할 수 있습니다. 이는 기본적으로 특수 모드에서 Chrome 브라우저에 대한 바로 가기를 설치하는 것과 같습니다. PWA는 신뢰할 수 있는 웹 작업을 사용하여 Google Play 스토어에 나열할 수도 있습니다.

PWA 및 하이브리드 웹앱은 다음과 같은 점에서 기본 Android 앱과 매우 유사합니다.

  • App Store(Google Play 스토어 및/또는 Microsoft Store)를 통해 설치할 수 있습니다.
  • 카메라, GPS, 블루투스, 알림 및 연락처 목록과 같은 기본 디바이스 기능에 액세스
  • 오프라인으로 작업(인터넷 연결 없음)

PWA에는 다음과 같은 몇 가지 고유한 기능도 있습니다.

  • 웹에서 직접 Android 홈 화면에 설치할 수 있습니다(App Store 사용 안 함).
  • Google Play 스토어를 통해 신뢰할 수 있는 웹 작업을 사용하여 추가로 설치할 수 있습니다.
  • 웹 검색을 통해 검색하거나 URL 링크를 통해 공유할 수 있습니다.
  • 네이티브 코드를 패키징할 필요가 없도록 서비스 작업자에 의존

하이브리드 앱 또는 PWA를 만드는 데 프레임워크가 필요하지 않지만 PhoneGap(Cordova 사용) 및 Ionic(Cordova 또는 Capacitor 사용, Angular 또는 React 사용)을 포함하여 이 가이드에서 다룰 몇 가지 자주 사용되는 프레임워크가 있습니다.

Apache Cordova

Apache Cordova플러그 인을 사용하여 기본 WebView에 있는 JavaScript 코드와 기본 Android 플랫폼 간의 통신을 단순화할 수 있는 오픈 원본 프레임워크입니다. 이러한 플러그 인은 코드에서 호출할 수 있고 기본 Android 디바이스 API를 호출하는 데 사용할 수 있는 JavaScript 엔드포인트를 노출합니다. Cordova 플러그 인의 몇 가지 예에는 배터리 상태, 파일 액세스, 진동/벨소리 등과 같은 디바이스 서비스에 대한 액세스가 포함됩니다. 이러한 기능은 일반적으로 웹앱이나 브라우저에서 사용할 수 없습니다.

Cordova에는 두 가지 자주 사용되는 배포판이 있습니다.

  • PhoneGap: Adobe에서 지원을 중단했습니다.

  • Ionic

Ionic

Ionic은 각 플랫폼(Android, iOS, Windows)의 디자인 언어와 일치하도록 앱의 사용자 인터페이스(UI)를 조정하는 프레임워크입니다. Ionic을 사용하면 Angular 또는 React를 사용할 수 있습니다.

참고

Cordova 대신 Capacitor를 사용하는 Ionic의 새 버전이 있습니다. 이 대안은 컨테이너를 사용하여 앱을 웹 친화적으로 만듭니다.

필요한 도구를 설치하여 Ionic 시작하기

Ionic으로 PWA 또는 하이브리드 웹앱 구축을 시작하려면 먼저 다음 도구를 설치해야 합니다.

Ionic Cordova 및 Angular로 새 프로젝트 만들기

명령줄에 다음을 입력하여 Ionic 및 Cordova를 설치합니다.

npm install -g @ionic/cli cordova

다음 명령을 입력하여 "탭" 앱 템플릿을 사용하여 Ionic Angular 앱을 만듭니다.

ionic start photo-gallery tabs

앱 폴더로 변경:

cd photo-gallery

웹 브라우저에서 앱을 실행합니다.

ionic serve

자세한 내용은 Ionic Cordova Angular 문서를 참조하세요. 앱을 하이브리드에서 PWA로 이동하는 방법을 알아보려면 Ionic 문서의 Angular 앱을 PWA로 만들기 섹션을 방문합니다.

Ionic Capacitor 및 Angular로 새 프로젝트 만들기

명령줄에 다음을 입력하여 Ionic 및 Cordova-Res를 설치합니다.

npm install -g @ionic/cli native-run cordova-res

"Tabs" 앱 템플릿을 사용하고 다음 명령을 입력하여 Capacitor를 추가하여 Ionic Angular 앱을 만듭니다.

ionic start photo-gallery tabs --type=angular --capacitor

앱 폴더로 변경:

cd photo-gallery

앱을 PWA로 만들기 위해 구성 요소를 추가합니다.

npm install @ionic/pwa-elements

src/main.ts 파일에 다음을 추가하여 @ionic/pwa-elements를 가져옵니다.

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

웹 브라우저에서 앱을 실행합니다.

ionic serve

자세한 내용은 Ionic Capacitor Angular 문서를 참조하세요. 앱을 하이브리드에서 PWA로 이동하는 방법을 알아보려면 Ionic 문서의 Angular 앱을 PWA로 만들기 섹션을 방문합니다.

Ionic 및 React로 새 프로젝트 만들기

명령줄에 다음을 입력하여 Ionic CLI를 설치합니다.

npm install -g @ionic/cli

다음 명령을 입력하여 React로 새 프로젝트를 만듭니다.

ionic start myApp blank --type=react

앱 폴더로 변경:

cd myApp

웹 브라우저에서 앱을 실행합니다.

ionic serve

자세한 내용은 Ionic React 문서를 참조하세요. 앱을 하이브리드에서 PWA로 이동하는 방법을 알아보려면 Ionic 문서의 React 앱을 PWA로 만들기 섹션을 방문합니다.

디바이스 또는 에뮬레이터에서 Ionic 앱 테스트

Android 디바이스에서 Ionic 앱을 테스트하려면 디바이스를 플러그 인하고(먼저 개발용으로 사용하도록 설정되어 있는지 확인) 명령줄에 다음을 입력합니다.

ionic cordova run android

Android 디바이스 에뮬레이터에서 Ionic 앱을 테스트하려면 다음을 수행해야 합니다.

  1. 필수 구성 요소인 JDK(Java Development Kit), Gradle 및 Android SDK를 설치합니다.

  2. Android 가상 디바이스(AVD) 만들기: [Android 개발자 가이드]](https://developer.android.com/studio/run/managing-avds.html)를 참조하세요.

  3. Ionic에 대한 명령을 입력하여 앱을 빌드하고 에뮬레이터에 배포합니다(ionic cordova emulate [<platform>] [options]). 이 경우 명령은 다음과 같아야 합니다.

ionic cordova emulate android --list

자세한 내용은 Ionic 문서에서 Cordova 에뮬레이터를 참조하세요.