[Web] 웹뷰(WebView)

이번 포스팅에서는 애플리케이션 안에서 웹 콘텐츠를 표시하기 위한 컴포넌트인 웹뷰(WebView)에 대하여 공부를 해보고자 한다.

 

---

WebView란

WebView는 안드로이드에서 제공하는 View 클래스 중 하나로, 웹 페이지를 표시할 수 있는 뷰를 말한다.
즉, 안드로이드 애플리케이션 내에서 웹 페이지를 표시할 수 있는 기능을 제공한다.

 

WebView는 안드로이드의 내장 브라우저 기능을 활용하여 동작한다.
웹 페이지 로딩, 네트워크 통신, 캐시 관리, 자바스크립트 실행 등의 기능을 지원하며, WebView에서 사용하는 내장 브라우저 엔진은 안드로이드 버전에 따라 다르게 지정된다.
안드로이드 4.4 KitKat 이전까지는 WebKit 엔진을 사용했지만, 이후에는 Chromium 엔진을 사용하고 있다.

 

안드로이드에서 WebView를 사용하면 다음과 같은 기능을 구현할 수 있다.

1. 앱 내에서 웹 페이지를 표시
2. 앱 내에서 HTML, CSS, JavaScript 등의 웹 기술을 사용하여 UI를 구성
3. 서버에서 HTML을 생성하여 WebView에 표시하거나, 로컬에 저장된 HTML 파일을 표시

 

 

WebView는 다양한 설정 옵션을 제공하여 웹 페이지 표시에 대한 세부적인 제어가 가능하다.
또한, WebViewClient와 WebChromeClient를 상속받아서 사용자가 이벤트를 처리할 수 있도록 한다.

 

WebView를 사용하면 앱 내에서 간단한 웹 브라우저를 구현할 수 있으며, 특히 웹 기술과 네이티브 앱 기술을 결합하여 높은 수준의 사용자 경험을 제공하는 하이브리드 앱을 만들 수 있다.

 

iOS에서 웹뷰는 UIWebView와 WKWebView 두 가지가 있다.

UIWebView는 iOS 2.0부터 사용 가능한 오래된 웹뷰이며, WKWebView는 iOS 8부터 사용 가능한 최신 웹뷰이다.
WKWebView는 UIWebView보다 빠르고 안정적인 성능을 보이며, 더 나은 자바스크립트 처리와 웹페이지 로딩을 지원한다.

 

---

WebView를 사용하는 이유

1. 앱과 웹의 통합 앱에서 웹뷰를 사용하면 앱과 웹을 통합할 수 있다.
   예를 들어, 앱에서 웹뷰를 사용하여 웹 페이지를 로드하고, 앱에서 사용자 인증 정보를 웹에 전달하여 로그인하거나 웹 상의 기능을 사용할 수 있다.
   
   
2. 앱 개발 시간 단축 앱에서 웹뷰를 사용하면 앱의 개발 시간을 단축할 수 있다.
   예를 들어, 앱에서 특정 웹 페이지를 표시하는 경우, 이를 직접 구현하기보다는 웹뷰를 사용하여 해당 웹 페이지를 표시할 수 있다.
   
   
3. 다양한 웹 기술 사용 앱에서 웹뷰를 사용하면 다양한 웹 기술을 사용할 수 있다.
   웹뷰는 HTML, CSS, JavaScript 등 다양한 웹 기술을 지원한다. 이를 통해 앱에서 웹 상의 다양한 기능을 활용할 수 있다.
   
   
4. 쉬운 유지 보수 웹뷰를 사용하면 앱의 유지 보수가 쉬워진다.
   웹 페이지의 내용이나 기능을 업데이트하면 앱에서 해당 웹 페이지를 로드하는 부분만 수정하면 되기 때문이다. 따라서 앱을 다시 빌드하거나 배포할 필요가 없다.

 

---

예시 코드

아래는 안드로이드 애플리케이션에서 WebView를 사용하는 간단한 예시 코드이다.

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

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

        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 자바스크립트 활성화

        webView.loadUrl("https://www.example.com"); // 표시할 웹 페이지 URL
    }

    @Override
    public void onBackPressed() {
        // 뒤로 가기 버튼을 눌렀을 때 WebView에서 뒤로 가기 동작 수행
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

• 위의 코드는 MainActivity 클래스에서 WebView를 초기화하고 설정하는 예시이다.
• webView 객체를 사용하여 웹 페이지를 로드하고, 자바스크립트를 활성화하며, WebViewClient를 설정하여 링크 클릭 등의 동작을 처리합니다.
• onBackPressed( ) 메서드를 오버라이드하여 뒤로 가기 버튼 동작을 WebView에 맞게 처리하도록 구현하였습니다.

 

---