[3기 강남 백정의] Android Web View에 관하여.

안드로이드 앱 개발시에 웹뷰를 사용하여 개발할 때 오픈 된 라이브러리를 사용하지 않고 안드로이드 라이브러리를 가지고 연동하는 방법과 웹뷰의 HTML과 CSS에 대해 소개해 보겠습니다.

웹뷰는 특정상황의 앱을 제작하는데 적합한데 간단한 특징으로는 User의 이벤트를 모두 Web View를 통해 받고, Front단 모든 로직이 JavaScript  HTML로 가능하기 때문에 API 데이터의 변경이나 다른 API로 대체가 매우 용이합니다. 레이아웃과 디자인, 이벤트에 대한 반응 모두 Web기반이므로 콘텐츠 추가나 디자인 변경에 유연하게 대응할 수 있습니다.

웹뷰와 연동하는 방법은 안드로이드와 자바스크립트 간에 서로 function을 호출하는 방식으로 합니다.

다음과 같은 방식으로 안드로이드와 자바스크립트 사이에 세팅을 해둡니다. 중간에서 연동을 담당하는 내부 

프레임웍을 만들지 않는다면 첫번째 인자를 Token으로 해서 안드로이드에서 분기가 되도록 합니다.

기본적으로 연동을 할 경우 자바스크립트의 alert function을 호출할 수 없기 때문에 다음과 같이 안드로이드에서 

alert function을 대체하여 안드로이드의 dialog를 띄워주도록 합니다.

웹뷰에서 기존의 웹브라우저와 다른점을 몇가지 보면

-  Position: fixed; position 속성을 fixed로 설정 하였을 때, 레이어의 우선순위(Depth)부분이 오류가 발생하는 

   경우가 생긴다. fixed는 최대한 피하고 absolute를 활용합니다.

-  페이지의 Depth가 깊어지고, Child tag가 많아질 경우 웹 뷰에서 이벤트를 인식하지만 화면에 바로 나타내지 

   못하는 버그가 생깁니다.

   안드로이드 웹뷰 테스트 전에 브라우저에서 영역이 제대로 잡히는지 확인하도록 합니다.

   중첩되는 Position 속성을 피하고 해결되지 않는다면 이벤트를 받을 대상에만 Position속성을 주도록 합니다.

-  Body나 HTML에서 overflow:hidden을 주고 특정 div태그에서 스크롤을 줄 경우 화면이 잘리거나 스크롤을 

   올려도 제대로 표시되지 않는 컨텐츠가 발생 할 경우에는 Global 이벤트를 주어서 다음과 같이 해결합니다.

   webview.invalidate();

-  Position: relative; child tag에 postion 속성에 absolute나 relative를 적용했을 경우 감싸는 클래스에 

  relative를 적용해야 영역이 의도한대로 개발이 가능합니다. 화면에서 이벤트를 감지하지 못할 경우 Z-index로 

  해결 할 수 있지만 너무 많이 사용 할 경우 레이어 depth의 오류가 발생합니다.

-  태그의 순서와 Table 등의 태그를 활용하여 Z-index를 줄입니다.

-  최적화된 화면을 위해 화면 해상도의 경우 meta태그를 이용하여 device-width에 맞추고 비율을 

  1.0으로 고정시킵니다.

  <link rel="stylesheet" href="css/common.css" media="screen" />

  <link rel="stylesheet" href="css/iphone4s.css" media="only screen and (device-width:320px) 

  and  (device-height:480px)" />

  <link rel="stylesheet" href="css/ipad_1.css" media="only screen and (device-width:768px)

   and (device- height:1024px)" />

  <link rel="stylesheet" href="css/galaxy_note.css" media="only screen and (device-width:800px) 

  and (device-height:1280px)" />

 

-  이외에도 외부 api등을 연동 할 경우 만약 facebook등의 api연동을 할 경우 간단한 api경우 웹 연동을 

  하지만 앱 내부 정보와 연동을 할 경우 가능하다면 외부 kit을 사용하여서 하는 것이 좋습니다. 

  예를 들어 facebook api와 연동할 경우 

  웹 뷰를 레이아웃으로 사용하였으므로 SNS연동은 안드로이드에서 담당하게 되고 Facebook안드로이드 SDK 

  설치 뒤 웹뷰와 통신을 주고 받도록 합니다. 웹뷰와 연동 시에 MainActivity에서 Facebook 제공 API 의 

  Function을 호출하도록 합니다.

  로그인 상태 저장 및 아이디 비번 관리는 Facebook sdk로 관리가 가능하므로 따로 그 정보만을 저장하는 

  DB나 Table을 만들지 않습니다.

  사진이나 정보가 Facebook에 업로드 될 때 인코딩 등에 코드가 필요없으며 로딩 또한 API를 활용합니다. 

  로딩 시나 로딩 완료 후에 호출되는 Callback function 이 존재합니다.

  Facebook API를 활용하여 이미지를 전송 할 때 외부 이미지의 경우 파일을 저장한뒤 전송하는 function을 

  활용하고 이미 촬영한 이미지의 경우 내부 메모리에 저장되어 있으므로 전송하는 function만 활용합니다.

출처 : 본인 제작