Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

안드로이드 SDK: WebKit 엔진을 이용해 WebView 넣기

by
Difficulty:BeginnerLength:ShortLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

이 꿀팁에서 WebKit 엔진을 이용해 애플리케이션에 안드로이드 WebView를 넣는 방법을 시연하겠습니다. 여러분은 외부 URL을 로딩하고, 여러분이 in-app에 제공한 커스텀 마크업을 화면에 보여주는 방법을 학습할 것입니다.

1단계: 준비

IDE에서 새 안드로이드 SDK 프로젝트를 선택하고 생성하는 작업으로 시작하겠습니다. main activity와 package root, 프로젝트 이름은 여러분이 원하는 대로 작성하세요. 호환성을 유지하도록 Android 1.6을 플랫폼으로 선택합니다.

Android WebView: Create New WebView Project With WebKit

2단계: WebView 위젯 설정

WebView 위젯은 다른 안드로이드 SDK 위젯처럼 동작합니다. 즉, 레이아웃 파일에서 WebView 위젯을 선언한 다음 Activity에서 접속하고 작업을 지시할 수 있습니다.

main.xml 레이아웃 파일을 여세요. 만약 IDE에서 그 파일을 만들지 않았다면 하나를 생성합니다. 그다음, LinearLayout 요소의 자식으로 WebView 위젯을 선언합니다. ID를 반드시 명시하세요. 그래야 나중에 그 위젯에 접속할 수 있습니다. 항상 그렇듯이, 너비나 높이를 깜빡하고 정의하지 않으면 앱에서 exception을 던질 것입니다. 시연하는 것이 목적이므로 android:layout_width와  android:layout_height 속성을 fill_parent로 설정해 컴포넌트가 화면 전체를 채우게 하겠습니다.

3단계: 안드로이드 Manifest에서의 인터넷 승인 요청

WebView 위젯에서 URL을 로딩하려면, AndroidManifest.xml에서 인터넷에 접속하도록 승인을 요청하고 있는지 확인해야 합니다.

파일을 열고, 다음(여섯 번째 줄)과 같이 uses-permission 요소를 선언하세요. 그 요소에서 android:name 속성값으로 android.permission.INTERNET을 명시하면 됩니다.

만약 여러분이 지금 안드로이드 에뮬레이터에서 애플리케이션을 실행하면, 비어 있는 하얀 화면이 보일 것입니다. 왜냐고요? 아직 WebView에게 무엇을 화면에 띄우라고 지시하지 않았잖아요. 다음 내용에서 그 지시를 할 것입니다.

4단계: 웹 페이지 로딩하기

main activity(이 경우에 com.webkitdemo.WebKitDemo)를 열고 아래 코드를 onCreate() 메서드 안에 넣습니다.

위의 코드는 리소스 ID를 통해 WebView 위젯에 접속해서 loadUrl()을 부릅니다. 에뮬레이터에서 앱을 실행하고 결과를 보세요. 화면에서 여러분이 현재 연결한 사이트가 보여야 해요!

Android Webview: Webkit Rendering

5단계: 커스텀 마크업 렌더링하기

다음에는 loadUrl() 요청을 loadData()로 바꿔보겠습니다. loadData()는 3개의 인수를 취합니다.

  1. String htmlData
  2. String mimeType
  3. String encoding

engine.loadUrl() 줄을 주석 처리하고 아래 코드를 그 아래 삽입해 주세요.

컴파일하고 에뮬레이터에서 애플리케이션을 재시작하세요. 그러면 화면이 아래와 같이 보입니다.

Android WebView: Load Custom HTML/CSS

이론적으로는 다양한 데이터 유형을 mime-type과 같이 이 메서드로 통과하게 할 수 있습니다. 하지만 여러분은 text/html과 UTF-8 인코딩을 가장 많이 사용할 것입니다. 여러분이 강력한 웹 엔진인 WebKit을 사용하고 있다는 점을 잊지 마세요. 매뉴얼이나 화면에 보여주고 싶은 무언가를 디자인할 때 CSS3와 자바스크립트 등을 활용할 수 있으니까요.

메모: WebView의 별난 점들 중에 하나는 자바스크립트가 기본적으로 비활성화된다는 사실입니다. 그 이유는 WebView에 애플리케이션을 넣을 때, 대다수의 경우 도움말이나 자바스크립트가 필요 없는 곳의 용도에 자바스크립트를 사용하기 때문입니다. 그런데도 필요하다면, 자바스크립트를 활성화하기는 참 쉽습니다.

부가 기능

위젯에는 툴바가 없다는 사실을 눈치챘을지 모르겠네요. 의도된 것입니다. 흔히 내비게이션 기능을 원하면 네이티브 웹 브라우저 앱을 실행하니까요. 물론 프로그래밍 방식으로 제어하는 방법이 있습니다. 여러분의 위젯에 있는 인스턴스에서 아래의 메서드 중에 하나를 실행해 보세요.

  • reload(): 페이지 새로 고침하고 다시 렌더링하기.
  • goForward(): 브라우저 내역에서 한 단계 앞으로 가기.
  • goBack(): 브라우저 내역에서 한 단계 뒤로 가기.

API에서 더 많이 제공합니다. 그런데 그에 관한 내용은 이 꿀팁의 범위를 벗어나네요.

마무리

여러분은 이제 매우 유용한 안드로이드 WebView 위젯의 기본 용법을 알게 되었습니다. 애플리케이션에 쓸 "about" 웹 페이지나 사용자 매뉴얼, 모든 것을 보여주는데 위젯을 사용하면 됩니다. 이론상으로는 자바스크립트와 CSS와 HTML을 사용해 애플리케이션을 작성하고, 위젯을 이용해 애플리케이션을 화면에서 보여줄 수 있습니다. 비록 상당히 현실적이지는 않지만요. 현실적인가요? 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.