개발자가 웹을 Android로 전환하는 데는 여러 가지 이유가 있습니다. Android 앱에서 웹 위젯을 재사용하거나, 퍼스트 파티 또는 서드 파티 콘텐츠를 통합하거나, 웹 앱 전체를 플랫폼에 가져오는 것일 수도 있습니다. 사용 사례가 무엇이든 Android에는 이를 실현할 수 있는 많은 도구가 있습니다.
다음은 이러한 도구의 최신 업데이트입니다. 예를 들면 다음과 같습니다.
- 개인 정보 보호 개선 및 대형 화면 지원 개선(예: WebView에서 이미지 드래그 앤 드롭 지원)
- 이제 맞춤 탭에서 부분 맞춤 탭을 지원합니다.
- 신뢰할 수 있는 웹 활동의 향상된 설치 UI 및 Play 결제 API와 같은 PWA용 통합 기능
그럼 본론으로 들어가서 자세히 알아보겠습니다.
WebView
WebView는 Android 앱에 웹 콘텐츠를 삽입하는 데 가장 일반적으로 사용되는 방법입니다. 대부분의 Android 앱이 WebView를 사용하기 때문입니다. WebView는 네이티브 Android 앱 환경에 웹 UI를 원활하게 통합하는 좋은 방법입니다. 예를 들어 광고, 위젯, 인앱 브라우저와 같은 다양한 웹 UI를 앱에 삽입할 수 있습니다. WebView의 가장 큰 강점 중 하나는 로드 중인 웹 콘텐츠를 제어하고 수정하는 강력한 API입니다. WebView의 새로운 점은 무엇일까요?
X-요청-포함 헤더
개인 정보 보호 및 X-Requested-With 헤더 지원 중단부터 시작하겠습니다. 사용자가 WebView를 사용하여 웹 콘텐츠를 삽입하는 애플리케이션을 설치하고 실행하면 WebView는 서버로 전송되는 모든 요청에 X-Requested-With 헤더를 추가합니다. 이 헤더의 값은 애플리케이션의 APK 이름입니다. 즉, 모든 요청에는 사용자가 웹 콘텐츠를 소비하는 컨텍스트에 관한 구체적인 정보가 포함되며 앱의 ID가 온라인 서비스에 유출됩니다. 사용자 개인 정보를 보호하기 위해 WebView팀은 모든 WebView 요청에서 이 헤더를 삭제하는 지원 중단 체험판을 시작했습니다.
하지만 앱이 X-Requested-With 헤더를 사용하는 경우는 어떻게 해야 하나요? 요청 헤더를 특정 출처로 선택적으로 전송할 수 있는 새로운 선택 API를 사용하는 것이 좋습니다. 즉, 이 두 가지를 모두 활용할 수 있습니다. 즉, 이 헤더를 기반으로 구축된 기존 기능을 계속 지원하는 동시에 다른 모든 경우의 개인 정보 보호도 유지할 수 있습니다. 기존 동작을 유지하려면 X 요청 지원 중단 오리진 트라이얼에 가입할 수도 있습니다.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
WebView 테스트
다음 주제는 테스트입니다. 웹 개발자이고 웹사이트에서 WebView에서 많은 트래픽을 수신하는 경우 다음 두 가지 업데이트가 있습니다.
이제 WebView에서 Chrome 출처 무료 체험판을 지원합니다. 오리진 트라이얼을 통해 Chrome의 새로운 기능 또는 실험용 기능을 이용할 수 있습니다. 이 기능을 사용하면 모든 사용자에게 제공되기 전에 새 기능을 사용해 볼 수 있습니다. 지금까지는 오리진 트라이얼을 데스크톱 및 모바일 Chrome에서만 사용할 수 있었지만 Chrome M110부터는 WebView에서도 오리진 트라이얼을 사용할 수 있습니다.
이제 WebView 베타를 훨씬 쉽게 설치할 수 있습니다. WebView 베타 채널을 사용하여 웹사이트를 테스트하여 웹사이트가 향후 WebView 버전에서 잘 작동하는지 확인하는 것이 좋습니다. 이렇게 하려면 Google Play 스토어의 WebView 베타 테스트 프로그램에 가입하면 기기가 자동으로 등록됩니다.
대형 화면 기기 지원
Google의 목표는 WebView가 대형 화면 기기에서 잘 작동하도록 하는 것입니다. 이러한 방향으로 한 걸음 나아가 이제 WebView에서 이미지 드래그 앤 드롭을 지원합니다. 예를 들어 화면 분할 보기 모드에서 WebView의 이미지를 다른 앱으로 드래그할 수 있습니다.
WebView에 드래그 앤 드롭을 추가하는 것은 매우 쉽습니다. AndroidManifest에서 DropDataProvider를 선언하기만 하면 됩니다.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
대형 화면 기기의 경우 Android U의 Chrome 및 WebView는 HTML 텍스트 입력란에서 필기 입력을 완벽하게 지원하고 텍스트 삭제 또는 공백 추가를 위한 입력 동작을 지원합니다. S23 Ultra와 같이 One UI 5.1을 실행하는 모든 삼성 기기에서 이미 필기 입력 지원을 사용할 수 있습니다. Android T를 사용하는 다른 기기의 경우 개발자 옵션에서 HTML 입력에서 필기 입력을 사용 설정할 수 있습니다.
Jetpack JavaScript 엔진
웹 콘텐츠를 표시하지 않고도 앱에서 JavaScript를 실행해야 하는 경우가 있습니다. 예를 들어 웹 앱과 모바일 앱 간에 비즈니스 로직을 공유하는 경우입니다. 이를 더 쉽게 하기 위해 작년에 새로운 JetPack JavaScript 엔진의 알파 버전을 출시했습니다. 이 라이브러리는 Chrome의 JavaScript 엔진인 V8을 사용하며, 애플리케이션이 WebView 인스턴스를 만들지 않고도 JavaScript 또는 WebAssembly 코드를 평가할 수 있도록 합니다. 새 JavaScript 엔진의 장점은 JavaScript를 다른 프로세스에서 실행하므로 앱에서 JavaScript를 안전하고 안정적으로 실행할 수 있다는 것입니다. 또한 WebView 인스턴스보다 필요한 리소스가 적습니다.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
맞춤 탭
WebView는 웹 UI를 앱에 통합하는 데 유용합니다. 하지만 사용자가 앱에서 웹 콘텐츠를 탐색하도록 허용하면 어떻게 될까요?
맞춤 탭의 좋은 사용 사례입니다. WebView는 사용자가 앱에서 웹 콘텐츠를 볼 수 있는 안전하고 사용자 친화적인 방법입니다. 가장 큰 장점은 사용자가 즐겨 찾는 웹사이트에 다시 로그인할 필요가 없다는 점입니다. 이는 공유되는 사용자의 기본 브라우저 및 쿠키의 인스턴스이며 이를 지원하는 브라우저에서 지원하는 모든 웹 플랫폼 기능과 API를 제공하기 때문입니다.
즉, 기본 브라우저가 Chrome인 경우 Chrome에서 맞춤 탭이 열리고, 기본 브라우저가 Firefox인 경우 Firefox에서 맞춤 탭이 열립니다. Android의 주요 브라우저는 대부분 맞춤 탭을 지원하며, 기본 브라우저가 맞춤 탭을 지원하지 않는 경우 브라우저 앱이 대신 열립니다.
맞춤 탭의 장점은 앱의 디자인과 스타일에 어울리도록 스타일을 지정하고 작업을 통해 맞춤 상호작용을 추가하고 나만의 툴바를 추가할 수 있다는 것입니다.
일부 맞춤 탭
맞춤 탭 맞춤설정이 부분 맞춤 탭 지원을 통해 대대적으로 업그레이드되었습니다. 이를 통해 사용자는 앱과 웹 간에 멀티태스킹할 수 있습니다. 지금까지는 맞춤 탭을 사용하면 브라우저 탭 오버레이가 전체 화면을 덮었습니다. 이제 맞춤 탭 오버레이의 높이를 제어할 수 있습니다. 이렇게 하면 사용자가 앱과 웹 콘텐츠를 동시에 상호작용할 수 있습니다. 사용자의 브라우저가 부분 맞춤 탭을 지원하지 않는 경우 사용자에게 지원되는 전체 화면 맞춤 탭만 표시됩니다.
Custom Tabs 서비스에 연결하고 세션을 CustomTabsBuilder에 전달한 다음 setActivityHeight를 호출하기만 하면 됩니다.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube는 직접 반응 광고에 크기를 조절할 수 있는 인라인 맞춤 탭을 출시했습니다. 이렇게 하여 앱의 자연 환경을 방해하지 않으면서 광고 및 웹 콘텐츠와 상호작용하는 새로운 방법을 구현할 수 있었습니다.
하지만 태블릿 및 기타 대형 화면 기기는 어떨까요? Chrome팀은 현재 가로 모드 및 대형 화면 기기를 위한 새로운 나란히 표시되는 맞춤 탭 환경을 개발하고 있습니다. 최대 탭 너비를 브레이크포인트와 함께 정의하면 맞춤 탭 환경이 하단 시트 오버레이와 나란히 표시 환경 간에 자동으로 전환됩니다. 이 기능은 이미 Canary에서 사용할 수 있으며 2023년 7월경에 출시될 예정입니다. 사용해 보려면 Chromium 맞춤 탭 예시 앱의 소스 코드를 확인하세요.
참여도 신호 측정
맞춤 탭의 두 번째 주요 업데이트는 세션별 사용자 참여도 측정입니다. 앱에서 뉴스 피드와 같이 링크를 포함한 콘텐츠를 사용자에게 정기적으로 표시하는 경우 사용자가 가치 있다고 생각하는 링크와 그렇지 않은 링크를 파악할 수 있다면 얼마나 좋을까요? 이 정보는 사용자에게 표시할 링크의 우선순위를 정할 때 매우 유용합니다.
Chrome팀에서 Chrome 맞춤 탭에 세션별 측정항목 표시를 추가했습니다. 이제 사용자가 페이지에 머무는 시간 외에도 스크롤 거리, 스크롤 방향, 웹 콘텐츠의 전반적인 참여도도 확인할 수 있습니다.
참여 신호는 Chrome 114부터 사용할 수 있으며 androidx.browser:browser:1.6.0-alpha01 지원 라이브러리 이상이 필요합니다. 자세한 내용은 참여도 신호 시작 가이드를 참고하세요.
PWA
PWA에도 업데이트가 있습니다. PWA는 웹에서 빌드 및 배포되는 앱과 유사한 경험을 구현할 수 있도록 지원하는 기술 모음입니다.
Android에서 PWA를 사용하면 웹 앱을 설치할 수 있습니다. 즉, 다른 플랫폼 앱과 함께 홈 화면, 런처, 설정 및 기타 표면에 웹 앱이 상주하게 됩니다.
PWA 기능은 웹 표준을 기반으로 빌드됩니다. 이 기능은 크로스 플랫폼 호환성에 중점을 두고, 개발자에게 웹 앱을 한 번만 빌드할 수 있는 도구를 제공하고, 사용자가 원하는 기기에 앱을 설치할 수 있도록 합니다. 설치 가능한 웹 앱을 빌드한다고 해서 네이티브 Android 앱을 사용할 수 없거나 보유해서는 안 된다는 의미가 아니라, 웹을 Android로 가져오는 또 다른 옵션입니다.
이제 설치 가능한 웹 앱을 Android에서 편안하게 만들어 주는 몇 가지 기능을 살펴보겠습니다.
Google은 사용자가 가장 중요하게 생각하는 웹사이트를 설치할 수 있도록 지원하고자 했습니다. 첫 번째 단계는 Android 및 Chrome에 설치하기 위한 요구사항으로서 서비스 워커 가져오기 핸들러를 삭제하는 것이었습니다. 또한 가져오기 핸들러가 비어 있으면 Chrome에서 서비스 워커 시작을 건너뜁니다. Chrome에서는 사용자의 설치 액세스 권한을 확대하기 위한 실험을 진행할 예정입니다. 새로운 기능을 계속해서 살펴보고 의견을 보내주세요.
개발자가 다른 Android 앱과 일관된 사용자 환경을 만들기 위해서는 서비스 워커 요구사항이 있었습니다. 오프라인 상태일 때 앱을 사용할 수 없다고 사용자에게 알리는 페이지를 만드는 데 사용할 수 있습니다.
Google은 개발자의 워크로드를 줄이고 이러한 앱이 처음부터 우수한 설치 환경을 제공할 수 있도록 할 수 있다는 것을 깨달았습니다. 이러한 이유로 Chrome에는 개발자가 추가 작업을 하지 않아도 사용자에게 앱 아이콘이 있는 화면을 표시하여 오프라인 상태임을 알리는 기본 오프라인 환경이 추가되었습니다.
물론 커스텀 오프라인 환경을 빌드하고 캐싱과 같은 기타 기능을 구현하여 성능을 개선하는 데 서비스 워커 API를 계속 사용할 수 있습니다.
Android에 세련된 웹 앱 환경을 제공할 수 있는 다른 기능으로는 더 풍부한 설치 UI가 있습니다. 웹 매니페스트에 description 및 screenshots 필드를 추가하면 사용자가 앱을 설명하는 앱 스토어에 표시되는 것과 유사한 설치 경험을 얻을 수 있습니다.
바로가기도 있습니다. 사용자가 앱에서 자주 실행하는 빠른 작업 집합을 설명하는 shortcuts라는 배열을 추가하면 사용자가 앱 아이콘을 길게 눌러 이러한 작업에 액세스할 수 있습니다.
Web Share 및 Web Share Target API를 사용하면 앱이 다른 플랫폼 앱과 마찬가지로 다른 앱과 상호작용할 수 있습니다. 앱은 공유 시트의 옵션으로 표시되며 사진, 텍스트, 기타 파일을 공유하고 수신할 수 있습니다.
비즈니스에서 이러한 기술을 활용하는 방법에 대한 자세한 내용은 I/O 강연 '웹: 성장을 위한 플랫폼'을 참고하세요.
신뢰할 수 있는 웹 활동
웹을 Android로 가져오는 또 다른 방법은 신뢰할 수 있는 웹 활동(TWA)을 사용하는 것입니다.
TWA는 앱에서 전체 화면으로 퍼스트 파티 웹 콘텐츠를 표시하는 가장 좋은 방법입니다. TWA는 웹 앱을 Android 애플리케이션으로 래핑하거나 웹사이트를 Android 애플리케이션의 일부로 사용하려는 개발자에게 이상적인 솔루션입니다.
TWA는 PWA와 밀접한 관련이 있는 것처럼 보이지만 사실은 그렇지 않습니다. 예. TWA를 사용하면 설치 가능한 웹 앱을 Google Play에 게시할 수 있지만 웹에서 단일 활동을 빌드하고 Android 앱에 포함할 수도 있습니다.
신뢰할 수 있는 웹 활동은 전체 화면으로 실행되고 URL 표시줄이 표시되지 않는 점을 제외하고 사용자가 브라우저에서 보는 것과 정확히 동일한 방식으로 사용자의 브라우저에서 렌더링됩니다. 즉, 이를 실행하는 브라우저에서 지원하는 모든 웹 플랫폼 기능과 API를 지원합니다.
TWA를 사용하여 웹 앱을 래핑하면 다음과 같은 이점이 있습니다.
Google Play에 게시: 앱이 Google Play의 노출 및 배포에 액세스할 수 있습니다. 개발자가 앱에서 디지털 상품 판매를 관리할 수 있는 Play 결제 API에 액세스할 수 있으므로 제품, 판매, 정기 결제 등을 더 쉽게 설정할 수 있습니다. 웹사이트 대신 Android 앱에 알림 및 위치 정보 액세스 권한을 위임합니다.
이 도움말에서 ContactsDirect가 TWA를 사용하여 사용자에게 도움이 되고 전환율을 세 배로 높인 방법을 자세히 알아보세요.
결론
아시다시피 웹 콘텐츠를 앱에 삽입하는 데 사용할 수 있는 다양한 옵션이 있으며 이러한 모든 옵션은 지속적으로 개선되고 있습니다.