[Android] WebView Bridge 구현해보기

yejuice·2024년 5월 24일

WebView, WebView Bridge 란 무엇인가?

WebView란 Android Application에서 웹 콘텐츠를 볼 수 있는 컴포넌트이다.

쉽게 말해, WebView는 모바일 환경(Android)에서 pc버전 웹을 볼 수 있는 기능이라고 생각하면 된다.

내가 WebView 내에서 시행한 동작들은 웹 내에서만 동작할 뿐, 그 동작들이 실제 안드로이드 어플리케이션에 직접적인 영향을 주는 것은 아니다.

그런데 내가 안드로이드 Native 코드와 웹 콘텐츠 간에 어떠한 데이터를 주고받고 싶거나, 웹에서 발생한 버튼 클릭과 같은 컨트롤 이벤트를 네이티브 코드에서 처리하고 싶을 때 이 WebView Bridge 를 사용한다.
(네이티브 코드 -> 웹, 웹 -> 네이티브 코드 양방향으로 가능하다.)

따라서 이 WebView Bridge를 통해
웹 버튼을 누르면 Toast Message가 뜨도록 구현해볼 것이다.

구현

IDE : Android Studio Flamingo 버전 사용
Language : Java

1. 새 프로젝트 생성

1) IDE 맨 왼쪽 상단 File -> New -> New Project

2) Phone and Tablet -> Empty Views Activity -> Next
⚠️ 본래는 Empty Activity를 선택하지만, 안드로이드 스튜디오 플라밍고 버전 이상부터는 다른 Language 선택이 불가능하기 때문에 Empty Views Activity를 선택하였다.
참고 : https://arer.tistory.com/242

Name : 자신이 입력하고 싶은 프로젝트명을 입력 입력하면 Package name에도 자동 생성된다.
Save location : 프로젝트를 저장하고 싶은 경로를 지정.
Language : Java 선택
Minimum SDK : 원하는 버전을 선택한다. 나는 가장 호환성이 좋은 버전을 선택하였다.

Minimum SDK는 애플리케이션이 실행될 수 있는 최소 안드로이드 버전이다.
밑에 Your app will run on approximately 97.4% of devices 라는 문구가 뜨는데, "이 버전을 선택하면 약 97.4프로의 기기에서 작동될 거에요~" 라는 뜻이다. 대략 몇 프로의 기기에 해당 버전이 호환되냐 라고 생각하면 될 것 같다.

2. AndroidManifest.xml

Bridge 사용 권한 추가

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

3. activity_main.xml

WebView 추가

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

<!-- 추가 부분 -->
<WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

4. html 파일 안드로이드 로컬에서 열기

1) Android -> Project 선택

2) app\src\main -> New -> Folder -> Assets Folder

Finish 클릭

3) html 파일 assets 폴더에 추가

Refactor 클릭

*Login.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .login-container input[type="button"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .login-container input[type="button"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="login-container">
    <h2>로그인</h2>
    <input type="text" placeholder="사용자ID" />
    <input type="password" placeholder="비밀번호" />
    <input type="button" value="로그인" onClick="showAndroidToast('로그인 성공하였습니다~!')" />
</div>

<script type="text/javascript">
        function showAndroidToast(toast) {
            Android.showToast(toast); // Native Control
        }
    </script>
</body>
</html>

5. MainActivity.java

WebView 사용해서 index.html 로드
안드로이드에서 JavaScript 인터페이스를 통해 JavaScript와 상호작용
-> 웹 페이지에서 버튼 클릭 시 안드로이드에서 Toast Message 띄움

public class MainActivity extends AppCompatActivity {

    // WebView 객체 선언
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);

        // JavaScript 활성화
        webView.getSettings().setJavaScriptEnabled(true);

        // JavaScript 인터페이스 추가
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");

        // Asset 폴더의 HTML 파일 로드
        webView.loadUrl("file:///android_asset/index.html");

    }

    // WebView와 상호작용하는 인터페이스 정의
    public class WebAppInterface {
        Context mContext;

        WebAppInterface(Context c) {
            mContext = c;
        }
		
        // 웹브라우저에서 호출되는 메서드
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }