1. 환영합니다
이 실습에서는 배포한 기존 프로그레시브 웹 앱을 가져와 Google Play 스토어에 배포할 앱으로 래핑합니다.
학습할 내용
- Bubblewrap을 사용하여 Google Play 스토어용 프로그레시브 웹 앱을 패키징하는 방법
- 서명 키의 정의 및 사용 방법
- Google Play 개발자 콘솔에서 새 앱을 만들고 게시 전에 앱을 테스트하기 위한 테스트 버전을 설정하는 방법
- 디지털 애셋 링크의 정의 및 웹앱에 추가하는 방법
유의해야 할 사항
- 프로그레시브 웹 앱이란 무엇인가요?
- 명령줄 도구 사용 방법
- 기본 Bash 셸 명령어 또는 원하는 셸로 변환하는 방법
필요한 항목
- 인터넷에 라이브로 게시되어 변경할 수 있는 프로그레시브 웹 앱
- Bubblewrap 명령줄 인터페이스가 설치되어 사용할 준비가 되어 있어야 합니다.
- Google Play 개발자 계정
- Google Play에 이미 출시된 앱이 있는 경우 기존 서명 키
- 테스트할 Android 또는 ChromeOS 기기
보증 제외 항목
2. PWA 래핑
Bubblewrap은 프로그레시브 웹 앱을 Android App Bundle로 래핑하는 작업을 몇 가지 CLI 명령어를 실행하는 것만큼 쉽게 만들어 주는 도구입니다. PWA를 신뢰할 수 있는 웹 활동으로 실행하는 Android 프로젝트를 생성하여 이 작업을 실행합니다.
먼저 프로젝트가 저장될 디렉터리를 만들고 해당 디렉터리로 이동합니다.
$ mkdir my-pwa && cd my-pwa
그런 다음 Bubblewrap 명령줄 도구를 실행하여 Play에 업로드할 Android App Bundle의 구성과 Android 프로젝트를 생성합니다.
$ bubblewrap init --manifest=https://my-pwa.com/manifest.json
여기서 Bubblewrap은 PWA의 웹 앱 매니페스트 파일 위치로 초기화됩니다. 그러면 웹 앱 매니페스트에서 기본 구성이 생성되고 기본 구성을 변경할 수 있는 콘솔 내 마법사가 시작됩니다. 마법사에 따라 도구에서 생성된 값을 변경합니다.
서명 키
Google Play 스토어에서는 애플리케이션 패키지를 업로드할 때 인증서(서명 키라고도 함)로 디지털 서명해야 합니다. 이는 자체 서명 인증서이며 HTTPS를 통해 애플리케이션을 제공하는 데 사용되는 인증서와는 다릅니다.
Bubblewrap은 애플리케이션을 만들 때 키의 경로를 묻습니다. 애플리케이션에 기존 Play 스토어 등록정보를 사용하는 경우 해당 등록정보에서 사용한 것과 동일한 키의 경로를 추가해야 합니다.
기존 서명 키가 없고 Play 스토어에서 새 등록정보를 만드는 경우 Bubblewrap에서 제공하는 기본값을 사용하여 새 키를 만들 수 있습니다.
Bubblewrap 출력
Bubblewrap 프로젝트를 초기화하고 마법사를 완료하면 다음 항목이 생성됩니다.
- twa-manifest.json - Bubblewrap 마법사에서 선택한 값을 반영하는 프로젝트 구성입니다. 이 파일은 필요한 경우 전체 Bubblewrap 프로젝트를 재생성하는 데 사용할 수 있으므로 버전 관리 시스템으로 추적하는 것이 좋습니다.
- Android 프로젝트 파일 - 디렉터리의 나머지 파일은 생성된 Android 프로젝트입니다. 이 프로젝트는 Bubblewrap 빌드 명령어에 사용되는 소스입니다. 선택적으로 버전 제어 시스템으로 이러한 파일을 추적할 수도 있습니다.
- (선택사항) 서명 키 - Bubblewrap에서 서명 키를 생성하도록 선택하면 마법사에 설명된 위치에 키가 출력됩니다. 키는 안전한 곳에 보관하고 액세스할 수 있는 사용자의 수를 제한하세요. Play 스토어의 앱이 개발자로부터 제공되었음을 증명하는 데 사용됩니다.
이제 이러한 파일로 Android App Bundle을 빌드하는 데 필요한 모든 것이 준비되었습니다.
Android App Bundle 빌드
Bubblewrap의 초기화 명령어를 실행한 동일한 디렉터리에서 다음을 실행합니다. 서명 키의 비밀번호가 필요합니다.
$ bubblewrap build
빌드 명령어는 다음 두 가지 중요한 파일을 생성합니다.
- app-release-bundle.aab: PWA의 Android App Bundle입니다. 이 파일을 Google Play 스토어에 업로드합니다.
- app-release-signed.apk -
bubblewrap install명령어를 사용하여 개발 기기에 애플리케이션을 직접 설치하는 데 사용할 수 있는 Android 패키징 형식입니다.
3. 사용해 보기 - Bubblewrap
이제 여러분의 차례입니다. 이전 단계에서 배운 내용을 바탕으로 다음을 수행해 보세요.
- 생성된 Android 프로젝트를 저장할 디렉터리를 만듭니다.
- Bubblewrap 및 PWA의 웹 앱 매니페스트로 해당 디렉터리를 초기화합니다.
- 새 서명 키를 생성하거나 기존 서명 키가 있는 경우 이를 재사용합니다.
- 생성된 Android 프로젝트에서 Android App Bundle을 빌드합니다.
4. Google Play 스토어에 앱 추가
PWA용 Android App Bundle이 준비되었으므로 이제 Google Play 스토어에 업로드할 차례입니다. 개발자 계정을 등록한 후 Play Console로 이동하여 로그인하고 시작할 수 있습니다.
앱 만들기
로그인하면 모든 앱이 표시된 화면이 표시됩니다. 상단에는 앱 만들기 버튼이 있습니다. 이 버튼을 클릭하면 새 Android 앱 등록정보를 만드는 과정을 안내하는 다음 화면이 표시됩니다.
앱 이름, 기본 언어, 앱/게임 여부, 무료/유료 여부, 여러 선언 등 작성해야 하는 필드가 있습니다. 선언에 동의하지 않으면 앱을 만들 수 없으므로 동의하기 전에 선언을 읽고 이해하는 것이 중요합니다.
모든 정보를 입력하고 양식 하단의 앱 만들기 버튼을 클릭하면 새 앱의 대시보드로 이동합니다. 대시보드에는 앱을 설정하고, 테스트를 시작하고, 출시하기 위해 완료해야 하는 작업의 체크리스트가 표시됩니다.
내부 테스트 설정
내부 테스트는 선택한 신뢰할 수 있는 테스터 그룹에 검토 없이 앱을 빠르게 출시할 수 있는 좋은 방법입니다. 지금 테스트 시작 체크리스트에서 작업을 확인하고 테스터 선택을 선택합니다.
이 작업을 클릭하면 내부 테스트 페이지로 이동합니다. 여기에서 앱의 테스트 설정을 관리합니다. 사이드바의 출시 메뉴에서 테스트 섹션을 열어 다시 이동할 수 있습니다. 여기에서 가장 먼저 해야 할 일은 앱을 테스트할 테스터의 이메일 목록을 만드는 것입니다. 이렇게 하려면 페이지의 테스터 섹션에서 이메일 목록 만들기 링크를 클릭합니다. 그러면 이메일 목록을 만들 수 있는 팝업이 열립니다.
이 팝업에서 이메일 목록의 이름을 지정하고 이메일 주소를 수동으로 입력하거나 사용할 이메일 주소의 CSV를 업로드할 수 있습니다. 완료되면 변경사항 저장 버튼을 누릅니다. 이미 만든 이메일 목록으로 돌아가 필요에 따라 이메일 주소를 추가하거나 삭제할 수 있습니다. 테스터를 추가한 후 테스트 버전을 만들 차례입니다. 페이지 상단에서 새 버전 만들기 버튼을 클릭합니다.
테스트 버전 만들기
새 버전 만들기 버튼을 클릭하면 여러 섹션이 표시됩니다. 첫 번째 앱 무결성에서는 앱의 서명 키를 관리하는 방법을 선택합니다. 기본 옵션은 Google에서 서명 키를 관리하도록 하는 것이며, 이 옵션은 안전하고 업로드 키를 분실한 경우 앱을 복구할 수 있으므로 권장됩니다.
Play 앱 서명
앱 업로드 및 최종화
서명 키 관리 방법을 선택한 후 출시 버전에 App Bundle을 업로드하라는 메시지가 표시됩니다. 이렇게 하려면 Bubblewrap에서 생성한 app-release-bundle.aab 파일을 양식으로 드래그 앤 드롭합니다. 버전을 완료하려면 나머지 버전 세부정보를 입력하고 저장, 버전 검토, 내부 테스트로 출시 시작 버튼을 차례로 클릭하여 버전을 시작합니다. 이제 내부 테스터가 앱을 사용할 수 있습니다. 내부 테스트 페이지의 테스터 탭으로 돌아가 테스터와 공유할 링크를 복사하여 테스터가 앱에 액세스할 수 있도록 합니다.
5. 사용해 보기 - 앱 만들기
이제 여러분의 차례입니다. 이전 단계에서 배운 내용을 바탕으로 다음을 수행해 보세요.
- Play Console에서 PWA용 새 앱을 만듭니다.
- 앱의 내부 테스트를 설정하고 나를 테스터로 추가합니다.
- App Bundle을 업로드하고 앱의 테스트 버전을 만듭니다.
- 테스트 링크를 사용하여 Android 또는 ChromeOS 기기의 Play 스토어에서 앱을 설치하세요.
6. 디지털 애셋 링크
Play에서 PWA를 테스트한 경우 전체 화면으로 실행되지 않는 것을 알 수 있습니다. 디지털 애셋 링크 파일을 통해 아직 사이트 소유권을 확인하지 않았기 때문입니다. Bubblewrap은 Android 애플리케이션 번들을 구성하고 빌드할 수 있지만 웹 애플리케이션을 업데이트하여 링크를 완료해야 합니다.
앱의 SHA-256 지문 가져오기
PWA의 디지털 애셋 링크를 구성하려면 사용자가 휴대전화에서 수신하는 패키지에 서명하는 데 사용되는 인증서의 SHA-256 지문이 필요합니다.
Play 앱 서명 사용
출시 버전을 만들 때 앱에 Play 앱 서명을 설정한 경우 (이전에는 권장됨) Play Console에서 SHA-256 지문을 확인할 수 있습니다. 이 인증서는 애플리케이션을 업로드하는 데 사용되는 인증서와 다릅니다. 지문을 가져오려면 Play Console의 애플리케이션 내에서 출시->설정->앱 무결성으로 이동합니다. 앱 서명 키 인증서 아래에 여러 옵션이 표시됩니다. SHA-256 인증서 지문 값을 복사합니다.
Play 앱 서명을 사용하지 않는 경우
Play 앱 서명을 선택 해제한 경우 최종 애플리케이션에 서명하는 데 사용되는 키는 Play Console에 애플리케이션을 업로드하는 데 사용되는 키와 동일합니다. Java의 keytool을 사용하여 지문을 추출할 수 있습니다.
$ keytool -list -v \
-keystore <keystore-file-path> \
-alias <key-alias> \
-keypass <key-password> \
-storepass <store-password> | grep SHA256
$ SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...
이를 사용하려면 서명 키의 경로와 관련 비밀번호를 알아야 합니다. SHA256 키의 16진수 값을 복사합니다.
디지털 애셋 링크 파일 만들기
Bubblewrap은 가져온 서명 지문을 관리하고 올바른 디지털 애셋 링크 파일을 생성할 수 있습니다. Bubblewrap으로 지문을 추가하려면 PWA Bubblewrap 중에 생성된 동일한 디렉터리 내에서 다음 명령어를 실행하고 <fingerprint>을 이전 단계에서 복사한 지문으로 바꿉니다.
$ bubblewrap fingerprint add <fingerprint>
이 명령어는 애플리케이션의 지문 목록에 지문을 추가하고 assetlinks.json 파일을 생성합니다. 이 파일을 PWA와 동일한 출처의 .well-known 디렉터리에 업로드합니다.
7. 사용해 보기 - 디지털 애셋 링크
이제 여러분의 차례입니다. 이전 단계에서 배운 내용을 바탕으로 다음을 수행해 보세요.
- 앱의 SHA-256 디지털 지문을 찾습니다.
- 앱의 디지털 애셋 링크 파일을 생성합니다.
- 디지털 애셋 링크 파일을 PWA에 업로드합니다.
- API와 테스트 앱을 사용하여 디지털 애셋 링크 파일이 올바르게 설정되었는지 확인합니다.
8. 퀴즈
마치기 전에 다음 질문에 답하여 지식을 테스트하고 학습한 내용을 확인하세요. 답을 엿보지 마세요.
Bubblewrap으로 Android 프로젝트를 생성한 후 Sally는 필요할 때마다 다시 빌드할 수 있도록 생성된 ______ 파일을 버전 관리 시스템에 커밋합니다.
잭은 QA팀이 PWA Android 앱을 테스트하도록 하려고 합니다. 그는 Android App Bundle을 내부 테스트 트랙에 ______했습니다.
Oogie Boogie의 PWA Android 앱이 전체 화면으로 실행되지 않습니다. 이 문제를 해결하기 위해 ______의 SHA-256 인증서 지문을 가져와 PWA와 동일한 출처의 ______에 있는 디지털 애셋 링크 파일에 업로드합니다.
9. 지식 테스트 - 답변
지식 테스트 질문에 대한 답변
- Bubblewrap으로 Android 프로젝트를 생성한 후 Sally는 필요할 때마다 다시 빌드할 수 있도록 생성된 ______ 파일을 버전 관리 시스템에 커밋합니다.
- 답변: twa-manifest.json
- 섹션: PWA 래핑
- 잭은 QA팀이 PWA Android 앱을 테스트하도록 하려고 합니다. 그는 Android App Bundle을 내부 테스트 트랙에 ______했습니다.
- 답변: 서명 및 업로드
- 섹션: Google Play 스토어에 앱 추가
- Oogie Boogie의 PWA Android 앱이 전체 화면으로 실행되지 않습니다. 이 문제를 해결하기 위해 ______의 SHA-256 인증서 지문을 가져와 PWA와 동일한 출처의 ______에 있는 디지털 애셋 링크 파일에 업로드합니다.
- 답변: 서명 키, /.well-known/assetlinks.json
- 섹션: 디지털 애셋 링크
10. 축하합니다.
축하합니다. Google Play 스토어에 PWA를 추가하는 방법을 학습하셨습니다.
준비가 되면 다음 단계를 직접 시도해 보세요.
- 앱의 프로덕션 출시 만들기
- ChromeOS 전용 출시, 모바일용 Android 앱과 ChromeOS용 PWA가 포함된 출시 등 앱 출시를 위한 다양한 옵션을 자세히 알아보세요.
- 앱의 Play 결제를 설정하고 PWA 및 백엔드에서 구현하는 방법을 알아보세요.
즐겁게 코딩해 보세요!