[unity] WebView 에셋 추천(3D WebView)
Unity에서 WebView 구현 시 자바스크립트를 통한 통신 등 확장 기능을 사용하기 위해 상용 에셋을 주로 사용한다. 가장 인기 웹뷰 에셋인 3D WebView에 대해 알아보자.
에셋스토어에서 WebView 검색 시 대부분 3D WebView가 상위권이며 UniWebView도 좋은 평점으로 인기 에셋으로 올라와 있다.
3D WebView 소개
3D WebView는 많은 기능과 지속적인 업데이트로 많은 사랑을 받고 있는 WebView 에셋이다.
웹뷰 플러그인 중 가장 많은 기능을 제공한다.
3D 또는 2D로 웹 페이지를 쉽게 표시하고 상호 작용할 수 있다.
3D WebView: cross-platform web browser for Unity (Android, iOS, Windows, macOS, and UWP / Hololens) | Vuplex
developer.vuplex.com
- 주요기능을 정리하면 다음과 같다.
1. URL 또는 HTML 문자열 기반으로 유니티에서 웹 페이지를 로드한다.
2. 안드로이드, IOS, Window, Mac, WebGL 등 멀티 플랫폼을 지원한다.
- 안드로이드 시스템 요구사항
- Unity 2017.3 이상 지원
- 모노 및 IL2CPP 모두 지원
- OpenGL 또는 Vulkan이 있는 Android 5 이상 필요
- IOS 시스템 요구사항
- Unity 2017.3 이상 지원
- IOS 10 이상 필요
- Window/Mac 시스템 요구사항
- Unity 2018.2 이상
- D3D11 그래픽이 포함된 Window 8 이상 운영체제
- Metal 그래픽이 포함된 macOS 10.10 이상 운영체제
3. 3D 공간상에서 Texture2D로 렌더링 가능하다.
4. 자바스크립트를 통한 통신을 지원한다.
5. PDF 보기를 지원한다.
6. UGUI안에 넣을 수 있는 2D 모드를 제공한다.
3DWebView 장점
내 경험으로 본 주요 장점
1. 유니티 에디터 내에서 WebView 동작 가능
다른 웹뷰 플러그인의 경우, 유니티 에디터에서 동작 자체를 안 하는 경우가 많다.
즉, 빌드를 해서 모바일 환경에서 테스트를 해야되는 경우가 많은데, 3DWebView의 경우 에디터 안에서 동작을 지원하기 때문에 디버깅에 상당히 용이하다.
웹뷰 구현이 많은 프로젝트에서는 사용하면 퍼포먼스가 기대 이상이다.
유니티에서 블로그 url을 넣고 구동하면 다음과 같이 구동된다.
2. 2D Canvas 내에서 자유롭게 배치 가능
다른 웹뷰 플러그인의 경우, 항상 최상위로 View가 올라와야 하는 경우가 대부분이다.(UniWebview 같은 경우)
하지만 3DWebView는 CanvasWebViewPrefab 이란 2D 캔버스 모드를 지원하기 때문에 UGUI 안에서 자유롭게 배치를 할 수 있다.
화면처럼 버튼을 WebView 위에 올릴 수 있다.
3. JavaScript를 통한 통신 지원의 간편함
3DWebView는 자바스크립트를 통한 유니티와의 통신을 지원한다.
사용법도 상당히 심플하고, 비동기 함수 안에서도 잘 동작한다.
아래와 같은 자바스크립트 통신(웹페이지 -> 유니티로 통신을 보내는 방법)
if (window.vuplex) {
sendMessageToCSharp();
} else {
window.addEventListener('vuplexready', sendMessageToCSharp);
}
function sendMessageToCSharp() {
window.vuplex.postMessage({ type: 'greeting', message: 'Hello from JavaScript!' });
}유니티에서는 다음과 같은 코드로 메세지를 받을 수 있다.
async void Start() {
var webViewPrefab = GameObject.Find("WebViewPrefab").GetComponent<WebViewPrefab>();
await webViewPrefab.WaitUntilInitialized();
webViewPrefab.WebView.MessageEmitted += (sender, eventArgs) => {
Debug.Log("JSON received: " + eventArgs.Value);
};
}
4. 가상 키보드 지원
키보드의 경우 따로 구현할 경우 상당한 시간이 들어가는데 3D WebView에서는 가상 키패드를 지원해준다.(영어자판 기준)
키패드가 지원되기 때문에 VR 환경에서 웹뷰를 사용해야 하는 경우 유용하게 사용될 수 있다.
3DWebView 단점
1. 높은 구매 비용
플랫폼 별로 별도로 구매해야 되니 모든 플랫폼에서 구매 시 비용은 상당히 많이 들 수 있다.
기본적으로 에디터에서 웹뷰 동작 확인이 필요한 경우 149.99달러의 Windows and macOS를 구매해야 한다.
모바일에서 구동이 가능해야 하다면, 안드로이드 용 199.99달러, IOS용 199.99달러의 추가 비용이 필요하다.
대략 pc,모바일 구동을 하려면 약 600 달러의 비용 지출이 필요하다. (에셋 비용 치고는 상당히 높은 비용이다)
2. 높은 용량
사실 간단히 웹뷰만 띄우는 용도라면 3DWebView 구매하는 건 비추천이다.
에디터 용 패키지 사이즈만 약 370메가 정도를 에셋용량으로 잡아먹는다.
물론 안드로이드, IOS는 10메가 이내로 큰 문제는 없지만, 에디터에서 같이 디버깅하면서 보려면 윈도우즈용을 구매해야 되기 때문에 해당 용량도 감안해야 한다.
아마 프로젝트 리소스 용량이 커지는걸 싫어하는 개발자에게 있어서는 상당히 큰 메모리 비용일 것 같다.
3. Canvas 인터랙션의 한계
장점 부분에서 WebView 위에 UGUI를 추가하여 배치할 수 있다고 하였다.
그런데 만약 웹페이지가 인터렉션을 해야되는 상황에서는 이런 2D 모드를 사용할 수 없고, Native2D 모드를 사용해야 한다.
이럴 경우, 웹뷰는 항상 최상위 View로 올라온다
단순히 웹뷰만 보는 형태면 2D 모드를 사용하고, 인터랙션 이벤트(예들들어 웹페이지에서 드래그앤 드롭, 선긋기 등)가 필요한 경우에는 다른 웹뷰와 동일하게 최상위 뷰에 그려지는 Native 모드를 사용해야 한다.
(화면이 이동되는 드래그 이벤트와, 인터랙션(오브젝트를 드래그하는) 이벤트가 겹친다.
정리
Unity의 3D WebView 에셋은 웹뷰 기능의 상당한 확장된 기능이 구현되어 있다.
프로젝트에서 웹뷰에 대한 처리가 많고, VR or 2D Canvas 내에서 배치를 자유롭게 하고 싶은 경우, 사용하면 상당히 유용한 에셋이다.
또한, 개발 문서 또한 잘되어 있으며, 개발 문의 시 즉각적인 메일 답변 지원도 해준다.
댓글