웹뷰란?
먼저 앱은 두가지로 크게 나뉩니다.
네이티브앱, 하이브리드앱
보통의 모바일에서 사용하는 앱은 OS혹은 플랫폼에서 제공하는 SDK(Software Deevelopment Kit)를 기반으로 개발된 앱이며 이를 일반적으로 네이티브 앱이라고 지칭합니다.
앱의 실행 속도가 빠르고 유용한 API의 지원이 가능하며 오프라인 상태에서도 사용이 가능합니다.
장점
- 사용자에게 빠른 속도와 안정감을 제공합니다.
- 핸드폰 고유의 기능을 사용합니다. ex) 카메라, 마이크, GPS, 스와이프 제스처, QR등등...
단점
- Android와 IOS의 호환이 다르기 때문에 별도로 제작해야합니다.
- 생명주기, 데이터 저장등 웹을 이용하는것에 비해 복잡합니다.
하이브리드 앱이란
네이티브 + 웹앱을 이용하는 앱으로써 내부의 콘텐츠부분은 HTLM기반의 웹을 이용하되 패키징처리만 아이폰과 안드로이드 플랫폼을 하여 배포가 가능하게 만든 것입니다. 비용,시간이 덜 들고 기본적인 API도 사용이 가능하지만 기본적으로 인터넷 통신을 기반으로 하기에 오프라인에서는 작동하지 않고 네이티브에 비하여 모든 화면에서 통신이라는 단계를 거쳐야 하기 때문에 속도가 상대적으로 느립니다.
장점
- 웹을 만든다면 Android,IOS 두가지 플랫폼에서 사용가능합니다.
- 시간,비용이 저렴합니다.
단점
- 성능이 떨어집니다.
- 온라인 상태에서만 이용 가능합니다.
- 웹, AOS, IOS에 맞는 UX를 맞추는데 노력이 필요합니다.
네이티브를 대표하는 언어는
Android의 Kotlin, Java가 있으며 iOS는 Swift, Object-C 가 있습니다.
하이브리드의 대표적인 언어는
React Native, Flutter가 있습니다.
그래서 웹뷰가 무엇이냐
웹뷰는 웹컨텐츠를 앱에서 표시해 주는 것입니다.
웹뷰라는 컴포넌트를 이용하고 그곳에 URL, HTML을 입력해주어서 웹을 띄워주는 것입니다.
사용법
먼저 제가 경험해본 웹뷰의 사용방법은 두가지였습니다
- url로 주어졌을 때
- API통신의결과값을 HTML로 반환시
1번케이스
- Manifest 인터넷 권한 설정
<uses-permission android:name="android.permission.INTERNET" />- 웹뷰 설정
// 웹뷰 xml 연결
WebView = (WebView) findViewById(R.id.webView)
// 웹뷰 소스
.getSettings() //세부 세팅 등록
.setJavaScriptEnabled(true) // 웹페이지 자바스클비트 허용 여부
.setSupportMultipleWindows(false) // 새창 띄우기 허용 여부
.setDatabaseEnabled(true) // 데이터베이스 접근 허용 여부
.setWebViewClient(new WebViewClient()) // 클릭시 새창 안뜨게 (알림 및 요청 관련 설정)
.setDomStorageEnabled(true) // 로컬저장소 허용 여부
.getSettings().setDefaultTextEncodingName("UTF-8") // encoding 설정
.webSettings.setDisplayZoomControls(true) // 돋보기 없애기
.setJavaScriptCanOpenWindowsAutomatically(false) // 자바스크립트 새창 띄우기(멀티뷰) 허용 여부
.setLoadWithOverviewMode(true) // 메타태그 허용 여부
// 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
.getSettings().setLoadWithOverviewMode(true)
.setSupportZoom(false) // 화면 줌 허용 여부
.getSettings().setAllowFileAccessFromFileURLs(true) // 파일 URL로부터 파일 접근 허용
.getSettings().setAllowContentAccess(true) // 컨텐츠 접근 허용
.setBuiltInZoomControls(false) // 화면 확대 축소 허용 여부
.getSettings().setAllowFileAccess(true) // 파일 접근 허용 여부
.setCacheMode(WebSettings.LOAD_NO_CACHE) // 브라우저 캐시 허용 여부
.loadUrl("http://m.naver.com") // 웹뷰에 표시할 웹사이트 주소, 웹뷰 시작2번 케이스
- API 호출
@GET("/api/1/test")
suspend fun getTest(@Path("test") test: String): Response<ResponseBody>API를 호출합니다. 여기에서 주의깊게 봐야할 부분은 Response의 형태를 ResponseBody로 받아온 것입니다.
- 응답값을 WebView에 연결
private fun initWebView() {
runBlocking {
val response = service.getTest(test)
detailInfo = response.body()!!.string()
}
binding.testWebView.loadData(detailInfo, "text/html", "UTF-8")
binding.testWebView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
view?.invalidate()
}
}
}주목해야할 점은 detailInfo 라는 변수가 response를 받고있는데 .toString()이 아닌 .string()으로 받고있습니다.
ResponseBody형식으로 받은 것을 그대로 사용하기 위함입니다.
그 이후에는 기존의 WeebView사용과 동일합니다.
loadData를 통해 data, mimeType, encoding방법을 정의합니다.
