웹뷰 기초 가이드

안드로이드

웹뷰 기초 가이드

강한 맷돼지 2024. 1. 9. 20:58

웹뷰란?

웹뷰란 네이티브 앱에 속한 일종의 브라우저 이다. 하지만 브라우저라면 주소창, 새로고침, 즐겨찾기 등 다양한 웹을 탐색하기 위한 도구를 제공하겠지만 웹뷰는 그렇지 않다. 웹뷰의 경우 앱처럼 웹의 화면을 앱에 띄워줄뿐 따로 앱을 탐색하기 위한 도구나 기능을 제공하지 않는다. 이를 통해 웹을 앱처럼 사용하도록 만드는것이다.

웹뷰의 장점

여러 플렛폼에서 사용 가능하다.
웹개발자를 한번 갈아버려서 IOS, ANDROID에서 동시에 사용할 수 있다.
-> 이를 통해 초기 개발 비용을 최소화 할 수 있고 유지보수성을 늘릴 수 있다.
비지니스 관점에서 개꿀 갈리는 웹개발자 == 눈물, 일자리 없어지는 안드,아요 개발자도 눈물
배포 없이 업데이트 가능하다.
이게 꿀기능이지 않을까 싶은데 잦은 변화가 필요한 경우에는 웹뷰 혹은 server-driven-ui를 사용하는것 같다.
앱 심사를 거치지 않는다는 것이 단순 업데이트의 문제가 아니라 업데이트 한 어플리케이션이 사용자가 실제로 업데이트 해주는건 기약이 없다.(강업도 하고 하겠지만 어쩃든)
이런 부분에서 웹뷰를 적절히 사용한다면 좋은 효과를 볼 수 있을것이다.

웹뷰의 단점

느리다 치명적인 단점이 아닐까 싶은데 네이티브 앱의 경우 스토어에서 빌드가 완료후 다운받고 여타 이미지 등등이 이미 저장공간 속에 있지만 웹뷰는 그야말로 웹이다. 한마디로 모든걸 다 로딩해오고 다운로드받고 해서 보여주는데 시간이 걸릴것이다.
UI 가 제한적이다. 당연히 UI에서 할수 있는것보다 제약이 있을것이다.
스토어가 깐깐하게 군다. 웹뷰만으로 구성된 앱은 스토어가 허락하지 않는다. 이는 정책을 봐야겠지만 어떻게보면 안전한 생태계를 구성하겠다는 스토어 입장에서는 당연한것이다.

그래서 기술적으로 뭔데

일단 웹뷰의 두루뭉술한 장단점은 살펴봤고 우리는 안드로이드 개발자로서 이제 웹뷰가 정확히 어떤식으로 구현되고 어떻게 사용해야하는지 살펴봐야 할것이다.

안드로이드 자료를 찾을때 가장좋은것은 무엇???? 공식문서!!!!!!!!!!

공식문서로 대략적인 파악후 좀더 조사해보자.

공식문서 WebView에서 웹 앱 빌드

사실 공식문서도 마냥 정답은 아니다.

어느건 세상 자세히 나와있는데 또 사실 관심 없는거에는 한없이 야박하다.

웹뷰 공식문서는 야박도,자상도 아닌 그냥 애매한 수준이라 그냥 참고하고 자세히 작성된 블로그글을 봐야할것 같다.

일단 간략히 정리하자면 공식문서를 통해 학습의 키워드를 습득할 수 있다.

그렇다면 키워드를 중점으로 살펴보자.

WebView

우리가 사용하려는 뷰이니 당연히 익숙히 들어봤을것이다. 텍스트뷰, 이미지뷰 처럼 뷰의 일정이고 이것을 xml에 추가해주면 여기에 브라우저 같은 뷰를 하나 띄워놓는것이다.

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />

다음과 같이 그냥 레이아웃에 올려놓으면 반은 성공한거다.

참고로 당연한거지만 인터넷이 연결되니 인터넷 권한은 추가해야한다.

    <manifest ... >
        <uses-permission android:name="android.permission.INTERNET" />
        ...
    </manifest>

WebSettings (기타 사용설정)

공식문서에서는 Websettings라고 이야기하는데 WebView에 settings 속성을 말한다. url 등등 사용 설정에 대해서 나오는데 워낙 다양하고 실제적으로 적용해줘야 할것이 많다.

자바스크립트 코드를 Android 코드에 결합

일반적으로 bridge라고 많이 이야기한다.

안드로이드 네이티브코드를 자바스크립트(웹개발자)가 사용할수 있도록 인터페이스를 제공하는것인데 이부분 또한 웹뷰의 주요한 부분이니 자세히 다룰것이다.

WebViewClient

웹뷰 내부에서 링크를 클릭하면 기본적으로 URl을 들고 암시적으로 인텐트 되어버리는데 -> 대부분 기본 웹브라우져에서 열림

이부분을 웹뷰 내부에서 열리도록 설정하고 웹 뷰에서 이동하려는 url(사용자가 클릭한버튼 등에서 라우팅하는 url)을 가로채서 기타 작업을 할 수 있고 이 url을 웹뷰에서 열지 어느 앱 혹은 외부 웹브라우져에서 열지 결정할 수 있다.

이또한 핵심 클래스라 자세히 다룰것이다.

WebChromeClient

공식문서에서는 대략적으로 나와있지만 이 또한 핵심 클래스 중 하나로 자세히 살펴볼것이다.

결론

결론적으로 공식문서를 살펴보며 4가지 키워드에 대해 학습해야함을 알 수 있었다.

webView 관련 세팅값
WebViewClient
WebChromeClient
Bridge

자 그럼 각각을 이제 자세히 살펴보자

본격적으로 들어가기에 앞서

처음으로 웹뷰를 다루고 웹에 대한 지식이 없다면 뭔가 다 이질적일 것이다.

당연한거니 안드에만 국한하지 말고 웹부분도 찾아보자(나한테 하는소리)

WebView 관련 세팅값

내부적으로 설정할 수 있는 값들이 너무나도 많다.

이를 하나하나 외우고 할 수 있는 수준은 아니고 필요할때 찾아보고 사용하고 일단 주요한 설정값들 위주로 살펴봐야겠다.

만약 모든 설정값을 알고싶다면 공식문서에서 찾아보면 될것같다.

자 그럼 일반적으로 자주 쓰이는 설정값들을 하나하나 알아보자.

javaScriptEnabled
default 값은 false 로 되어있고 웹뷰에서 자바스크립트를 사용할 수 있도록 설정한다.
자바스크립트가 없는 웹서비스는 사실 없다고 봐도 무방하니 항상 켜줘야하는 옵션일 것이다.
이 옵션을 끄면 자바스크립트가 동작하지 않기 때문에 웹과 사용자가 상호작용 할 수 없다.
javaScriptCanOpenWindiwsAutomatically
웹개발 할때 새창을 띄우기위해 window.open() 이라는 함수를 실행하는데 이 속성을 true로 해야 window.open()함수가 동작한다.
새창, 팝업을 띄우는 로직은 WebChromeClient를 통해 다루게 된다. -> 밑에서 다루니 현재는 가볍게 넘어가자.
만약 감이 안온다면 https://velog.io/@jybyun33/10 다음 링크의 글을 슥 봐보자 새로운 창을 다이얼로그를 통해 보여주는 예시가 나온다.
-> 꼭 다이얼로그 뿐만아니라 그냥 웹뷰를 더 만들어서 띄워줄수도 있고 그것은 개발자 맘이다.
setSupportMultipleWindows
멀티윈도우의 사용여부인데 멀티윈도우를 사용하고싶다면 true로 놔야한다.
사실상 javaScriptCanOpenWindiwsAutomatically속성과 세트라고 볼 수 있다.
useWideViewPort
공식문서여기서 나오는 설명이 좀 아리까리한데 쉽게 말하자면
이 설정이 false 라면 항상 웹뷰 화면의 너비만큼 표시된다.(화면에 맞게 조정됨)
하지만 이설정이 true 일때 웹페이지에 viewport라는 태그가 설정되어있다면 태그에 설정된 너비만큼 페이지가 표시된다.
viewport 태그가 설정되어있지않거나 너비가 지정되지 않은경우 웹페이지는 더 넓은 화면에 맞춰서 화면을 표시한다.
-> 근데 어짜피 대부분 true로 놓고 사용한다.
setSupportZoom
확대 축소가 가능한지 여부를 세팅해주는 설정이다. -> HTML Meta 태그에 적어놓은 설정이 우선시된다고 한다.
이것은 default가 true라고 한다. -> 줌이 가능한지 불가능한지 여부 설정
builtInZoomControls
이것도 확대 축소와 관련되어있다.
이 속성은 내장된 줌 기능을 사용할지 여부를 설정하는데 내장된 줌 기능이라 하면 화면에 나타나는 줌 컨트롤과 핀치줌 제스쳐를 나타낸다고 한다.
근데 컨트롤이 화면에 표시될지 여부는 다음에 다룰 DisplayZoomControls 를 통해서 설정한다고 한다.
default값은 false이다.
displayZoomControls
아까 위에서 언급한 컨트롤러를 표시할지 여부이다.
cacheMode
캐시를 어떻게 사용할것인가에 대한 내용이다.
캐시 사용방식은 페이지를 어떻게 로드하는가에 따라 달라지는데 일반적인 페이지 로드의 경우 캐시를 확인하고 필요할때 캐시를 재검증하는 과정을 거친다.
하지만 뒤로가기 버튼을 통해서 페이지가 다시 보이는 경우는 재검증 과정이 없이 캐시에서 바로 콘텐츠를 가져온다.
그래서 캐시 정책을 정의된 상수를 통해서 설정할 수 있다.
정책이야 이제 필요에 의해서 골라쓰겠지만 -> 지금 단순한 생각으로는 LOAD_CACHE_ELSE_NETWORK가 가장 일반적이지 않을까 싶다.
- LOAD_DEFAULT: 기본 캐시 설정을 따른다.(디폴트 값)
- LOAD_CACHE_ELSE_NETWORK: 캐시를 먼저 확인후 캐시가 없다면 네트워크를 통해 로드한다.
- LOAD_NO_CACHE: 캐시를 사용하지않고 항상 네트워크를 통해 로드한다.
- LOAD_CACHE_ONLY: 캐시에있는 콘텐츠만으로 로드한다.
domStorageEnabled
DOM 스토리지 API 를 사용할 수 있도록 설정해주는 설정값인데 DOM 스토리지가 무엇일까?
일단 DOM이 뭔지 간단히 설명하자면 웹이 html,자바스크립트로 이루어져 안드로이드의 코틀린,xml 과 같은 상황에있다.
뭐 뷰 이런거 xml로 짜면 코틀린에서 접근할 수 없어 막 뷰바인딩써서 뷰객체 번들같은거 가져와서 코틀린에서 접근하고 이런행위가 웹에서도 마찬가지로 일어나는것이다.
그래서 html객체를 트리화시켜서 그 자체를 자바스크립트에서 접근할 수 있게한게 DOM이다.
그래서 DOM 스토리지는 웹브라우저에서 제공하는 표준 자바스크립트 API 라고 한다.
그래서 영구데이를 사용자 장치에 저장할 수 있는 방법이다.
-> 그냥 뭐 프론트 개발자들이 쓸수도 있으니 켜놔야하지 않을까 싶다.(보안? 우리팀 개발자가 할텐데 뭔보안 동료를 믿어야지 떽!!!)
allowFileAccess, allowContentAccess
사실 이 설정부터는 필요할때 머리통 꺠지면서 켜주는게 맞을것 같다.
설명해주는 텍스트만 보면 뭐라는지 모르겠는?
설명은 웹뷰가 파일접근하는것에 대한 활성화 비활성화이다.
일단 뭐 구글링 해보니까 assets에다가(우리가 아는 res 밑에서 관리되는 에셋아님) 무슨 자바스크립트 파일 넣어놓고 웹뷰에서 로컬 파일 띄우는것도 있고 관련 블로그
WebChormeClient 함수 오버라이딩해서 사진 저장소 같은데서 사진도 불러오고 한다. 관련 블로그
이럴때 접근을 열어주는 설정이니 필요할떄 뚜들뚜들 맞으면서 켜주면 되지않을까 싶다.
loadWithOverviewMode
웹뷰를 오버 뷰 모드로 로드할지 결정하는 설정이라는데
그냥 간단히 말해서 로드되어야하는 화면이 웹뷰보다 큰 경우 화면사이즈에 맞춰서 축소시켜서 나타내겠다는 뜻임
이 속성이 적용되려면 로드되는 화면이 웹뷰보다 커야한다.
mixedContentMode
Http 콘텐츠가 Https 콘텐츠와 함께 로드될 수 있게 만들어주는 설정인데 배경이 있다.
안드로이드 버전 9부터 http를 통한 통신을 막아버려서 https를 사용하거나 우회하여 사용하는 방법을 이용해야한다.
그래서 당연스럽게도 http url을 웹뷰에서 로드하면 ERR_CLEARTEXT_NOT_PERMITTED라는 에러와 함께 웹페이지가 로드되지않는다.
하지만 이 설정을 http, https 혼합으로 사용하는 모드로 놓는다고 해도 똑같이 로드가 안된다.
그 이유로 이 설정이 Https 사이트에서 Http 리소스를 로드하는 Mixed Content문제를 허용해주는 설정이기 떄문이다.
사실상 우리가 Http url을 웹뷰에 들이미는거랑 전혀 상관 없는 설정값이기 때문에 보안이랑 오류를 맞는 문제를 웹개발자랑 서버개발자랑 잘 상의 후 이설정을 킬지말지 정해야할것이다.
-> https 페이지에서도 이미지 같은경우 속도때문에 http를 사용하는 경우가 있다고한다.

자 이제 대략적으로 많이 사용되는 설정값들은 살펴본것 같고 다음챕터로 넘어가보자.

WebViewClient

공식문서를 봐보면 Public methods가 또 엄청 많다.

물론 위쪽 속성만큼 많지는 않아 정리할수는 있지만 어짜피 외워서 못쓸것같아서 자주쓰이는 것들 위주로 정리하려한다.

일단 필요할때를 위해 공식문서 링크는 남겨놓고

자 이제 자주 쓰이는 함수들을 살펴보자

shouldOverridingUrlLoading
-> 오버로딩으로 (WebView view, String url)을 받는 함수가 있는데 이는 API level24 부터 deprecated되었다고 한다.
(안드로이드 버전관리가 열받게하기 때문에 두개다 버전맞춰서 오버라이딩 하는것을 추천하는 글이 많았다.)
이 함수는 거의 WebViewClient의 메인 함수라고해도 과언이 아니다.
이 함수의 용도는 url의 페이지가 화면에 로드되기전 url을 가로채서 사전 작업을 할 수있다.
url을 가로채서 검사후 계속 웹뷰에서 띄워줄건지, 만약 의도하지 않은 주소(우리가 관리하지 않는 주소)라면 종료시킨다던지, 딥링크로 앱어딘가로 보내버리던지, 인텐트로 다른 앱으로 날려버리든지 어쩃든 창의적으로 요구사항에 맞게 구현하는것이다.
일단 이 함수의 규칙은 boolean 값을 반환하는건데 false를 반환한다면 웹뷰에서 이 url을 계속 보여주면서 핸들링을 하겠다는 뜻이고 true를 한다면 웹뷰에 url을 로드하지 않겠다는 뜻이다.
고로 true false를 의도에 맞게 반환하도록 분기하고 그 안에서 필요한 전처리 작업을 하면 되는것이다.
예시는 첨부한 블로그에서 보면 좋을것 같고 실제적으로 스킴에 따른 분기로직이 주이다.
또한 post요청관련된 사항도 있으니 시간난다면 첨부 블로그를 봐보자 자세한 내용이 담긴 블로그
onPageStarted
페이지가 로딩되는 시점에서 실행되는 콜백으로 요구사항에 따라서 무슨일을 할 수 있는가는 무궁무진 하겠지만 뭐 딱히 로딩화면 띄워주는거 이외에 많은 일을 하는건 못봤다.
onPageFinished
페이지 로딩이 종료되는 시점에서 실행되는 콜백으로 이 또한 요구사항에 따라서 무슨일을 할 수 있는가는 무궁무진 하겠지만 뭐 딱히 로딩화면 죽이는것 이외에 많은 일을 하는건 못봤다.
onReceivedError
-> 오버로딩이 있는데 이 또한 버전관리 떄문에 deprecated된 경우이다. -> 둘다 오버라이딩해서 버전 관리를 해놓자.
또한 http에러만 특정한 콜백(onReceivedHttpError), ssl에러만 특정한 콜백(onReceivedSslError) 등등이 있으니 필요에 의해서 맞춰서 사용해야한다.
뭐 네이밍 그대로 웹 리소스를 로딩하는 과정에서 에러가 났을떄 실행되는 콜백이다.
적절한 에러처리를 해야할것이다.
참고사항 -> onReceivedSslError 을 처리해주지 않는다면 스토어에서 앱이 삭제 당할 수 있다고한다.
꼭 오버라이딩 하고 사용자가 handler.proceed 와 handler.cancel 중 선택할수 있도록 만들어야 한다고 한다. 참고 블로그

나머지 콜백들도 뭐가 많다. 하지만 나머지는 진짜 필요할때 사용해가면서 체득하는것이 제일 정답일것 같다.

WebChromeClient

이 친구도 공식문서를 봐보면 Public methods가 엄청 많다.
일단 주로 쓰이는 것들만 정리하도록 하고 뭔가 더 기능이 필요하다 싶으면 공식문서를 들어가서 찾아보자

그렇다면 주로 쓰이는 함수들을 살펴보자.

onCreatWindow
자바스크립트의 window.open()가 호출되었을 때 호출되는 콜백으로 자바스크립트에서 window.open()함수는 새창을 열어서 링크를 띄워주는 역할을 한다.
사실 자바스크립트나 웹을 안 다뤄봤다면 뭔소리지 싶을것이다.(내가 그랬다...)
우선 window.open()을 자바스크립트에서 어떻게 사용하는지 참고블로그를 통해서 이해해보자.
블로그를 보았다면 이제 새창을 다양한 형태로 띄울 수 있다는걸 알았을것이다.

근데 그걸 안드로이드에서 뭐 어쩌라고?
-> 자바스크립트에서 새창을 여는 작업에 대한 대응을 웹뷰에서 할수있도록 단순히 콜백을 호출해주는것이다.
고로 여기서 무슨 행위를 할지(다이얼로그를 띄워준다, 기존 웹뷰의 url을 변경해준다, 새로운 웹뷰 액티비티를 만들어서 웹뷰를 띄워주고 스택에 올린다) 우리 안드개발자 맘이다.
즉 상황에 맞게 프론트개발자랑 상의해서 알잘딱한 새창을 보여주는 상황을 우리가 핸들링하면된다.

또한 이 함수의 반환값은 boolean 인데 디폴트로 false를 반환하고있고 false를 반환한다는 것은 window.open()함수 호출을 무시하겠다는 뜻이다.
만약 window.open()함수를 잡아서 처리한다면 반환값으로 true를 반환해야한다. 그러한 예시를 찾아봤는데 좋은예시인지는 검증하지 않았지만 뭐 이런게 있더라 정도로 볼 예시를 두개 첨부하려한다.
예시1) 위쪽 WebviewSettings에서도 언급했지만 다음 블로그의 예시에서 새 창을 띄워버리는 경우가 있다.
예시2) 웹뷰 알고 쓰기 이 블로그의 예시를 참고해보자
p.s 밑에서 다룰건데 이콜백 비스무리한 사촌이라고 봐도되는 콜백들이 있다. -> onJsAlert, onJsConfirm
onJsAlert,onJsConfirm
위와 같이 자바스크립트에서 다이얼로그 비스무리한것들을 띄워주기위해 호출하는 자바스크립트 함수 alert,confirm 이 호출 되었을때 호출되는 콜백이다.
그러니 일단 자바스크립트 alert,confirm 함수가 뭘하는지 알아봐야할것이다.
참고 블로그를 봐보면 한방에 감이온다.
alert는 버튼하나짜리 확인용 다이얼로그, confirm은 취소버튼까지 있는 버튼 두개짜리 다이얼로그가 뜬다.
이제 이에 대응하여 우리는 이걸 안드로이드에서 어떻게 보여줄지 웹개발자랑 상의하여 오버라이딩하면 되는것이다.
뭐 일단 alert는 버튼하나짜리 다이얼로그, confirm은 버튼 두개짜리 다이얼로그 띄워주면 될 것 같은데 이건 알잘딱 해보자.
onCloseWindow
이제 슬슬 네이밍만 봐도 감이올때가 되었다.
그냥 웹뷰가 창을 닫는 시점에 호출되는 콜백이다.
지금 당장 어떤 행위를 해야할지 떠오르지 않아도 추후 필요시에 사용해보면 될 것이다.
onPermissionRequest
웹 쪽에서 권한을 요청(카메라, 저장소 등)해야할일이 있을 때 크롬 웹브라우져 위에서 동작한다 가정하면 그냥 알아서 크롬이 권한요청하고 처리하고 뚝딱뚝딱 하지만 웹뷰에서는 이것들을 직접 처리해줘야한다.
한마디로 안드로이드 앱도 특정 기능에 접근하려면 권한을 얻어야하듯이 웹에서도 그런 기능에 접근하려면 웹뷰를 포함한 안드로이드 앱 자체가 권한이 필요하고 이를 받아내기 위한 콜백이다.
그래서 웹코드상 권한 요청이 들어오면 ex)html 코드에서 <input type="file"> 태그가 있을 경우 이를 클릭했을 때(카메라, 갤러리에 접근하려는 시도) 권한이 없을시 이 콜백이 호출될 것이다.
권한을 받는 예시코드는 참고블로그를 통해 확인하자.
-> 참고블로그에 잘 나와있지만 웹뷰에서 뭔 권한을 확인할지 모르니까 그냥 들어오는대로 권한을 받아주는것이 아니라 우리쪽에서 허가할 권한만 확인후 받도록 방어코드를 넣어야한다.
onShowFileChooser
사진 등 첨부할 항목들을 선택할때 처리할 수 있는 콜백인데 우테코 리뷰어이신 토리님이 글을 아주 자세히 써주셔서 그냥 이거 보면 한방에 해결된다.참고글
근데 우테코스럽게 객체분리, 함수분리, 원시값포장처럼 갖가지 개념들이 난무해서 사실 처음 이런 개념을 겪는사람들은 더 어렵게 다가오지 않을까 싶다.
어쩃든 나는 오랫만에 객체지향스러운 코드를 보니 편안하다.

사실 추가적으로 다양한 많은 함수들이 있지만 이거 다하자면 너무많다. 나머지는 필요할때 찾아쓰고 뭐 대충 GPS를 사용하면 관련 퍼미션 따로 따는 콜백같은게 있다는거 정도만 알아놓자.

Bridge

이제 거의 다왔다 후후후 브릿지란 무엇일까?
생각보다 개념도 쉽고 사용법도 쉽다. 웹뷰는 단순히 웹을 화면에 띄워주는 뷰일뿐이다. 주요기능이 화면을 나타내는데 집중되어있다.
그럼으로 안드로이드 네이티브에서 할 수 있는 기능들은 당연히 제한된다.

이를 해결하기 위해 안드로이드에서만 가능한 기능들을 자바스크립트 코드를 통해 웹개발자가 실행 시킬 수 있도록 미리 서로 명세를 주고받는 작업을 한다.

이후 이 명세에 맞춰 코틀린 혹은 자바로 안드로이드 네이티브 기능을 구현하여 JavaScript Interface를 제공한다면 웹개발자가 이 Interface에 정의된 함수를 호출하여 네이티브 기능을 사용할 수 있는것이다.

즉 안드로이드 개발자는 특정기능만 구현해주면 웹개발자가 알아서 조합해서 뚝딱뚝딱 기능을 만들수 있는 꿀 기능이다.

이제 그럼 그 브릿지를 어떻게 만드는지 살펴보자.

1. 웹개발자와 상의된 명세에 대해 @JavascriptInterface라는 어노테이션이 달린 함수들을 구현한 클래스를 생성한다.

예를들어 토스트를 웹 개발자가 띄우고 싶다고 구현해달라고 이야기했으면 토스트 기능을 구현한 함수를 담은 클래스를 생성해준다.

class PigTestBridge(
    private val showToastMessage: (String) -> Unit
) {
    @JavascriptInterface
    fun showMessage(message: String) {
        showToastMessage(message)
    }
}

2. webView에 addJavascriptInterface 함수를 통해 브릿지(자바스크립트 인터페이스)를 등록한다.

binding.testWebView.apply {
            addJavascriptInterface(PigTestBridge(::showToast), PigTestBridge.BRIDGE_NAME)
        }

이런식으로 인터페이스를 웹뷰에다가 등록시킬수 있다.

그럼 이제 웹개발자가 이걸 가져다 쓸 수 있게된다.

웹에서 사용예시

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
</head>
<body>
<p>
    로딩이 완료된 웹뷰 입니다.
</p>
<input type="button" value="Send Toast Message" onClick="showAndroidToast('Im king of pig')"/>
<script type="text/javascript">
    function showAndroidToast(toast) {
        PIG.showToast(toast);
    }

</script>
</body>
</html>

이런식으로 웹에서 원하는 기능에 배정해버릴 수 있다.

웹뷰를 다뤄본적이 없고 웹도 그냥 Vue이런것만 살짝 찍먹해본 나로써 용어도 개념도 생소해서 은근 학습하는데 오래걸렸다. 물론 이걸 바로 실무에 적용시키기에는 학습해야할 점이 아직 산처럼 남아있겠지만 일단 1탄은 이정도로 줄이려한다.

p.s 막상 웹뷰를 다루다보면 리로드 문제 등등 더 많은 해결해야하는 부분이 있을것이다. 그 부분은 또 다른 글로 돌아오려한다.

-> 2탄 추가 학습 키워드 딥링크, 권한, 브릿지(웹개발자에게 정보를 전송하는 방법)