Google I/O 19 에서 다룬 TWA(Trusted Web Activity) 에 대한 내용을 정리한 포스팅입니다.

TWA(Trusted Web Activity)

TWA 는 Android에서 훌륭한 웹 경험을 제공하기 위한 라이브러리입니다.
PWA(Progressive Web Apps)를 지원 함과 동시에 Chrome 렌더링 엔진을 사용하여 빠른 속도를 자랑합니다.

하지만 Android에는 이미 WebView를 통해 웹과의 연동을 지원합니다.
하지만 기존의 WebView는 이미 잘 만들어진 웹사이트를 네이티브 앱처럼 사용하기에는 한계가 존재 합니다.

WebView의 한계

WebView는 제한된 성능과 기능성 때문에 복잡한 웹앱을 실행할 때 속도와 안정성에서 문제가 발생할 수 있습니다.

1. 사용자는 모바일 앱을 사용하고 있지만 간단한 음성 녹음 이나 푸시 알림 기능조차 이용하지 못하는 경우가 많습니다.

개인적으로 조사를 하면서 WebView의 가장 큰 한계라고 생각했습니다.
만약 이러한 모바일 자체의 기능을 이용하고자 한다면, 모바일 네이티브 환경에서 추가적인 코드를 작성해야 하므로 웹과 앱 개발자 모두의 비용이 발생하게 됩니다.

비용을 아끼고자 웹으로 Hybrid를 적용하였지만 결국 네이티브 개발자에 대한 큰 의존이 발생합니다.

2. WebView는 일반 브라우저를 사용하는 것보다 속도 가 현저히 낮습니다.

속도가 낮은 이유는 WebView에서는 크롬 브라우저와 같은 강력한 엔진을 사용하고 있지 않으며, 같은 엔진을 사용하더라도 Android 위에서 웹을 띄우는 것이기 때문에 완전한 최적화가 이루어지지 않을 수 있기 때문입니다.

TWA의 등장, WebView의 한계 극복

이러한 WebView의 한계를 극복하고자, 구글은 Chrome을 기반으로 TWA를 도입하고 사용하기를 권장합니다.
구글 I/O에서는 TWA를 다음과 같이 정의하고 있습니다.

TWA는 UI가 없는 Chrome이다.

여러 의미로 해석해볼 수 있겠지만, 개인적으로는 개발자들이 TWA를 Android의 요소로 생각하지 말고, 원하는 웹 UI를 마음껏 띄울 수 있는 크롬 브라우저 그 자체로 받아들이기 원하는 것 같았습니다.

그 이유는 TWA가 가지는 장점과 연관이 있습니다.

TWA의 장점

1. Chrome 렌더링 엔진을 사용하여 속도가 빠릅니다.

마치 네이티브 브라우저와 같이 동작하기 때문에 기존 WebView가 가지는 속도의 한계를 극복할 수 있게 되었습니다.
또한, TWA는 Chrome 엔진을 기반으로 동작하기 때문에 Chrome이 지원하는 기능을 자유롭게 이용할 수 있습니다.
이 외에도 Chrome 자동 업데이트를 통해 사용자는 추가적인 동작 없이도 최신 기능 + 보안이 탑재된 브라우저에서 웹앱을 실행시킬 수가 있습니다.

2. FullScreen을 이용할 수 있습니다.

기존 WebView에서도 FullScreen을 이용할 수 있었지만, TWA는 별도의 Native Component를 혼합해서 사용할 수는 없습니다.

3. Chrome과 TWA는 상태를 공유합니다.

당연한 이야기지만, TWA는 Chrome을 기반으로 동작하기 때문에 서로의 상태를 공유합니다.

TWA <-> Chrome [상태공유]

Chrome 브라우저에서 웹사이트에 로그인했다면, TWA에서도 세션을 유지할 수 있습니다.
반대로, TWA에서 웹사이트의 장바구니 기능을 이용하여 상품을 추가하였다면, Chrome 브라우저에서도 동일한 장바구니 목록을 조회할 수 있습니다.

다만, 이러한 기능을 편리하다고 느낄 수도 있지만 사용자 입장에서는 당황스러울 수 있으니 Chrome에서 실행 중 이라는 메시지를 제공합니다.

4. TWA는 신뢰할 수 있는 환경을 제공합니다.

TWA 이름에서 의미하는 바와 같이, 신뢰를 기반으로 동작하는 Activity입니다.
TWA는 Digital Asset Links 를 사용하여 앱 소유자와 웹 소유자가 동일하다는 것을 보장합니다.

Android 앱 내부에 Digital Asset Links를 추가하고, 동시에 서버에서는 https://domain.name/.well-known/assetlinks.json 에 Digital Asset Link JSON 파일을 호스팅합니다.

이를 통해 Chrome에서는 웹 서버와 앱이 동일한 소유자에 의해 관리된다는 사실을 알 수 있게 됩니다.
이렇게 구성했을 때의 장점은 사용자가 안전하게 서비스를 이용할 수 있으며, 열려는 웹 도메인과 앱에서 정의한 host명이 일치하는 경우 자동으로 앱이 실행되도록 설정이 가능해집니다.

예를 들어, 위 사진의 hostName과 일치하는 웹사이트에 방문한 경우, 자연스럽게 웹에서 앱으로 이어지는 경험을 할 수 있습니다.

결론적으로, 사용자는 더 나은 사용자 환경에서 서비스를 이용할 수 있게 됩니다.

TWA로 웹 실행

간단한 경우에는 TWA를 사용하여 웹을 실행하는 코드가 비교적 단순합니다.
가령 다음과 같은 방법이 존재합니다.

// AndroidManifest.xml

<activity 
    android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/appName">
		...
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data
            android:scheme="https"
            android:host="${hostName}"/>
    </intent-filter>
</activity>

이렇게 AndroidManifest.xml에서 LauncherActivity를 정의하여 별도의 kotlin이나 java 코드 없이도 실행할 수 있습니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mTwaLauncher = new TwaLauncher(this);
}

public void buttonClick(View view) {
    Uri url = Uri.parse ("https://www.example.com") ;
    mTwaLauncher.launch(url);
}

또는 직접 TwaLauncher 를 사용하여 원하는 Uri를 실행하는 방법도 존재합니다.

일반적인 Android 애플리케이션은 startActivity(); 코드에 Intent를 전달하면 Android System이 Intent에 해당하는 Activity를 실행시키는 구조입니다.

TWA를 실행하는 과정도 크게 다르지 않습니다.
중간에서 AndroidSystem이 존재하며 원하는 화면으로 이동시켜줍니다.
다만, Activity -> Activity 가 아닌, Activity -> TWA 로 이어지는 것이 큰 차이점입니다.

반대로, 필요에 따라 Web에서 네이티브 앱을 실행할 수도 있습니다.
다음과 같이, AndroidManifest.xml에 intent-filter를 정의하여, 일치하는 Activity를 실행시킬 수 있습니다.

훌륭한 TWA를 구축하는 방법

1. Loads and interacts instantly
2. Works reliably event with intermittent connectivity
3. Enhances to device features, looks and feels like it belongs on the user's device

훌륭한 PWA(Progressive Web Apps)은 즉시 로드되고 상호 작용이 가능하며, 인터넷 연결이 정상적이지 않은 상황에서도 안정적으로 작동해야 합니다.

예시에서 보여주는 바와 같이, 비행기 모드를 켜거나, 인터넷이 끊긴 상황에서 사용자에게 틱택토 게임을 제공한다던지, 사용자가 앱을 계속 유지하고 있는 것처럼 느끼게 해야 한다고 합니다.

Lighthouse

이러한 케이스를 개발자가 직접 평가 할 필요 없이, Lighthouse라는 도구를 제공합니다.

Lighthouse는 웹앱의 퀄리티 문제를 피할 수 있도록 평가를 진행해줍니다.
그림처럼 평가가 완료되면, 성과 보고서와 함께 PWA 뱃지를 제공받을 수 있습니다.

TWA 예외 상황 처리

사용자의 장치에 Chrome이 설치되어 있지 않은 경우, Chrome이 기본 브라우저가 아닌 경우가 존재할 수 있습니다.

이 때, fallback url을 제공하여 크롬 설치로 이어지게 하거나 fallback action을 개발자가 재정의하여 이러한 경우에만 TWA가 아닌, 기존의 WebView로 보여지게 하여 유연하게 대처할 수 있어야 합니다.

TWA 기반의 앱 출시

TWA 기반의 앱을 출시하기 위해서는 다음 세 가지 조건을 만족해야 합니다.

1. Lighthouse에서 TWA 웹 콘텐츠에 대해 뱃지를 받아야 합니다.
2. Lighthouse 평가 점수 80점 이상의 성능을 유지해야 합니다.
3. TWA 웹 콘텐츠가 일반적인 Android앱과 동일하게 Google Play Policy를 충족해야 합니다.

Refs.

• 구글 I/O 유튜브
• Medium : Introduction to Trusted Web Activity for Android