WebView를 활용한 간단한 안드로이드 브라우저 만들기

수업 목표

• 안드로이드 앱에서 WebView의 역할을 이해한다.
• WebView를 화면에 배치하고 웹 페이지를 로드하는 기본 방법을 학습한다.
• 최소한의 코드로 외부 웹 사이트(네이버)를 앱 안에서 표시할 수 있다.

---

1. WebView 개념 이해

WebView는 안드로이드 앱 내부에서 웹 페이지를 표시하기 위한 UI 컴포넌트이다.
외부 브라우저(Chrome 등)를 실행하지 않고, 앱 화면 안에서 웹 사이트를 직접 보여주는 역할을 한다.

 

 

 

 

 

 

---

2. 인터넷 권한 설정

웹 페이지는 인터넷을 통해 불러오기 때문에, 안드로이드 앱은 인터넷 사용 권한을 반드시 선언하여야 한다.

AndroidManifest.xml 수정

AndroidManifest.xml 파일을 열고 <manifest> 태그 바로 아래에 다음 한 줄을 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET"/>

---

3. 디자인 화면 열기 :레이아웃에 WebView 배치

* 초보자 단계에서는 WebView 하나만 화면에 배치하는 것이 가장 안전하다.

 

1. activity_main.xml 파일을 연다.
2. 상단 탭에서 Design 또는 Split 모드를 선택한다. Code만 보이는 상태에서는 Palette가 보이지 않는다.
3. 왼쪽에 보이는 영역이 Palette(팔레트)에서 Widgets > Webview

Palette
 └─ Widgets
     └─ WebView

 

또는 Palette 상단 검색창에 web 입력하여 바로 찾을 수 있다.

4. 마우스로 가운데 미리보기 화면으로 드래그 앤 드롭한다. 화면에 큰 사각형이 생기면 WebView가 추가된 것이다. 왼쪽 Component Tree에 WebView가 보이면 성공이다.

5. WebView 속성 설정

• id → web
• layout_width → match_parent
• layout_height → match_parent

이렇게 하면 화면 전체를 차지하는 WebView가 된다.

---

4. Kotlin 코드 작성 (MainActivity.kt)

MainActivity.kt에서 다음 순서로 코드를 작성한다.

1. 화면에 있는 WebView를 id로 연결한다.
2. WebViewClient를 설정하여 웹 페이지가 앱 안에서 열리도록 한다.
3. JavaScript 사용을 허용한다.
4. 웹 주소(URL)를 로드한다.

이 네 단계는 WebView 사용의 기본 공식이다.

WebView 연결 → WebViewClient 설정 → JavaScript 허용 → URL 로드

package com.example.sample_webview

import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. 레이아웃에 있는 WebView를 불러온다
        val web: WebView = findViewById(R.id.web)

        // 2. 웹 페이지가 앱 안에서 열리도록 설정한다
        web.webViewClient = WebViewClient()

        // 3. JavaScript 사용을 허용한다
        web.settings.javaScriptEnabled = true

        // 4. 네이버 웹 페이지를 불러온다
        web.loadUrl("https://www.naver.com")
    }
}

val web: WebView = findViewById(R.id.web)

→ XML에 있는 WebView를 Kotlin 코드에서 사용하기 위해 연결한다.

web.webViewClient = WebViewClient()

→ 링크를 눌렀을 때 외부 브라우저로 이동하지 않고 앱 안에서 열리게 한다.

web.settings.javaScriptEnabled = true

→ 네이버와 같은 사이트는 JavaScript를 사용하므로 이를 허용한다.

web.loadUrl("https://www.naver.com")

→ 실제로 웹 페이지를 로드하는 명령이다.

---

실행 결과

앱을 실행하면 다음이 확인되어야 한다.

• 흰 화면이 아닌 네이버 웹 페이지가 표시된다.
• 주소 입력 없이 자동으로 네이버가 열린다.

이 상태면 이번 회차 목표는 달성이다.