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을 플랫폼으로 선택합니다.
2단계: WebView 위젯 설정
WebView 위젯은 다른 안드로이드 SDK 위젯처럼 동작합니다. 즉, 레이아웃 파일에서 WebView 위젯을 선언한 다음 Activity에서 접속하고 작업을 지시할 수 있습니다.
main.xml 레이아웃 파일을 여세요. 만약 IDE에서 그 파일을 만들지 않았다면 하나를 생성합니다. 그다음, LinearLayout 요소의 자식으로 WebView 위젯을 선언합니다. ID를 반드시 명시하세요. 그래야 나중에 그 위젯에 접속할 수 있습니다. 항상 그렇듯이, 너비나 높이를 깜빡하고 정의하지 않으면 앱에서 exception을 던질 것입니다. 시연하는 것이 목적이므로 android:layout_width와 android:layout_height 속성을 fill_parent로 설정해 컴포넌트가 화면 전체를 채우게 하겠습니다.
1 |
|
2 |
<?xml version="1.0" encoding="utf-8"?>
|
3 |
|
4 |
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" |
5 |
android:orientation="vertical" |
6 |
android:layout_width="fill_parent" |
7 |
android:layout_height="fill_parent" |
8 |
>
|
9 |
|
10 |
<WebView android:id="@+id/web_engine" |
11 |
android:layout_width="fill_parent" |
12 |
android:layout_height="fill_parent" |
13 |
/>
|
14 |
</LinearLayout>
|
3단계: 안드로이드 Manifest에서의 인터넷 승인 요청
WebView 위젯에서 URL을 로딩하려면, AndroidManifest.xml에서 인터넷에 접속하도록 승인을 요청하고 있는지 확인해야 합니다.
파일을 열고, 다음(여섯 번째 줄)과 같이 uses-permission 요소를 선언하세요. 그 요소에서 android:name 속성값으로 android.permission.INTERNET을 명시하면 됩니다.
1 |
|
2 |
<?xml version="1.0" encoding="utf-8"?>
|
3 |
|
4 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" |
5 |
package="com.webkitdemo"> |
6 |
|
7 |
<uses-permission android:name="android.permission.INTERNET" /> |
8 |
|
9 |
<application android:icon="@drawable/icon" android:label="WebKitDemo"> |
10 |
|
11 |
<activity android:name=".WebKitDemo"> |
12 |
<intent-filter>
|
13 |
<action android:name="android.intent.action.MAIN"/> |
14 |
<category android:name="android.intent.category.LAUNCHER"/> |
15 |
|
16 |
</intent-filter>
|
17 |
</activity>
|
18 |
</application>
|
19 |
</manifest>
|
만약 여러분이 지금 안드로이드 에뮬레이터에서 애플리케이션을 실행하면, 비어 있는 하얀 화면이 보일 것입니다. 왜냐고요? 아직 WebView에게 무엇을 화면에 띄우라고 지시하지 않았잖아요. 다음 내용에서 그 지시를 할 것입니다.
4단계: 웹 페이지 로딩하기
main activity(이 경우에 com.webkitdemo.WebKitDemo)를 열고 아래 코드를 onCreate() 메서드 안에 넣습니다.
1 |
|
2 |
WebView engine = (WebView) findViewById(R.id.web_engine); |
3 |
engine.loadUrl("http://mobile.tutsplus.com"); |
위의 코드는 리소스 ID를 통해 WebView 위젯에 접속해서 loadUrl()을 부릅니다. 에뮬레이터에서 앱을 실행하고 결과를 보세요. 화면에서 여러분이 현재 연결한 사이트가 보여야 해요!
5단계: 커스텀 마크업 렌더링하기
다음에는 loadUrl() 요청을 loadData()로 바꿔보겠습니다. loadData()는 3개의 인수를 취합니다.
- String htmlData
- String mimeType
- String encoding
engine.loadUrl() 줄을 주석 처리하고 아래 코드를 그 아래 삽입해 주세요.
1 |
|
2 |
String data = "<html>" + |
3 |
"<body><h1>Yay, Mobiletuts+!</h1></body>" + |
4 |
"</html>"; |
5 |
engine.loadData(data, "text/html", "UTF-8"); |
컴파일하고 에뮬레이터에서 애플리케이션을 재시작하세요. 그러면 화면이 아래와 같이 보입니다.
이론적으로는 다양한 데이터 유형을 mime-type과 같이 이 메서드로 통과하게 할 수 있습니다. 하지만 여러분은 text/html과 UTF-8 인코딩을 가장 많이 사용할 것입니다. 여러분이 강력한 웹 엔진인 WebKit을 사용하고 있다는 점을 잊지 마세요. 매뉴얼이나 화면에 보여주고 싶은 무언가를 디자인할 때 CSS3와 자바스크립트 등을 활용할 수 있으니까요.
메모: WebView의 별난 점들 중에 하나는 자바스크립트가 기본적으로 비활성화된다는 사실입니다. 그 이유는 WebView에 애플리케이션을 넣을 때, 대다수의 경우 도움말이나 자바스크립트가 필요 없는 곳의 용도에 자바스크립트를 사용하기 때문입니다. 그런데도 필요하다면, 자바스크립트를 활성화하기는 참 쉽습니다.
1 |
|
2 |
|
3 |
engine.getSettings().setJavaScriptEnabled(true); |
부가 기능
위젯에는 툴바가 없다는 사실을 눈치챘을지 모르겠네요. 의도된 것입니다. 흔히 내비게이션 기능을 원하면 네이티브 웹 브라우저 앱을 실행하니까요. 물론 프로그래밍 방식으로 제어하는 방법이 있습니다. 여러분의 위젯에 있는 인스턴스에서 아래의 메서드 중에 하나를 실행해 보세요.
- reload(): 페이지 새로 고침하고 다시 렌더링하기.
- goForward(): 브라우저 내역에서 한 단계 앞으로 가기.
- goBack(): 브라우저 내역에서 한 단계 뒤로 가기.
API에서 더 많이 제공합니다. 그런데 그에 관한 내용은 이 꿀팁의 범위를 벗어나네요.
마무리
여러분은 이제 매우 유용한 안드로이드 WebView 위젯의 기본 용법을 알게 되었습니다. 애플리케이션에 쓸 "about" 웹 페이지나 사용자 매뉴얼, 모든 것을 보여주는데 위젯을 사용하면 됩니다. 이론상으로는 자바스크립트와 CSS와 HTML을 사용해 애플리케이션을 작성하고, 위젯을 이용해 애플리케이션을 화면에서 보여줄 수 있습니다. 비록 상당히 현실적이지는 않지만요. 현실적인가요?
By
