LayaBox getUserKeyForGame 등 SDK 함수 연동문의

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

안녕하세요. 앱인토스 미니게임 개발 중인 퍼블리셔입니다. SDK 연동 방식 관련해 문의드립니다.
[개발 환경]

  • 게임 엔진: LayaBox (React 기반 아님, 순수 JS/TS로 빌드되는 H5 엔진)
  • 빌드: webpack으로 Laya H5 산출물을 래핑해 granite build로 .ait 생성
  • @apps-in-toss/web-framework 2.x 사용
    [현재 상황]
  • .ait 빌드 및 업로드 후 샘드박스/토스앱에서 게임 화면 정상 렌더링까지는 완료했습니다.
  • 이제 getUserKeyForGame 등 SDK 함수를 연동하려는데, 여기서 막힐습니다.
    [직접 확인한 사항]
  1. Laya 엔진 내부 TS 컴파일러에서 import { getUserKeyForGame } from ‘@apps-in-toss/web-framework’ 를 직접 쓰면 모듈 해석 오류가 납니다. (Laya 내장 컴파일러가 npm 모듈 해석을 제대로 못하는 것으로 보입니다.)
  2. index.html에 CDN(jsdelivr)으로 index.min.js를 로 직접 삽입해 보았는데, 화면이 무지 화면이 되었습니다. (ESM 모듈을 UMD 스크립트처럼 쓴 것이 원인으로 추정됩니다.)
    [문의 사항]
    공식 문서와 예제가 모두 React(react-ts) 기준인데, 저희처럼 React가 아닌 게임 엔진(LayaBox, Cocos 등 순수 JS 산출물)의 경우:
  3. SDK(getUserKeyForGame 등) 연동 시 공식이 권장하는 방식은 무엇인가요? (예: webpack/Vite 번들 진입점에서 import 후 전역 변수로 게임 측에 전달하는 브릿지 방식이 맞는지?)
  4. React가 아닌 엔진용 최소 예제(또는 가이드)가 있나요? Unity WebGL 연동 가이드처럼 LayaBox도 참고할 자료가 있는지 궁금합니다.
  5. 순수 JS 환경에서 SDK를 초기화할 때 주의해야 할 점(초기화 순서, 런타임 ready 시점 등)이 있다면 알려주세요.
    감사합니다.
2

안녕하세요 :slight_smile:
현재 공식 문서에는 LayaBox 전용 최소 예제는 별도로 제공되어 있지 않지만,
구조적으로는 Unity WebGL을 Vite 프로젝트로 감싸는 방식과 동일하게 접근하시면 될 것 같습니다.

앱인토스 빌드를 담당하는 webpack/Vite 쪽 진입점에서 SDK를 import하고 게임 런타임에는 전역 브릿지로 전달하는 방식으로 테스트 부탁드려요 :man_bowing:

// 앱인토스 웹 번들러 진입점
import { getUserKeyForGame } from '@apps-in-toss/web-framework';

window.AppsInTossBridge = {
  getUserKeyForGame,
};

Laya 쪽 코드에서는 npm 모듈을 직접 import하지 않고 아래처럼 호출합니다.

  const result = await window.AppsInTossBridge.getUserKeyForGame();