[JAVA][Android] webView를 사용하여 앱에서 웹페이지 띄우기

앱 내에서 웹 페이지를 표시 할 때 사용하며

주로 모바일 앱에서 간단한 웹 컨텐츠를 임베드하거나, 특정 기능을 웹 페이지 형식으로 제공 할 때 유용합니다.

 

그럼 왜 사용할까요?

 1. 웹 컨텐츠의 재사용: 이미 만들어진 웹 페이지를 그대로 앱에 사용 할 수 있습니다.

예를들어서 무신사 홈페이지, 카카오톡에서 채팅에 주소 링크를 받고 해당 링크를 눌러 홈페이지를 열때 등.

2. 웹과 앱의 기능 통합: 웹 서비스가 이미 존재하거나 앱의 일부 기능을 웹으로 구현 했다면 이를 webView에 띄워서 사용 할 수 있습니다.

3. 업데이트의 용이: webView에 표시할 웹 컨텐츠는 서버에서 관리 하기 때문에 앱 자체를 업데이트 하지 않아도 컨텐츠 변경이 가능합니다.

4. 개발 시간 절약: 별도의 앱UI(네이티브UI) 를 구현하지 않아도 웹 페이지를 표시 할 수 있어서 빠르게 만들 수 있습니다.

 

활용사례는

1. 로그인 또는 회원가입 페이지: 간단한 인증 기능을 웹페이지로 구현하고 webView로 띄울수 있습니다.

2. 결제 페이지 API: 특정 결제 모듈이 웹페이지로 제공 되는 경우 앱 내에서 webView로 띄워 결제 기능을 사용 할 수 있습니다.

3. 간단한 서비스 페이지: 이벤트 페이지나 블로그 게시물 처럼 간단히 앱에 연동 할 서비스형 페이지가 있다면 효율적으로 사용이 가능합니다.

 

주의점은?

1. 보안이 중요한 기능이라면 https 프로토콜을 통한 안전한 통신을 유지하고, 필요 할 경우 웹과 앱 간의 데이터 전송을 확인 할 필요가 있습니다.

 

먼저 인터넷 권한을 추가합니다.

<!-- 인터넷 권한 추가 -->
<uses-permission android:name="android.permission.INTERNET" />

 

MainActivity

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    WebView webView;
    EditText urlInput;
    TextView pageTitle;
    Button loadButton;
    Button backButton;

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

        // UI 요소 초기화
        webView = findViewById(R.id.webView);
        urlInput = findViewById(R.id.urlInput);
        pageTitle = findViewById(R.id.pageTitle);
        loadButton = findViewById(R.id.loadButton);
        backButton = findViewById(R.id.backButton);

        // WebView 설정
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // WebViewClient 설정 (외부 브라우저로 열리지 않게 설정)
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // 페이지가 로드된 후, 타이틀 가져오기
                pageTitle.setText(view.getTitle());
            }
        });

        // URL 로드 버튼 설정
        loadButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String url = urlInput.getText().toString();
                if (!url.startsWith("http://") && !url.startsWith("https://")) {
                    url = "https://" + url;
                }
                webView.loadUrl(url); // URL 로드
            }
        });

        // 뒤로가기 버튼 설정
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (webView.canGoBack()) {
                    webView.goBack(); // WebView에서 이전 페이지로 이동
                }
            }
        });
    }

    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

 

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">


    <EditText
        android:id="@+id/urlInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="로드할 인터넷주소를 입력하세요"
        android:inputType="textUri" />

    <Button
        android:id="@+id/loadButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="검색하기" />
    <TextView
        android:id="@+id/pageTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="웹뷰에서 실행되는 홈페이지"
        android:textStyle="bold"
        android:padding="8dp"/>

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <Button
        android:id="@+id/backButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="뒤로가기" />
</LinearLayout>

 

웹 뷰 형태 홈페이지 (예제) 복사/붙여넣기 주소

 

1. 쿠팡: https://www.coupang.com/?src=1042016&spec=10304903&addtag=900&ctag=HOME&lptag=%EC%BF%A0%ED%8C%A1&itime=20241111223910&pageType=HOME&pageValue=HOME&wPcid=17031409906945926788276&wRef=www.google.com&wTime=20241111223910&redirect=landing&gclid=Cj0KCQiA88a5BhDPARIsAFj595ghyOUYFFScPlEuSzB7thr79BsyVtqWUg-c1hCnn5idHyrQc0E8L5waAkXPEALw_wcB&mcid=7114a736911e4ddb99ab26e01e6ce018&network=g

 

2. 무신사: https://www.musinsa.com/main/musinsa/recommend

 

3. 팀노바 오픈카페: https://cafe.naver.com/teamnovaopen