[Android] 안드로이드 앱 내 웹뷰(Webview) 구현하기

헬로월드! 김컴공입니다.

오늘은 하이브리드 앱을 구현하기 위한 기초로, 안드로이드 앱 내에서 웹 페이지를 띄우는 작업을 해보겠습니다.

 

안드로이드 내 웹뷰는 웹페이지의 자바스크립트가 앱의 API를 호출하여 웹 기반 애플리케이션에 Android API 를 제공할 수 있습니다.

하지만 대신 탐색 컨트롤이나 주소표시줄 등 완전히 개발된 웹브라우저의 기능은 전혀 포함되지 않습니다.

검색창이 없는 웹브라우저라고 생각하시면 되겠습니다.

 

저같은 경우에는 Vue 로 만든 웹 어플리케이션을 안드로이드 어플리케이션에서 볼 수 있게 하려고 합니다. 따라서 제 작업을 기준으로 설명을 드리도록 하겠습니다.

 

우선 안드로이드 스튜디오로 안드로이드 프로젝트를 하나 만들어 주세요. 그 후에

 

activity_main.xml 이라는 레이아웃 XML 파일에 위 사진과 같이 다음 웹뷰 코드를 추가하겠습니다.

 

 

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

 

 

그리고 MainActivity.java 의 MainActivity 클래스에서 웹뷰를 보이게 하도록 코드를 짜겠습니다.

아래 코드를 onCreate 함수 위에 입력해주세요. 이 함수를 호출하기 전에 먼저 선언을 하고 이 함수 안에서 선언한 변수를 호출 할 예정입니다.

 

private WebView webview;
private String url = "접속할 주소";

 

url 변수에는 접속할 웹 주소를 입력하시면 됩니다. 저 같은 경우에는 보여줄 웹 어플리케이션의 주소를 입력했습니다.

그 후 onCreate 함수 내에서 setContentView(R.layout.activity_main); 이후로 다음과 같은 코드를 입력해주세요.

 

webview = (WebView)findViewById(R.id.webview);
webview.loadUrl(url);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient());

 

1번째 코드는 아까 위에서 선언했던 웹뷰를 이용해서, xml 에서 생성했던 웹뷰를 지정한 것이고,

2번째 코드는 입력한 url 주소를 웹뷰에서 보여주는 것입니다.

 

기본적으로 자바스크립트는 웹뷰에서 사용이 불가능하게 되어있습니다.

3~4번째 코드는 우리가 선언한 웹뷰를 설정하는 것으로, 자바스크립트가 허용되도록 합니다.

 

5번째 코드를 입력함으로써 전체 화면 지원 사용을 설정할 수 있습니다. 이 클래스는 웹뷰가 새로운 창을 띄우거나 자바스크립트를 통해 생성된 대화상자를 이용자에게 전달하는 등의 권한을 필요로 할 때도 호출 합니다. 웹크롬클라이언트에 관련된 문서가 있으니 참고하시기 바랍니다. (developer.android.com/reference/android/webkit/WebChromeClient)

 

 

 

이렇게 코드를 짰다하더라도, 이 어플리케이션에 인터넷 액세스 권한이 없다면 웹뷰가 정상적으로 동작하지 않습니다.

이 어플리케이션의 매니페스트(AndroidManifestm.xml) 로 가서, <manifest> 내에 다음과 같은 인터넷 액세스 권한 허용 코드를 입력합니다.

 

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

 

자 이제 빌드해서 안드로이드 가상머신에 실행시켜보겠습니다.

 

 

오류 메세지가 뜨는 것을 확인했습니다.

현재 저는 제가 호스팅하고 있는 웹 어플리케이션을 url 변수로 넣어놓았기 때문에, 보안이 적용된 https 가 아닌 http 주소이기 때문에 다음과 같은 오류가 발생하였습니다. (https:// 로 시작하는 주소를 넣은 분들은 작동이 될 겁니다.)

에러메세지에도 나와있듯, CLEARTEXT 에 대한 액세스 권한 허용이 필요한 듯 보입니다. 따라서 아까 인터넷 액세스 권한을 입력했던 안드로이드 매니페스트 파일로 다시 돌아가서, <application> 내에 다음과 같은 코드를 입력합니다.

 

<application>
	android:usesCleartextTraffic="true"
    ...
</application>

 

그렇다면 정상적으로 http 주소도 접속할 수 있게 됩니다.

이렇게 안드로이드 앱 내에서 웹뷰를 구현하는 것을 마치겠습니다. 오류 사항이나 문제점이 발견되면 댓글 부탁드리겠습니다.