Google I/O Extended 2023 Cloud Busan & Busan 에서 발표한 자료입니다.
https://festa.io/events/3820
본 발표는 안드로이드에서 웹 컨텐츠를 사용하는 방식을 다룹니다.
목차
- 발표 주제 소개
- 주제 선정 이유, 발표에서 다루는 내용을 말합니다.
- 안드로이드와 웹
- 안드로이드에서 웹 컨텐츠를 어디에 사용하는지, 어떻게 사용하는지 알아봅니다.
- WebView
- 안드로이드의 웹뷰에 대해 알아봅니다.
- New in Web on Android
- 2023 Google I/O에서 발표된 New in Web on Android 세션을 리뷰합니다.
우선 저는 안드로이드를 개발하고 있지만, 통계적으로 봤을 때, 모바일 보다는 웹 쪽에 관심있는 분들이 많을 거 같았고,
그래서 앱 개발이나 웹 개발하시는 분들 모두 들을 수 있는 주제로 선정하고자 했습니다.
해당 발표에서는 안드로이드에서 웹 컨텐츠를 어떻게 사용하고, 어떤건 되고, 어떤건 안된다.
뭐가 좋고 뭐가 안좋다 이런 것들을 알아보려고 합니다.
그래서 앞으로 모바일과 협업할 게 있을 때, "어? 그거 된다고 하던데요." 라고 할 수 있는 정도로 알아가셨으면 좋겠습니다.
그리고 이번 Google I/O에서 발표된 New in Web on Android를 같이 리뷰 해보는 시간을 갖겠습니다.
모바일 앱에서 웹컨텐츠를 사용하는 경우는 어떤게 있을까요?
대표적으로는 카카오톡에서 링크를 클릭했을 때가 있겠습니다. 앱안에서 링크가 열리는 것을 볼 수 있습니다.
또 다른 예시를 보겠습니다. 토스의 증권탭, 카카오톡 쇼핑탭, 당근의 근처 탭도 모두 웹컨텐츠를 보여주고 있습니다.
이런 탭들은 웹인지도 모를정도로 웹컨텐츠를 활용하고 있습니다.
이렇게 네이티브 구현할 수 있는 화면을 왜 굳이 웹으로 만들까요?
첫번째는 비용입니다.
비용이라 하면
첫번째로는 개발 시간입니다.
android, ios, web 를 따로 개발하지 않아도 되죠.
두번째는 인력입니다.
웹 개발자 한 명만 있어도, 웹, android, ios다 커버칠 수 있습니다.
그리고 웹 개발자가 앱 개발자에 비해 개발자 풀이 더 넓어 인력을 수급하기도 쉽습니다.
세번째는 배포속도입니다.
앱에서 배포를 한다고 하면, 앱스토어에서 업데이트하고, 사용자가 앱을 업데이트 해야 최신기능이 반영됩니다.
앱스토어 심사 등으로 배포자체가 늦어지기도 하고, 사용자가 앱을 업데이트 안하는 경우도 꽤 존재합니다.
웹으로 배포하면 앱을 업데이트 할 일이 없으니까, 시간이 단축되고, 사용자의 피로를 낮춰줄 수 있습니다.
두 번째 이유로, 이벤트 페이지 처럼 자주 변하는 화면은 웹로 하는게 좋습니다.
자 이제 앞에서 웹 컨텐츠를 어디서, 왜 사용하는지 알아봤습니다.
이제 안드로이드에서 이 웹 컨텐츠를 어떤 식으로 보여줄 수 있는지 보겠습니다.
첫번째는 그냥 외부 브라우저로 이동시키는 방식이 있습니다. 제일 간편한 방법입니다.
두 번째는 크롬 커스텀 탭이 있습니다. 앱안에서 열리는 크롬 탭이라고 생각하시면 됩니다.
그리고 세 번째로 웹뷰라는 컴포넌트를 사용하는 방식이 있습니다.
3가지를 비교해본 표입니다.
속도
속도는 커스텀 탭이 가장 빠릅니다. 백그라운드에서 Pre-warming을 해서 퍼포먼스를 향상 시킬 수도 있습니다.
브라우저는 브라우저 앱을 실행하고 로드하는 과정이 필요하기 때문에 비교적 Custom Tabs 보다 느립니다.
웹 뷰는 뷰 객체를 생성하고 초기화하는데 시간이 오래걸려 비교적 느립니다.
브라우징 기능
일단 브라우저는 브라우징을 위해 만들어진 것이기 때문에 모든 표준을 준수합니다.
커스텀 탭도 크롬을 사용하기 때문에 동일합니다. 그리고 크롬브라우저와 캐시와 쿠키도 공유합니다.
웹뷰의 경우 표준을 지원안하는 경우도 있고, 앱마다 쿠키를 따로 관리하기 때문에 브라우징 자체의 기능은 떨어진다고 볼 수 있습니다.
앱과의 연결성
브라우저의 경우는 별도의 앱이 실행되는 것이므로, 페이지를 닫거나 하는 등의 컨트롤을 하기가 어렵고, 브라우저 사용중의 우리의 앱이 꺼질 위험도 있습니다.
커스텀 탭의 경우 앱 안에서 열리기 때문에 컨텍스트 스위칭이 일어나지 않고 자연스럽게 사용할 수 있습니다.
웹 뷰는 앱 안에서 일부분만 보여준다거나 자유롭게 사용할 수 있습니다.
커스텀 가능여부
브라우저는 커스텀 가능한 부분이 없고, 앱으로 돌아올 때 데이터를 받거나 하기 어렵습니다.
커스텀 탭은 닫기버튼이나 탭 색깔 정도 커스텀할 수 있고 몇가지 상황에 대한 콜백을 처리할 수도 있습니다.
웹뷰는 네이티브 컴포넌드들과 같이 같이 쓴다거나, 웹에서 자바스크립트를 실행한다거나, 웹 로딩 단계에 콜백을 추가한다거나 자유롭게 사용할 수 있다.
보안
보안의 경우 브라우저와 커스텀 탭은 크롬등의 브라우저를 사용하기 때문에 브라우저의 보안을 따라갑니다. 세이프 브라우징을 사용하고 별도의 프로세스에서 동작하기 때문에 앱에 리소스에 접근하기 어렵고 비교적 안전하다고 할 수 있습니다.
웹뷰의 경우는 웹에서 네이티브 코드를 실행하거나 하는 위험성이 있습니다.
그래서 검증되지 않은 사이트보다는 본인의 사이트를 보여주는데 적합합니다.
우선 안드로이드의 웹 뷰는 최신버전 기준으로 크로미움 엔진을 사용합니다.
그리고 웹뷰를 사용할 때는 웹뷰와 웹뷰 클라이언트, 웹뷰 크롬 클라이언트 3가지 클래스를 대표적으로 사용합니다.
웹뷰는 뷰를 표시하는 뷰 객체이고, 웹 뷰 클라이언트는 웹페이지 로딩 시 일어나는 콜백을 정의할 수 있는 클래스입니다.
웹 크롬 클라이언트는 웹페이지 안에서 일어나는 액션에 대한 콜백을 정의할 수 있습니다.
이 클래스들은 웹이 로드되는 순서에 따라 콜백이 호출됩니다.
url을 로드한다고 하면, 페이지가 로드 시작, 리소스 다운로드, 타이틀 받아오기, 페이지 로드 완료 등 웹 로딩 순서대로 호출됩니다.
이제 코드로 한 번 보겠습니다.
우선 이번 발표에서는 컴포즈라는 새로운 뷰 구성방식이 아닌 기존의 xml을 사용해서 설명하겠습니다.
이렇게 xml로 뷰를 선언해주고, 인스턴스를 생성해줍니다.
웹 뷰 클라이언트를 설정해주고 loadUrl로 페이지를 로드해주면, 오른쪽 화면처럼 웹 페이지가 로드됩니다.
하지만 이상태에서는 자바스크립트가 제대로 동작하지 않기 때문에 settings의 자바스크립트 eabled 속성을 true로 해주어야 자바스크립트가 동작하게됩니다.
settings를 통해서는 웹뷰의 캐시 모드 설정이나, 유저에이전트, 파일 접근 권한, 멀티 윈도우 허용, 줌 허용 등의 설정을 할 수 있습니다.
앞의 예제에서는 기본 웹뷰 클라이언트를 사용했는데 웹 뷰 클라이언트를 상속받아 구현할 수도 있습니다.
이렇게 메소드들을 오버라이딩 해서 구현하면 됩니다.
이런 메소드들은 각 웹 로딩단계에 대한 콜백인데, 대표적인 것들만 살펴보겠습니다.
should override url loading은 웹뷰에 url이 로드되기 전에 호출되는 콜백입니다.
첫 페이지 로딩에서는 실행되지 않고, 웹뷰 안에서 페이지를 이동할 떄 호출됩니다.
이 콜백에서 특정 url은 접근을 제한한다거나 할 수 있습니다.
onPagestarted onPageFinished처럼 페이지가 시작된 후 호출되는 콜백과 페이지 로딩이 끝난 후 호출되는 콜백이 있습니다.
그리고 에러처리도 할 수 있습니다. 400번대 이상의 http error가 발생했을 때 호출되는 콜백입니다.
이 콜백을 통해 404등의 에러페이지가 나왔을 때 다른 네이티브 화면을 띄운다거나 할 수 있습니다.
SSL 연결이 실패하면 호출되는 콜백입니다.
webview는 기본적으로 https 만 지원하므로 ssl 연결이 필수적인데, 인증된 기관에서 발행한 ssl인증서가 아니면 에러가 발생합니다.
에러가 발생했을 때는 에러를 무시하고 페이지를 로드할 수 도 있고, 오른쪽 사진처럼 인증서가 올바르지않은데 진행하겠냐는 다이얼로그를 띄울 수도 있다.
하지만 이렇게 처리 할 시에는 스토어 등록에 문제가 생길 수 도 있다.
그 외에도 리소스를 받을 때, 사용자가 입력한 키에대한 콜백, 히스토리에 페이지가 추가될 때 등에 대한 처리를 해줄 수 있습니다.
웹뷰 클라이언트와 별개로 웹 크롬 클라이언트도 설정해줄 수 있습니다 .
이 역시 웹 크롬클라이언트를 상속받아 구현합니다 .
웹뷰 클라이언트가 페이지 로딩에 따른 콜백이었다면 웹크롬 클라이언트는 페이지 안에서 일어나는 액션들의 콜백입니다.
여기도 대표적인 함수들을 몇개 보겠습니다.
페이지 로딩 정도를 알려주는 콜백 함수입니다. 오른쪽 이미지처럼 프로그래스 바로 진행정도를 표시하거나 하는 등의 용도로 사용할 수 있습니다.
그리고 윈도우(새탭)가 열릴때나 닫힐 때 호출되는 콜백이 있습니다.
다음으로 Js에서 Alert, comfirm, prompt가 호출되었을 때, 호출되는 콜백이 있습니다.
여기 안에서 다이얼로그를 표시하거나, 토스트를 표시하거나, 별도의 뷰를 띄우거나 등등 사용자가 원하는대로 커스텀할 수 있습니다.
그리고 권한 요청이나, 콘솔메세지 출력에 대한 콜백도 있습니다.
그리고 웹 상에서 프로필 사진 변경이나 게시물 작성을 할 때 파일 chooser를 눌렀을 때 호출되는 콜백이 있습니다 .
네이티브 상에서 별도의 라이브러리를 쓰거나 갤러리를 열거나 등의 액션을 할 수 있습니다.
그 외에도 위치 권한 요청에 대한 콜백이나, JsTimeout 등의 콜백이 존재합니다.
그리고 안드로이드 네이티브에서 자바스크립트 함수를 실행 / 호출 하거나, 웹 안에서 안드로이드의 네이티브 코드를 호출하거나 하는 등의 행위를 할 수 있습니다.
먼저 안드로이드에서 자바스크립트를 실행하는 코드를 보겠습니다.
evaluateJavascript를 써서 자바스크립트 코드를 실행할 수 있습니다.
이렇게 html의 배경 색을 변경할 수 있습니다.
익명함수를 만들고 실행하여 반환값을 받을 수도 있습니다.
여기 예제에서는 반환값을 받아 토스트를 표시하고 있습니다.
토스트는 이런 UI 요소입니다.
그리고 웹 페이지에 정의되어있는 자바스크립트 함수를 실행할 수도 있습니다.
다음으로 웹에서 안드로이드 코드를 실행하는 과정을 보겠습니다.
우선 안드로이드에서 자바스크립트 인터페이스를 등록해줍니다. Android라는 이름으로 인터페이스를 추가해줬습니다.
그리고 자바스크립트에서 Android.showToast 이런식으로 실행해주면 네이티브에서 함수가 호출됩니다.
그 외에도 디버그 옵션을 켜서 웹 디버깅을 한다거나 할 수 있습니다.
마지막으로 웹뷰의 한계점은 다음과 같습니다.
속도면에서 리소스들을 다 다운받고 html을 받아서 웹을 그리기 때문에 네이티브보다 반응속도가 느립니다.
또 File Chooser 나 유튜브 풀스크린 같이 웹에서 당연하게 지원하는 것들을 기본적으로 지원하지 않습니다.
개발자가 따로 커스텀 해줘야합니다.
캐시, 쿠키가 앱마다 관리되기 때문에 A앱에서 네이버에 로그인 해놨는데 B앱에서는 로그인이 안되는 있는 경우가 생기기도 합니다.
또 HTML5나 CSS의 일부 기능이 지원되지 않을 수도 있습니다.
그리고 애드센스가 포함된 웹페이지에서 애드센스가 안보일 수도 있다고 합니다.
이번 구글 IO 2023에서 발표되었던 new in web on android에 대한 간략 소개입니다.
기존에 웹뷰를 통해 웹에 접속하면 요청해더에 항상 x-requested-with을 포함시켰다.
웹에서 어떤 앱을 통해 들어왔는지 알 수 있었다.
유저 프라이버시를 위해 이 기능을 deprecation 했다.
그리고 원래 구축해놓은 웹사이트에서 헤더에 의존성이 있을 수 있으므로, 특정 오리진에만 적용할 수 있도록 속성을 만들어 줬습니다.
그리고 이제 웹뷰에서도 chrome origin trials 를 사용할 수 있게 되었습니다 .
이를 통해 크롬의 새 기능이나 실험적기능을 테스트 할 수 있습니다.
큰 화면을 사용할 때, 웹 뷰의 이미지나 텍스트를 드래그앤 드롭으로 가져올 수 있습니다.
Text input field에 손글씨를 사용할 수 있습니다.
Jetpack Javascript Engine 웹 컨텐츠를 표시하지 않고도 앱 안에서 자바스크립트를 실행할 수 있게 해주는 엔진입니다.
웹과 비지니스 로직을 공유할 때 간편하게 사용할 수 있습니다.
웹뷰 인스턴스를 생성하지 않고도 자바스크립트와 웹 어셈블리 코드를 실행할 수 있고, 웹 뷰에 비해 적은 리소스를 사용하는 게 장점입니다.
자바스크립트 코드는 별도의 프로세스에서 실행되어 안전하고 안정적이라고 합니다.
이제 앞에서 잠깐 설명했던 custom tab에 관한 내용입니다.
원래 custom tab은 full screen으로만 열렸는데 높이를 조절할 수 있게 되었습니다.
오른쪽에 보이는 것처럼 유튜브에서 예시를 볼 수 있습니다.
또 태블릿 같은 큰 화면에서 사용되었을 때 가로세로 자동으로 전환해준다고 합니다.
세로일 떄 - Bottom Sheet 형태, 가로일 때 - Side bar 형태
그리고 Engagement를 수치적으로 측정할 수 있습니다.
커스텀 탭안에서 얼마나 머물렀는지, 스크롤에 대한 정보들을 측정할 수 있습니다.
끝.
행사를 위해 노력해주신 GDG Cloud Busan, GDG Busan 분들 그리고 스탭 분들 감사합니다.
GDSC 활동 이후에 첫 외부활동인데 잘 마무리된 거 같아 다행입니다.
'Programming > 플랫폼' 카테고리의 다른 글
| [Android] FCM Push 알림 (0) | 2023.11.09 |
|---|---|
| [Android] 웹 뷰 - 앱 간 통신 (2) | 2023.11.09 |
| Android12 Pending Intent, Foreground Service 변경사항 (0) | 2023.04.17 |
| [Andriod] Webview 안에서 Push Notification으로 페이지 로드하기 (0) | 2023.03.06 |
| [Android] 웹 뷰 로딩 오류 (0) | 2023.03.04 |