ZEP Guidebook (KR)
  • 👋Hello ZEP Script
  • ZEP Script 가이드
    • ZEP Script 개발 가이드
      • 쉬운 개발 가이드
      • Javascript 개발 가이드
      • Typescript 개발 가이드
      • ZEP Script 배포 가이드
    • ZEP Script 따라하기
      • 기초 예제 코드
        • ✉️메시지 출력해보기
        • ♻️ZEP APP lifecycle 이해하기
        • 👤캐릭터 이미지 바꾸기
        • 🖼️나만의 UI 만들기
        • 💢2초 스턴 효과 만들어보기
      • ZEP Script 예제 코드
        • ⏰타이머
        • ⏱️방탈출 타이머
        • 🤛사이드바 앱
        • 🧟‍♂️좀비 게임
        • 🎨페인트맨 게임
        • 🙆‍♀️초성 퀴즈
        • 💩똥피하기 게임
        • 🥊결투 게임
        • 🏃‍♂️달리기
      • Custom Label 예제 코드
        • Type-A
        • Type-B
        • Type-C
        • Type-D
        • Type-E
        • Type-F
        • Type-G
        • Type-H
        • Type-I
        • Type-J
      • 사이드 바 앱 예제 코드
        • 🔹Image List
        • 🔹Text List
        • 🔹Text Button List
        • 🔹Ranking List
        • 🔹Select List
    • ZEP Script FAQ
    • 부록
      • 🎡ZEP 스크립트 활용 사례
      • 🗺️스페이스와 맵 이해하기
      • ⌨️자바스크립트 키코드 표
      • 🎨스프라이트시트 이해하기
      • 🌀TileEffectType 상세 설명
      • 📌기준 좌표
      • 🛰️외부 API 통신하기
      • 🔰URL 쿼리스트링 활용하기
      • 🪧위젯에서 사용가능한 문법
      • 🔘모바일버튼 이미지 변경하기
      • ✳️ZEP 스크립트 상호작용 오브젝트 가이드
      • 📇오브젝트 npcProperty
  • ZEP SCRIPT API
    • 📘ZEP Script API
      • API Summary
      • ScriptApp
        • Lifecycle
        • Field
        • Storage
        • Event Listeners
        • Callbacks
        • Methods
      • ScriptMap
        • Field
        • Methods
      • ScriptPlayer
        • Field
        • Methods
      • ScriptWidget
        • Field
        • Event Listeners
        • Methods
      • UtilityClass
        • Time
Powered by GitBook
On this page
  • 프로그램 설치
  • 프로그램 실행 및 코드 작성 준비
  • 샘플 코드 작성하기
  • 앱 업로드 및 실행하기
  • 앱 업로드 하기
  • 앱 테스트 하기
  • ZEP Script 따라하기

Was this helpful?

  1. ZEP Script 가이드
  2. ZEP Script 개발 가이드

쉬운 개발 가이드

PreviousZEP Script 개발 가이드NextJavascript 개발 가이드

Last updated 1 year ago

Was this helpful?

이 가이드에서는 ZEP Script 개발을 시도해 보고자 하는 분들을 위한 간단한 개발 환경 및 방법에 대해 설명합니다.

프로그램 설치

ZEP Script를 이용해 앱을 개발하기 위해서는 코드를 작성할 수 있는 IDE(편집기)가 필요합니다. 이 가이드에서는 Visual studio code 소프트웨어를 설치해 보도록 하겠습니다.

  1. Visual studio code 홈페이지()에 방문합니다.

  2. PC에 설치된 OS에 맞는 소프트웨어를 다운로드하고 설치합니다.

프로그램 실행 및 코드 작성 준비

  1. 설치한 소프트웨어를 실행합니다.

  2. 중앙 상단에 표시되는 파일 형식 입력에 main.js라고 입력합니다.

    (ZEP Script로 제작한 앱에는 반드시 main.js 파일이 있어야 합니다)

  3. 파일을 저장할 폴더를 선택하신 후 파일 생성을 클릭합니다.

샘플 코드 작성하기

미니 게임을 실행하면 간단한 인사 메시지가 나오는 앱을 제작해 보도록 합니다.

사용할 API는 아래 3가지입니다.

아래와 같이 테스트 코드를 작성한 후 저장합니다.

App.onStart.Add(function(){
    App.sayToAll("Hello, Zep!");
    App.centerLabel("Hello, Zep!")
})

저장이 완료되었으면, 앱을 업로드하기 위해 main.js파일이 있는 폴더로 이동해 해당 파일을 *.zip파일로 압축합니다.

앱 업로드 및 실행하기

앱 업로드 하기

  1. [나의 앱]에서 앱을 등록하거나 수정할 수 있습니다. 새로운 앱을 업로드하기 위해 우측 상단에 [앱 업로드] 버튼을 클릭합니다.

  2. 앱 업로드에 필요한 정보를 작성합니다.

  • 이름, 설명 등을 작성합니다.

  • 앱 타입은 [미니 게임]으로 합니다.

  • [ZIP 파일 업로드] 버튼을 눌러, 작성한 코드가 포함된 압축 파일을 등록합니다.

  • 다 완료되었으면 [업로드] 버튼을 눌러 완료합니다.

앱 테스트 하기

테스트를 위해 홈페이지에 로그인 후 스페이스를 만들어 주세요.

  1. 좌측의 사이드바에서 [미니 게임]을 클릭합니다.

  2. 실행 가능한 미니 게임 목록 중에 내가 업로드한 앱을 클릭합니다. [Hello, ZEP]

  3. 앱이 실행됨과 동시에 화면 상단과 채팅 창에 코드로 작성했던 Hello, ZEP! 이라는 메시지가 나타나는 것을 볼 수 있습니다.

ZEP Script 따라하기

기본적인 앱 제작, 업로드 방식에 대해 알아봤는데요,

ZEP Script에 대해 조금 더 학습하면, 자신이 원하는 앱을 만들 수 있습니다.

좌측 상단에 [파일] → [새 파일]을 선택합니다.

- 앱이 실행될 때 이 API함수 내에 있는 명령들이 1회 실행됩니다.

- 채팅 창에 메시지를 표시하는 기능입니다.

- 화면에 메시지를 표시하는 기능입니다.

더 많은 기능에 대해 알아보려면 ZEP-Script 가이드()를 참고해 주세요.

홈페이지 로그인한 후 우측 상단에 내 닉네임을 클릭해서 [나의 앱]을 클릭합니다.

앱 종류 및 업로드에 대한 자세한 사항은 를 참고해 주세요.

[]를 따라서 만들어 보는 것부터 시작해 보세요!

App.onStart
App.sayToAll
App.showCenterLabel
링크
[배포 가이드]
기초 예제 코드
링크