Overview
com.111percent.gamebase.percent-webview
무엇인가요?
Percent WebView는 Unity 프로젝트에서 네이티브 웹뷰를 쉽게 사용할 수 있게 해주는 패키지입니다. 이 패키지를 통해 게임 내에서 웹 컨텐츠를 표시하고 상호작용할 수 있습니다.
왜 만들었나요?
게임 개발 과정에서 웹 기반의 컨텐츠(예: 공지사항, 외부 링크 등)를 표시해야 하는 경우가 있습니다. 하지만 Unity의 기본 기능만으로는 네이티브 웹뷰를 구현하기 어렵습니다. Percent WebView는 이러한 문제를 해결하기 위해 만들어졌습니다.
- 여러 OS에서 일관된 웹뷰 경험 제공
- 네이티브 기능과 Unity 간의 간편한 통신
- 웹뷰 크기 및 위치의 유연한 조절
- 웹뷰와 Unity 프로세스 간의 통신 지원
어떻게 사용하나요?
준비하기
- Unity 버전:
Unity 2022.3.X
- 지원 OS:
- Android
- iOS
- macOS Editor
사용하기
프로젝트에 PercentWebView 프리팹 추가:
- 경로: Packages/Percent WebView/Resources/Prefabs/PercentWebView.prefab
- 프리팹을 씬에 배치하고 필요에 따라 크기와 위치를 조절합니다.
- 이 프리팹은 Canvas를 가지고 있는 UI 프리팹이며, 내부에는 background와 webview로 구성되어 있습니다.
- background는 터치 이벤트를 감지하여 웹페이지로 메시지를 전송하는 기능을 가집니다.
- webview는 네이티브 웹뷰의 위치를 에디터에서 조절하는 역할을 합니다.
- 디버그 과정에서 웹뷰 위치를 쉽게 확인할 수 있도록 색을 입혀놨습니다. 적용이 끝나면 이 색의 투명도를 조절해서 보이지 않도록 바꿔주세요.
⚠️ 웹뷰 일반적인 Unity UI 요소와는 다르게 작동합니다. Unity의 게임 오브젝트가 아닌 각 OS(iOS, Android 등)의 네이티브 웹뷰를 사용합니다. 이는 웹뷰가 자유롭게 배치될 수 없음을 의미합니다. 지원되는 Canvas Render Mode는 Screen Space만 가능합니다.
(Optional) 프리팹 배치 및 조정
WebView의 크기를 조절할 때는 Canvas의 Reference Resolution과 WebView의 RectTransform 컴포넌트를 함께 고려해야 합니다.
Canvas 설정:
- Canvas Scaler 컴포넌트의 'UI Scale Mode'를 'Scale With Screen Size'로 설정합니다.
- 'Reference Resolution'을 설정합니다 (예: 1920x1080).
WebView 크기 조절:
- WebView 게임 오브젝트의 RectTransform 컴포넌트를 조절합니다.
- Width와 Height 값을 Reference Resolution에 대한 비율로 설정합니다.
예:
Canvas Reference Resolution: 1920x1080
원하는 WebView 크기: 화면의 80% 너비, 70% 높이WebView RectTransform 설정: - Width: 1920 * 0.8 = 1536 - Height: 1080 * 0.7 = 756
추가 기능
- SetPositionAndScale: WebView의 크기와 위치를 margin 값으로 조절합니다. (권장되지 않음)
- 공지사항 샘플: Assets/Samples/Percent WebView/version/Percent Notice/Scenes/WebViewSampleNoticeScene에서 공지사항 구현 예제를 확인할 수 있습니다.
주의사항
Windows OS 에디터는 지원하지 않습니다.
- 이전 버전에는 Windows OS 에디터 기능을 포함하고 있었지만, 많은 버그가 발생하여 현재는 제거되어있습니다.
MacOS 에디터에서는 터치 이벤트가 부자연스러울 수 있습니다.
- 이는 웹뷰 문제가 아닌 웹뷰를 구성하는 JS코드 스펙이 원인입니다.
- 모바일 버전에서는 문제없이 동작하므로 이점 참고 바랍니다.
여러 WebView를 사용할 경우, PercentWebView라고 되어있는 게임 오브젝트의 이름을 서로 다르게 설정해야 합니다.
- 네이티브와 유니티 레이어는 게임오브젝트 이름을 기반으로 통신합니다. 그러므로 같은 이름의 오브젝트가 존재하면 메세지를 받지 못할 수 있습니다.
샘플 코드
해당 패키지는 샘플 코드를 제공합니다. PPM(Percent Package Manager) 또는 UPM(Unity Package Manager)을 통해 샘플 코드를 import 할 수 있습니다.
웹뷰로 동작하는 공지사항 모듈을 개발 중이시라면 패키지에 포함된 샘플을 참고해주세요. 공지사항 기능을 패키지가 아닌 샘플의 형태로 제공하는 이유는 게임에 따라 커스텀이 필요할 수 있기 때문입니다.
패키지 유지보수 관련 참고 사항
- 안드로이드 네이티브 프로젝트는 오픈소스를 리팩토링하여 기술 내재화한 프로젝트입니다. 따라서 안드로이드 네이티브가 수정할 필요가 있다면 이 프로젝트를 수정하여 빌드하고 aar을 사용하면 됩니다.
- https://gitlab.111percent.net/111percent/gamebase/client/percentwebview-androidplugin
궁금증
- 왜 webview 에 newton.json 이 dependency 되어야 하는가