웹뷰(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");