코딩하는 개굴이

2023 Google I/O Android 의 웹 업데이트 사항 (What’s new for web on Android 2023) 본문

안드로이드

2023 Google I/O Android 의 웹 업데이트 사항 (What’s new for web on Android 2023)

개굴이모자 2023. 6. 6. 02:40
반응형
이번 Google I/O Android 내용 중, 웹 관련 업데이트 사항에 대해 정리해 보았습니다.
직접 번역한 것이므로, 오타/오역이 존재 할 수 있습니다. 발견될 경우 공유 부탁드립니다.

 

 

 

개발자들은 여러가지 이유로 Android 내에 웹을 사용하게 되는데, Android 앱에서 웹 위젯을 재사용하여 타사 콘텐츠를 통합하거나, 전체 웹 앱을 플랫폼으로 가져오는 등 Android 는 이를 위해 많은 도구들과 기능을 제공하고 있다.

 

 

관련하여 이번 2023 Google IO 에서는 아래의 새로운 기능을 소개하고 있다.

  • Privacy 개선과, large screen 에 대한 지원 추가 (webview 에서의 image drag and drop 등)
  • 부분 Customtab 의 지원
  • PWA 의 새로운 기능들, 그리고 Trusted Web Activity 들에서의 Play billing API 와 Richer Install UI

 

 

Webview의 변경 사항

webview 는 안드로이드 앱에서 web content 를 embed 하기 위해 가장 흔하게 사용되는 방법 중 하나이며, 웹 UI 를 Android 에 통합할 수 있는 좋은 방법이다. 위젯 혹은 브라우저와 같은 다양한 웹 UI 를 앱에 포함할 수 있다.

Webview 의 가장 큰 장점 중 하나는 로드되는 웹 콘텐츠를 제어하고 수정할 수 있는 강력한 API 를 제공한다는 점이다.

X-Requested With Header

Privacy 와 X-Requested With Header 의 Deprecation 을 먼저 얘기해보자.

사용자가 웹 컨텐트를 embed 한 웹뷰를 사용하는 앱을 설치하고 실행하는 경우에 WebView 는 X-Requested-With header 를 모든 request 마다 포함하여 서버로 보냈을 것이다. 이 헤더의 값은 APK 이름을 포함하고 있는데, 이것은 모든 request 가 사용자가 web content 를 소비함에 따라 앱의 identity 를 online service 에 유출한다는 것을 의미한다.

따라서, 사용자의 privacy 보호를 위해 WebView 팀은 모든 웹뷰의 request 에 대해 X-Requested-With header의 trial deprecation 을 시작하였다고 한다.

하지만, 만일 앱이 이미 X-Requested-With header 를 사용하고 있을 경우에는 new opt-in API 를 사용할 것을 권장한다. 이것은 아래와 같이 선택적으로 request header 를 특정 Origin 으로 send 해주기 때문에, 다른 케이스들에서는 privacy 가 보장된 상태로 지원할 수 있다.

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("<https://example.com>")
);

만일 아예 기존 동작을 유지하고자 하는 경우에는 X-Requested With Description origin trial 에 등록할 수 있다.

WebView 의 테스팅

다음 주제는 테스팅이다. 만일 웹 개발자이며, 웹사이트가 만일 많은 트래픽을 웹뷰로부터 받는 경우를 겪고 있다면, 아래의 업데이트가 도움이 될 것이다.

  1. WebView 는 이제 Chrome origin trials 을 지원한다. Origin trial들은 새로운 혹은 체험적인 Chrome 의 기능들을 사용할 수 있도록 한다. 지금까지는 origin trial 을 오직 desktop 이나 모바일 Chrome 에서만 체험해볼 수 있었지만, Chrome M110 부터는 Webview 에서 또한 사용이 가능하다.
  2. WebView Beta 를 설치하기 더욱 쉬워졌다. 우리는 website 를 WebView Beta 채널을 이용해 테스트하도록 권장하고 있는데, 이는 다음 WebView 버전에 잘 대응하는지 확인하기 용이하게 하기 위함이다. 따라서, WebView Beta testing program on the Google Play Store, 에 참여해서 기기가 자동적으로 등록되도록 해보자.

Large screen 기기의 지원

구글은 WebView 가 큰 화면을 가진 기기들에서 잘 동작할 수 있게 하는 목표가 있는데, 이를 위한 첫번째 스텝은 WebView 가 이제는 image drag and drop 을 제공한다는 것이다. 예를들어 view mode 의 분리된 화면에서 이제는 webview 의 image 를 drag and drop 하여 다른 앱으로 옮길 수 있다.

이를 적용하기 위해서는 아래와 같이 DropDataProvider 를 AndroidManifest 에 선언만 하면 된다.

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

Handwriting support for HTML

또한 Android U 에서의 Chrome 과 WebView 는 HTML text input field 에 대해 handwriting 의 모든 지원을 제공하게 되었으며, 작성한 텍스트를 지우기 위함이나 공백을 추가하기 위한 input 제스처 등또한 제공된다. Handwriting support 는 이미 OneUI 5.1 인 삼성 기기에서 확인해볼 수 있으며, Android T 를 사용중인 다른 기기들에서는 Developer Options 에서 해당 설정을 켤 수 있다.

JetPack JavaScript Engine

간혹 웹 컨텐츠 없이 JavaScript 를 앱에서 실행해야할 경우가 있을 것이다. 예를들어서 웹과 앱이 같은 비즈니스 로직을 공유하는 등의 상황에서 말이다. 이런 케이스를 더욱 쉽게 지원하기 위해서 작년에 alpha release of the new JetPack JavaScript engine 를 제공했는데, 해당 라이브러리는 V8 즉 Chrome의 JS 엔진을 사용하고 앱이 JS 혹은 WebAssembly 코드를 WebView instance 를 생성하지 않고도 제공할 수 있도록 하였다.

이러한 JS engine 의 장점은 JS 를 다른 process 에서도 쉽게 사용할 수 있도록 하여, 안전하고 쉬운 방법으로 JS 를 앱에 적용할 수 있게 한다. 또한, WebView instance 를 사용하는 경우와 비교해서 리소스 또한 적게 필요로한다.

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);
…

 

 

CustomTab의 변경사항

WebView 는 Web UI 를 앱에 적용하기 매우 좋은 방법이다. 사용자가 앱에서 웹컨텐츠를 볼 수 있도록하며 안전하고 사용자 친화적인 방법을 제공하며, 사용자들이 그들이 접속했던 사이트에 다시 로그인하지 않아도 되는 큰 장점을 가지고 있다. 이것은 사용자의 기본 브라우저와 쿠키가 공유되는 인스턴스이며, 브라우저가 지원하는 웹 플랫폼의 기능들과 API 들을 모두 제공하고 있기 때문에 가능하다.

만일 크롬이 기본 브라우저라면 크롬이, 파이어폭스가 기본 브라우저라면 파이어폭스가 열릴 것이나, 만일 기본 브라우저가 Customtab 을 지원하지 않는다면 브라우저 앱 자체가 대신 열리게 된다. (외부 브라우저)

커스텀탭의 또 다른 장점 중 하나는, 앱의 스타일에 맞게 스타일을 적용할 수 있으며 toolbar 와 custom 상호작용을 지정할 수 있다는 것이다.

Partial CustomTabs

CustomTab의 Customization 은 이번에 Partial Custom Tabs 을 도입하며 큰 업그레이드를 받았다. 해당 업그레이드로 인해 사용자는 기존에 CustomTab 을 사용할 때 브라우저 탭이 모든 스크린을 오버레이 하는 경험으로부터 벗어나, app 과 web 둘의 동시 상호작용과 상호 간의 멀티 태스크가 가능하게 되었다.

만일 사용자의 브라우저가 Partial CustomTab 을 지원하지 않는다면, 사용자는 full screen CustomTab 을 보게 된다.

PartialCustomTab 의 사용을 위해서는 단순하게 아래 코드와 같이 session 에 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))

유튜브 앱의 경우 현재 resizable inline CustomTab 을 반응형 광고에 출시한 상태로, 광고와 웹 컨텐츠를 상호 방해 없이 지원하는 경험을 제공하고 있다.

큰 화면의 기기들의 경우 어떨까? Chrome Team 의 경우 현재 landscape 모드와 큰 화면의 기기들을 위해 side-by-side 형태를 개발중에 있으며, 이는 maximum tab width, breakpoint 와 함께 구현한다면 기본인 bottom sheet overlay 형태와 함께 자동으로 전환될 수 있을 것이다. 해당 기능은 Canary 에는 이미 지원되고 있으며, 2023.06월에 정식 출시 될 예정이다.

Engagement signal 들을 측정한다.

CustomTab 의 큰 업데이트는 세션 별 사용자의 참여도를 측정할 수 있게 되었다는 것이다. 만약, 앱이 정기적으로 user 들에게 link 를 이용한 콘텐츠들을 제공한다면 사용자가 어떤 링크를 선호했는지에 대해 알 수 있게 된다.

해당 정보는 사용자들에게 차후 어떤 링크를 제공할지 우선 순위를 지정할 때 매우 유용하게 사용될 수 있을 것이다.

Chrome 팀에서는 Chrome CustomTab 에 세션 별 metric visibility 를 제공하여, 사용자가 페이지에 머무는 시간, 스크롤 거리, 방향, 웹 컨텐츠의 참여도 등을 확인 할 수 있게 한다.

이러한 Engagement signal 들을 Chrome 114 부터 지원되며, androidx.browser:browser:1.6.0-alpha01 버전 이상의 라이브러리를 요구한다.

 

 

 

PWA (Progressive Web App)

웹에서 앱과 유사한 경험을 제작하고 배포할 수 있는 기술인 PWA 또한 업데이트 되었다.

Android 에서는 PWA 를 사용하면 웹앱을 설치할 수 있고, 다른 앱들과 동일하게 홈화면, 런처, 설정 등에 표시될 수 있다.

PWA 기능은 웹 표준을 기반으로 구축되었기에 cross-playform 호환성에 중점을 두고 있다. 따라서, 개발자는 웹 앱을 한번만 빌드하면 사용자가 원하는 웹을 Android 에 가져오게 하는 옵션 중 하나로 제공할 수 있다.

ServiceWorker 관련 역할 축소

Android 와 Chrome 에 설치하기 위한 필수 조건인 service worker fetch handler 를 제거하여 사용자의 설치 접근성을 확대하였다. 따라서 만일, fetch handler 가 비어있다면 chrome 에서는 service worker 를 시작하는 것을 스킵하여 선택적으로 가능하게 된다.

service worker는 개발자가 다른 안드로이드 앱과 비교해 일관된 사용자 경험을 만들기 위해 만들어졌고, 이를 이용해 오프라인 상태에서는 앱을 사용할 수 없음을 사용자에게 알리는 페이지를 만들 수도 있다. 그러나, 개발자의 작업량을 줄이고 앱이 좋은 설치 경험을 제공해주기 위해서 Chrome 의 경우 개발자의 추가 작업 없이도 사용자에게 앱 아이콘이 있는 화면을 표시하여 앱이 오프라인 상태임을 알리는 default offline experience 를 추가하였다.

물론, 서비스 워커 API 를 여전히 사용해 커스텀한 오프라인 경험을 구축하고 캐싱과 같은 다른 기능들로 성능을 개선할 수 있다.

ShortCut

앱에서 사용자가 자주 사용하는 동작들을 설명하는 단축키라는 배열을 추가하면 앱 아이콘을 길게 눌러 해당 동작에 액세스 할 수 있도록 제공한다.

Web Share, Web Share Target APIs

Web Share 과 Web Share Target APIs 를 사용해 웹앱이 다른 앱들과 같이 sheets, photos, texts, files 등을 공유할 수 있게 된다.

기업들이 해당 기술들을 어떻게 사용하는지에 대해 I/O talk “The Web: Your platform for growth” 에서 자세히 알아볼 수 있다.

 

 

TWA (Trusted Web Activity)

웹을 안드로이드로 가져오는 또 다른 방법은 Trusted Web Activity (TWA) 를 사용하는 것이다.

TWA 는 앱에서 firstp-party 웹 콘텐츠를 전체 화면으로 표시하는 가장 좋은 방법이다. 웹 앱을 안드로이드 애플리케이션으로 래핑하거나, 웹 사이트를 애플리케이션의 일부로 사용하려는 개발자들에게 이상적인 솔루션이 될 것이다.

TWA와 PWA 는 밀접한 관련이 있을 것 처럼 보이지만, 사실 그렇지 않다. 차이점에 대해 예를들어, TWA 를 사용하면 설치 가능한 웹 앱을 Google Play 에 게시할 수 있지만 웹에서 단일 활동을 빌드하여 안드로이드 앱에 포함시킬 수 있다.

TWA 는 전체화면으로 실행되고, URL bar 가 노출되지 않는 점을 제외하면 사용자가 브라우저에서 보는 것과 똑같은 방식으로 사용자의 브라우저에 렌더링된다. 즉, TWA는 브라우저가 제공하는 모든 웹 플랫폼 기능과 API 들을 지원할 수 있다.

TWA 를 사용해 웹앱을 래핑하기

TWA 를 사용해 웹 앱을 래핑하는 경우 추가적인 이점들이 존재한다.

Google Play 에 게시하여 앱이 Google Play 에 직접 배포될 수 있고, 개발자가 앱에서 디지털 상품의 판매를 관리하는 Google Play Billing API 에 액세스하여 설정을 쉽게 할 수 있다. 또한, Notification 과 Geolocation 권한을 웹 사이트가 아닌 Android 앱에 위임할 수 있다.

 

마무리

Google 은 지속적으로 앱에 웹 콘텐츠를 임베드하는데 사용할 수 있는 옵션들을 지원하고 있고 지속적으로 개선시키는데 노력하고 있다.

 

 

 

관련 링크

반응형
저작자표시

'안드로이드' 카테고리의 다른 글

[안드로이드] 저작권 걱정? No! 구글 폰트 적용하기  (1) 2024.04.28
WearOS 에 대하여  (1) 2023.08.19
CustomTab 의 모든 것을 알아보자.  (0) 2023.06.01
[안드로이드] JAVA_HOME 세팅  (0) 2023.05.14
[안드로이드] The minCompileSdk (31) specified in adependency's AAR metadata … 에러 핸들링  (0) 2023.05.14
'안드로이드' Related Articles more
Comments