앱을 서비스할 웹페이지 구성

앱 사용자는 크게 아래와 같은 과정을 거쳐 앱을 설치, 실행합니다.

 

  1. 앱을 서비스할 웹페이지에서 앱 실행 버튼을 누르고 크로스플레이 런처를 다운받아 설치
  2. 크로스플레이 런처를 실행
  3. 크로스플레이 런처가 자동으로 앱을 다운받고 설치
  4. 크로스플레이 런처가 자동으로 앱을 업데이트, 실행

 

다음은 크로스플레이 런처를 사용해 웹페이지에서 앱을 서비스하는 전체 과정입니다.

 

 

앱을 서비스할 웹페이지는 다음 두 가지 방식으로 제공할 수 있습니다.

  1. 하이브 게임즈(https://withhive.com/)에서 서비스
  2. 앱 개발사가 자체 구축한 웹페이지에서 서비스

이 가이드는 앱 개발사가 자체 구축한 웹페이지에서 크로스플레이 런처를 사용해 앱을 서비스할 때, 웹페이지에서 필수적으로 구현해야할 내용을 예시를 사용해 안내합니다.

앱 서비스 조건 확인

사용자가 웹페이지에 접속했을 때, 사용자 PC OS 버전 등 PC 환경을 지원하는지 확인합니다.

  • 지원 OS: Windows 10 이상

조건을 확인하여 문제가 있다면, 사용자에게 오류 팝업을 노출해야 합니다.

앱 실행 버튼과 크로스플레이 런처 다운로드 팝업창 구현

웹페이지에 앱 실행 버튼을 구현합니다.

 

크로스플레이 런처 설치 파일을 다운로드하는 팝업창을 구현합니다. 팝업창은 크로스플레이 런처 설치 안내 메세지를 포함해야 합니다.

 

웹페이지에서 앱 실행 버튼을 누르면 팝업창이 나타나도록 구현합니다. 팝업창에는 크로스플레이 런처 설치 파일 다운로드 버튼이 있어야 합니다.

크로스플레이 런처 설치 여부 확인

웹페이지에서 사용자가 앱 실행 버튼을 눌렀을 때, 사용자 PC에 크로스플레이 런처가 설치되어 있는지를 확인해야 합니다. 웹페이지에서 아래 JavaScript 코드를 실행하여 사용자 PC에 크로스플레이 런처가 설치되어 있는지 여부를 확인합니다.

JavaScript Code

사용자 PC에 크로스플레이 런처가 설치되지 않았다면, 크로스플레이 런처와 앱을 함께 설치하도록 구현합니다. 크로스플레이 런처가 이미 설치된 상태라면, 크로스플레이 런처를 실행하도록 구현합니다.

크로스플레이 런처와 앱을 함께 설치

크로스플레이 런처를 설치하면, 크로스플레이 런처가 앱을 자동으로 설치하고 실행할 수 있습니다.

크로스플레이 런처 설치 파일 다운로드 이벤트: 설치 파일 다운로드

위 안내를 따라 앱 실행 버튼과 팝업창을 구현 후, 사용자가 팝업창에 있는 다운로드 버튼을 누르면 크로스플레이 런처 설치 파일인 hivecrossplay-fn.qpyou.cn/hivecrossplay/p/w/Installer.exe를 다운로드하도록 구현합니다.

크로스플레이 런처 설치 파일 다운로드 이벤트: 앱 자동 설치

사용자가 다운로드 버튼을 누르는 이벤트 발생 시 게임 자동 설치 URI를 사용자 PC 클립보드에 복사하도록 구현해야 합니다. 크로스플레이 런처를 설치한 후, 크로스플레이 런처는 자동으로 클립보드를 탐색하여 게임 자동 설치 URI를 찾습니다. 게임 자동 설치 URI를 찾으면, 크로스플레이 런처는 URI에 해당하는 앱을 사용자 PC에 설치합니다. 만약, 클립보드에 게임 자동 설치 URI가 없으면 사용자 PC에 크로스플레이 런처만 설치하는 것으로 설치 과정을 마무리합니다. 앱을 설치하려면 사용자는 다시 웹페이지로 돌아가 앱 실행 버튼을 눌러야 합니다. 자세한 내용은 크로스플레이 런처 실행을 참고하세요.

게임 자동 설치 URI 획득

Hive 콘솔(샌드박스 또는 상용) > 크로스플레이 런처 > 앱 관리 > 다운로드 설정 > 런처 설치/실행 URI에서 자동 설치 URI를 얻습니다.

URI를 클립보드에 복사

획득한 자동 설치 URI를 사용자 PC 클립보드 공간에 복사하도록 구현합니다.

크로스플레이 런처 실행

사용자 PC에 크로스플레이 런처가 설치된 상태에서, 웹페이지에서 앱 실행 버튼을 누르는 이벤트 발생 시 JavaScript 코드를 실행합니다. JavaScript 코드는 게임 실행 URI로 크로스플레이 런처를 실행하고, 크로스플레이 런처는 앱을 자동으로 설치 및 실행합니다.

실행 URI 획득

Hive 콘솔(샌드박스 또는 상용) > 크로스플레이 런처 > 앱 관리 > 다운로드 설정> 런처 설치/실행 URI에서 실행 URI를 얻습니다.

JavaScript 코드 구현과 실행

사용자 PC에 크로스플레이 런처가 설치된 상태에서, 웹페이지에서 앱 실행 버튼을 누르는 이벤트 발생 시 JavaScript 코드를 실행하도록 구현합니다.

 

아래는 앱 실행 버튼이 “PC로 플레이” 버튼인 상황에서 이 버튼을 눌렀을 때 JavaScript 코드를 실행한 결과 예시입니다. 크로스플레이 런처가 실행되면서 크로스플레이 런처 자체를 업데이트하는 Crossplay Updater 실행 여부를 묻는 브라우저 알림이 나타납니다.