콘텐츠로 이동

시작하기

Hive Axyl SDK를 Unity WebGL 앱에 적용하려면 WebGL 앱 전용 App ID를 만들고, WebGL을 지원하는 SDK 모듈만 설치한 뒤 앱을 웹 서버에 배포합니다.

1. WebGL App ID 생성

실행 환경이 Web인 앱은 다른 실행 환경의 App ID를 함께 사용하지 않고 WebGL 앱 전용 App ID를 사용합니다. Hive 콘솔에서 프로젝트를 선택한 뒤 프로젝트 설정 > App ID에서 App ID를 생성하세요. 아래 값을 사용합니다.

항목 값
실행 환경 Web
스토어 직접 배포

생성한 App ID는 SDK를 초기화할 때 사용합니다. 실행 환경별 서비스 설정, 통계, 운영 데이터도 App ID를 기준으로 구분됩니다.

2. SDK 설치 및 초기화

Hive Axyl SDK 설치에 따라 SDK를 설치하고, 앱에서 사용할 모듈을 설치하세요. WebGL 빌드에는 WebGL을 지원하는 모듈만 포함해야 합니다.

SDK 패키지에는 WebGL 브라우저 런타임이 포함되어 있으므로 SDK를 위해 별도의 호스트 페이지 스크립트를 연결할 필요가 없습니다. SDK 초기화 단계에서는 1단계에서 만든 WebGL App ID를 설정하세요.

3. 로그인 구현

WebGL에서는 외부 인증 제공자의 로그인 페이지를 브라우저 팝업으로 열고, 리다이렉트 페이지가 전달하는 메시지로 로그인 결과를 받습니다. 웹 로그인 세션을 구현할 때 아래 사항을 함께 적용하세요.

  1. 외부 인증 제공자 콘솔에 HTTPS 리다이렉트 URI를 등록하세요.
  2. OpenRequest.Url에 외부 인증 제공자의 인가 URL을 설정하세요.
  3. OpenRequest.RedirectUri에 등록한 리다이렉트 URI를 설정하세요. 이 값의 origin은 팝업에서 보내는 postMessage의 origin과 같아야 합니다.
  4. 사용자 입력 이벤트에서 로그인 세션을 여세요. 브라우저가 팝업을 차단하면 로그인 세션을 시작할 수 없습니다.
  5. 콜백 URL의 state를 앱에서 보관한 값과 비교한 뒤 인증 결과를 처리하세요.

WebGL에서는 Hive Axyl SDK의 Secure Storage를 사용할 수 없습니다. 따라서 SDK가 인증 정보를 영구 저장하는 방식의 자동 로그인은 사용할 수 없습니다. 앱에서 로그인 상태 유지 방식을 별도로 구현하세요.

게스트 계정에 필요한 GuestPlayerId, GuestToken, deviceKey를 별도로 보관하지 않으면 기존 게스트 계정을 복구할 수 없습니다. 저장소를 직접 구현할 때는 브라우저에서 데이터가 삭제되거나 노출될 가능성을 고려하고, 민감한 인증 정보를 평문으로 저장하지 마세요.

4. 결제 구현

WebGL 앱은 스토어 결제를 사용할 수 없습니다. PG 결제를 적용하고, 결제 상품에는 실행 환경이 Web이고 스토어가 직접 배포인 App ID를 연결하세요.

Apple App Store, Google Play, Steam 결제 Add-on은 WebGL 빌드에 포함하지 마세요. PG 결제의 상품 조회, 구매, 영수증 검증, 상품 지급 절차는 PG 결제를 참조하세요.

5. WebGL 빌드 및 배포

  1. Unity의 빌드 프로필에서 Web 플랫폼을 선택하세요.
  2. WebGL 2.0을 사용할 수 있도록 WebGL Graphics API 설정을 확인하세요.
  3. WebGL을 지원하지 않는 Add-on이 빌드에 포함되지 않았는지 확인하세요.
  4. 앱을 빌드하고 HTTPS를 사용하는 웹 서버에 결과물을 배포하세요.
  5. 배포 URL에서 SDK 초기화, 로그인 팝업과 콜백, 계정 복구, PG 결제를 확인하세요.

로그인 팝업과 postMessage는 로컬 파일로 직접 연 페이지에서 정상 동작하지 않을 수 있습니다. 개발 중에도 웹 서버에서 빌드를 제공하고, 실제 서비스와 같은 origin 및 HTTPS 조건에서 로그인 콜백을 점검하세요.

배포 전 확인 사항

  1. WebGL 앱 전용 App ID의 실행 환경이 Web, 스토어가 직접 배포인지 확인하세요.
  2. SDK 초기화에 WebGL App ID를 사용했는지 확인하세요.
  3. 앱에 포함한 모든 SDK 모듈과 Add-on이 WebGL을 지원하는지 확인하세요.
  4. 팝업 차단 상태와 로그인 리다이렉트 URI의 origin을 확인하세요.
  5. 브라우저 데이터를 삭제한 뒤 로그인 및 게스트 계정 복구 동작을 확인하세요.
  6. WebGL 앱의 결제가 PG 결제로만 구성되어 있는지 확인하세요.
  7. Chrome, Safari, Firefox, Edge의 최신 버전에서 주요 동작을 확인하세요.