다양한 구성요소를 사용하여 Android 앱 내에서 웹 콘텐츠를 렌더링하는 방법
Android 플랫폼은 10년 이상 사용되어 왔으며 초창기부터 웹과 관련하여 탁월한 지원을 제공해 왔습니다. 여기에는 개발자가 자체 Android 앱 내에서 웹을 사용할 수 있는 구성요소인 WebView가 포함되어 있습니다. 게다가 Android에서는 개발자가 자체 브라우저 엔진을 플랫폼에 도입하여 경쟁과 혁신을 촉진할 수 있습니다.
개발자는 다양한 방법으로 Android 애플리케이션에 웹을 포함할 수 있습니다. WebView는 광고를 렌더링하거나, Android UI 요소와 함께 사용되는 레이아웃 구성요소로 또는 HTML 5 게임을 패키징하는 데 자주 사용됩니다. 개발자는 맞춤 탭을 사용하여 인앱 브라우저를 빌드하고 서드 파티 웹 콘텐츠에 원활한 탐색 환경을 제공할 수 있으며, 신뢰할 수 있는 웹 활동을 사용하면 개발자가 Play 스토어에서 다운로드할 수 있는 Android 앱에서 프로그레시브 웹 앱 (PWA)을 사용할 수 있습니다.
Android WebView
WebView를 통해 개발자는 Android 앱 내에서 최신 HTML, CSS, JavaScript에 액세스할 수 있으며 콘텐츠를 APK 내에서 제공하거나 인터넷에서 호스팅할 수 있습니다. 이는 Android에서 가장 유연하고 강력한 구성요소 중 하나로, 웹 콘텐츠가 Android 앱에 포함된 대부분의 사용 사례에 사용할 수 있습니다. AdMob과 같은 광고 서비스를 지원하는 것부터 WebGL과 같은 최신 API를 사용하는 완전한 HTML5 게임을 빌드하고 출시하는 것까지 가능합니다.
하지만 인앱 브라우저를 만들거나 Android 애플리케이션에 PWA를 포함하는 데 사용할 경우 WebView에는 웹 플랫폼의 보안, 기능이 없습니다.
인앱 브라우저 도전과제
사용자가 서드 파티 웹사이트로 이동할 때 더 원활한 환경을 만들기 위해 시간이 지남에 따라 점점 더 많은 개발자가 Android 애플리케이션에 서드 파티 콘텐츠를 통합하는 브라우저 환경을 빌드했습니다. 이러한 경험을 인앱 브라우저라고 합니다.
WebView는 최신 웹 기술 스택을 광범위하게 지원하며 WebGL과 같은 여러 최신 웹 API를 지원합니다. 그러나 WebView는 주로 웹 UI 툴킷입니다. 웹 플랫폼의 모든 기능을 지원하지 않으며 지원하지도 않습니다. API에 이미 웹 블루투스와 같은 OS 수준의 대체 기능이 있거나 푸시 알림과 같이 브라우저 UI를 구현해야 하는 경우에는 지원되지 않을 수 있습니다. 웹 플랫폼이 발전하고 Android 앱에서만 사용할 수 있었던 기능이 추가됨에 따라 이러한 격차는 더욱 벌어질 것입니다. 앱 개발자가 서드 파티 콘텐츠를 열 때 사용되는 기능을 제어할 수 없으므로 WebView는 인앱 브라우저나 프로그레시브 웹 앱을 열 때 적합하지 않습니다. WebView가 모든 웹 플랫폼 기능 지원을 구현하더라도 개발자는 여전히 코드를 작성하고 권한 또는 푸시 알림과 같은 기능을 위한 자체 UI를 구현해야 하므로 사용자의 일관성을 유지하기가 어렵습니다.
WebView를 인앱 브라우저로 사용할 때의 보안 고려사항
WebView는 삽입기 애플리케이션에 쿠키와 DOM을 포함하여 렌더링된 콘텐츠에 대한 전체 액세스 권한을 제공합니다. 이러한 기능은 사용자의 높은 신뢰가 필요한 강력한 기능입니다.
WebView는 브라우저 빌드를 위한 프레임워크가 아니므로 최신 브라우저에서 사용할 수 있는 보안 기능이 없습니다.
멀티 프로세스 아키텍처 및 사이트 격리
브라우저는 신뢰할 수 없는 콘텐츠를 렌더링하고 실행할 때 보안을 유지하도록 설계되었습니다. 최신 브라우저는 신뢰할 수 없거나 악성일 가능성이 있는 콘텐츠를 탐색하는 동안 사용자를 안전하게 보호하기 위해 멀티 프로세스 아키텍처 및 사이트 격리와 같은 기법을 사용합니다.
멀티 프로세스 아키텍처가 없으면 웹페이지로 인한 비정상 종료로 인해 전체 브라우저 앱이 비정상 종료되거나 취약점이 악용되어 전체 기기를 제어할 수 있습니다. 사이트 격리는 보안을 한층 더 강화하여 신뢰할 수 없는 사이트가 다른 사이트의 정보에 액세스하고 정보를 도용하기 어렵게 합니다.
Android 8.0 Oreo까지는 WebView 렌더러에서 삽입 애플리케이션과 동일한 프로세스를 사용했습니다. 최신 버전의 OS에서는 렌더기가 다른 프로세스에서 실행됩니다. 그러나 단일 프로세스는 여전히 모든 페이지와 이를 실행하는 WebView 인스턴스 간에 공유되므로 사이트 격리를 완전히 구현하는 것은 불가능합니다.
다중 프로세스 아키텍처와 사이트 격리의 부족은 자체 소유 및 신뢰할 수 있는 콘텐츠를 렌더링하는 애플리케이션의 경우 문제가 되지 않지만, 인앱 브라우저와 같이 신뢰할 수 없는 서드 파티 콘텐츠를 실행하는 애플리케이션에서는 문제가 될 수 있으며 사용자가 쿠키, 은행 세부정보, 개인 정보 등을 도용하는 데 사용될 수 있는 멜트다운 및 스펙터와 같은 취약점에 노출되도록 합니다.
보안 UI 표시기
사용자에게 우수한 보안 표시기를 제공하는 것도 중요합니다. 브라우저는 많은 노력을 들이고 이 영역에서 항상 진화하고 있습니다. 그러나 WebView에는 애플리케이션 개발자가 신뢰할 수 있는 보안 표시기를 빌드할 수 있도록 사이트의 연결이 안전한지 확인하는 API가 없습니다. 이러한 API가 없으면 보안 HTTPS 연결을 통해서도 주소 표시줄에 표시되는 URL이 사용자에게 표시되는 페이지와 일치하지 않을 수 있습니다.
개발자가 사용할 수 있는 또 다른 옵션은 애플리케이션에 브라우저 엔진을 삽입하는 것입니다. 이 접근 방식은 애플리케이션 크기가 늘어날 뿐 아니라 복잡하고 시간이 오래 걸립니다.
인앱 브라우저용 솔루션인 맞춤 탭
맞춤 탭은 Chrome 45에서 도입되었으며 이를 통해 개발자는 애플리케이션의 일부로 사용자의 기본 브라우저에 있는 탭을 사용할 수 있습니다. 맞춤 탭은 원래 Chrome에서 출시되었으므로 'Chrome 맞춤 탭'이라고 불렸습니다. 현재 Android API이며 대부분의 인기 있는 브라우저에서 Chrome, Firefox, Edge, 삼성 인터넷을 비롯한 맞춤 탭을 지원하므로 '맞춤 탭'이라고 부르는 것이 더 적절합니다.
맞춤 탭은 개발자가 웹 콘텐츠를 앱 환경에 원활하게 통합하는 데 도움이 됩니다. 또한 개발자는 툴바 색상, 작업 버튼, 전환 애니메이션 등을 맞춤설정하여 웹 콘텐츠가 표시되는 활동을 맞춤설정할 수 있습니다.
또한 이전에는 WebView를 사용하거나 브라우저 엔진을 삽입할 때 사용할 수 없었던 기능을 제공합니다. 인앱 브라우저는 사용자의 브라우저에서 작동하므로 맞춤 탭은 브라우저와 저장소를 공유하므로 사용자는 설치된 앱에서 인앱 탐색 세션을 시작할 때마다 즐겨찾는 웹사이트에 다시 로그인할 필요가 없습니다.
WebView와 달리 맞춤 탭은 이를 구동하는 브라우저에서 지원하는 모든 웹 플랫폼 기능과 API를 지원합니다.
신뢰할 수 있는 웹 활동을 사용하여 프로그레시브 웹 앱 열기
프로그레시브 웹 앱은 웹에서 플랫폼별 앱에서만 사용할 수 있었던 다양한 동작과 기능을 제공합니다. 앱과 유사한 동작이 도입됨에 따라 Android에서 이러한 환경을 재사용하고 싶은 개발자의 욕구가 커졌고, 개발자들은 PWA를 앱에 통합하는 방법을 요청하기 시작했습니다.
맞춤 탭은 모든 최신 웹 기능과 API를 지원하지만, 기본적으로 서드 파티 콘텐츠를 열도록 설계되었기 때문에 상단에 사용자가 어떤 URL을 방문 중인지 알려주는 툴바와 사이트의 보안 여부를 나타내는 자물쇠 아이콘이 있습니다. 앱의 자체 환경을 열 때 툴바는 애플리케이션이 운영체제와 통합된 것처럼 느껴지지 않도록 합니다.
신뢰할 수 있는 웹 활동은 Chrome 72에서 도입되었으며 개발자는 Android 앱 내에서 PWA를 사용할 수 있습니다. 프로토콜은 맞춤 탭 프로토콜과 비슷하지만 개발자가 디지털 애셋 링크를 통해 Android 앱과 열려 있는 URL을 모두 제어하고 둘 다 true인 경우 URL 표시줄을 삭제할 수 있는 API를 도입합니다.
PWA를 열 때 스플래시 화면을 만들거나 Android 코드에서 처리할 웹 알림을 위임하는 API도 도입했습니다. Play 결제 지원과 같은 더 많은 기능이 곧 제공될 예정입니다.
신뢰할 수 있는 웹 활동에서 열리는 URL은 PWA일 것으로 예상되고 일련의 동작 및 성능 특성을 가지므로 신뢰할 수 있는 웹 활동에서는 내부에서 열리는 PWA에 관한 품질 기준을 도입합니다.
현재 솔루션의 제한사항
개발자 의견에 따르면 맞춤 탭의 플랫폼 호환성과 WebView의 유연성이 결합하여 인앱 브라우저에 DOM에 액세스하거나 JavaScript를 삽입하는 등의 작업을 수행할 수 있어야 합니다.
맞춤 탭은 사실상 맞춤 UI를 사용하거나 UI가 전혀 없는 사용자 브라우저에서 렌더링된 탭입니다. 즉, 브라우저가 브라우저에서 개인 정보 보호 및 보안에 대한 사용자의 기대치를 충족해야 하므로 이러한 기능 중 일부를 불가능하게 만듭니다.
Google의 Web on Android팀은 대안을 찾고 이러한 사용 사례를 해결하기 위한 솔루션을 실험하고 있습니다. 조금만 더 기다려 주세요.
요약
WebView는 애플리케이션이 Android 앱 내에서 HTML, CSS, JavaScript를 필요로 하지만 푸시 알림, 웹 블루투스 등 최신 웹에서 제공되는 고급 기능을 사용하지 않는 경우에 유용합니다. 최신 웹 플랫폼용으로 설계된 콘텐츠를 열 때는 개발자가 의도한 대로 표시되지 않을 수 있으므로 사용하지 않는 것이 좋습니다. 인앱 브라우저를 만들 때는 WebView를 사용하지 않는 것이 좋습니다. 반면에 퍼스트 파티 웹 콘텐츠를 표시하는 것은 WebView가 실제로 빛을 발하는 영역입니다.
신뢰할 수 있는 웹 활동은 개발자가 Android 애플리케이션 내에서 전체 화면으로 자체 프로그레시브 웹 앱을 렌더링하려는 경우에 사용해야 합니다. 앱에서 유일한 활동으로 사용하거나 다른 Android 활동과 함께 사용할 수 있습니다.
맞춤 탭은 웹 플랫폼용으로 설계된 서드 파티 콘텐츠(인앱 브라우저라고도 함)를 열 때 권장되는 방법입니다.