Android의 WebView를 사용할 때, 클라이언트 에러를 추적하는 방법 정리.

WevView를 세팅해보자.

우선은 레이아웃을 만들어보자. 웹뷰를 액티비티 한 가득 띄워놓을거니까, 아래처럼 xml파일을 작성하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

xml파일의 작성이 끝났다면, 이번에는 Activity를 만들 차례다. 파일을 하나 생성해서 Activity를 상속받은 클래스를 하나 만들어주고, 아까전에 생성한 xml파일을 setContentView로 때려박아주자. 그 뒤 webView의 loadUrl을 호출해주면, 웹 뷰를 사용할 준비는 대충 끝났다.

class MainActivity: Activity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    //레이아웃 세팅
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_webview)

    //URL 로드
    webView.loadUrl("https://load.url")
  }
}

이제 빌드 후에 앱을 실행시켜보면, 넘겨준 주소가 액티비티에 한가득 표시되는 걸 볼 수 있을 것이다.

뭐?! 버튼이나 이벤트가 동작 안한다구?!

당연한 이야기다. android.webkit.WebSetting 문서의 내용을 확인해보자. WebView의 javascriptEnabled 기본값은 false이므로, Javascript를 사용하는 일부 동작은 동작하지 않는다. WebView.getSettings() 메서드를 호출하여 WebSetting을 받아온 후, setJavascriptEnabled(true)를 호출해주면 Javascript가 동작하는 걸 확인할 수 있다. 코틀린을 사용하는 경우에는 WebView.settings.javascriptEnabled값을 직접 참조하여 true로 변경해주면 된다. (setJavascriptEnabled(true)를 호출하면 AndroidStudio에서 노란줄을 그어주며 변경해달라고 한다.)

이와 비슷한 녀석으로는 domStorageEnabled이 있는데, localStorage처럼 클라이언트에 데이터를 저장하는 기능에 영향을 미친다. 물론 기본값은 false이며, 웹뷰에 띄운 페이지가 localStorage를 사용하는 경우 스크립트 에러가 발생한다. 심한 경우에는 하얀색 페이지만 표시되므로 주의. 자바를 사용할 때는 setDomStorageEnabled(true)를 호출해주면 되고, 코틀린을 사용할 때는 WebView.settings.domStorageEnabled를 직접 참조하여 값을 true로 변경해주자.

PC나 모바일 브라우저에서는 이상이 없는데, WebView에서만 에러가 뜨는데...?!

WebView에서만 에러가 발생하는 경우가 있다. 위에서 언급한 WebView.settings.javascriptEnabled나 WebView.settings.domStorageEnabled로 인해 발생하는 경우도 있고, 개인이 발급한 SSL 인증서를 사용하는 경우에도 에러가 발생한다. 이런 경우에는 android.webkit.WebViewClient의 onReceivedError, onReceivedHttpError, onReceivedSslError가 도움이 된다. android.webkit.WebViewClient 페이지의 내용을 확인해보자.

리소스를 로딩하다가 에러가 발생하는 경우에는 onReceivedError가, Http 에러가 발생한 경우에는 onReceivedHttpError에서 처리된다. 마찬가지로 SSL 에러가 발생한 경우에는 onReceivedSslError에서 처리된다. 이 아이들을 사용하기 위해서는 android.webkit.WebViewClient를 상속받은 WebViewClient를 만들고, WebView.setWebViewClient를 사용하여 WebView에 WebViewClient를 넘겨주면 된다. 역시 코틀린에서는 WebView.webViewClient를 직접 참조하여, 새로 생성한 WebViewClient의 오브젝트를 넘겨주면 된다.

백문이 불여일견! 아래의 샘플 코드를 살펴보자. 단순히 필요한 메서드만 오버라이딩한 클래스이므로, 코틀린을 사용하여 작성한 코드지만 코틀린을 모르는 사람이 봐도 딱히 문제는 없다.

class NewWebViewClient: WebViewClient() {
  override fun onReceivedHttpError(
    view: WebView?,
    request: WebResourceRequest?,
    errorResponse: WebResourceResponse?
  ) {
    super.onReceivedHttpError(view, request, errorResponse)
  }

  override fun onReceivedError(
    view: WebView?,
    request: WebResourceRequest?,
    error: WebResourceError?
  ) {
    super.onReceivedError(view, request, error)
  }

  override fun onReceivedSslError(
    view: WebView?, handler: SslErrorHandler,
    error: SslError?
  ) {

  }
}

...

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity)

    webView.webViewClient = NewWebViewClient()
  }

...

단순히 WebViewClient를 상속받는 NewWebViewClient를 생성해준 뒤, onCreate에서 WebView에 할당해줬다. 이제 WebView에서 에러가 발생하면, 세 개의 메소드 중 하나에서 처리되므로 브레이크를 추가하여 추적이 가능해진다.

마치며

이번에는 WebView를 설정하는 방법과 주의해야하는 사항, 그리고 WebViewClient 에러를 추적하는 방법에 대해 정리해봤다. 사실 어떻게 마무리지어야할지 잘 모르겠어서 '마치며'라는 항목을 적어봤는데, 여전히 어떻게 마무리지어야할지 잘 모르겠다. WebViewClient를 상속받아서 에러를 추적하는 방법과, javascriptEnabled, domStorageEnabled정도만 잘 기억하고 있어도, WebView를 사용하다가 발생하는 많은 문제를 해결하는 데 도움이 되지 않을까싶다.

오늘은 일단 여기까지. 다음에 더 좋은 글로 만날 수 있기를. ' ㅅ')/