안드로이드 WebView에서 자바스크립트 활성화하는 방법 (예제 코드 포함)

안드로이드 앱 내부에서 웹 페이지를 표시하려면 WebView 위젯을 사용합니다. 하지만 기본 상태의 WebView는 보안상의 이유로 자바스크립트가 비활성화되어 있어, 동적인 웹 콘텐츠가 정상적으로 동작하지 않습니다. 이 글에서는 WebView에서 자바스크립트를 활성화하는 방법을 단계별 예제와 함께 살펴보겠습니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File → New Project 메뉴로 이동한 후, 새 프로젝트 생성에 필요한 모든 세부 정보를 입력하여 프로젝트를 만듭니다.

2단계: 레이아웃 파일 수정 (activity_main.xml)

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:gravity = "center"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity"
   android:orientation = "vertical">
   <WebView
      android:id = "@+id/web_view"
      android:layout_width = "match_parent"
      android:layout_height = "match_parent" />
</LinearLayout>

위 코드에서는 google.com 페이지를 화면에 표시하기 위해 WebView 위젯을 배치했습니다. WebView는 부모 레이아웃의 전체 크기를 차지하도록 설정되어 있습니다.

3단계: MainActivity.java 코드 작성

src/MainActivity.java 파일에 아래 코드를 추가합니다.

package com.example.myapplication;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
   @RequiresApi(api = Build.VERSION_CODES.P)
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      WebView web_view = findViewById(R.id.web_view);
      web_view.loadUrl("https://www.google.com/");
      web_view.requestFocus();
      web_view.getSettings().setLightTouchEnabled(true);
      web_view.getSettings().setJavaScriptEnabled(true);
   }
}

핵심은 바로 이 부분입니다. web_view.getSettings().setJavaScriptEnabled(true) 호출을 통해 WebView에서 자바스크립트 실행을 허용합니다. 이 설정이 없으면 웹 페이지의 버튼 클릭, 동적 콘텐츠 로딩 등 대부분의 인터랙션이 동작하지 않습니다. 또한 loadUrl() 메서드로 표시할 웹 페이지 주소를 지정하고, setLightTouchEnabled(true)로 터치 반응성을 높였습니다.

4단계: 인터넷 권한 추가 (AndroidManifest.xml)

AndroidManifest.xml 파일에 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "https://schemas.android.com/apk/res/android"
    package = "com.example.myapplication">
    <uses-permission android:name = "android.permission.INTERNET"/>
    <application
        android:allowBackup = "true"
        android:icon = "@mipmap/ic_launcher"
        android:label = "@string/app_name"
        android:roundIcon = "@mipmap/ic_launcher_round"
        android:supportsRtl = "true"
        android:theme = "@style/AppTheme">
        <activity android:name = ".MainActivity">
            <intent-filter>
                <action android:name = "android.intent.action.MAIN" />
                <category android:name = "android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
   </application>
</manifest>

WebView로 외부 웹 페이지를 불러오려면 반드시 android.permission.INTERNET 권한이 필요합니다. 이 권한이 누락되면 net::ERR_INTERNET_DISCONNECTED 오류가 발생하며 페이지가 로드되지 않습니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행할 모바일 기기를 선택하면 해당 기기에 앱이 설치되고, 아래와 같이 WebView에 구글 홈페이지가 정상적으로 표시됩니다.

마무리

정리하면, 안드로이드 WebView에서 자바스크립트를 활성화하는 과정은 다음과 같습니다.

① 레이아웃에 WebView 위젯 추가 → ② setJavaScriptEnabled(true) 설정 → ③ 매니페스트에 인터넷 권한 선언.
이 세 가지만 지키면 앱 안에서도 일반 브라우저처럼 동적인 웹 콘텐츠를 문제없이 표시할 수 있습니다.