유니티(C#)와 웹 페이지(JavaScript) 간의 통신

유니티에서 자바스크립트와 서버를 연동하는 것은 주로 WebGL 빌드 환경에서 이루어집니다. 이 과정은 크게 두 가지로 나뉩니다.

1. 유니티(C#)와 웹 페이지(JavaScript) 간의 통신: 유니티 C# 스크립트가 브라우저의 자바스크립트 함수를 호출하거나, 반대로 자바스크립트가 유니티 함수를 호출하는 것입니다.
2. 웹 페이지(JavaScript)와 서버 간의 통신: 웹 페이지의 자바스크립트가 Fetch API나 XMLHttpRequest를 사용하여 실제 서버와 데이터를 주고받는 것입니다.

이 두 가지 단계를 조합하면 유니티에서 자바스크립트를 통해 서버와 통신하는 구조를 만들 수 있습니다.

1. 유니티에서 자바스크립트 서버 연동 코드 (C# -> JS -> Server)

가장 일반적인 방식은 유니티에서 자바스크립트 함수를 호출하고, 그 자바스크립트 함수가 서버에 요청을 보내는 것입니다.

단계 1: 자바스크립트 플러그인 파일(.jslib) 작성

유니티 프로젝트의 Assets/Plugins/WebGL/ 폴더에 ServerCommunicator.jslib 파일을 만듭니다. 이 파일에 서버 통신을 담당할 자바스크립트 함수를 작성합니다.

JavaScript

mergeInto(LibraryManager.library, {
  // C#에서 호출될 함수
  // url과 jsonString을 인자로 받습니다.
  SendToServer: function (url, jsonString) {
    // UTF8 문자열 포인터를 자바스크립트 문자열로 변환
    const serverUrl = UTF8ToString(url);
    const data = UTF8ToString(jsonString);

    // Fetch API를 이용해 서버에 POST 요청
    fetch(serverUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: data,
    })
    .then(response => response.json()) // JSON 응답을 파싱
    .then(data => {
      // 서버 응답을 다시 유니티로 전달
      // 'JSCommunicatorObject'라는 이름의 오브젝트에 'HandleServerResponse' 함수를 호출
      if (typeof unityInstance !== 'undefined') {
        unityInstance.SendMessage('JSCommunicatorObject', 'HandleServerResponse', JSON.stringify(data));
      }
    })
    .catch((error) => {
      console.error('Error:', error);
      // 에러 발생 시 유니티로 에러 메시지 전달
      if (typeof unityInstance !== 'undefined') {
        unityInstance.SendMessage('JSCommunicatorObject', 'HandleServerResponse', '{"error":"' + error.message + '"}');
      }
    });
  },
});

단계 2: 유니티 C# 스크립트 작성

자바스크립트 함수를 호출하는 C# 스크립트를 작성합니다. 이 스크립트는 자바스크립트로부터 서버 응답을 받을 함수도 포함합니다.

C#

using UnityEngine;
using System.Runtime.InteropServices;
using UnityEngine.UI;

public class JSCommunicator : MonoBehaviour
{
    // 자바스크립트 함수를 C#에서 호출하기 위한 선언
#if UNITY_WEBGL && !UNITY_EDITOR
    [DllImport("__Internal")]
    private static extern void SendToServer(string url, string jsonString);
#endif

    // 서버 URL (예시)
    private string serverUrl = "https://your-server.com/api/data";

    void Start()
    {
        // 이 오브젝트의 이름은 반드시 "JSCommunicatorObject"로 설정해야 합니다.
        // 자바스크립트 SendMessage 함수와 연결됩니다.
    }

    // 버튼 클릭 이벤트 등에 이 함수를 연결
    public void SendDataToServer(string dataToSend)
    {
#if UNITY_WEBGL && !UNITY_EDITOR
        // C#에서 자바스크립트 함수를 호출
        SendToServer(serverUrl, dataToSend);
#endif
    }

    // 자바스크립트에서 SendMessage로 호출될 함수
    // 서버의 응답을 받아 처리합니다.
    public void HandleServerResponse(string responseJson)
    {
        Debug.Log("서버 응답 수신: " + responseJson);
        // JSON 파싱 후 게임 로직에 적용
        // JsonUtility.FromJson<YourDataClass>(responseJson);
    }
}

단계 3: 유니티 프로젝트 설정

1. 빈 게임 오브젝트를 하나 만들고 이름을 **JSCommunicatorObject**로 설정합니다.
2. 이 오브젝트에 위에서 작성한 JSCommunicator.cs 스크립트를 붙여줍니다.
3. 게임을 WebGL로 빌드하고 웹 서버에 배포하면 C#에서 자바스크립트를 거쳐 서버와 통신하는 구조가 완성됩니다.

---

2. UnityWebRequest를 이용한 직접 서버 연동

WebGL 환경에서는 Unity의 UnityWebRequest 클래스를 이용해 C# 스크립트에서 서버로 직접 요청을 보낼 수도 있습니다. 유니티가 내부적으로 브라우저의 Fetch API를 사용하기 때문에 가능합니다. 이 방법이 더 간단하고 일반적입니다.

코드 예시 (UnityWebRequest)

C#

using UnityEngine;
using UnityEngine.Networking;
using System.Collections;

public class DirectServerCommunicator : MonoBehaviour
{
    public string serverUrl = "https://your-server.com/api/data";

    public void SendDataToServer(string dataToSend)
    {
        StartCoroutine(PostData(dataToSend));
    }

    IEnumerator PostData(string jsonData)
    {
        UnityWebRequest request = new UnityWebRequest(serverUrl, "POST");
        byte[] bodyRaw = System.Text.Encoding.UTF8.GetBytes(jsonData);
        request.uploadHandler = new UploadHandlerRaw(bodyRaw);
        request.downloadHandler = new DownloadHandlerBuffer();
        request.SetRequestHeader("Content-Type", "application/json");

        yield return request.SendWebRequest();

        if (request.result != UnityWebRequest.Result.Success)
        {
            Debug.LogError("서버 요청 실패: " + request.error);
        }
        else
        {
            Debug.Log("서버 응답 수신: " + request.downloadHandler.text);
            // JSON 파싱 후 게임 로직 처리
        }
    }
}

이 방법은 별도의 자바스크립트 플러그인 없이 C# 코드만으로 서버 통신을 처리할 수 있어 훨씬 간편합니다. WebGL 빌드 시 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있으므로, 서버 설정에서 Access-Control-Allow-Origin: * 등의 헤더를 추가해야 합니다.

정리

방법	장점	단점
C# -> JS -> 서버	웹 페이지의 다양한 자바스크립트 기능(로컬 스토리지, 웹 API 등)과 함께 서버 통신 가능.	설정이 복잡하고, 통신 과정이 두 단계로 이루어짐.
C# -> 서버 (UnityWebRequest)	코드가 단순하고 직관적임. 별도의 자바스크립트 코드가 필요 없음.	웹 페이지의 다른 자바스크립트 코드와 직접적인 상호작용이 어려움.

대부분의 경우, UnityWebRequest를 사용하는 두 번째 방법이 더 효율적입니다. 하지만 웹 페이지의 기능을 적극적으로 활용해야 할 때는 첫 번째 방법이 유용합니다.