ZEP Script를 환경 구축하고 Hello world 찍어보기

ZEP을 사용하면서 전체 알림을 주거나 채팅창에 안내메세지를 남기고 싶거나 캐릭터의 행동에 따라 원하는 액션을 취하는 등 보다 풍성하고 확장성있게 스페이스를 만들고 싶을때 ZEP Script를 이용하여 구현 할 수 있습니다. 

 

Javascript의 문법과 ZEP Script API 문서만 읽을 줄 알면 누가나 쉽게 개발할 수 있습니다. 저도 처음에는 어렵게 느껴질 수 있어 작업환경을 만들기 까지 시간이 다소 걸렸지만 다른 분들도 빠르게 ZEP Script 개발 환경을 구성 할 수 있게 정보를 공유 합니다. 

 

사전 준비작업

• ZEP Script는 기본적으로 Javascript 또는 Typescript 문법을 알고 있어야합니다. 여기에서는 Javascript를 사용합니다.
• ZEP을 기본적인 환경을 알아야 합니다. 

 

순서

1. 나의 앱 생성하기 
2. ZEP Script 라이브러리 사용 준비하기 
3. zep-script.json 작성하기
4. ZEP Script 소스  Build 및 배포하기 
5. 스페이스 맵에 나의 앱 적용하기 

 

1. 나의 앱 생성하기

• ZEP Script를 이용하기 위해서는 우선 ZEP에서 나의 앱을 생성해야합니다. 
• 개발한 ZEP Script 배포는 생성된 나의 앱에서 할 수 있습니다. 

 

ZEP에서 나의 앱으로 이동

ZEP사이트에 로그인을 하고 홈 화면에서 오른쪽 상단 계정 정보를 입력하고 나의 앱을 클릭합니다.

 

앱 업로드

나의 앱에서 "+ 앱 업로드" 버튼을 클릭합니다. 

 

앱 업로드에서 앱이름, 앱 설명을 입력하고 앱 타입은 노말로 선택하고 업로드 버튼을 클릭합니다. 

 

업로드가 완료된 안내창을 확인합니다. 

 

2. ZEP Script 라이브러리 사용 준비하기

• ZEP Script SDK(이하 ZEP Script)는 Javascript, Typescript 언어를 지원합니다.
• ZEP Script를 사용하기 위해서는 Node.js 환경을 구축해야합니다. 

 

Chocolatey설치 후 Node.js 버전 관리할 수 있는 NVM 설치로 Node.js 설치

Windows PowerShell (관리자) 또는 윈도우 터미널(관리자)창 띄우기

윈도우 터미널 창으로 쉽게 프로그램을 설치할 수 있게 해주는 Chocolatey 설치는 하단에 윈도우 버튼에서 마우스 커서를 대고 오른쪽 버튼을 눌러 윈도우 터미널(관리자)창 또는 Windows PowerShell(관리자) 를 실행합니다. 꼭 관리자로 실행합니다. 

 

Chocolatey 설치 명령어 실행

다음 명령어를 복사하여 터미널창에 붙여넣어 실행합니다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

 

설치가 완료 되면 Chocolatey 프로그램을 사용할 수 있게 다음 명령어도 복사하고 터미널 창에 붙여 넣어 실행합니다. 

Get-ExecutionPolicy

 

nvm 설치 

Windows Powershell 창에서 다음 명령어를 쳐서 nvm 을 설치합니다.

choco install nvm

 

node.js 특정 버전 설치하기 

최근에 최신버전을 설치했을 때 ZEP Script 배포 명령어가 안돌아 가는 현상이 생겨 여기에서 18.16.1 버전으로 설치합니다. Windows Powershell 창에서 다음 명령어를 이용하여 node.js 설치합니다. 

 

nvm install 18.16.1

 

18.16.1 버전 node.js 사용하기 

Windows Powershell 창에서 다음 명령어를 이용하여 18.16.1 버전을 사용할 수 있게 합니다.

nvm use 18.16.1

 

node.js 버전 확인하기

Windows Powershell 창에서 실제 node.js 를 사용할 수 있는지 확인하기 위해서 다음 명령어를 실행시켜 봅니다. 

node -v

 

VSCODE 설치 

ZEP Script를 개발하기 위해서는 편집기 툴이 있어야하는데 여기에서 VSCODE를 이용합니다. 

Windows Powershell 창에서 다음 명령어를 실행시켜 VSCODE를 설치합니다.

choco install vscode

 

파일 구조 만들기 

• ZEP Script 파일구조는 main.js과 res폴더로 구성됩니다. 
• main.js 파일은 필수적으로 있어야 합니다. 
• res폴더는 assets 역할로 이미지나 팝업 html 파일을 해당 폴더에 넣어 사용할 수 있습니다. 

전체 파일 구조는 다음과 같습니다. 

\---res // assets 역
     | sample.html
|   main.js
|   test.zepapp.zip // Build 파일 
|   zep-script.json // Build 및 배포를 위한 설정파일

 

VSCODE를 이용한 ZEP Script 파일구조 만들기 

VSCODE를 실행시켜 ZEP Script를 개발할 수 있는 파일 구조를 만들어 줍니다. 

 

 

3. zep-script.json 작성하기

• Build를 하기 위해서는 나의 앱의 정보가 담기 zep-script.json 파일을 생성해야합니다. 
• 파일위치는 main.js에 있어야 합니다. 

 

빈 zep-script.json 파일 생성

먼저 빈 zep-script.json 파일을 생성합니다.

 

나의 앱 정보입력을 위한 샘플 정보 입력 

이제 다음 샘플 정보를 복사 후 붙여넣기합니다. 

{
    "appId": "5AOXnj",  	
    "name": "scriptTest1",  
    "description": "scriptTest1" , 
    "type": "normal" 
}

 

ZEP의 나의 앱에서 appId를 가져와 zep-script.json 파일에 appId에 붙여넣기 

이전에 복사한 zep-script.json 파일에 처음에 생성한 나의 앱과 연동하기 위해서 ZEP 사이트에서 나의 앱에 들어가 나의 앱의 인터넷 주소에 적인 ID를 복사하여 수정해줍니다. 

 

먼저 “ZEP 사이트 접속 → 왼쪽 상단 계정 클릭 → 나의 앱” 이동하여 나의 앱 페이지를 열어 줍니다. 그리고 해당 앱을 선택합니다. 

나의 앱에 들어가면 브라우저 주소에 적힌 내용을 맨 왼쪽에 있는 appId를 복사하여 내용을 수정해줍니다. 

 

name, descript 값 수정하기 

나의 앱에서 앱 이름과, 앱 설명을 복사하여 name, description 값 수정하기

 

4. ZEP Script 소스 Build 및 배포하기

• 생성한 ZEP Script에서 소스 코드를 Build 및 배포를 할 수 있습니다.
• 추가 라이브러리 설치는 필요 없습니다.
• 배포를 하기 위해선 이메일 인증 최초 한번 필요합니다.

main.js에 Hello World 알림 창 코드 입력

빈 main.js 에 다음 소스 코드를 입력하고 저장합니다.

App.onJoinPlayer.Add(function (player) {
    App.showCenterLabel(`Hello World!`); 
})

 

 

ZEP Script Build 하기

터미널 창에서 Build 명령어를 실행합니다.

npx zep-script archive

Build가 종료되면 해당 폴더 명으로 zip일이 하나 생성되면 Build를 성공하였습니다.

 

 

ZEP Script 배포하기

다음 명령어를 입력하여 배포를 진행합니다. 최초 배포의 경우 계정 인증을 진행합니다.

가입한 이메일을 입력하면 인증번호 6 자리를 메일로 보내줍니다 해당 번호를 입력하면 배포가 진행 됩니다.

 

5. 스페이스 맵에 나의 앱 추가하기

• 이제 스페이스에서 특정 맵에 나의 앱을 적용할 수 있습니다.
• 앱 적용은 플레이 모드에서 할 수 있습니다.
• 설정은 관리자 권한을 가진 계정에서 할 수 있습니다.

설정 - 맵 설정 - 노말 앱 추가에서 나의앱 추가하기

해당 메뉴로 이동하여 노말 앱 추가에서 배포한 나의 앱을 추가합니다. 여기에서 다른 나의 앱도 설정할 수 있습니다.

 

Hello World 창 확인

새 플레이어가 등장했을 때 Hello World가 나타나는 걸 확인할 수 있습니다.