애플리케이션 측 SDK 통합
일반 정보
- 로그인 시스템, 인게임 스토어 및 애플리케이션의 기타 페이지에서 사용할 인터페이스를 디자인합니다.
- 애플리케이션에서, SDK 메소드를 사용하여 사용자 인증, 스토어 디스플레이, 구매 등을 위한 로직을 구현합니다.
빠른 시작
다음은 인게임 판매 시나리오를 가장 간단하게 구현하는 방법에 대한 지침입니다.
상호 작용 흐름:
- 사용자가 게임을 출시합니다.
- 애플리케이션이 엑솔라 로그인 웹 위젯을 실행합니다.
- 사용자가 게임에 로그인하여 아이템 카탈로그로 이동합니다.
- 애플리케이션이 엑솔라에 아이템 카탈로그를 요청합니다.
- 아이템 데이터를 성공적으로 수신하면 애플리케이션에 아이템 카탈로그가 표시됩니다.
- 사용자가 아이템 구매 버튼을 클릭합니다.
- 애플리케이션이 구매 프로세스를 시작하고 브라우저에 결제 UI를 표시합니다.
- 사용자가 결제합니다.
- 애플리케이션은 결제 UI를 닫고 결제 데이터를 엑솔라에 전달합니다.
- 애플리케이션은 결제 처리 결과에 대한 메시지를 로그에 출력합니다.
애플리케이션(
StoreController
스크립트) 및 SDK의 상호작용을 위한 순서도:시나리오 제한 사항:
- 기성 엑솔라 로그인 웹 위젯은 사용자 인증에 사용됩니다. 엑솔라는 표준 위젯 템플릿을 제공합니다. 위젯의 외관과 콘텐츠는 프로젝트에서 선택한 로그인 메소드와 관리자 페이지의 위젯 맞춤 설정에 따라 결정됩니다.
알림위젯 맞춤 설정은 엑솔라 제품 라이선스 계약에 서명한 이후에만 사용할 수 있습니다. 계약에 서명하려면, 관리자 페이지에서 계약 및 세금 > 계약 섹션으로 이동합니다.- 이 시나리오는 장바구니를 사용하지 않고 실제 통화로만 아이템을 판매하는 것을 구현합니다. 즉, 사용자는 하나의 아이템만 구매할 수 있습니다.
아이템 위젯 스크립트 생성
VirtualItemWidget
라는 이름의 새 스크립트를 생성합니다.- Unity 편집기에서 프로젝트를 엽니다.
- 메인 메뉴에서
Assets > Create > C# Script 로 이동합니다. Assets 폴더의 새 파일 이름을VirtualItemWidget
으로 지정합니다.- 편집기에서 생성된 파일을 열고 다음 코드를 추가합니다:
Copy- 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; } }
- 변경 사항을 저장합니다.
아이템 위젯 프리팹 생성
스토어에 아이템을 표시하는 UI를 생성합니다.
- UI 요소를 표시하려면
Canvas
개체를 생성하십시오. 이렇게 하려면 메인 메뉴에서GameObject > UI > Canvas 로 이동합니다. 그러면 화면에Canvas
,Canvas Scaler
및Graphic Raycaster
구성 요소와 함께Canvas
개체가 생성됩니다.- 화면에 이러한 개체가 이미 존재하지 않을 경우
EventSystem
개체가 생성됩니다.
VirtualItemWidget
하위 개체를 생성합니다.Hierarchy 패널에서,Canvas
개체를 선택합니다.- 메인 메뉴에서,
GameObject > UI > Image 로 이동합니다. 이렇게 하면 새로운 게임 개체가 생성되고, 이 개체는Canvas
개체의 하위 개체입니다. - 생성된 개체의 이름을
VirtualItemWidget
으로 다시 지정합니다.
- UI 개체를 추가하여 항목 정보를 표시합니다.
- 위젯 아이콘을 표시할 개체를 만듭니다.
Hierarchy 패널에서,VirtualItemWidget
개체를 선택합니다.- 메인 메뉴에서,
GameObject > UI > Image 로 이동합니다. - 생성된 개체의 이름을
IconImage
로 다시 지정합니다.
- 아이템 이름을 표시할 개체를 생성합니다.
Hierarchy 패널에서,VirtualItemWidget
개체를 선택합니다.- 메인 메뉴에서,
GameObject > UI > Legacy > Text 로 이동합니다. - 생성된 개체의 이름을
NameText
로 다시 지정합니다.
- 아이템 설명을 표시할 개체를 생성합니다.
Hierarchy 패널에서,VirtualItemWidget
개체를 선택합니다.- 메인 메뉴에서,
GameObject > UI > Legacy > Text 로 이동합니다. - 생성된 개체의 이름을
DescriptionText
로 다시 지정합니다.
- 아이템 구매 버튼을 위한 개체를 생성합니다.
Hierarchy 패널에서,VirtualItemWidget
개체를 선택합니다.- 메인 메뉴에서,
GameObject > UI > Legacy > Button 으로 이동합니다. 이렇게 하면Text
하위 개체가 있는 버튼 개체가 생성됩니다. - 생성된 개체의 이름을
BuyButton
으로 다시 지정합니다. Text
개체 이름을PriceText
로 다시 지정합니다.
- 위젯 아이콘을 표시할 개체를 만듭니다.
VirtualItemWidget
개체에 하나의 구성 요소로 아이템 위젯 스크립트 추가하기:Hierarchy 패널에서VirtualItemWidget
개체를 선택합니다.Inspector 패널에서Add Component 를 클릭한 후VirtualItemWidget
스크립트를 선택합니다.
- 필요한 스크립트 슬롯에 UI 요소를 할당합니다.
Hierarchy 패널에서,VirtualItemWidget
개체를 선택합니다.Hierarchy 패널의 하위 UI 개체를 가져와Inspector 패널의 해당VirtualItemWidget
구성 요소 슬롯에 놓습니다.
- 생성된
VirtualItemWidget
개체를 프리팹으로 전환합니다.Hierarchy 패널에서,VirtualItemWidget
개체를 선택합니다.- 해당 개체를
Assets 의Project 패널에 가져다 놓습니다. 그 결과,Assets 폴더에 새로운 개체가 나타나고 화면 개체의 색상이 파란색으로 변경됩니다.
아이템 위젯 프리팹 예시:
스토어 스크립트 생성
StoreController
라는 이름의 새 스크립트를 생성합니다.- Unity 편집기에서 프로젝트를 엽니다.
- 메인 메뉴에서
Assets > Create > C# Script 로 이동합니다. Assets 폴더의 새 파일 이름을StoreController
로 지정합니다.- 편집기에서 생성된 파일을 열고 다음 코드를 추가합니다:
Copy- 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}"); } } }
- 변경 사항을 저장합니다.
스토어 개체 생성
스토어에 아이템 목록을 표시하는 UI를 생성합니다.
- 개별 아이템의 위젯을 그리드에 배열하고 중첩된 개체의 위치와 크기를 관리하는 구성 요소를 추가합니다. 이렇게 하려면
Hierarchy 패널에서,Canvas
개체를 선택합니다.Inspector 패널에서,Add Component 를 클릭한 후Grid Layout Group
스크립트를 선택합니다.Inspector 필요할 경우 패널에서, 구성 요소 설정을 변경합니다. 셀 크기, 간격 등을 설정합니다.
알림더 나은 시각화와 손쉬운 구성을 위해VirtualItemWidget
개체를 여러 개 복사하는 것이 좋습니다. 이렇게 하면 스토어의 일반적인 레이아웃을 바로 평가할 수 있습니다.Canvas
개체에 하나의 구성 요소로 스토어 스크립트 추가하기:Hierarchy 패널에서Canvas
개체를 선택합니다.Inspector 패널에서Add Component 을 클릭한 후StoreController
스크립트를 선택합니다.
- 이러한 요소를
StoreController
스크립트의 필수 슬롯에 할당합니다.Hierarchy 패널에서,Canvas
개체를 선택합니다.Hierarchy 패널의Canvas
개체를 가져와Inspector 패널의WidgetsContainer 슬롯에 놓습니다.Hierarchy 패널의VirtualItemWidget
개체를 가져와Inspector 패널의WidgetPrefab 슬롯에 놓습니다.
스토어 개체 예시:
스토어 실행 및 테스트
Unity 편집기에서 스토어를 실행하고 작동을 확인합니다.
Canvas
개체의 경우, 모든 하위 개체를 삭제합니다.Play 를 클릭합니다. 그 결과, 애플리케이션이 시작되면 엑솔라 로그인 위젯이 있는 브라우저 창이 열립니다.
- 애플리케이션에 로그인합니다. 사용자 인증에 성공하면 애플리케이션이 엑솔라에서 아이템 카탈로그를 요청합니다. 아이템 데이터를 성공적으로 수신하면 애플리케이션은 필요한 위젯을 생성합니다. 그 결과, 스토어 아이템 목록이 표시됩니다.
- 아이템 위젯에서 구매 버튼을 클릭합니다. 애플리케이션이 구매 프로세스를 시작하고 브라우저에 결제 UI를 표시합니다.
- 구매 프로세스를 완료합니다. 결제에 대해 테스트 카드를 사용합니다. 성공적으로 구매하면 로그에
Purchase completed
메시지가 표시됩니다.
이 기사가 도움이 되었나요?의견을 보내 주셔서 감사드립니다!메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.유용한 링크
마지막 업데이트: 2025년 2월 7일오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.