WebView?

❓ WebView ❓

모바일 애플리케이션이나 데스크톱 애플리케이션 내에서 웹 콘텐츠를 표시할 수 있는 컴포넌트이다.

 

WebView는 웹 브라우저와 유사한 기능을 가지고 있으며, HTML, CSS, JavaScript로 작성된 웹 페이지를 애플리케이션 내부에서 표시하고 상호작용할 수 있다.

 

📌 WebView의 주요 특징 📌

애플리케이션 내에서 웹 페이지 표시

WebView는 앱 내에서 외부 웹 페이지를 로드하거나 로컬에 있는 HTML 파일을 표시할 수 있다.

 

이를 통해 네이티브 애플리케이션과 웹 콘텐츠를 통합하여 사용할 수 있다.

 

하이브리드 애플리케이션

WebView는 하이브리드 앱을 만들 때 주로 사용된다.

 

하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 결합한 형태로, 네이티브 코드와 웹 기술(HTML, CSS, JavaScript)을 함께 사용할 수 있다. 대표적으로 Ionic이나 Cordova 같은 프레임워크에서 WebView를 이용해 하이브리드 앱을 만들 수 있다.

 

JavaScript 실행 가능

WebView는 웹 페이지 내에서 JavaScript를 실행할 수 있다.

 

이를 통해 웹 페이지 상에서 사용자 인터랙션을 처리하거나 웹에서 제공하는 다양한 기능을 사용할 수 있다.

 

네이티브 API와 상호작용

WebView는 네이티브 애플리케이션의 기능과 상호작용할 수 있다.

 

 

예를 들어, 웹 페이지에서 네이티브 기능(카메라, GPS 등)을 호출하거나, 네이티브 코드에서 WebView 내의 웹 페이지에 메시지를 보낼 수 있다. 이를 통해 앱과 웹 콘텐츠 간의 통신이 가능해져 더 풍부한 기능을 제공할 수 있다.

 

 

플랫폼별 WebView

각 플랫폼에서 제공하는 WebView는 조금씩 다를 수 있다.

 

• Android WebView: Android 애플리케이션에서 WebView 클래스를 사용해 웹 페이지를 표시할 수 있다. 이는 Android 시스템에 내장된 브라우저 엔진을 사용해 웹 콘텐츠를 렌더링한다.
• iOS WebView: iOS에서는 WKWebView를 사용해 웹 콘텐츠를 표시한다. 이는 WebKit 렌더링 엔진을 기반으로 하고 있다.
• Desktop WebView: Electron과 같은 프레임워크에서는 데스크톱 애플리케이션 내에 WebView를 사용할 수 있으며, 웹 기술을 사용해 크로스 플랫폼 애플리케이션을 개발하는 데 사용된다.

 

❗️ WebView의 사용 사례 ❗️

하이브리드 앱

네이티브 코드와 웹 기술을 결합한 하이브리드 앱에서 WebView는 필수적이다.

앱의 일부 화면을 웹 페이지로 렌더링하여 개발 효율성을 높일 수 있다.

 

웹 콘텐츠를 네이티브 앱 내에서 사용

앱 안에서 뉴스 기사, 블로그, 쇼핑몰 페이지 등 외부 웹 콘텐츠를 표시할 때 WebView가 유용하다.

외부 웹 페이지를 네이티브 앱 내부에 임베드하여 제공할 수 있다.

 

크로스 플랫폼 앱 개발

Ionic, Cordova, React Native와 같은 프레임워크는 WebView를 활용해 한 번 작성한 코드를 Android와 iOS 같은 다양한 플랫폼에서 재사용할 수 있게 한다.

 

브라우저 기능 내장

자체적인 브라우저 기능을 가진 애플리케이션을 만들 수 있다.

예를 들어, 이메일 클라이언트 내에서 링크를 열거나, 채팅 애플리케이션에서 웹 페이지 미리보기를 제공할 때 WebView를 사용할 수 있다.

 

😊 WebView의 장점 😊

• 웹 기술을 재사용: 개발자는 이미 익숙한 HTML, CSS, JavaScript 기술을 사용해 앱의 일부를 만들 수 있다.
• 크로스 플랫폼 지원: 한 번의 웹 페이지 개발로 Android, iOS, Windows 등 다양한 플랫폼에서 동일한 UI와 기능을 제공할 수 있다.
• 빠른 개발 속도: 웹 콘텐츠를 쉽게 앱에 통합할 수 있어 새로운 기능을 빠르게 배포할 수 있다.

 

😢 WebView의 단점 😢

• 성능 문제: WebView는 네이티브 UI에 비해 성능이 떨어질 수 있다. 특히 애니메이션이나 대용량 데이터 처리 시 성능 저하가 발생할 수 있다.
• 플랫폼별 차이: 각 플랫폼에서 제공하는 WebView의 구현 방식이 다르기 때문에, 완전히 일관된 동작을 보장하기 어려울 수 있다.
• 보안 문제: 외부 웹 페이지를 로드할 경우 악성 코드나 보안 취약점이 있을 수 있기 때문에 WebView에서 외부 콘텐츠를 로드할 때는 주의가 필요하다.

 

⭐️ 앱과 웹뷰의 통신 방식 ⭐️

네이티브 개발을 하기 위해서는 웹뷰로 감싼 웹 프로젝트와 네이티브가 통신을 해야하는데,

이 웹뷰 속 URL로 연결되어있는 웹 프로젝트에서 앱 기능을 어떻게 사용할까?

 

여러 가지 방식이 있는데, 기본적으로 네이티브 앱과 웹 콘텐츠 간의 상호작용을 하는 방식은 다음과 같다.

 

JavaScript Interface인 JSBridge 사용

앱에서 JavaScript를 호출하거나, 웹페이지에서 네이티브 기능을 호출할 수 있는 방법이다. 

 

안드로이드의 WebView.addJavascriptInterface()와 iOS의 WKScriptMessageHandler를 활용해 양방향 통신을 할 수 있다.

 

 

• 웹에서 앱 호출: 웹뷰 내에서 JavaScript 코드를 통해 네이티브 앱의 기능을 호출할 수 있다. 예를 들어, 앱의 카메라 기능을 웹에서 실행할 수 있다.
• 앱에서 웹 호출: 네이티브 앱에서 JavaScript 함수를 호출하여 웹뷰의 내용을 제어하거나 데이터를 웹페이지로 전달할 수 있다.

 

URL Scheme

웹뷰 내에서 특정 URL 스키마를 사용해 네이티브 앱과 통신하는 방식이다.

 

웹에서 커스텀 URL 스키마를 호출하면, 네이티브 앱에서 그 요청을 처리하고 적절한 액션을 실행할 수 있다.

 

 

• 장점: 구현이 비교적 간단하고, 웹에서 쉽게 호출할 수 있다.
• 단점: 데이터를 전달할 수 있는 양이 제한적이고, 보안 문제가 발생할 수 있다.

 

웹에서 네이티브 이벤트 전송 (PostMessage API)

HTML5의 window.postMessage()를 이용해 웹에서 네이티브로, 또는 네이티브에서 웹으로 메시지를 전송할 수 있다. 

 

이 방법은 주로 안전하게 데이터를 주고받기 위해 사용된다.

 

 

• 웹에서 네이티브로: 웹뷰에서 postMessage로 데이터를 네이티브로 전달하면 네이티브 쪽에서 해당 메시지를 수신하고 처리할 수 있다.
• 네이티브에서 웹으로: 네이티브 앱에서 웹뷰에 메시지를 전달하면, 웹페이지에서 이를 처리하는 JavaScript가 작동한다.

 

파일 기반 통신 (로컬 저장소)

앱과 웹뷰 간에 통신할 때 로컬 파일 시스템을 이용하는 방법도 있다. 

 

예를 들어, 앱이 로컬 파일에 데이터를 저장하면 웹에서 그 파일을 읽어들여 처리할 수 있다.

 

Cookies 및 Local Storage 사용

웹에서 쿠키나 로컬 스토리지에 데이터를 저장하면, 네이티브 앱에서 이를 읽거나 수정하는 방식이다. 

 

이는 기본적으로 브라우저 기반의 통신이지만, 앱과 웹 간의 간단한 데이터 교환에 사용할 수 있다.

 

앱의 요구사항과 보안 수준에 따라 적절한 방법을 선택하는 것이 중요하다.