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

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

[Gather town] 01. 메타버스 모임을 기획해 볼까요?

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

커리어리 블로그커리어리

더 자세한 이야기가 궁금하다면? :

8일 만에 메타버스 행사 준비한 썰: 실전! ‘개더타운’ 활용기

8일 만에 메타버스 행사 준비가 가능하다고? / 기획 단계: 평범한 ‘네트워킹 파티‘에 ‘메타버스’를 입힌다면

PUBLY

📌 맵 만들기 시작!

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

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

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

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

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

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

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

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

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

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

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

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

📌백그라운드(Background) 수정

[맵 확장하기]

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

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

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

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

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

[텍스트 추가하기]

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

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

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

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

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

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

개더타운 깃허브 바로가기

2. 직접 만든다

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

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

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

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

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

📌오브젝트 배치

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

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

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

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

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

포어그라운드란?

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

📌새로운 맵 제작하기

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

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

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

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

📌Tile effects

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

📌Object Interaction

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

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

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

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

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

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

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

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

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

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

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

📌 테스트

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

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

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

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

💡 커리어리에서 더 많은 인사이트를 얻을 수 있어요!
>>>커리어리 바로가기<<<

NEXT)

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