[Gather town] 02. 개더타운 맵 만들기 (제작 과정)

[Gather town] 02. 개더타운 맵 만들기 (제작 과정)

Gather town 이전 게시물 보러가기:

[Gather town] 01. 메타버스 모임을 기획해 볼까요?
커리어리 기록습관 챌린지 시즌 3가 지난 주에 끝났습니다. 기록습관 챌린지는 시즌을 거듭할수록 참여자들의 피드백과 회고를 통해 점점 더 발전하고 있는데요, 그럼에도 남아있는 아쉬움을 해소하고, 더 큰 만족감을 드릴 수 있게 하기 위해 시즌 3에서는 이제까지 시도해본 적 없는 새로운 시도를 해보았습니다. Q. 온라인 네트워킹 모임, 어떻게 하게 됐나요? A. 더

📌 맵 만들기 시작!

개더타운에 가입을 하고 ' + Create a new space'를 누르면 이처럼 여러가지 기본 맵 템플릿을 사용할 수 있습니다.

Gather town - Template 선정 화면

여러 가지 기본 맵 템플릿 중 행사 참여 인원과 행사 목적에 맞는 템플릿 하나를 선택해줍니다.

그리고는 해당 Space의 이름과 비밀번호(선택사항), 해당 Space를 만드는 이유을 설정해준 뒤 본격적인 맵 디자인을 시작합니다.

여기서 Space의 이름은 URL 끝에 나타나게 되므로 한 번 설정하면 수정할 수 없으니 행사명/장소명을 확정한 뒤에 결정하는 것이 좋습니다.

기본 맵 'Rooftop Party'

이제까지 개더타운을 활용한다고 하면 대부분 사무실 맵에서 원격근무를 하거나, Conference 맵에서 행사를 진행했었습니다.

그러나 기록습관 챌린지 참여자들과 함께하는 루프탑 파티는 기록습관 챌린지의 '애프터 파티', '네트워킹 파티' 와 같은 방향으로 기획했습니다. 그러므로 이번 행사에서는 "루프탑 파티(Rooftop Party)" 템플릿을 사용하는 것이 더 어울리며, 더불어 새로운 시도가 될 수 있을 것이라 생각했습니다.

이대로 기본 맵을 사용해도 되지만, 이번 행사를 준비하며 개더타운에서 활용할 수 있는 부분을 최대한 활용해보자는 마음으로 맵을 확장하고, interaction object도 사용하고, 기존에 없던 오브젝트를 추가하고, 다양한 space를 만들어 연결시켜보았습니다.

하나씩 더 자세히 설명해보겠습니다.


📌 활용할 수 있는 오브젝트를 훑어보자

간단한 맵 수정

개더타운에서는 다양한 Objects를 사용할 수 있습니다. 꾸준히 업데이트가 되고 있다고 하니 앞으로는 더 많은 오브젝트들을 사용할 수 있을 것 같습니다.

간단한 맵 수정과 오브젝트 사용은 개더타운 맵 안에서도 가능합니다.
Object picker를 통해 object를 배치할 수도 있고, 새로운 이미지를 추가할 수도 있습니다.

저는 'Edit in Mapmaker'를 눌러 Mapmaker를 통해 맵을 수정하였는데요,
우선 Object picker에서 오브젝트를 쭉 훑어보며 대략 어떤 오브젝트들을 사용할 지 고민해보았습니다. 이 과정을 거치는 이유는 개더타운 내에 모든 오브젝트가 있는 것이 아니기에 필요에 따라 개더타운에 없는 오브젝트는 다른 방법으로 추가를 해야 하기 때문입니다.


📌백그라운드(Background) 수정

[맵 확장하기]

※ 맵을 확장하거나, 원하는 폰트로 글씨를 추가하기 위해서는 포토샵 등 별도의 툴이 필요합니다.

백그라운드를 수정하기 위해서는 우선 'Mapmaker'를 열고,
우측 상단에 있는 줄 세 개를 눌러 백그라운드를 다운로드해줍니다.

이후 포토샵을 켜고 공간을 확장하고 싶은 만큼의 크기를 설정합니다.

여기에 아까 다운 받았던 Background를 가져와 사이즈를 조절하고, 기존 맵의 이미지를 빈 공간에 자연스럽게 copy&paste 합니다.

※중요※
수정을 하기 전, '환경 설정 → 안내선, 격자 및 분할 영역' 에서 '격자 간격'을 32 픽셀로 맞춰주어야 개더타운 맵 메이커와 똑같은 크기의 격자가 나타나게 됩니다. 격자 한 칸의 단위로 오브젝트가 놓여지기 때문에 중요합니다.

빨간 네모로 강조된 구역이 새롭게 확장된 space

[텍스트 추가하기]

개더타운 내에서도 'Objects → Insert Text'를 하여 텍스트를 추가할 수 있습니다.

그러나 현재는 폰트 크기만 조절이 가능하여 아래 사진처럼만 텍스트를 적을 수 있습니다. 그러므로 더 화려한 텍스트를 사용하고 싶다면 백그라운드를 수정할 때 함께 추가해두어야 합니다.

개더타운에서 제공되는 텍스트 기능
포토샵으로 추가한 텍스트. 네온사인 느낌을 주고자 했다.

[새로운 장소/오브젝트 추가]

개더타운 내에 없는 오브젝트를 추가하는 방법은 두 가지가 있습니다.

  1. 개더타운 깃허브에서 다운받는다.

개더타운 깃허브에도 다양한 오브젝트, 아바타, 자료들이 있기 때문에 원하는 파일을 선택해 포토샵으로 추가하거나, 'Object → Upload New' 를 통해 이미지를 업로드하여 Mapmaker에서 추가할 수 있습니다.

개더타운 깃허브 바로가기

Gather town GitHub

2. 직접 만든다

기존 Space와 다리를 통해 연결되는 발코니 공간을 만들었습니다.

이 발코니는 바닥 이미지와 도형 추가를 통해 직접 만든 공간입니다. 이처럼 개더타운 깃허브에도 없지만 추가하고 싶은 테이블이나 장소가 있을 경우 직접 포토샵으로 만들 수도 있습니다.

[백그라운드(Background) 저장하기]

백그라운드를 다 만들었다면 다시 Mapmaker에서 Upload Background 하면 됩니다.

다만, 기존 맵에 있던 오브젝트들은 위치가 자동으로 바뀌지 않으니 새로운 맵 백그라운드에 맞춰 오브젝트를 옮겨야 합니다.


📌오브젝트 배치

맵에서 Object picker를 사용하거나, Mapmaker에서 'More objects'를 선택해 왼쪽 툴바에 있는 스탬프 아이콘을 눌러 오브젝트를 배치할 수 있습니다.

오브젝트를 선정하여 색, 방향, 위치를 바꿀 수 있고,
웹사이트 연결, 이미지/영상 추가, 통화 (ex. zoom) 연결 등 interaction 요소를 추가할 수 있습니다.

(다만, 오브젝트의 크기는 변경할 수 없습니다.)


📌 포어그라운드(Foreground) 수정

백그라운드와  아이템 배치가 끝났다면 포어그라운드를 수정해야 합니다.

포어그라운드란?

백그라운드 - 아바타 캐릭터 위에 배치되는 레이어입니다.
소파 등받이, 입구 등 캐릭터가 특정 물체 뒤로 지나가는 것 같이 보이도록 하거나,
혹은 햇살, 불빛 등을 추가하여 현실감과 입체감을 높일 수 있습니다.

포어그라운드 적용 전과 후


📌새로운 맵 제작하기

루프탑과 이어지는 Space를 세 개 더 만들었습니다. 위층, 아래층, 옆방 과 같은 개념은 아니지만, portal을 통해 비슷한 느낌을 줄 수 있습니다.

맵 전체를 하나의 Space로 만들었을 때

[개더타운 Walls&Floors (Beta)]

루프탑을 제외한 나머지 맵의 경우 개더타운의 Walls& Floors 기능을 사용했습니다.

개더타운 Mapmaker에서 Walls로 맵을 만든 모습

현재 베타 기능이기 때문에 Walls와 Floor tiles의 종류도 적고,
기존 이미지 Background 위에는 사용할 수 없다는 단점이 있지만
템플릿에 없는 새로운 맵을 만들고 싶다면 이 기능을 사용할 수 있습니다.


📌Tile effects

  • Impassable : 지나갈 수 없는 구역 (벽, 테이블 등)
  • Spawn: 맵에 방문하는 사람들이 처음으로 나타나는  구역. 맵 1개 당 적어도 한 곳에는 지정을 해두어야 합니다.
  • Portal: 다른 room 으로 이동이 가능합니다. 주로 문과 문을 연결 해 사용합니다.
  • Private area: id를 지정하여 private space를 만들 수 있습니다.
  • Spotlight: 해당 구역에 서있을 경우, 맵 전체에 있는 사람들에게 이야기할 수 있습니다. 커리어리 루프탑의 경우, 루프탑 왼쪽 상단에 커리어리 단상이 스포트라이트 구역이었습니다.


📌Object Interaction

[방명록, 피드백 설문조사: 링크 추가]

커리어리 루프탑 파티 방명록 (패들릿)

커리어리 루프탑 파티의 첫 번째 interaction object는 방명록이었습니다.

gather town으로 웹사이트 링크 연결하기

책 모양 오브젝트에 website URL을 입력해두면
오브젝트에 가까이 다가와 'x'를 눌렀을 때 해당 웹사이트가 뜨게 됩니다.

gather town으로 typeform 연결하기

마지막으로 퇴장하기 전 참여자들이 작성했던 typeform도 URL을 첨부해 interaction 할 수 있도록 했습니다.

[맵 설명서(PDF): 구글 드라이브 연결]

gather town으로 PDF 연결하기 (Google Drive)

개더타운 오브젝트의 경우, 단일 이미지만 업로드 되고 여러 이미지는 업로드가 불가능합니다. 그러나 여러 장의 맵 설명서를 첨부해야 했기에 그 방안을 모색하던 중, Gather 의 공식 홈페이지에서 PDF로 embed하는 방법을 알게 되었습니다.

출처: Gather 공식 웹사이트

URL 뒷부분의 'view'을 'preview'로 바꾸면 쉽게 오브젝트에 pdf Google Drive 링크를 추가할 수 있습니다.

[게임 설명서 / 출구 설명서: 이미지 추가]

gather town에서 이미지 추가하기

커리어리 루프탑 파티에서는 간단한 게임 설명서와 Exit room 공지 이미지를 첨부할 때 이 기능이 사용되었는데요,

image 첨부가 가능한 오브젝트에 jpeg나 png 파일을 선택하면 맵에서 이미지가 보여집니다.

Preview 이미지는 Activation distance만큼 가까워졌을 때 하단에 작게 나타나고, 전체 Image는 가까이 다가가 'x'버튼을 눌렀을 때 나타나게 됩니다.


📌 테스트

이제 마지막으로 맵 위를 직접 돌아다니며

  • 부자연스러운 부분은 없는지 (예를 들어 벽을 통과할 수 있다거나...)
  • 포탈을 통한 이동이 잘 되는지
  • 오브젝트와 의도한 interaction이 원활하게 되는지

등등 살펴보며 점검을 합니다.

이제 맵은 다 완성되었습니다🤗 다음은 커리어리 루프탑 파티가 어떻게 진행되었는지, 행사 당일의 이야기를 해보도록 하겠습니다.

NEXT)

03. 개더타운으로 행사를 진행하는 방법
04. 메타버스 행사, 성공적이었을까? (+Gather town 행사 팁)