신뢰할 수 있는 웹 활동은 특히 웹사이트를 표시하는 것만을 원하는 경우 설정하기 약간 까다로울 수 있습니다. 이 가이드에서는 신뢰할 수 있는 웹 활동을 사용하는 기본 프로젝트를 만드는 방법을 안내하고 모든 문제를 다룹니다.
이 가이드를 완료하면 다음을 수행할 수 있습니다.
- Bubblewrap을 통해 신뢰할 수 있는 웹 활동을 사용하고 인증을 통과하는 애플리케이션을 빌드한 상태여야 합니다.
- 서명 키가 사용되는 시기를 이해합니다.
- Android 애플리케이션을 빌드할 때 사용하는 서명을 확인할 수 있어야 합니다.
- 기본 디지털 애셋 링크 파일을 만드는 방법을 알아봅니다.
이 가이드를 따르려면 다음이 필요합니다.
- 개발 컴퓨터에 설치된 Node.js 10 이상
- 개발용으로 설정된 Android 휴대전화 또는 에뮬레이터가 있어야 합니다(실제 휴대전화를 사용하는 경우 USB 디버깅을 사용 설정).
- 개발 휴대전화에서 신뢰할 수 있는 웹 활동을 지원하는 브라우저 Chrome 72 이상이면 됩니다. 다른 브라우저에서도 지원될 예정입니다.
- 신뢰할 수 있는 웹 활동에서 확인하려는 웹사이트입니다.
신뢰할 수 있는 웹 활동을 사용하면 Android 앱이 브라우저 UI 없이 전체 화면 브라우저 탭을 실행할 수 있습니다. 이 기능은 소유한 웹사이트로 제한되며 디지털 애셋 링크를 설정하여 이를 증명합니다. 나중에 자세히 설명해 드리겠습니다.
신뢰할 수 있는 웹 활동을 실행하면 브라우저에서 디지털 애셋 링크 체크아웃을 확인합니다. 이를 인증이라고 합니다. 인증에 실패하면 브라우저에서 웹사이트를 다시 맞춤 탭으로 표시합니다.
버블랩 설치 및 구성
Bubblewrap은 Node.js용 라이브러리 및 명령줄 도구 (CLI) 모음으로, 개발자가 신뢰할 수 있는 웹 활동을 사용하여 Android 애플리케이션 내에서 프로그레시브 웹 앱을 생성, 빌드, 실행할 수 있도록 도와줍니다.
다음 명령어로 CLI를 설치할 수 있습니다.
npm i -g @bubblewrap/cli
환경 설정
Bubblewrap을 처음 실행하면 필요한 외부 종속 항목을 자동으로 다운로드하고 설치할 수 있는 옵션이 표시됩니다. 종속 항목이 올바르게 구성되도록 하려면 도구가 이를 실행하도록 허용하는 것이 좋습니다. 기존 Java 개발 키트 (JDK) 또는 Android 명령줄 도구 설치를 사용하려면 Bubblewrap 문서를 확인하세요.
프로젝트 초기화 및 빌드
PWA를 래핑하는 Android 프로젝트를 초기화하려면 다음과 같이 init 명령어를 실행합니다.
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap은 웹 매니페스트를 읽고 개발자에게 Android 프로젝트에 사용할 값을 확인해 달라고 요청한 후 해당 값을 사용하여 프로젝트를 생성합니다. 프로젝트가 생성되면 다음을 실행하여 APK를 생성합니다.
bubblewrap build
실행
빌드 단계에서 app-release-signed.apk라는 파일을 출력합니다. 이 파일은 테스트를 위해 개발 기기에 설치하거나 출시를 위해 Play 스토어에 업로드할 수 있습니다.
Bubblewrap은 로컬 기기에 애플리케이션을 설치하고 테스트하는 명령어를 제공합니다. 개발 기기를 컴퓨터에 연결한 상태에서 다음을 실행합니다.
bubblewrap install
또는 adb 도구를 사용할 수 있습니다.
adb install app-release-signed.apk
이제 기기 런처에서 애플리케이션을 사용할 수 있습니다. 애플리케이션을 열면 웹사이트가 신뢰할 수 있는 웹 활동이 아닌 맞춤 탭으로 실행되는 것을 확인할 수 있습니다. 아직 디지털 애셋 링크 유효성 검사를 설정하지 않았기 때문입니다. 먼저...
버블랩의 그래픽 사용자 인터페이스 (GUI) 대안
PWA Builder는 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 스토어에 앱을 배포해 보세요.