캡쳐 이미지 확인 해봐야될것같아요

자문자답)

카카오개발자 커뮤니티 답변입니다.

-------------------------------------------------------------------------------------------------------

웹뷰에서 스크롤을 당길 때 reload가 되는 건 SwiperRefreshLayout 같은 레이아웃이 설정되어 있는 것 같아요.
해당 레이아웃이나 코드가 적용되어 있는지 확인해서 reload를 막아주셔야 할 것 같습니다.

--------------------------------------------------------------------------------------------------------

웹뷰란 무엇일까?

? 네이티브 앱 vs 하이브리드 앱

앱(App)은 크게 네이티브 앱과 하이브리드 앱으로 나눌 수 있다.

보통 앱(App)이라고 하면 운영체제 혹은 플랫폼에서 제공하는 SDK(Software Development Kit)를 기반으로 개발된 애플리케이션으로 일반적으로 네이티브 앱을 지칭한다.

그렇다면 하이브리드 앱이란?
네이티브 + 웹앱의 기술을 함께 사용하는 앱으로서 콘텐츠 영역은 HTML 기반의 웹 앱으로 개발을 하되 패키징 처리만 각 아이폰, 안드로이드 플랫폼 안에서 함으로써 앱 배포를 가능하게 한다.

예를 들어, 네이버 앱 같은 경우, 첫 화면은 검색창이 띄워져있고, 웹으로 네이버에 접속했을 때와 큰 차이가 있진 않다.
하지만 음성 인식, QR코드 등 앱에서만 지원되는 기능들이 있는데 이러한 형태를 하이브리드 앱이라고 한다.

대표적으로 React Native, Flutter, PhoneGap, Cordova, Ionic 등이 있다.

당연히 네이티브 앱과 하이브리드 앱은 각각 장단점이 존재한다.
 

그리고 하이브리드 앱에는 WebView라는 것이 존재한다.

? 웹뷰(WebView)란?

간단하게 말하면 웹 콘텐츠를 앱에서 표시하는 것!
즉, 앱 화면에서 띄우고 싶은 웹 페이지를 보여주는(띄워주는) 프레임을 말한다.

익스플로러, 크롬과 같이 HTML로 작성된 홈페이지를 표시할 수 있다.
웹에서 정보를 계속 받아와야 하기 때문에 네이티브 앱 보다는 반응이 느리지만 수정 등의 개발 효율성이 좋다는 장점이 있다.

특히, 웹뷰는 반응형 웹사이트를 안드로이드 디바이스에서 띄워줄 때 유용하다.

? 웹뷰(WebView) 사용법

? 권한 설정

AndroidManifest.xml 에 인터넷 허용 권한 추가

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

사실 인터넷 권한 설정까지만 해도 상관없지만
웹을 렌더링하는 과정에서 속도, 성능을 조금이라도 높일 수 있도록 아래 권한도 함께 추가해주면 좋다.

<application
android:hardwareAccelerated="true">

? Http 사용법

안드로이드는 9버전부터 Https만 지원한다. (Http 지원 X)
따라서 Http를 사용하면 에러가 발생하게 되는데, HTTP를 사용하고 싶다면 아래 사항을 따라하면 된다.

step 1. network_security_config.xml 파일 생성

먼저 Android/res 폴더에 xml 폴더를 생성해준다.

step 2. network_security_config.xml 파일을 생성.

step 3. 파일에 아래 내용을 넣는다.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

step 4. Android Manifast.xml에 아래 내용을 추가.

<application android:networkSecurityConfig="@xml/network_security_config">

? 웹뷰 세팅 관련 코드 모음

// 웹뷰 xml 연결
    mWebView = (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"); // 웹뷰에 표시할 웹사이트 주소, 웹뷰 시작

위의 마지막 줄 코드에 .loadUrl 함수를 통해 웹뷰 객체를 얻어와서 url을 로딩할 수 있다.

? WebView 기본 사용법

위의 내용을 이해했다면 웹뷰에 웹 페이지를 띄우는 정도의 코딩은 단 몇 줄의 코드만으로도 가능하다.
 

먼저 위에서 언급했던 인터넷 허용 권한을 추가하고,
레이아웃 XML 파일 내에 WebView 화면을 설정해준다. (id값 필요)

<xml 예시>

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

<mainActivity 자바 코드 예시>

// xml에 id로 선언한 WebView와 연결
 WebView webView = findViewById(R.id.myWebview);

// onCreate() 부분에 WebView 세팅
  WebSettings settings = webView.getSettings();
  settings.setJavaScriptEnabled(true);
  webView.loadUrl("http://m.naver.com");

위의 xml과 mainActivity 예시 코드를 사용하면 괄호 안 웹 페이지가 웹뷰 화면이 뜨는 것을 볼 수 있다.

loadUrl함수를 사용하여 괄호 안 URL에 해당하는 웹 주소에 요청-응답으로 웹뷰 화면에 띄워주는 것.

※ 만약 URL이 아니라 내부 html파일을 표시하고 싶다면?

일단 앱 내부에 assets 폴더가 필요하다.
아래 이미지 사진과 같이 assets 폴더 안에 html 파일이 있어야 한다.

만드는 방법도 어렵지 않다.
app을 우클릭하여 new → folder → Assets Folder를 클릭하면 생성된다.

해당 test.html을 불러오기 위해서는 아래와 같이 경로를 적고, loadUrl함수로 매핑해주면 된다.

webView.loadUrl("file:///android_asset/test.html");

Reference

webView