신뢰할 수 있는 웹 활동은 특히 웹사이트만 표시하려는 경우에는 설정이 약간 까다로울 수 있습니다. 이 가이드에서는 신뢰할 수 있는 웹 활동을 사용하는 기본 프로젝트를 만드는 방법을 안내하고 모든 문제를 다룹니다.
이 가이드를 마치면 다음을 할 수 있습니다.
- Bubblewrap을 사용하여 신뢰할 수 있는 웹 활동을 사용하고 인증을 통과하는 애플리케이션을 빌드했습니다.
- 서명 키가 사용되는 경우를 이해합니다.
- Android 애플리케이션 빌드에 사용하는 서명을 확인할 수 있습니다.
- 기본 디지털 애셋 링크 파일을 만드는 방법을 익힙니다.
이 가이드를 따르려면 다음이 필요합니다.
- 개발 컴퓨터에 설치된 Node.js 10 이상
- Android 휴대전화 또는 에뮬레이터가 연결되어 개발용으로 설정됩니다(실제 휴대전화를 사용하는 경우 USB 디버깅 사용 설정).
- 개발용 휴대전화에서 신뢰할 수 있는 웹 활동을 지원하는 브라우저 Chrome 72 이상에서 작동합니다. 다른 브라우저에서도 지원될 예정입니다.
- 신뢰할 수 있는 웹 활동에서 보려는 웹사이트
신뢰할 수 있는 웹 활동을 사용하면 Android 앱에서 브라우저 UI 없이 전체 화면 브라우저 탭을 실행할 수 있습니다. 이 기능은 소유한 웹사이트로 제한되며 디지털 애셋 링크를 설정하여 이를 증명합니다. 이에 대해서는 나중에 자세히 알아보겠습니다.
신뢰할 수 있는 웹 활동을 실행하면 브라우저가 디지털 애셋 링크 체크아웃을 확인하며 이를 인증이라고 합니다. 확인에 실패하면 브라우저에서 웹사이트를 맞춤 탭으로 표시합니다.
Bubblewrap 설치 및 구성
Bubblewrap은 Node.js용 라이브러리 및 명령줄 도구 (CLI) 세트로, 개발자가 신뢰할 수 있는 웹 활동을 사용하여 Android 애플리케이션 내에서 프로그레시브 웹 앱을 생성, 빌드, 실행하는 데 도움을 줍니다.
CLI는 다음 명령어로 설치할 수 있습니다.
npm i -g @bubblewrap/cli
환경 설정
버블랩을 처음 실행할 때는 필요한 외부 종속 항목을 자동으로 다운로드하고 설치하라는 메시지가 표시됩니다. 도구가 이 작업을 실행하도록 허용하는 것이 좋습니다. 그래야 종속 항목이 올바르게 구성될 수 있기 때문입니다. 기존 Java 개발 키트 (JDK) 또는 Android 명령줄 도구 설치를 사용하려면 Bubblewrap 문서를 확인하세요.
프로젝트 초기화 및 빌드
PWA를 래핑하는 Android 프로젝트를 초기화하려면 init 명령어를 실행하면 됩니다.
bubblewrap init --manifest=https://my-twa.com/manifest.json
버블랩은 웹 매니페스트를 읽고, 개발자에게 Android 프로젝트에서 사용할 값을 확인해달라고 요청한 다음 이 값을 사용하여 프로젝트를 생성합니다. 프로젝트가 생성되면 다음을 실행하여 APK를 생성합니다.
bubblewrap build
실행
빌드 단계는 app-release-signed.apk라는 파일을 출력합니다. 이 파일은 테스트를 위해 개발 기기에 설치하거나 출시를 위해 Play 스토어에 업로드할 수 있습니다.
Bubblewrap은 로컬 기기에 애플리케이션을 설치하고 테스트하는 명령어를 제공합니다. 개발 기기를 컴퓨터에 연결한 상태에서 다음을 실행합니다.
bubblewrap install
또는 adb 도구를 사용할 수 있습니다.
adb install app-release-signed.apk
이제 애플리케이션을 기기 런처에서 사용할 수 있습니다. 애플리케이션을 열면 웹사이트가 신뢰할 수 있는 웹 활동이 아닌 맞춤 탭으로 시작됩니다. 이는 아직 디지털 애셋 링크 확인을 설정하지 않았기 때문입니다. 하지만 먼저...
버블랩용 그래픽 사용자 인터페이스 (GUI) 대안
PWA 빌더는 Bubblewrap 라이브러리를 사용하여 신뢰할 수 있는 웹 활동 프로젝트 생성을 지원하는 GUI 인터페이스를 제공합니다. PWA 빌더를 사용하여 PWA를 여는 Android 앱을 만드는 방법에 관한 자세한 내용은 이 블로그 게시물을 참고하세요.
서명 키 참고사항
디지털 애셋 링크는 APK에 서명한 키를 고려하며 인증 실패의 일반적인 원인은 잘못된 서명을 사용하는 것입니다. 인증에 실패하면 페이지 상단에 브라우저 UI가 표시되는 맞춤 탭으로 웹사이트를 실행하게 됩니다. Bubblewrap이 애플리케이션을 빌드하면 init 단계가 진행되는 동안 키 설정이 포함된 APK가 생성됩니다. 그러나 Google Play에 앱을 게시하면 서명 키 처리 방법에 따라 다른 키가 생성될 수 있습니다. 서명 키 및 Bubblewrap 및 Google Play와 서명 키의 관계를 자세히 알아보세요.
애셋 링크 파일 설정
디지털 애셋 링크는 기본적으로 앱을 가리키는 웹사이트의 파일과 웹사이트를 가리키는 앱의 메타데이터로 구성됩니다.
assetlinks.json 파일을 만든 후 웹사이트에서 루트를 기준으로 .well-known/assetlinks.json에 업로드하여 브라우저에서 앱을 올바르게 확인할 수 있도록 합니다. 서명 키와의 관계에 관한 자세한 내용은 디지털 애셋 링크 자세히 알아보기를 확인하세요.
브라우저 확인 중
신뢰할 수 있는 웹 활동은 사용자가 기본 선택한 브라우저 설정을 따르려고 합니다. 사용자의 기본 브라우저가 '신뢰할 수 있는 웹 활동'을 지원하는 경우 해당 브라우저가 실행됩니다. 이 방법을 적용하지 않으면 설치된 브라우저가 신뢰할 수 있는 웹 활동을 지원하는 경우 해당 브라우저가 선택됩니다. 마지막으로 기본 동작은 맞춤 탭 모드로 돌아가는 것입니다.
즉, 신뢰할 수 있는 웹 활동 관련 작업을 디버깅할 때는 자신이 생각하는 브라우저를 사용하고 있는지 확인해야 합니다. 다음 명령어를 사용하여 사용 중인 브라우저를 확인할 수 있습니다.
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
다음 단계
이 가이드를 따라왔다면 제대로 작동하는 신뢰할 수 있는 웹 활동을 얻고 확인 실패 시 발생하는 상황을 디버그할 수 있을 것입니다. 그렇지 않은 경우 웹 개발자를 위한 Android 개념을 살펴보거나 이 문서에서 GitHub 문제를 제출하세요.
다음 단계로는 앱 아이콘을 만드는 것부터 시작하는 것이 좋습니다. 아이콘을 만들면 Play 스토어에 앱을 배포할 수 있습니다.