안드로이드에서 WebView를 사용한 웹앱 개발

오늘은 안드로이드에서 웹앱을 만드는 방법에 대하여 기술한다.

참고 : Do it 안드로이드 앱 프로그래밍 3장 웹브라우저 사용하기

예제 파일 : SampleWebView

안드로이드 스튜디오에서 "Import project(Eclipse ADT, Gradle, etc..)" 메뉴를 사용하여 위의 예제 파일을 import 한다. 그러면 안드로이드 스튜디오 버전으로 변경된 프로젝트 SampleWebView1이 생긴다.

이 예제는 기본적으로 휴대폰에 내장된 서버 기능을 가지고 있다.

그래서 assets 디렉토리에 sample.html과 face_angry.png, face_normal.png 파일이 있다.

안드로이드 휴대폰을 사용하는 사용자는 보통 이동통신 요금을 정액제를 사용한다.

그래서 자신의 휴대폰 요금에 맞게 사용할 수 있는 패킷 데이터양이 제한이 있다.

외부의 서버에 접속을 하면 휴대폰내의 앱에서 서버에 접속하여 html, css, js, images 파일들을 통신을 통하여 가지고 와서 동작을 해야 한다. 이처럼 외부 서버를 이용하기 위해서는 서버와의 통신이 필요한 것이다.

그러나 이러한 통신의 양을 줄이는 방법이 외부 서버를 사용하지 않고 자신의 휴대폰에 서버를 구측한다면 통신의 필요성이 줄어들게 되고, 데이터 사용량이 줄어든다.

이 예제에서는 이와 같이 서버 기능을 자신의 휴대폰에 둠으로써 인터넷 사용으로 인한 데이터 사용량의 부담을 완화한 것이다.

그러나 이러한 방법은 내 휴대폰에 앱을 설치하는 순간에 서버의 기능이 고정되어 버린다. 왜냐 하면 html, css, js, images 등 모든 서버의 기능을 담당하는 것이 앱을 설치하는 순간에 다운로드되어 버리기 때문이다.

따라서 웹의 장점인 Dynamic한 부분이 제약이 생긴다. 즉, 새로운 기능을 업그레이드 하려면, 새로운 앱의 버전을 마켓에 등록을 하고 사용자가 다운로딩을 해야 하기 때문이다.

외부 서서를 사용한다면 통신에 대한 부담은 있지만 기능의 확장이나 변경은 용이하다.

그러므로 둘간의 적정한 tradeoff가 필요한다.

SampleWebView1의 동작을 기술하면 아래와 같다.

기본적으로 자신의 휴대폰에 있는 sample.html이 동작한다.

화면의 사진을 클릭하면 사진이 변경됨을 확인할 수 있다.

동작을 자세히 기술하면, 사진을 클릭하면 HTML의 <a>가 동작하여 onClick="window.sample.clickOnFace()" 함수가 동작한다. 그래서 안드로이드 MainActivity.java에 있는 clickOnFace() 메서드가 불리게 된다.

이부분은 안드로이드와 웹의 연동을 하는 부분이다.

사진을 변경하도록 이미지를 눌렀을 때, 안드로이드의 버튼의 글자를 변경해주기 위해서 웹과 앱의 연동을 해주는 것이다.

또한 안드로이드에서 Javascript와 연동하기 위하여 webView.loadUrl(javascript:changeFace('" + myNumber + "')"); 부분이 읶는 것이다. 이것을 통해 안드로이드에서 넘겨준 글자를 message에 보여주고, 사진을 변경하는 것이다.

- 웹에서 안드로이드와 연동

  + <a onClick="window.sample.clickOnFace()">  // 웹에서 안드로이드를 부르는 부분

  + public void clickOnFace() {    // 안드로이드에서 동작하는 부분

       mHandler.post(new Runnable() {

         public void run() {

           loadBtn.setText("클릭수 열기");

         }

      }

    }

- 안드로이드에서 웹으로 연동하는 부분

  + 안드로이드에서 웹으로 시작하는 부분

    String myNumber = "abcd:;    // 안드로이드에서 웹으로 넘겨주는 값;

    webView.loadUrl("javascript:changeFace('" + myNumber + "')");    // 안드로이드에서 웹의 javascript를 호출하는 부분

  + 웹의 javascript에서 동작하는 부분

    function changeFace(input) {

      document.getElementById("face").src = "face_angry.png";    // 이미지를 변경

      document.getElementById("message").innerHTML = input;  // 안드로이드에서 수신한 글자를 보여줌

    }

자신의 PC에 서버를 구축하여 URL 주소를 입력하면 휴대폰에 있는 서버로 접속하는 것이 아니라 서버로 접속을 하게된다. 그러면 서버의 프로그램을 다양하게 변경할 수 있으며, 계속 새로운 앱의 다운로드 없이 서버의 프로그램의 변경으로 새로운 콘텐츠를 제공할 수 있다.