개발자가 웹을 Android로 가져오는 이유에는 여러 가지가 있습니다. Android 앱에서 웹 위젯을 재사용하거나, 퍼스트 파티 또는 서드 파티 콘텐츠를 통합하거나, 심지어 전체 웹 앱을 플랫폼으로 가져오는 경우를 예로 들 수 있습니다. 어떤 경우든 Android에는 이를 실현할 수 있는 다양한 도구가 있습니다.
다음은 이러한 도구의 최신 업데이트입니다. 예를 들면 다음과 같습니다.
- 개인 정보 보호가 개선되고 WebView의 이미지 드래그 앤 드롭 지원과 같이 대형 화면에 대한 지원이 개선되었습니다.
- 이제 맞춤 탭에서 일부 맞춤 탭을 지원합니다.
- 신뢰할 수 있는 웹 활동의 풍부한 설치 UI 및 Play 결제 API와 같은 PWA용 통합 기능
그럼 좀 더 자세히 알아보겠습니다.
WebView
WebView는 Android 앱에 웹 콘텐츠를 삽입하는 데 가장 흔히 사용되는 방법입니다. 대부분의 Android 앱에서 WebView를 사용하기 때문입니다. 이는 웹 UI를 네이티브 Android 앱 환경에 원활하게 통합할 수 있는 좋은 방법입니다. 예를 들어 광고, 위젯, 인앱 브라우저와 같은 다양한 웹 UI를 앱에 삽입할 수 있습니다. WebView의 가장 큰 강점 중 하나는 로드되는 웹 콘텐츠를 제어하고 수정하기 위한 강력한 API입니다. 그렇다면 WebView의 새로운 기능은 무엇일까요?
X-Requested-With 헤더
먼저 개인 정보 보호와 X-Requested-With 헤더 지원 중단에 관해 알아보겠습니다. 사용자가 WebView를 사용하여 웹 콘텐츠를 삽입하는 애플리케이션을 설치하고 실행하면 WebView는 서버에 전송되는 모든 요청에 X-Requested-With 헤더를 추가합니다. 이 헤더의 값은 애플리케이션의 APK 이름입니다. 즉, 모든 요청에 사용자가 웹 콘텐츠를 소비하는 컨텍스트에 대한 구체적인 정보가 포함되어 있으며 앱의 ID가 온라인 서비스에 유출됩니다. 사용자 개인 정보를 보호하기 위해 WebView팀은 모든 WebView 요청에서 이 헤더를 삭제하는 지원 중단 트라이얼을 시작했습니다.
하지만 앱이 X-Requested-With 헤더를 사용하면 어떻게 될까요? 특정 출처에 요청 헤더를 선택적으로 전송할 수 있는 새로운 선택 API를 사용하는 것이 좋습니다. 즉, 두 가지의 장점을 모두 활용할 수 있습니다. 즉, 이 헤더를 기반으로 빌드된 기존 기능을 계속 지원하는 동시에 다른 모든 경우에도 사용자의 개인 정보 보호를 유지할 수 있습니다. 기존 동작을 유지하려면 X-Requested-With Deprecation 오리진 트라이얼에 가입하면 됩니다.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
WebView 테스트
다음 주제는 테스트입니다 웹 개발자이고 웹사이트가 WebView에서 많은 트래픽을 수신하는 경우 다음 두 가지 업데이트가 있습니다.
이제 WebView에서 Chrome 오리진 트라이얼을 지원합니다. 오리진 트라이얼을 통해 Chrome의 새로운 기능 또는 실험적인 기능에 액세스할 수 있습니다. 이 정보를 사용하여 새로운 기능이 모든 사용자에게 제공되기 전에 사용해 볼 수 있습니다. 지금까지는 데스크톱 및 모바일 Chrome에서만 오리진 트라이얼을 사용할 수 있었지만, Chrome M110부터는 오리진 트라이얼이 WebView에서도 작동합니다.
이제 WebView 베타를 훨씬 더 쉽게 설치할 수 있습니다. WebView 베타 채널을 사용하여 웹사이트를 테스트하여 웹사이트가 향후 WebView 버전에서 잘 작동하는지 확인하는 것이 좋습니다. 확인하려면 Google Play 스토어의 WebView 베타 테스트 프로그램에 참여하세요. 기기가 자동으로 등록됩니다.
대형 화면 기기 지원
우리의 목표는 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를 앱에 통합하는 데 유용합니다. 하지만 사용자가 앱에서 웹 콘텐츠를 탐색하도록 하려면 어떻게 해야 할까요?
이는 맞춤 탭의 유용한 사용 사례입니다. 사용자가 앱에서 웹 콘텐츠를 볼 수 있도록 지원하는 안전하고 사용자 친화적인 방법입니다. 이 방법의 가장 큰 장점은 사용자가 즐겨찾는 웹사이트에 다시 로그인할 필요가 없다는 것입니다. 이는 공유되는 사용자의 기본 브라우저 및 쿠키의 인스턴스가고 이를 구동하는 브라우저에서 지원하는 모든 웹 플랫폼 기능과 API를 제공하기 때문입니다.
또한 기본 브라우저가 Chrome인 경우 Chrome에서 맞춤 탭이 열리고, 기본 브라우저가 Firefox인 경우 맞춤 탭이 Firefox에서 열립니다. Android의 주요 브라우저는 대부분 맞춤 탭을 지원하며, 기본 브라우저가 맞춤 탭을 지원하지 않는 경우 대신 브라우저 앱이 열립니다.
맞춤 탭의 장점은 앱의 디자인과 분위기에 어울리도록 스타일을 지정하고 작업 및 나만의 툴바를 통해 맞춤 상호작용을 추가할 수 있다는 것입니다.
부분 맞춤 탭
맞춤 탭 맞춤설정이 부분 맞춤 탭을 지원하면서 대대적으로 업그레이드되었습니다. 이를 통해 사용자는 앱과 웹 간에 멀티태스킹할 수 있습니다. 지금까지는 맞춤 탭을 사용할 때 브라우저 탭 오버레이가 전체 화면을 덮었습니다. 이제 맞춤 탭 오버레이의 높이를 제어할 수 있습니다. 이렇게 하면 사용자가 동시에 앱과 웹 콘텐츠와 상호작용할 수 있습니다. 사용자의 브라우저가 부분 맞춤 탭을 지원하지 않는 경우 지원되는 전체 화면 맞춤 탭이 표시됩니다.
맞춤 탭 서비스에 연결하고 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팀에서는 가로 모드와 대형 화면 기기를 위한 새로운 맞춤 탭 환경을 개발하고 있습니다. 중단점과 함께 최대 탭 너비를 정의하면 맞춤 탭 환경이 하단 시트 오버레이와 나란히 표시되는 환경 간에 자동으로 전환됩니다. 이 기능은 이미 카나리아에서 사용할 수 있으며 2003년 7월경에 출시될 예정입니다. 사용해 보려면 Chromium 맞춤 탭 예시 앱의 소스 코드를 확인하세요.
참여도 신호 측정
맞춤 탭에 대한 두 번째 주요 업데이트는 세션별 사용자 참여를 측정하는 것입니다. 앱이 뉴스 피드에 링크를 비롯한 콘텐츠를 사용자에게 정기적으로 표시한다면, 사용자가 어떤 링크를 중요하게 생각하고 어떤 링크를 중요하게 생각하지 않는지 구별할 수 있다면 좋지 않을까요? 이 정보는 사용자에게 표시할 링크의 우선순위를 정할 때 매우 유용할 수 있습니다.
Chrome팀에서는 Chrome 맞춤 탭에 세션별 측정항목 공개 상태를 추가했습니다. 사용자가 페이지에 머무르는 시간뿐만 아니라 스크롤 거리, 스크롤 방향, 전반적인 웹 콘텐츠 참여도까지 파악할 수 있습니다.
참여 신호는 Chrome 114부터 사용할 수 있으며 androidx.browser:browser:1.6.0-alpha01 지원 라이브러리 이상이 필요합니다. 자세한 내용은 참여도 신호 시작 가이드를 확인하세요.
PWA
앱과 유사한 환경을 만들어 웹에서 빌드하고 배포할 수 있게 해 주는 일련의 기술인 PWA에도 업데이트가 있습니다.
Android에서 PWA를 사용하면 웹 앱을 설치할 수 있습니다. 웹 앱은 다른 플랫폼 앱과 함께 홈 화면, 런처, 설정 및 기타 노출 영역에 게재됩니다.
PWA 기능은 웹 표준을 기반으로 구축됩니다. 교차 플랫폼 호환성에 중점을 두고 개발자에게 웹 앱을 한 번만 빌드할 수 있는 도구를 제공하며, 사용자는 원하는 기기에 앱을 설치할 수 있습니다. 설치 가능한 웹 앱을 빌드한다고 해서 네이티브 Android 앱을 보유할 수 없거나 보유해서는 안 된다는 것을 의미하지는 않지만, 웹 앱을 Android로 가져오는 또 다른 옵션입니다.
설치 가능한 웹 앱이 Android에서 편안한 분위기를 조성하는 데 도움이 되는 몇 가지 기능을 확인해 보겠습니다.
Google은 사용자가 가장 관심 있는 웹사이트를 설치할 수 있도록 지원하고자 했습니다. 첫 번째 단계는 Android 및 Chrome에 설치하기 위한 요구사항으로 서비스 워커 가져오기 핸들러를 삭제하는 것이었습니다. 또한 가져오기 핸들러가 비어 있는 경우 Chrome에서 서비스 워커 시작을 건너뜁니다. Chrome은 사용자의 설치 액세스 권한을 확대하기 위해 실험을 진행할 예정입니다. 이 기능을 살펴보시고 의견을 제공해 주세요.
서비스 워커 요구사항은 개발자가 다른 Android 앱과 일관된 사용자 환경을 만들기 위해 존재했습니다. 오프라인 상태에서는 앱을 사용할 수 없다고 사용자에게 알리는 페이지를 만드는 데 사용할 수 있습니다.
우리는 개발자의 워크로드를 완화하고 이러한 앱이 처음부터 우수한 설치 환경을 제공할 수 있다는 사실을 깨달았습니다. 이러한 이유로 Chrome은 사용자에게 앱 아이콘이 있는 화면을 표시하여 개발자의 추가 작업 없이도 사용자가 오프라인 상태임을 알려주는 기본 오프라인 환경을 추가했습니다.
물론 Service Worker API는 커스텀 오프라인 환경을 빌드하고 캐싱과 같은 다른 기능을 구현하여 성능을 개선하는 데 여전히 사용할 수 있습니다.
풍부한 설치 UI는 Android에 세련된 웹 앱 환경을 선사할 수 있는 다른 기능입니다. 웹 매니페스트에 description 및 screenshots 필드를 추가하면 사용자가 앱을 설명하기 위해 앱 스토어에서 표시하는 것과 더 가까운 설치 환경을 경험하게 됩니다.
단축키도 제공됩니다. 사용자가 앱에서 자주 실행하는 빠른 작업 집합을 설명하는 shortcuts라는 배열을 추가하면 앱 아이콘을 길게 눌러 이러한 작업에 액세스할 수 있습니다.
Web Share 및 Web Share Target API를 사용하면 앱이 다른 플랫폼 앱과 마찬가지로 다른 앱과 상호작용할 수 있습니다. 앱은 공유 시트의 옵션이 되며 사진, 문자 메시지, 기타 파일을 공유하고 수신할 수 있습니다.
기업에서 이러한 기술을 어떻게 활용하는지 자세히 알아보려면 I/O 대담 '웹: 성장을 위한 플랫폼'을 확인하세요.
신뢰할 수 있는 웹 활동
웹을 Android로 가져오는 또 다른 방법은 신뢰할 수 있는 웹 활동 (TWA)을 사용하는 것입니다.
TWA는 앱에 전체 화면 퍼스트 파티 웹 콘텐츠를 표시하는 가장 좋은 방법입니다. 웹 앱을 Android 애플리케이션으로 래핑하거나 웹사이트를 애플리케이션의 일부로 사용하고자 하는 개발자에게 이상적인 솔루션입니다.
TWA는 PWA와 밀접한 관련이 있는 것처럼 보이지만 실제로는 그렇지 않습니다. 예, TWA를 사용하면 설치 가능한 웹 앱을 Google Play에 게시할 수 있지만 웹에서 단일 활동을 빌드하고 이를 Android 앱에 포함할 수도 있습니다.
신뢰할 수 있는 웹 활동은 사용자가 브라우저에서 보는 것과 완전히 동일한 방식으로 사용자의 브라우저에서 렌더링됩니다. 단, 전체 화면으로 실행되고 URL 표시줄이 표시되지 않습니다. 즉, API를 지원하는 브라우저에서 지원하는 모든 웹 플랫폼 기능과 API를 지원합니다.
TWA를 사용하여 웹 앱을 래핑하면 다음과 같은 몇 가지 이점이 있습니다.
Google Play에 게시: 앱이 Google Play의 공개 상태 및 배포에 액세스할 수 있습니다. Play Billing API에 대한 액세스 권한이 있어 개발자는 앱에서 디지털 상품 판매를 관리하여 제품, 판매, 정기 결제 등을 더 쉽게 설정할 수 있습니다. 알림 및 위치정보 권한을 웹사이트가 아닌 Android 앱에 위임
이 도움말에서 ContactsDirect가 TWA를 사용하여 사용자에게 혜택을 제공하고 전환율을 3배 높인 방법을 자세히 알아보세요.
결론
보시다시피 웹 콘텐츠를 앱에 삽입하는 데 사용할 수 있는 다양한 옵션이 많이 있으며 이러한 모든 옵션은 지속적으로 개선되고 있습니다.