[Android] 웹뷰(webview) 디버깅(debugging) 방법.

업무의 배경:

 기존의 네이티브로 개발 하던 앱을 웹앱 및 하이브리드 앱의 형태로 앱을 개발하기 시작했다.

웹앱 및 하이브리드 앱은 안드로이드의 웹뷰를 기반으로 웹페이지를 호출하여 개발 하게 된다. 따라서, 안드로이드의 웹뷰 환경에서 디버깅을 할 필요가 있다.

 

업무의 목적:

안드로이드 네이티브로 제공하는 웹뷰(WebView)를 PC의 크롬에서 디버깅 하는 방법[1].

 

웹뷰 디버깅 방법:

안드로이드 소스코드

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true); // 웹뷰의 디버깅 모드 활성화
}

PC의 크롬 접근 방법

chrome://inspect#devices -> 크롬에서 접속

 

용어 정리:

* 반응형 웹: 반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

* 웹앱: 웹을 기반으로 모바일의 특징을 갖게 만든것을 말한다. 웹을 기반으로 했기 때문에 다운로드 업그레이드가 필요없다.

 

* 네이티브 앱(모바일 앱): 스마트폰, 태블릿 PC 등 모바일 장치에서 실행되는 응용 소프트웨어이다.

* 하이브리 앱: 모바일 웹 사이트를 네이티브 앱 안으로 임베드하며, 아파치 코도바와 Ionic, 또는 Appcelerator Titanium과 같은 하이브리드 프레임워크를 사용할 수 있다. 네이티브 앱의 특정 이점을 그대로 유지하면서(예: 장치 하드웨어로의 직접 접근, 오프라인 작업, 앱 스토어 표시) 웹 기술(기존 모바일 웹 사이트로부터 코드를 직접 복제할 수 있음)을 사용하여 개발할 수 있게 한다.

 

참고자료:

[1] 안드로이드 웹앱 디버깅: developer.android.com/guide/webapps/debugging?hl=ko

[2] 위키 웹 애플리케이션: ko.wikipedia.org/wiki/웹_애플리케이션

[3] 네이티브앱, 웹앱, 하이브리드 앱: www.smartskin.co.kr/marketing/management/list_5/management_05.pdf