메타버스에서 월 3000만원 버는 게임 만드는 방법

https://youtu.be/jVbr6qVXu1c

 

00:02

재배석 메타버스 게임을 쉽게 만드는 방법

• 3000만 원 월 매출 기록
• 조코딩: 네이버 제트와 슈퍼켓의 매트 타버스 플랫폼 소개
• 잭 스크립트 활용한 다양한 콘텐츠 제작 방법

01:55

맵 제작 및 컨트롤 방법

• 에디터를 이용하여 맵 제작
• 스폰 포인트 및 오브젝트 배치 가능
• 맵에서 키보드로 이동 및 협업 가능

03:50

파일 압축 설정과 앱 업로드 방법

• 파일 이름 설정 후 압축으로 올려야 함
• 리베린 파일 익스플로어에서 폴더 찾기
• 앱 업로드 시 이름과 설명 설정

05:40

캐릭터 이동 속도를 높이는 스크립트 구현

• 메세지 출력 외에 다양한 기능 구현
• 스크립트를 사용하여 캐릭터 이동 속도 향상
• API를 확인하여 스크립트 플레이어 정보 변경

06:27

잭 앱에서 플레이어 이동 속도 설정하는 방법

• 가이드에서 잭 앱에서 플레이어 이동 속도 설정
• 플레이어 이동 속도를 높여주는 코드 적용
• 메인 점 제이에스 안에 복사하여 값 변경

00:02
월 매출이 무려 3000만 원을 기록했다고 합니다. 안녕하세요. 조코딩입니다. 이번 영상은 재배석 메타버스 게임을 정말 쉽게 만드는 방법을 알아보겠습니다. 우선 잭은 제페토를 만든 네이버 제트와 바람의 나라를 제가 연을 만든 슈퍼켓이 함께 만든 매트 타버스 플랫폼인데요. 이렇게 여러 사람들이 캐릭터로 접속해서 함께 채팅이나 화상회의를 할 수 있는 웹 기반의 서비스입니다. 개더타운을 이용해 보신 분들은 익숙하실 수 있겠는데요. 한국판 개더타운이라고 보시면 될 것 같습니다. 재배 특장점으로는 크로스 플랫폼으로 5만 명 이상 동시 수용이 가능하고 NFT 연동과 같은 웹3 관련 기능 후원 결제 수익화 관련 기능 등 쉽게 활용할 수 있는 다양한 기능들을 제공해 줍니다. 그중에서도 잭의 엄청난 장점은 잭 스크립트를 제공한다는 점인데요. 잭 스크립트란 자바스크립트를 기반으로 잭에서 동작할 수 있는 앱을 만들 수 있는 스크립트인데요. 잭 스크립트를 활용하면 무궁무진한 기능을 적용하여 다양한 콘텐츠를 만들 수 있습니다. 
00:57
예시를 살펴보면 오엑스 퀴즈 좀비가 게임 퀴즈 게임 페인트 게임 가위바위보 결초 게임 경찰과 도둑 오모 등 멀티플레이 콘텐츠를 손쉽게 만들 수 있습니다. 레다게임즈라는 곳에서는 잭 기반 방탈출 게임을 만들었는데 월 매출이 무려 3000만 원을 기록했다고 합니다. 그러면 직접 잭 스크립트로 메타버스 게임을 만드는 과정을 진행해 보도록 하겠습니다. 먼저 잭을 이용해서 나만의 스페이스를 만들어보도록 하겠습니다. 그러려면 잭 공식 홈페이지 잭 점 유에스로 접속을 해 줍니다. 그리고 시작하기를 눌러줍니다. 그러면 소셜 로그인이나 이메일을 통해서 로그인이 가능합니다. 로그인 후 스페이스 만들기를 눌러보시면 이렇게 미리 만들어진 템플릿 중에서 선택해서 여기서 추가로 만들 수도 있고 아니면 빈 맵에서 시작하기를 눌러서 빛맵부터 시작할 수도 있습니다. 우리는 빈맵에서 시작을 해보도록 하겠습니다. 이거를 클릭해 줍니다. 그리고 스페이스 이름은 잽 스크립트라고 짓고 만들기를 눌러보겠습니다. 그러면 맵 에디터가 열리게 되는데요. 
01:55
여기서 에디터를 이용해서 간편하게 맵을 제작을 할 수 있습니다. 바닥을 만드시려면 도장 선택하고 바닥 모양을 선택하신 다음에 이렇게 찍어주면 이런 식으로 바닥을 손쉽게 만들 수 있습니다. 그리고 뭐 벽이나 이런 오브젝트들도 배치할 수 있고 이런 통과 불가하거나 아바타가 생성되는 스폰 포인트나 포털 지정 영역 뭐 이런 것들도 만들 수 수가 있습니다. 여기 스폿 영역을 지정해 주고 플레이를 눌러주면 내가 만든 맵에서 키보드를 통해서 움직일 수 있고 초대하기를 눌러서 이 링크를 전달한다면, 이 링크를 받은 친구는 나와 같은 공간에 접속해서 함께 채팅이나 화상회의를 진행을 하실 수 있습니다. 그러면 이렇게 내가 만든 맵에 잽 스크립트 가이드를 참고해서 잽 스크립트를 넣어보도록 하겠습니다. 이 잭 스크립트 가이드는 제가 본문과 댓글에 링크를 남겨놓겠습니다. 가볍게 튜토리얼을 따라 해보도록 하겠습니다. 튜토리얼을 선택하고 메세지 출력해보기 헬로월드 이 문서를 따라가도록 하겠습니다. 앱 중앙의 상당부 메세지를 출력하는 기본 코드를 실행을 해볼 건데요. 
02:55
자바스크립트 코드로 이런 코드를 작성하면 된다고 합니다. 그러면 코드 작성을 진행해 볼 텐데요. 코드 에디터가 없으신 분들은 이 주소를 남겨드릴 테니 여기서 비주얼 스튜디오 코드를 다운받고 따라오시면 되겠습니다. 비주얼 스튜디오 코드를 설치하고 실행하시면 이런 화면이 나올 텐데요. 먼저 작업 폴더를 열어주겠습니다. 파일의 오픈 폴더를 넣어서 원하시는 경우에 폴더로 하나 만들어주시고 이 폴더를 열어서 폴더 선택을 해줍니다. 그리고 이 파란색 버튼을 누르시면 이렇게 왼쪽에 폴더가 열리게 되는데요. 요 플러스 표시가 있는 아이콘을 눌러서 파일을 만들어줍니다. 파일 이름은 메인 점 제이에스 만들고 엔터를 눌러줍니다. 그리고 헬로우 월드를 출력하는 예시 코드인 이 코드를 복사해서 여기에 붙여넣고 이렇게 이상하게 같이 딸려온 코드들은 주워주고 요것만 남기고 파일에 세이브로 저장을 해줍니다. 그리고 작성한 스크립트를 배포 가이드에 따라서 내 맵에 적용을 해 보겠습니다. 그럼 배포 가이드를 눌러서 들어가 보겠습니다. 
03:50
가이드를 보니 파일 이름은 반드시 메인 점 제이에스로 설정해야 되고 압축으로 묶어서 올려야 된다고 합니다. 그러면 이 폴더를 찾아서 여기서 마우스 우클릭해서 리베린 파일 익스플로어를 누르면 이렇게 메인 점 제이에스가 있는 폴더를 찾아갈 수 있는데요. 여기서 마우스 우클릭 집 파일로 압축 을 통해서 집 파일로 압축을 해 줍니다. 그러면 이렇게 메인 점 집이라는 파일이 생겼고요. 그리고 배포 가이드에 따라서 두 번째 나의 스페이스 목록 여기로 이동을 해서 오른쪽 위에 이름을 클릭하고 나의 앱이라고 된 것을 클릭을 해줍니다. 그리고 오른쪽 위에 앱 업로드를 눌러서 내가 만든 스크립트를 업로드를 해 주겠습니다. 앱 이름은 헬로우 월드 라고 지어주고 설명도 동일하게 지어주겠습니다. 여기서 앱 타입을 지정해 줄 수 있는데요. 앱 타입은 노멀 앱과 인스턴로블 앱이 있는데, 여기서 각각 노멀 앱과 미니 미니게임을 의미합니다. 노멀 앱은 여기 에디터에서 직접 스크립트를 적용할 수 있는 것이고요. 
04:45
인스톨로브 랩은 잭 맵에 접속한 상태에서 이 상태에서 여기 왼쪽의 미니게임 탭을 눌러서 여기서 추가할 수 있는 프립트가 인스턴로브 랩입니다. 그래서 우리는 더 편리하게 추가하기 위해서 앱 타입을 미니 게임으로 지정을 하고 앱 아이콘 선도 추가할 수 있는데, 요거는 생략하고 잽 스크립트 파일 우리가 만들어준 집 파일을 추가를 해주겠습니다. 추가하기를 눌러서 우리가 압축 파일을 만들어준 잽 스크립트의 메인 점 집 요거를 열기를 눌러서 추가를 해주고 업로드를 해 주겠습니다. 그러면 이렇게 헬로우 월드 라는 나의 앱이 추가가 되는데요. 그러면 다시 내가 만든 잭 스페이스로 오셔서 왼쪽에 미니게임을 눌러보시면 우리가 만든 헬로우 월드라는 게 추가된 것을 확인할 수 있습니다. 이거를 클릭해서 적용을 하면 이렇게 위쪽에 헬로우 코월드라는 라는 글자가 잘 출력된 것을 확인할 수 있습니다. 이렇게 미니 게임을 활용해서 잭 스크립트를 실행하면 요런 박스가 생기는데 요거를 스페이스를 눌러서 점프해서 밟으면 크립트가 종료됩니다. 단순히 메세지를 출력하는 것 외에도 정말 다양한 기능들을 구현해 볼 수 있는데요. 
05:44
그중에서 지금 접속해 있는 이 캐릭터의 이동 속도를 높이는 것을 구현해 보도록 하겠습니다. 현재는 요런 속도로 이동을 하는데 스크립트를 적용해서 속도를 더 빠르게 만들어 보겠습니다. 그러기 위해서 튜토리얼 문서 중에 API 문서를 확인해 보시면 잭 스크립트 구현을 위한 다양한 API들이 제공되고 있는데, 이 중에서 스크립트 플레이어를 이용해서 플레이어에 대한 정보를 바꿔보도록 하겠습니다. 그러면 스크립트 플레이어를 눌러서 이렇게 플레이어에 관련된 데이터를 읽거나 제어할 수 있는 다양한 방법들이 예시와 함께 잘 나와 있는데요. 저는 이동 속도를 바꿔볼 거기 때문에 이렇게 플레이어 무브 스피드라는 값을 바꿔주도록 하겠습니다. 그리고 공통적으로 플레이어 필드 값을 수정한 다음에는 이 샌드 업데이트 요거를 해줘야 된다고 합니다. 다시 가이드로 가셔서 튜토리얼에 잭 앱 라이프 사이클 이야기로 들어와 보시면 이렇게 잭 앱에서 앱이 실행되고 종료되는 과정에서 발생하는 이벤트를 볼 수 있는데요. 우리는 플레이어가 들어왔을 때 그때 이동 속도를 플레이어에게 높여주는 코드를 적용시켜 보도록 하겠습니다. 
06:44
그러려면 아래쪽 예시 중에 플레이어가 들어왔을 때에 해당되는 이 코드를 복사해서 이 메인 점 제이에스 안에 붙여 넣어주고 이 온 조인 플레이어 이 안에 여기서 플레이어를 받아서 이 플레이어에 대한 값을 바꿔줄 수 있습니다. 속도를 바꿔주려면 플레이어 점 무브 스피드 이 값을 바꿔주면 됐었죠. 요거를 복사해서 플레이어 점 무브 스피드의 값을 한 300 정도로 바꿔보도록 하겠습니다. 그리고 값을 바꾸고 나서는 이 아래쪽에 공통에 나온 대로 플레이어 샌드 업데이트 이 코드를 적용을 해줘야 됩니다. 그럼 요거를 복사해서 이 아랫줄에 붙여놓고 컨트롤 에스로 저장을 해주겠습니다. 그리고 파일을 다시 압축해서 올려보도록 하겠습니다. 기존 집 파일은 지우고 메인 점 제이에스를 마우스 우클릭 집으로 압축을 눌러서 새로운 메인점 집을 만들어 줍니다. 그리고 다시 나의 앱에서 헬로우 헬로월드 이거를 클릭하고 잭 스크립트 파일을 변경을 해 주겠습니다. 수정한 메인 점 칩을 올려놓고 수정을 해 주게 되면 새로 작성한 스크립트로 나의 헬로우 월드 앱이 변경이 되었습니다. 
07:40
그러면 다시 미니 게임에서 헬로우 월드 앱을 삽입을 하면 이제 이동 속도가 아까 훨씬 빨리 움직이는 것을 확인할 수 있습니다. 이렇게 저는 간단히 헬로월드를 출력하고 캐릭터의 이동 속도를 바꾸는 정도만 해봤는데요. 가이드의 API 문서나 예제를 참고하시면 앱이 설치된 페이스 관련 전반적인 거나 뭐 타일이나 오브젝트 플레이어 설정 HTML을 위제 형태로 표현하는 등 굉장히 다양한 기능들을 이 잭에 적용을 할 수 있으니 잭 스크립트를 이용해서 나만의 재미있는 메타버스 게임을 만들어 보시기 바랍니다. 좀 더 자세한 방법을 배우고 싶은 분들은 내용란에 남겨둔 스파르타 코딩클럽 잭스크립트 무료 강의 링크를 참고해 주세요. 유익하게 보셨다면 구독 좋아요. 알림 설정 꼭 부탁드립니다. 감사합니다.