쉽지만 어려운 WebView! 이젠 그만, 쉽기로 하자!

Unity 개발자들의 한줄기 빛이 되리라!

Unity 개발자들은 일이 너무 많습니다. 게임만 잘 만들면 될 줄 알았는데. 플랫폼 연동(인증, 결제, 푸시), 다양한 언어 학습, 그리고 WebView 연동 등. 게임 개발 외에 해야 할 일이 너무 많습니다.

사례를 하나 들어 보겠습니다. 게임을 좋아해서 게임 개발사에 입사한 김모씨.

대박 게임을 만들겠다는 마음가짐으로 화이팅이 넘칩니다. 수습 기간이 끝나고 처음으로 맡은 업무는 바로 플랫폼 연동!! Unity 게임 관련 로직만 알고 있던 김모씨는 처음 접하는 업무에 어리둥절합니다.

사수 이모씨는 김모씨에게 1주일 내로 Scheme을 처리할 수 있는 WebView를 만들어서 Android, iOS 플랫폼에 적용하라 합니다. 그냥 톡! 하면 적용될 것이라 생각한 김모씨는 현실에 벽에 부딪힙니다. Unity에는 WebView 관련 API가 없었던 것이죠.

김모씨는 Unity Asset store에서 WebView를 검색합니다. 많은 WebView가 검색되었지만 스펙에 맞는 웹뷰는 모두 유료 에셋이라 구매할 엄두가 나지 않습니다.

김모씨는 눈을 돌려 구글 검색창에 Scheme을 지원하는 Unity WebView를 검색합니다. 검색은 많이 되지만 Unity 기술만 보유한 김모씨는 생전 처음보는 언어들과 기술로 인해 좌절하게 됩니다.

자! 그렇다면 김모씨는 왜 좌절하게 되었던 것일까요? Unity에서 WebView를 사용하려면 아래 그림의 파란색 영역의 기술도 알고 있어야 했기때문입니다.

이 파란색 영역에는 많은 것들이 포함되어 있습니다. (iOS 기준)

1. Unity iOS Plugin
2. Objective c or Swift
3. WKWebView
4. Xocde
5. iOS Build System
6. ETC...

이 영역을 유니티만 알고 있는 신입 개발자가 1주일 만에 모두 파악해서 WebView를 만드는 것은 불가능에 가깝습니다.

그래서 NHN은 김모씨와 같은 어려운 상황에 처한 분들에게 조금이나마 보탬이 되고자 GPM WebView를 만들었습니다.

GPM WebView를 사용하면 iOS, Android 개발을 잘 몰라도, 여러분들의 앱에서 무료로 WebView를 사용할 수 있습니다. 지금은 기능이 많지 않지만 꾸준한 업데이트와 여러분들의 의견을 최대한 반영하여 최고의 WebView가 될 수 있도록 노력하겠습니다.

Introduce

GPM은 Game Package Manager의 약자로 2019년 9월 30일에 Asset Store에 론칭된 별점 5점의 Unity Free Asset이며, GPM WebView는 GPM에 포함된 서비스들 중 하나입니다.

• Asset store : https://assetstore.unity.com/packages/tools/game-toolkits/game-package-manager-147711
• 공식 문서 : https://github.com/nhn/gpm.unity/

GPM WebView 외 다양한 서비스들이 업데이트되고 있으니 사용해 보시는 것을 추천드립니다.

• WebView
• AssetManagement
• Communicator
• LogViewer
• UI

Spec

해당 문서는 GPM WebView 1.2.0 버전을 기준으로 작성되었습니다. 지속적인 업데이트를 통해 좋은 기능들이 많이 추가될 예정이며, 공식 가이드는 아래 페이지를 참고하십시오.

• GPM WebView 공식 문서

카테고리	기능	플랫폼	설명
Style	Popup	Android, iOS	팝업 모드입니다.
	Fullscreen	Android, iOS	풀스크린 모드입니다.
Show	Url	Android, iOS	웹뷰를 만들고 지정된 URL을 로드합니다.
	HTML file	Android, iOS	웹뷰를 만들고 지정된 파일에서 웹 콘텐츠를 로드합니다.
	HTML string	Android, iOS	웹뷰를 만들고 지정된 HTML 문자열의 내용을 로드합니다.
Navigation	Visibility	Android, iOS	네비게이션바의 Visible을 설정합니다.
	Title	Android, iOS	웹페이지 타이틀입니다.
	Back	Android, iOS	뒤로가기 버튼입니다.
	Forward	Android, iOS	앞으로가기 버튼입니다.
	Close	Android, iOS	닫기 버튼입니다.
Custom scheme	Register	Android, iOS	Custom scheme을 등록합니다.
	Callback	Android, iOS	Custom scheme 콜백입니다.
Event, Callback	Open callback	Android, iOS	웹뷰가 오픈되면 전달되는 콜백입니다.
	Close callback	Android, iOS	웹뷰가 닫히면 전달되는 콜백입니다.
Other	Execute JavaScript	Android, iOS	자바스크립트를 호출합니다.
	Clear Cookies	Android, iOS	쿠키를 삭제합니다.
	Clear Cache	Android, iOS	캐시를 삭제합니다.

How to use

Install

1. Asset store에서 Game Package Manager를 검색하여 설치
2. Menu > Tools > GPM > Manager 메뉴를 선택
3. Game Package Manager 창에서 WebView를 선택
4. 우측 상단의 Install 버튼 클릭

설치 끝!

플랫폼 별 설정

Android, iOS 빌드 시 필요한 설정입니다. 해당 설정이 누락될 경우 오류가 발생할 수 있습니다.

• Android 설정
• iOS 설정

API

ShowUrl

WebView를 띄웁니다.

/// <summary>
/// Create the webview and loads the web content referenced by the specified URL.
/// </summary>
/// <param name="url">The URL of the resource to load.</param>
/// <param name="configuration">The configuration of GPM WebWiew. Refer to <see cref="GpmWebViewRequest.Configuration"/></param>
/// <param name="openCallback">Notifies users when a WebView is opened.</param>
/// <param name="closeCallback">Notifies users when a WebView is closed.</param>
/// <param name="schemeList">Specifies the list of customized schemes a user wants.</param>
/// <param name="schemeEvent">Notifies url including customized scheme specified by the schemeList with a callback.</param>
static void ShowUrl(
    string url, 
    GpmWebViewRequest.Configuration configuration,
    GpmWebViewCallback.GpmWebViewErrorDelegate openCallback,
    GpmWebViewCallback.GpmWebViewErrorDelegate closeCallback,
    List<string> schemeList,
    GpmWebViewCallback.GpmWebViewDelegate<string> schemeEvent)

Example

public void ShowUrl()
{
    GpmWebView.ShowUrl(
        "http://gameplatform.toast.com/",
        new GpmWebViewRequest.Configuration()
        {
            style = GpmWebViewStyle.FULLSCREEN,
            isClearCookie = false,
            isClearCache = false,
            isNavigationBarVisible = true,
            title = "The page title.",
            isBackButtonVisible = true,
            isForwardButtonVisible = true,
#if UNITY_IOS
            contentMode = GpmWebViewContentMode.MOBILE
#endif
        },
        OnOpenCallback,
        OnCloseCallback,
        new List<string>()
        {
            "USER_ CUSTOM_SCHEME"
        },
        OnSchemeEvent);
}

private void OnOpenCallback(GpmWebViewError error)
{
    if (error == null)
    {
        Debug.Log("[OnOpenCallback] succeeded.");
    }
    else
    {
        Debug.Log(string.Format("[OnOpenCallback] failed. error:{0}", error));
    }
}

private void OnCloseCallback(GpmWebViewError error)
{
    if (error == null)
    {
        Debug.Log("[OnCloseCallback] succeeded.");
    }
    else
    {
        Debug.Log(string.Format("[OnCloseCallback] failed. error:{0}", error));
    }
}

private void OnSchemeEvent(string data, GpmWebViewError error)
{
    if (error == null)
    {
        Debug.Log("[OnSchemeEvent] succeeded.");
        
        if (data.Equals("USER_ CUSTOM_SCHEME") == true || data.Contains("CUSTOM_SCHEME") == true)
        {
            Debug.Log(string.Format("scheme:{0}", data));
        }
    }
    else
    {
        Debug.Log(string.Format("[OnSchemeEvent] failed. error:{0}", error));
    }
}

Close

WebView를 닫습니다.

/// <summary>
/// This method to close the webview in display on a screen.
/// </summary>
static void Close()

Example

public void CloseSample()
{
    GpmWebView.Close();
}

실행 화면

Contact us

GPM이 여러분들에게 조금이나마 도움이 되었으면 합니다. 기능 추가 요청 및 이슈 발생 시 아래로 연락 바랍니다.

Email: dl_gpm_help@nhn.com Github issue URL: https://github.com/nhn/gpm.unity/issues GPM WebView 공식 문서: https://github.com/nhn/gpm.unity/blob/main/docs/WebView/README.md

긴 글 읽어 주셔서 감사합니다.