본문 바로가기

앱개발

PWA 안드로이드 앱 만들기

반응형

pwa로 만든 웹사이트를 안드로이드 앱으로 만드는 방법을 알아보겠습니다. 코틀린이나 자바를 몰라도 pwa 웹사이트를 만들 수 있으면 누구나 안드로이드 앱을 만들 수 있습니다. 그러면 자세한 방법을 아래에서 살펴보겠습니다.

 

pwa-안드로이드-썸네일

 

PWA 안드로이드 앱 만드는 방법

1. node.js 설치

컴퓨터에 node.js를 설치해야 합니다. node.js는 자바스크립트를 브라우저가 아닌 컴퓨터에서도 사용할 수 있게 해줍니다. node.js 사이트에 들어갑니다.

https://nodejs.org/ko/

 

최신 버전이 아닌 LTS 버전을 다운로드 받아서 설치합니다.

node.js-버전

 

node.js 파일을 설치합니다.

node.js-설치

 

윈도우에서 명령 프롬프트를 실행합니다.

cmd실행

 

node -v를 했을 때 아래와 같이 버전이 나오면 node.js가 잘 설치된 것입니다.

node-설치확인

 

2. bubblewrap/cli 설치하기

bubblewrap/cli를 설치합니다. 아래 링크를 클릭하면 자세한 사용법이 나와있습니다. node.js 버전 등을 확인합니다.

https://www.npmjs.com/package/@bubblewrap/cli

 

visual studio code를 실행합니다. 터미널을 실행합니다. 여기서 주의할 점이 있습니다. 폴더 경로에 한글이 있으면 에러가 나는 경우가 있습니다. 경로는 모두 영어로 바꿔줍니다.

터미널

 

npm 명령어로 bubblewrap를 설치해야 합니다. npm install -g @bubblewrap/cli 명령어 실행합니다. 터미널에서 코드를 붙여넣기할 때는 마우스 오른쪽 버튼을 클릭하면 됩니다. 설치하는데 시간이 조금 걸립니다. 별다른 에러 표시가 없다면 다 설치가 된 것입니다.

npm install -g @bubblewrap/cli

 

3. pwa 기본 설정하기

pwa 사이트의 manifest.json 경로를 입력해서 bubblewrap을 시작합니다. bubblewrap init --manifest=manifest.json경로를 터미널에 입력합니다. 이때 ""는 입력하지 않습니다. 

bubblewrap init --manifest=https://example.com/manifest.json

 

안드로이드 앱을 만들기 위한 프로그램을 설치해야 합니다. JDK와 Android SDK를 설치해야 합니다. 만약 설치되었다면 아래 있는 메시지는 나오지 않습니다.

 

Do you want Bubblewrap to install JDK?라는 메시지가 나오면 y라고 입력합니다. 현재 pwa 사이트를 안드로이드 앱으로 만들기 위해서 JDK 11버전이 필요합니다. 이 버전은 업데이트 되면서 바뀔 수 있습니다.

 

Do you want Bubblewrap to install Android SDK?에서 y라고 입력합니다.

 

Do you agree to the Android SDK terms가 나오면 y를 선택합니다.

 

그러면 manifest에 입력한 정보가 나옵니다. 수정할 내용이 없다면 그대로 엔터키를 누릅니다. 만약 수정할 내용이 있으면 수정을 합니다. 도메인(Domain), URL path, Application name, Short name을 확인합니다.

 

Application ID는 도메인에 따라서 작동으로 설정됩니다. 바꾸고 싶다면 ID를 바꿉니다. 바꿀 필요가 없다면 엔터키를 누릅니다.

Application ID: (kr.co.itple.pokemon.twa)

 

버전을 입력합니다. 바꿀 필요가 없다면 엔터키를 누릅니다.

Starting version code for the new app version

 

display mode를 확인합니다. manifest.json에 입력한 것이 나옵니다.

display-mode-pwa

 

orientation을 선택합니다. 

orientation-pwa

 

Status bar color, Splash screen color, Icon URL, Maskable icon URL를 확인하고 이상이 없다면 엔터키를 누릅니다.

 

Monochrome icon URL이 나오면 그냥 엔터키를 누르면 됩니다.

 

Include support for Play Billing (this relies on alpha dependencies)은 구글 결제 시스템이 있는지 묻는 것입니다. 없다면 n를 입력합니다.

 

Request geolocation permission은 위치 정보 허용 관련입니다. 필요없다면 n을 입력합니다.

 

Key store의 위치와 이름을 정합니다. Key store location을 잘 확인합니다. android.keystore가 key store입니다.

Key name은 android 그대로 사용해도 됩니다. 엔터키를 누릅니다.

 

키가 없다면 만들어야 합니다. Do you want to create one now에서 y를 선택합니다.

 

First and Last names를 입력합니다. 원하는 이름을 넣습니다.

Organizational Unit을 입력합니다. 그냥 SW라고 입력해도 됩니다.

Organization(회사이름)을 입력합니다. 그냥 SW라고 입력해도 됩니다. 

Country (2 letter code) 한국은 KR입니다.

Key Store와 Key의 비밀번호를 입력합니다. 앱을 만들 때 이 비밀번호를 입력합니다.

 

Project generated successfully라는 메시지가 나오면 설정이 잘 된 것입니다.

 

그러면 아래와 같이 여러 파일이 생깁니다.

bubblewrap-init-완료

 

그리고 .bubblewrap라는 폴더가 생깁니다. 현재 컴퓨터에서는 C:\Users\USER\.bubblewrap의 경로에 폴더가 생겼습니다.

 

4. bubblewrap build 명령어 실행

bubblewrap build를 실행합니다. Key Store와 Key의 비밀번호를 입력합니다.

bubblewrap build

 

gradlew.bat assembleRelease --stacktrace 에러가 생기는 경우가 있습니다. gradle.properties 파일을 수정해야 합니다.

에러처리

 

org.gradle.jvmargs=-Xmx1024m가 있습니다. 이것을 org.gradle.jvmargs=-Xmx512m로 바꿉니다.

 

Password for the Key Store와 Password for the Key에 설정한 비밀번호를 입력합니다.

 

bubblewrap build 명령어를 다시 실행합니다. 그러면 아래와 같이 apk와 aab 파일이 만들어집니다.

 

Generated Android APK at ./app-release-signed.apk

Generated Android App Bundle at ./app-release-bundle.aab

bubblewrap-build완료

 

5. 에뮬레이터에서 확인하기

만약 안드로이드 에뮬레이터가 있다면 bubblewrap install로 실행합니다. 

bubblewrap install

 

에러가 난다면 nox와 같은 에뮬레이터를 직접 설치해서 확인할 수 있습니다. nox에서 apk 파일을 확인해보겠습니다. apk 파일을 드래그해서 설치해서 실행시키니 아래와 같이 잘 작동합니다.

에뮬레이터-확인

 

usb 케이블로 휴대폰과 컴퓨터를 연결해서 확인하는 방법도 있습니다. usb 케이블을 연결하고 아래 명령어를 실행하면 휴대폰에 어플이 설치가 됩니다.

adb install app-release-signed.apk

 

아래 사이트를 안드로이드앱으로 만들었습니다. 

포켓몬 퀴즈게임 PWA 웹사이트 바로가기

 

포켓몬 퀴즈게임 홈화면

포켓몬 퀴즈게임을 하면서 다양한 포켓몬을 알아봐요

pokemon.itple.co.kr

 

이번 포스팅에서는 pwa 웹사이트를 안드로이드 앱으로 만드는 방법을 알아봤습니다. 다음에는 구글 앱스토어에 출시하는 방법을 알아보겠습니다.

반응형

'앱개발' 카테고리의 다른 글

gradlew.bat assembleRelease 에러 해결방법  (0) 2022.05.21
안드로이드로 자바 공부하기  (0) 2020.03.28
앱인벤터의 장점을 알아봐요  (0) 2020.02.25