Unity(PC, 웹)용 SDK / 애플리케이션 측 SDK 통합
  문서로 돌아가기

Unity(PC, 웹)용 SDK

최신 버전 v1 v0

애플리케이션 측 SDK 통합

일반 정보

  1. 로그인 시스템, 인게임 스토어 및 애플리케이션의 기타 페이지에서 사용할 인터페이스를 디자인합니다.
  2. 애플리케이션에서, SDK 메소드를 사용하여 사용자 인증, 스토어 디스플레이, 구매 등을 위한 로직을 구현합니다.

    알림
    Unity 지침에 따라 자체 솔루션을 생성하거나, 데모 장면을 템플릿으로 사용할 수 있습니다. 데모 장면 인터페이스를 애플리케이션에 적용하려면, UI 빌더를 사용합니다.

    빠른 시작

    다음은 인게임 판매 시나리오를 가장 간단하게 구현하는 방법에 대한 지침입니다.

    상호 작용 흐름:

    1. 사용자가 게임을 출시합니다.
    2. 애플리케이션이 엑솔라 로그인 웹 위젯을 실행합니다.
    3. 사용자가 게임에 로그인하여 아이템 카탈로그로 이동합니다.
    4. 애플리케이션이 엑솔라에 아이템 카탈로그를 요청합니다.
    5. 아이템 데이터를 성공적으로 수신하면 애플리케이션에 아이템 카탈로그가 표시됩니다.
    6. 사용자가 아이템 구매 버튼을 클릭합니다.
    7. 애플리케이션이 구매 프로세스를 시작하고 브라우저에 결제 UI를 표시합니다.
    8. 사용자가 결제합니다.
    9. 애플리케이션은 결제 UI를 닫고 결제 데이터를 엑솔라에 전달합니다.
    10. 애플리케이션은 결제 처리 결과에 대한 메시지를 로그에 출력합니다.

    애플리케이션(StoreController 스크립트) 및 SDK의 상호작용을 위한 순서도:

    시나리오 제한 사항:

    알림
    위젯 맞춤 설정은 엑솔라 제품 라이선스 계약에 서명한 이후에만 사용할 수 있습니다. 계약에 서명하려면, 관리자 페이지에서 계약 및 세금 > 계약 섹션으로 이동합니다.
    • 이 시나리오는 장바구니를 사용하지 않고 실제 통화로만 아이템을 판매하는 것을 구현합니다. 즉, 사용자는 하나의 아이템만 구매할 수 있습니다.

    아이템 위젯 스크립트 생성

    VirtualItemWidget라는 이름의 새 스크립트를 생성합니다.

    1. Unity 편집기에서 프로젝트를 엽니다.
    2. 메인 메뉴에서 Assets > Create > C# Script로 이동합니다.
    3. Assets 폴더의 새 파일 이름을 VirtualItemWidget으로 지정합니다.
    4. 편집기에서 생성된 파일을 열고 다음 코드를 추가합니다:
    Copy
    Full screen
    Small screen
    • C#
    using UnityEngine;
using UnityEngine.UI;

namespace Xsolla.Example
{
    public class VirtualItemWidget : MonoBehaviour
    {
       public Image IconImage;
       public Text NameText;
       public Text DescriptionText;
       public Text PriceText;
       public Button BuyButton;
    }
}
    1. 변경 사항을 저장합니다.

    아이템 위젯 프리팹 생성

    스토어에 아이템을 표시하는 UI를 생성합니다.

    1. UI 요소를 표시하려면 Canvas 개체를 생성하십시오. 이렇게 하려면 메인 메뉴에서 GameObject > UI > Canvas로 이동합니다. 그러면 화면에
      • Canvas, Canvas Scaler 및 Graphic Raycaster 구성 요소와 함께 Canvas 개체가 생성됩니다.
      • 화면에 이러한 개체가 이미 존재하지 않을 경우 EventSystem 개체가 생성됩니다.
    2. VirtualItemWidget 하위 개체를 생성합니다.
      1. Hierarchy 패널에서, Canvas 개체를 선택합니다.
      2. 메인 메뉴에서, GameObject > UI > Image로 이동합니다. 이렇게 하면 새로운 게임 개체가 생성되고, 이 개체는 Canvas 개체의 하위 개체입니다.
      3. 생성된 개체의 이름을 VirtualItemWidget으로 다시 지정합니다.
    3. UI 개체를 추가하여 항목 정보를 표시합니다.
      1. 위젯 아이콘을 표시할 개체를 만듭니다.
        1. Hierarchy 패널에서, VirtualItemWidget 개체를 선택합니다.
        2. 메인 메뉴에서, GameObject > UI > Image로 이동합니다.
        3. 생성된 개체의 이름을 IconImage로 다시 지정합니다.
      1. 아이템 이름을 표시할 개체를 생성합니다.
        1. Hierarchy 패널에서, VirtualItemWidget 개체를 선택합니다.
        2. 메인 메뉴에서, GameObject > UI > Legacy > Text로 이동합니다.
        3. 생성된 개체의 이름을 NameText로 다시 지정합니다.
      1. 아이템 설명을 표시할 개체를 생성합니다.
        1. Hierarchy 패널에서, VirtualItemWidget 개체를 선택합니다.
        2. 메인 메뉴에서, GameObject > UI > Legacy > Text로 이동합니다.
        3. 생성된 개체의 이름을 DescriptionText로 다시 지정합니다.
      1. 아이템 구매 버튼을 위한 개체를 생성합니다.
        1. Hierarchy 패널에서, VirtualItemWidget 개체를 선택합니다.
        2. 메인 메뉴에서, GameObject > UI > Legacy > Button으로 이동합니다. 이렇게 하면 Text 하위 개체가 있는 버튼 개체가 생성됩니다.
        3. 생성된 개체의 이름을 BuyButton으로 다시 지정합니다.
        4. Text 개체 이름을 PriceText로 다시 지정합니다.
    4. VirtualItemWidget 개체에 하나의 구성 요소로 아이템 위젯 스크립트 추가하기:
      1. Hierarchy 패널에서 VirtualItemWidget 개체를 선택합니다.
      2. Inspector 패널에서 Add Component를 클릭한 후 VirtualItemWidget 스크립트를 선택합니다.
    5. 필요한 스크립트 슬롯에 UI 요소를 할당합니다.
      1. Hierarchy 패널에서, VirtualItemWidget 개체를 선택합니다.
      2. Hierarchy 패널의 하위 UI 개체를 가져와 Inspector 패널의 해당 VirtualItemWidget 구성 요소 슬롯에 놓습니다.
    6. 생성된 VirtualItemWidget 개체를 프리팹으로 전환합니다.
      1. Hierarchy 패널에서, VirtualItemWidget 개체를 선택합니다.
      2. 해당 개체를 Assets의 Project 패널에 가져다 놓습니다. 그 결과, Assets 폴더에 새로운 개체가 나타나고 화면 개체의 색상이 파란색으로 변경됩니다.

    아이템 위젯 프리팹 예시:

    스토어 스크립트 생성

    StoreController라는 이름의 새 스크립트를 생성합니다.

    1. Unity 편집기에서 프로젝트를 엽니다.
    2. 메인 메뉴에서 Assets > Create > C# Script로 이동합니다.
    3. Assets 폴더의 새 파일 이름을 StoreController로 지정합니다.
    4. 편집기에서 생성된 파일을 열고 다음 코드를 추가합니다:
    Copy
    Full screen
    Small screen
    • C#
    using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
namespace Xsolla.Example
{
	public class StoreController : MonoBehaviour
	{
		[SerializeField] private VirtualItemWidget WidgetPrefab;
		[SerializeField] private Transform WidgetsContainer;
		private void Start()
		{
			StartAuthorization();
		}
		private void StartAuthorization()
		{
			Debug.Log("Start the authorization process with the Xsolla Login Widget");
			XsollaAuth.AuthWithXsollaWidget(OnAuthSuccess, OnError, null);
		}
		private void OnAuthSuccess()
		{
			Debug.Log("Authorization successful");
			Debug.Log("Get the catalog of virtual items");
			XsollaCatalog.GetItems(OnCatalogReceived, OnError);
		}
		private void OnCatalogReceived(StoreItems items)
		{
			Debug.Log("Catalog received successfully");
			BuildStoreUI(items.items);
		}
		private void BuildStoreUI(StoreItem[] items)
		{
			// Create a widget for each item in the catalog
			foreach (var item in items)
			{
				// Check if the item has a price for real money. If not, skip the item (e.g., it is a virtual currency)
				if (item.price == null)
					continue;
				// Instantiate a widget prefab
				var widget = Instantiate(WidgetPrefab, WidgetsContainer, false);
				// Fill the widget with data
				widget.NameText.text = item.name;
				widget.DescriptionText.text = item.description;
				widget.PriceText.text = $"{item.price.amount} {item.price.currency}";
				// Loading the item image and assigning it to the UI element
				ImageLoader.LoadSprite(item.image_url, sprite => widget.IconImage.sprite = sprite);
				// Add a click listener to the Buy button
				widget.BuyButton.onClick.AddListener(() => StartPurchase(item.sku));
			}
		}
		private void StartPurchase(string sku)
		{
			Debug.Log($"Start the purchase process for the item: {sku}");
			XsollaCatalog.Purchase(sku, OnPurchaseCompleted, OnError);
		}
		private void OnPurchaseCompleted(OrderStatus status)
		{
			Debug.Log("Purchase completed");
		}
		private void OnError(Error error)
		{
			Debug.LogError($"Error message: {error.errorMessage}");
		}
	}
}
    1. 변경 사항을 저장합니다.

    스토어 개체 생성

    스토어에 아이템 목록을 표시하는 UI를 생성합니다.

    1. 개별 아이템의 위젯을 그리드에 배열하고 중첩된 개체의 위치와 크기를 관리하는 구성 요소를 추가합니다. 이렇게 하려면
      1. Hierarchy 패널에서, Canvas 개체를 선택합니다.
      2. Inspector 패널에서, Add Component를 클릭한 후 Grid Layout Group 스크립트를 선택합니다.
      3. Inspector 필요할 경우 패널에서, 구성 요소 설정을 변경합니다. 셀 크기, 간격 등을 설정합니다.
    알림
    더 나은 시각화와 손쉬운 구성을 위해 VirtualItemWidget 개체를 여러 개 복사하는 것이 좋습니다. 이렇게 하면 스토어의 일반적인 레이아웃을 바로 평가할 수 있습니다.
    1. Canvas 개체에 하나의 구성 요소로 스토어 스크립트 추가하기:
      1. Hierarchy 패널에서 Canvas 개체를 선택합니다.
      2. Inspector 패널에서 Add Component을 클릭한 후 StoreController 스크립트를 선택합니다.
    2. 이러한 요소를 StoreController 스크립트의 필수 슬롯에 할당합니다.
      1. Hierarchy 패널에서, Canvas 개체를 선택합니다.
      2. Hierarchy 패널의 Canvas 개체를 가져와 Inspector 패널의 WidgetsContainer 슬롯에 놓습니다.
      3. Hierarchy 패널의 VirtualItemWidget 개체를 가져와 Inspector 패널의 WidgetPrefab 슬롯에 놓습니다.

    스토어 개체 예시:

    스토어 실행 및 테스트

    Unity 편집기에서 스토어를 실행하고 작동을 확인합니다.

    1. Canvas 개체의 경우, 모든 하위 개체를 삭제합니다.
    2. Play를 클릭합니다. 그 결과, 애플리케이션이 시작되면 엑솔라 로그인 위젯이 있는 브라우저 창이 열립니다.
    1. 애플리케이션에 로그인합니다. 사용자 인증에 성공하면 애플리케이션이 엑솔라에서 아이템 카탈로그를 요청합니다. 아이템 데이터를 성공적으로 수신하면 애플리케이션은 필요한 위젯을 생성합니다. 그 결과, 스토어 아이템 목록이 표시됩니다.
    1. 아이템 위젯에서 구매 버튼을 클릭합니다. 애플리케이션이 구매 프로세스를 시작하고 브라우저에 결제 UI를 표시합니다.
    1. 구매 프로세스를 완료합니다. 결제에 대해 테스트 카드를 사용합니다. 성공적으로 구매하면 로그에 Purchase completed 메시지가 표시됩니다.
    이 기사가 도움이 되었나요?
    감사합니다!
    개선해야 할 점이 있을까요? 메시지
    유감입니다
    이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
    의견을 보내 주셔서 감사드립니다!
    메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

    유용한 링크

    인증 카탈로그 정기 결제 프로모션
    아이템 구매 플레이어 인벤토리 사용자 계정 및 특성 문제 해결
    마지막 업데이트: 2025년 2월 7일

    오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!