Google Play에 프로그레시브 웹 앱 추가하기

1. 소개

이 실습에서는 배포한 기존 프로그레시브 웹 앱을 Google Play 스토어에 배포할 수 있도록 앱에 래핑합니다.

학습할 내용

  • Bubblewrap을 사용하여 Google Play 스토어용 프로그레시브 웹 앱을 패키징하는 방법
  • 서명 키의 정의 및 사용 방법
  • Google Play Console에서 새 앱을 만들고 게시 전에 테스트 테스트를 설정하여 앱을 테스트하는 방법
  • 디지털 애셋 링크의 정의와 웹 앱에 링크를 추가하는 방법

유의해야 할 사항

필요한 항목

보증 대상이 아닌 항목

  • PWA를 Android 또는 Chrome OS 기기로만 제한
  • 동일한 앱으로 Chrome OS용 PWA와 휴대기기용 Android 앱을 배포합니다.
  • PWA에서 Google Play 결제 정책을 준수하는 방법

2. PWA 버블랩

Bubblewrap은 몇 가지 CLI 명령어를 실행하여 프로그레시브 웹 앱을 Android App Bundle로 쉽게 래핑할 수 있는 도구입니다. 이를 위해 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의 웹 앱 매니페스트 위치에 따라 초기화됩니다. 그러면 웹 앱 매니페스트에서 기본 구성이 생성되고 기본 구성을 변경할 수 있는 콘솔 내 마법사가 시작됩니다. 마법사에 따라 도구에서 생성된 값을 변경합니다.

example..com으로 재정의된 시작 URL과 재정의된 도메인이 있는 에어혼의 초기화를 보여주는 Bubblewrap CLI 마법사

서명 키

Google Play 스토어에서는 업로드 시 인증서로 디지털 서명을 해야 합니다(여기서는 서명 키라고 함). 자체 서명 인증서이며 HTTPS를 통해 애플리케이션을 제공하는 데 사용되는 인증서와는 다릅니다.

Bubblewrap은 애플리케이션을 만들 때 키 경로를 요청합니다. 애플리케이션에 기존 Play 스토어 등록정보를 사용하는 경우 해당 등록정보에 사용된 것과 동일한 키에 경로를 추가해야 합니다.

사용자 서명의 기존 위치와 키 이름을 요청하는 Bubblewrap CLI 마법사

기존 서명 키가 없고 Play 스토어에서 새 등록정보를 생성하는 경우 Bubblewrap에서 제공한 기본값을 사용하여 새 키를 만들 수 있습니다.

풍선 래핑 마법사로 사용자가 새로운 서명 키를 만들지 묻는지 확인합니다.

버블랩 출력

Bubblewrap 프로젝트를 초기화하고 마법사를 완료하면 다음 항목이 생성됩니다.

  • twa-manifest.json: 풍선 래핑 마법사에서 선택한 값을 반영하는 프로젝트 구성 필요한 경우 버전 제어 시스템에서 이 파일을 추적하여 전체 Bubblewrap 프로젝트를 생성하는 데 사용할 수 있습니다.
  • Android 프로젝트 파일: 디렉터리의 나머지 파일은 생성된 Android 프로젝트입니다. 이 프로젝트는 Bubblewrap 빌드 명령어에 사용되는 소스입니다. 버전 제어 시스템에서 이러한 파일을 선택적으로 추적할 수도 있습니다.
  • (선택사항) 서명 키 - Bubblewrap이 서명 키를 자동으로 만들도록 선택하면 마법사에서 설명한 위치로 키가 출력됩니다. 키는 안전한 장소에 보관해야 하며 키 액세스 권한이 있는 사용자 수를 제한해야 합니다. 이는 Play 스토어에서 제공되는 앱임을 증명하는 데 사용됩니다.

이 파일들을 사용하여 Android 애플리케이션 번들을 빌드하는 데 필요한 모든 것을 갖추었습니다.

Android App Bundle 빌드

Bubblewrap'의 초기화 명령어를 실행한 디렉터리 내에서 다음 명령어를 실행합니다. 서명 키의 비밀번호가 필요합니다.

$ bubblewrap build

프로젝트 빌드, 서명 키의 비밀번호 요청, 다양한 버전의 Android 앱 세대를 보여주는 Bubblewrap CLI 출력

빌드 명령어는 다음과 같은 두 가지 중요한 파일을 생성합니다.

  • app-release-bundle.aab - PWA Android App Bundle 이 파일을 Google Play 스토어에 업로드합니다.
  • app-release-signed.apk - bubblewrap install 명령어를 사용하여 개발 기기에 애플리케이션을 직접 설치하는 데 사용할 수 있는 Android 패키징 형식입니다.

3. 사용해 보기 - 버블랩

이제 여러분의 차례입니다. 이전 단계에서 학습한 내용을 사용하여 다음을 수행합니다.

  1. 생성된 Android 프로젝트를 저장할 디렉터리를 만듭니다.
  2. Bubblewrap과 PWA의 웹 앱 매니페스트로 디렉터리를 초기화합니다.
  3. 새 서명 키를 생성하거나 기존 서명 키가 있는 경우 재사용하세요.
  4. 생성된 Android 프로젝트에서 Android App Bundle을 빌드합니다.

4. Google Play 스토어에 앱 추가

PWA용 Android App Bundle이 생겼으므로, 이제 Google Play 스토어에 업로드할 차례입니다. 개발자 계정을 등록하면 Play Console로 이동하여 로그인하여 시작할 수 있습니다.

앱 만들기

로그인하면 모든 앱을 보여주는 화면이 표시됩니다. 상단에 새 앱 만들기 버튼이 있고 이 버튼을 클릭하면 새 Android 앱 등록정보를 만드는 방법이 안내됩니다.

Play Console의 앱 만들기 양식이 표시된 화면

이 필드에는 앱 이름, 기본 언어, 앱 또는 게임 여부, 무료 또는 유료 여부, 선언 수 등 여러 필드가 있습니다. 선언에 동의하지 않으면 앱을 만들 수 없으므로 앱을 읽고 동의하기 전에 이를 이해하고 이해하는 것이 중요합니다.

정보를 모두 작성하고 양식 하단에서 앱 만들기 버튼을 클릭하면 새 앱의 대시보드로 이동합니다. 대시보드에서 앱을 설정, 테스트, 출시하기 위해 완료해야 하는 체크리스트가 표시됩니다.

내부 테스트 설정

내부 테스트는 선택한 신뢰할 수 있는 테스터 그룹을 검토하지 않고 앱을 빠르게 출시할 수 있는 좋은 방법입니다. 지금 테스트 시작 체크리스트의 작업을 확인하고 테스터 선택을 선택합니다.

지금 테스트 시작하기 체크리스트

해당 작업을 클릭하면 Internal Testing 페이지가 표시됩니다. 여기에서 앱의 테스트 설정을 관리할 수 있습니다. 사이드바의 출시 메뉴 아래에 있는 테스트 섹션을 열어 다시 테스트할 수 있습니다. 가장 먼저 할 일은 앱을 테스트할 테스터 이메일 목록을 만드는 것입니다. 이렇게 하려면 페이지의 테스터 섹션에서 이메일 목록 만들기 링크를 클릭합니다. 그러면 이메일 목록을 작성하는 팝업이 열립니다.

목록 목록, 이메일 주소, 이메일 주소의 CSV 파일 업로드 링크, 업로드된 이메일 주소를 보여주는 영역이 포함된 이메일 목록 만들기 팝업

이 팝업에서 이메일 목록의 이름을 지정하고 이메일 주소를 직접 입력하거나 사용할 이메일 주소의 CSV를 업로드할 수 있습니다. 완료하면 변경사항 저장 버튼을 누릅니다. 필요에 따라 이미 추가한 이메일 주소로 추가하거나 삭제할 수 있도록 생성된 이메일 목록으로 돌아갈 수 있습니다. 테스터를 추가한 후 테스트 버전을 만들 차례입니다. 페이지 상단에서 새 버전 만들기 버튼을 클릭합니다.

새 출시 만들기 버튼을 가리키는 화살표가 있는 내부 테스트 페이지

테스트 출시 만들기

새 버전 만들기 버튼을 클릭하면 여러 가지 섹션을 통해 메시지가 표시됩니다. 첫 번째 앱 무결성에서는 앱의 서명 키를 관리하는 방법을 선택할 수 있습니다. 기본 옵션은 Google에서 서명 키를 관리하는 것입니다. 이 옵션은 업로드 키 분실 시에도 앱을 안전하게 복구할 수 있는 안전한 방법입니다.

Play 앱 서명

개발자와 업로드 키를 왼쪽에서 오른쪽으로 표시하여 앱에 서명한 후 Google로 전송하는 플로 차트 그러면 Google에서 앱 서명 키를 만들어 해당 키로 앱에 서명한 다음 사용자에게 제공합니다.

앱 업로드 및 완료

서명 키 관리 방법을 선택하면 버전에 App Bundle을 업로드하라는 메시지가 표시됩니다. 이렇게 하려면 Bubblewrap이 생성한 양식으로 app-release-bundle.aab 파일을 드래그 앤 드롭하세요. 출시를 완료하려면 나머지 버전 세부정보를 입력하고 저장을 클릭한 다음 버전 검토를 클릭한 다음 마지막으로 내부 테스트로 출시 시작 버튼을 클릭하여 버전을 시작하세요. 이렇게 하면 내부 테스터가 앱을 사용할 수 있습니다. 내부 테스트 페이지의 테스터 탭으로 돌아가서 테스터가 공유할 수 있는 링크를 복사합니다.

테스터와 테스트 링크를 공유할 수 있도록 링크 복사 링크를 가리키는 화살표가 있는 내부 테스트 페이지

5. 사용해 보기 - 앱 만들기

이제 여러분의 차례입니다. 이전 단계에서 학습한 내용을 사용하여 다음을 수행합니다.

  1. Play Console에서 PWA를 위한 새 앱을 만듭니다.
  2. 앱의 내부 테스트를 설정하고 테스터로 추가합니다.
  3. App Bundle을 업로드하고 앱의 테스트 버전을 만듭니다.
  4. 테스트 링크를 사용하여 Android 또는 Chrome OS 기기의 Play 스토어에서 앱을 설치합니다.

6. 디지털 애셋 링크

Play에서 PWA를 테스트했다면 전체 화면이 실행되지 않는 것을 알 수 있습니다. 아직 디지털 애셋 링크 파일을 통해 사이트의 소유권을 확인하지 않았기 때문입니다. Bubblewrap이 Android 애플리케이션 번들을 구성하고 빌드할 수 있지만, 웹 애플리케이션을 업데이트하여 연결을 완료해야 합니다.

앱의 SHA-256 디지털 지문 가져오기

PWA의 디지털 애셋 링크를 구성하려면 사용자가 휴대전화로 받은 패키지에 서명하는 데 사용한 인증서의 SHA-256 디지털 지문이 필요합니다.

Play 앱 서명의 경우

버전 (이전에 권장됨)을 만들 때 앱에 Play 앱 서명을 설정하면 SHA-256 디지털 지문을 Play Console에서 찾을 수 있습니다. 이 인증서는 애플리케이션을 업로드하는 데 사용한 인증서와 다르다는 점에 유의하세요. Play Console의 애플리케이션 내에서 지문을 가져오려면 출시 및>설정->앱 무결성으로 이동하세요. 앱 서명 키 인증서 아래에 여러 옵션이 표시됩니다. SHA-256 인증서 디지털 지문 값을 복사합니다.

SHA-256 인증서 디지털 지문이 강조표시된 앱 무결성 화면

Play 앱 서명 제외

Play 앱 서명을 선택 해제한 경우 최종 애플리케이션에 서명할 때 사용한 키는 Play Console에 애플리케이션을 업로드할 때 사용하는 키와 동일합니다. 자바의 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를 풍선 래핑하는 동안 생성된 동일한 디렉터리 내에서 다음 명령어를 실행합니다. 이때 <fingerprint>을 이전 단계에서 복사한 지문으로 바꿉니다.

$ bubblewrap fingerprint add <fingerprint>

이 명령어는 애플리케이션의 디지털 지문 목록에 지문을 추가하고 assetlinks.json 파일을 생성합니다. 이 파일을 PWA와 동일한 출처의 .well-known 디렉터리에 업로드합니다.

7. 직접 해보기 - 디지털 애셋 링크

이제 여러분의 차례입니다. 이전 단계에서 학습한 내용을 사용하여 다음을 수행합니다.

  1. 앱의 SHA-256 지문을 찾습니다.
  2. 앱의 디지털 애셋 링크 파일을 생성합니다.
  3. 디지털 애셋 링크 파일을 PWA에 업로드합니다.
  4. API와 테스트 앱을 사용하여 디지털 애셋 링크 파일이 올바르게 설정되어 있는지 확인합니다.

8. 퀴즈

최종 점검을 진행하기 전에 다음 질문에 답하여 배운 내용을 확인해 보세요. 정답을 미리 보세요.

Sally는 Bubblewrap으로 Android 프로젝트를 생성한 후 생성된 ______ 파일을 버전 제어 시스템에 커밋하여 필요할 때마다 다시 빌드할 수 있도록 합니다.

twa-manifest.json 서명 키 app-release-bundle.aab build.gradle

잭은 Android 앱 번들을 내부 테스트 트랙에 ______하여 QA팀에서 PWA Android 앱을 테스트해보도록 합니다.

uploads 빌드 및 업로드 출시 버전 서명 및 업로드

Oogie Boogie의 PWA Android 앱은 전체 화면에서 실행되지 않습니다. 이 문제를 해결하려면 ______의 SHA-256 인증서 디지털 지문을 가져와 PWA와 동일한 출처의 ______에 있는 Digital Asset Links 파일에 업로드합니다.

upload key, /.well-known/assetlinks.json 업로드 키, /assetlinks.json 서명 키, /.well-known/assetlinks.json 서명 키, /assetlinks.json

9. 이해도 테스트 - 답변

지식 테스트 질문에 대한 답변

  1. Sally는 Bubblewrap으로 Android 프로젝트를 생성한 후 생성된 ______ 파일을 버전 제어 시스템에 커밋하여 필요할 때마다 다시 빌드할 수 있도록 합니다.
  2. 잭은 Android 앱 번들을 내부 테스트 트랙에 ______하여 QA팀에서 PWA Android 앱을 테스트해보도록 합니다.
  3. Oogie Boogie의 PWA Android 앱은 전체 화면에서 실행되지 않습니다. 이 문제를 해결하려면 ______의 SHA-256 인증서 디지털 지문을 가져와 PWA와 동일한 출처의 ______에 있는 Digital Asset Links 파일에 업로드합니다.

10. 수고하셨습니다.

수고하셨습니다. PWA를 Google Play 스토어에 추가하는 방법을 배웠습니다.

준비가 되었다고 생각되면 다음 단계를 직접 시도해 보세요.

즐겁게 코딩해 보세요!