Unity3D 태국 TDP 결제 WebView로 처리하기

 유니티3D에 태국 True Digital Plus의 모바일 충전 결제를 연동했었는데 그 때는 유니티3D에서 지원하는 Application.OpenURL을 가지고 웹 브라우저를 실행해서 했었는데요 이렇게하면 백 버튼을 눌러 브라우저를 종료하는데 있어 이슈가 발생 되는군요.

 브라우저에서 결제를하고 다른 페이지로 진행이 된 뒤 백버튼을 눌러 다시 게임으로 돌아가야하는데 백 버튼을 누르면 뒤로가기가 되서 다시 결제 페이지로 돌아가는 문제가 있는거죠.

 위 영상은 태국 TDP 결제를 적용한 게임의 결제 진행과정 영상으로 보시면 이해하시는데 도움이 되실 듯 합니다.

 그래서 브라우저를 띄우는것 말고 SDK에 있는 브라우징 기능이 없을까하고 리서치해보니 안드로이드 웹뷰(WebView)라는게 있더군요. 좀 더 리서치를 해보니 GREE에서 Unity3D용 WebView를 만들어 공개했네요. keijiro-san 이라는 일본분의 unity-webview-integration 플러그인을 상속받아서 만들었다고 합니다. 이건 자바 스크립트로 되어있으니 C#으로 되어있는 GREE의 것을 사용하는것을 정리 하겠습니다.

 여담이지만 cocos2d-x에 GREE 연동할 때 수많은 이슈들과 함께 고생을 했었는데 지금보니 GitHub에 GREE Platform SDK for cocos2d-x 가 있네요.

 GitHub에 있는 gree의 unity-webview를 다운로드 및 압축해제 후 dist 폴더에 있는 unity-webview.unitypackage를 임포트 합니다. 위 그림과 같이 안드로이드 뿐 아니라 iOS와 MacOS도 지원합니다.


///< WebViewObject 변수를 추가
public WebViewObject webViewObject;

public void RequestPayment(int amount)
{
string strUrl = string.Format("{0}?{1}={2}&{3}={4}&{5}={6}&{7}={8}&{9}={10}"
, TDP_URL
, "AppID", this.AppID
, "EncryptSecret", this.EncryptSecret
, "DeviceID", this.DeviceID
, "MobileAccountID", this.MobileAccountID
, "Price", amount);

Debug.Log(strUrl);
//Application.OpenURL(strUrl);

webViewObject =
(new GameObject("WebViewObject")).AddComponent<WebViewObject>();
webViewObject.Init((msg)=>{
Debug.Log(string.Format("CallFromJS[{0}]", msg));
});

webViewObject.SetMargins(50, 50, 50, 50);
webViewObject.LoadURL(strUrl);
webViewObject.SetVisibility(true);
}

 결제 요청 시 기존에 유니티3D의 Application.OpenURL 대신 임포트한 WebViewObject를 사용합니다.

 SetMargins 을 해줬기 때문에 호출 시 위와같이 여백이 남게 출력되었습니다. 이 화면이 결제를 진행 후 그 다음 페이지 모습인데요,

void Update () 
{
 if (Application.platform == RuntimePlatform.Android)
      {

          if (Input.GetKey(KeyCode.Escape))
          {
  //TrueManager.GetInstance().webViewObject.SetVisibility(false);
  Destroy(TrueManager.GetInstance().webViewObject);
              //Application.Quit();
              return;
          }
 }
}

 안드로이드 백버튼을 눌렀을 때 기존에 앱을 종료 시키던 것을 띄워진 WebViewObject를 닫기 위해서 위와 같이 Destroy 해줬습니다. SetVisibility만 false로 해줘도 안보이겠죠. 또한 샘플 코드라 이렇게 단순히 처리했지만 WebView 오브젝트가 있고 볼일 때만 저런 처리를 하도록 예외 처리를 해줘야하겠죠.


<meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true" />

 마지막으로 유니티3D에서 웹뷰가 터치가 안된다면 AndroidManifest.xml에서 위와 같은 값을 true로 해줘야합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.unity3d.player"
android:installLocation="preferExternal"
    android:versionCode="1"
    android:versionName="1.0">
    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true"/>

    <application
android:icon="@drawable/app_icon"
        android:label="@string/app_name"
        android:debuggable="true">
        <activity android:name="com.unity3d.player.UnityPlayerProxyActivity"
                  android:label="@string/app_name"
                  android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.unity3d.player.UnityPlayerActivity"
                  android:label="@string/app_name"
                  android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen">
        </activity>
        <activity android:name="com.unity3d.player.UnityPlayerNativeActivity"
                  android:label="@string/app_name"
                  android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen">
            <meta-data android:name="android.app.lib_name" android:value="unity" />
            <meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true" /> -->
        </activity>
        <activity android:name="com.unity3d.player.VideoPlayer"
                  android:label="@string/app_name"
                  android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen">
        </activity>
    </application>
</manifest>

 샘플에 있던 Androidmanifest.xml 풀 내용은 위와 같습니다.

 다른 유니티3D에 쓸만한 웹뷰 플러그인으로는 UniWebView라는 것과 HTML UI Engine인 AWESOMIUM 이라는 미들웨어가 있네요. AWESOMIUM은 잠깐 봤는데 꽤 괜찮은 미들웨어인듯 합니다.

 4년전인 2009년에 올라온 영상만 봐도 이름 그대로 정말 어썸이네요!