게시물에서 찾기개더타운

1개의 게시물을 찾았습니다.

  1. 2021/04/12
    온라인 방꾸? 개더 타운gather.town 만들기 - 개더타운 사용법 주최자 편(18)
    뎡야핑

온라인 방꾸? 개더 타운gather.town 만들기 - 개더타운 사용법 주최자 편

안녕하세요. 따오기입니다.

최근 따오기를 만드는 진보넷에서 근거리 화상 채팅 플랫폼 ‘개더 타운’을 이용해 온라인 총회를 열었다. 최대한 오프라인 총회 분위기를 내고 싶어서 개더 타운을 선택했다. 온라인 상에 총회장을 꾸미고 참여자들의 아바타들이 돌아다니게 연출할 수 있어서 ㅇㅇ 그렇게 개더타운으로 온라인 행사 준비하는 방법을 알랴드림

개더 타운 만들기는 대충 크게 4단계:

  1. 공간space 만들기
  2. 백그라운드 만들기
  3. 타일 효과 주기 : 아바타가 지나갈 수 있는 구역 등 지정
  4. 물건 배치하기

개더가 기본적으로 제공하는 맵 디자인이 다 예쁨. 그래서 그냥 복사해서 걍 쓰면 되는데, 저는 제가 원하는대로 꾸미고 싶어서 백그라운드 만드는 데(총꾸)에 말도 못하게 시간이 오래 걸렸다. 그냥 개더가 제공하는 기본 템플릿을 복사해서 필요한 물건만 좀 배치해서 써도 훌륭하다.

1. 공간 만들기

개더 타운 홈페이지에서 런치 개더 누르고 바로 개설할 수 있다. 회원가입 안 하고도 개설은 가능한테 그러면 소유권 같은 게 없고 수정도 불가. 아직까진 지메일로 가입해야만 공간 만들고 수정할 수 있다.

+ Create new space를 클릭해서 새로운 공간을 만들자.

공간space: 한 개 이상의 방으로 이뤄진 가상 세계. url이 배정됨.

공간이라는 건 대학 캠퍼스가 될 수도 있고 집 하나가 될 수도 있고, 심지어 우주 정거장도 가능함. 템플릿이 다 있다.

그래서 템플렛 중 하나 선택해서 고쳐서 쓰시면 되고, 여기서는 제가 만든 진보넷 총회장을 예시로 보겠음. 참고로 다른 유저가 만든 공간도 통째로 복사해 올 수 있음. 물론 그거 만든 사람한테 권한을 받아야 함.

방room: 공간을 만들면 방 하나가 자동 생성됨. 한 공간space 마다 방room을 여러 개 만들 수 있다. 그래서 어떤 템플릿들은 이미 여러 개의 방이 만들어져 있다.

한 방이라고 해서 그 안에 진짜 방 한 칸만 있는 건 아니고, 진보넷 총회장에서 보듯 길거리, 로비, 총회장 이렇게 여러 영역으로 나눠져 있지만 이게 방 하나임. 현실에서도 방 하나를 쪼개서 여러 방을 만들듯이. 하지만 현실과 달리 사이즈가 이론상 무한대라 엄청 넓게 사용 가능 (내 성 마련의 꿈도 실현 가능,,)

방을 추가하고, 이후에 백그라운드 깔고 물건 배치하는 등등의 작업은 'mapmaker'라는 편집기에서 한다. Home에서 꾸밀 공간space를 선택하고 Edit map을 클릭하면 mapmaker로 들어감.

room 추가는 간단. + 버튼 누르고 방 이름을 쓰면 기존 템플릿 중에 선택하거나 새로 만들라고 뜸. 한글로 써도 무방.

여러 room은 서로 연결할 수 있다. 자동으로 연결되진 않고 포털이라는 타일을 설정해 줘야 하는데 그건 '3. 타일 효과 주기'에서 설명. 저는 1층에 진보넷 총회장 방을 만들고, 2층 옥상 방도 만들었다. 층 개념이 있는 건 아니고 내 맘대로 그렇게 부름.

다른 룸끼리는 소통 불가. 참여자 목록에서는 보이지만 화상/음성 채팅이 안 된다. 그래서 진보넷 총회 시작 전에 옥상에 계신 분들 내려오시라고 따로 옥상 가서 말함.

방 여러 개가 있을 때 사람들이 처음 도착하는 방이 default room. 디폴트 룸을 다른 룸으로 간단히 바꿔줄 수 있다.

2. 백그라운드 만들기

본격적으로 방 만들고 꾸미기. 집 짓듯이 먼저 바닥을 만들고 벽을 세운다. 이 백그라운드 크기가 룸의 크기다.

맵 제작 방법은 크게 세 개가 있다.

  1. 기본 제공되는 템플렛 사용. 그대로 써도 되고, 필요한 수정만 가하면 됨
  2. 자체 편집 툴로 아예 백그라운드를 새로 그리기
  3. 외부 편집 툴로

2-1. 템플릿 사용

설명 무

2-2. 자체 백그라운드 편집 툴 사용

Update background 버튼을 눌러서 Draw your own background라는 백그라운드 편집 모드로 들어가기. 정사각형의 그리드로 구성돼 있다. 네모칸들, 즉 타일 한 칸은 32 * 32 픽셀의 정사각형이다. 이게 최소 단위.

백그라운드 편집 모드에선 드래그만 하면 바닥재(마루)랑 벽을 쉽게 그릴 수 있다. crtl+z로 취소하면서 편집 가능. 지우기도 마찬가지로 드래그로 쉽게 지울 수 있다. 지우기는 바닥 지우려면 Floor Tiles가 선택돼 있어야 되고, 벽 지우려면 Wall Tiles 선택해야 함. 지우기 끝나고 다시 그리려면 지우개 한 번 클릭해 주면 됨(on/off). 키보드에선 e.

주의! 저장 버튼을 누르고 나면 백그라운드 편집 모드가 강제 종료됨. 그래서 한 번 저장 후엔 crtl+z 불가. 노빠꾸..

2-3. 외부 편집 툴로 백그라운드 그리기

Update background에서 이미 만들어진 이미지를 올릴 수 있다.

포토샵이나 일러스트레이터 같은 그래픽 툴에 32px * 32px의 그리드를 깔아서 만들면 됨. png나 jpg로 저장.

저는 기본 제공되는 템플릿의 백그라운드 이미지 몇 개를 다운받아서 섞어서 포토샵에서 수정했음. 편집기에서 백그라운드 이미지를 다운받을 수 있다. 이 기능은, 앞서 자체 편집 툴로 내가 백그라운드를 직접 그렸을 때도 그걸 png 이미지로 만들어 줘서 다운받을 수 있음.

기본적으로 타일 등 이미지 소스를 개더 타운의 깃허브에서 다운받을 수 있다. 계속 업데이트 되고 있다. tilesets 폴더에 가서 이미지를 열어서 잘라서 쓰면 됨.

그런데 폴더에 tsx라는 확장자로 끝나는 파일이 잔뜩 있다. 이거는 'tiled'라고 게임용 2d 맵 만드는 프로그램용 어셋들assets이다. 이걸로 맵 만드는 게 진짜 재밌는데, 나도 아직 잘 모름. 근데 왕재밌음 무료로 배포하는 타일 어셋들이 진짜 많아서, 다양한 디자인을 뚝딱 만들 수 있음.

깃허브에서 받은 리소스에는 물건들(오브젝트)도 다 들어 있어서, 둘러보고 필요한 걸 쓸 수 있음. 자세한 건 4. 물건 배치에서 설명.

포어그라운드 기타 팁

우리가 만드는 맵은 평면적인 2D지만 실은 레이어 개념이 있음. 크게 4개. 백그라운드 + 그 위에 물건 배치 + 아바타 + 포어그라운드(지붕 느낌).

포어그라운드는 맨위에 있다는 뜻. 아바타가 문 아래를 지나가게 하거나 물건의 뒤를 보여주고 싶을 때 필요함. 필수는 아님

포어그라운드는 백그라운드와 사이즈가 같아야 하고, 포어그라운드는 이미지 파일로 올릴 수만 있음. 그니까 백그라운드 완성 후 마지막에 작업하는 게 효율적.

기타 팁으로 폰트는 픽셀 폰트로 고르고 clear:none으로 하는 게 좋다. 아니면 미묘하게 깨진다. 왜냐면 왜 때문인진 모르겠는데 mapmaker에서 만든 거랑 실제 온라인 공간이 1:1 매칭이 아니고 1:1.18392?? 식으로 미묘하게 실제 입장하는 온라인 공간이 더 크기 때문임.

3. 타일 효과 주기

아바타의 이동이나 소통을 제어하는 타일은 5 종류가 있다.

  1. 임패서블impassable: pass, 통과가 안 된다, 지나갈 수 없단 뜻. 아바타가 지나갈 수 없음
  2. 스폰spawn: 아바타가 이 온라인 공간에 처음 왔을 때 도착할 포인트 지정. 모든 방에 최소 한 개 이상의 스폰 타일을 깔아줘야 한다.
  3. 포털: 순간이동. 같은 방에서 다른 타일로, 다른 방으로, 다른 공간으로도 설정 가능. 지금은 어느 방으로 보내는지 표기도 안 되고 수정도 안 됨. 목적지 바꾸고 싶으면 지우고 다시 깔아야 됨. 나중에 수정될 듯.
  4. 프라이빗 스페이스: 크기 제한 없음. 거리 상관 없이 같은 id끼리는 소통 가능. (화면) 이거는 클래스 템플릿인데 앞에 나온 발표자가 같은 id 타일이 깔린 곳의 자기 조원들이랑만 소통할 수 있다.
  5. 스팟라이트: 이 위에 서면 같은 방 안에 있는 모든 사람에게 다 보이고 다 들림. 내가 스팟라이트 받으면 내 화면 위에 spotlighted라고 뜬다.

타일끼리 겹칠 수 있음. 

4. 물건objects 배치하기

위에 배치하는 물건objects.

장식용(Decorative Objects)과 인터랙션용(Interactive Objects) 두 개 타입. 장식용은 말그대로 다른 기능 없이 장식용인 거고, 인터랙션용은 물건에 여러 기능을 넣을 수 있는 거.

일단 편집기에서 'Object Picker'로 물건을 골라서 배치할 수 있다.

이미지를 선택하면 로테이션이 가능한 것들은 옆에 보인다. 같은 아이템의 좌우앞뒤 네 가지 버전이 있음. 컬러도 바꿀 수 있고. 선택 후 물건을 원하는 곳에 마우스 클릭으로 놔두면 된다. 같은 물건을 계속 둘 수 있게 기본적으로 마우스가 계속 오브젝트를 들고(?) 있고, 오른쪽 메뉴에서 로테이션, 색깔 바꾸기가 가능. 배치 끝났으면 화살표, 즉 Select Mode를 선택해서 물건을 선택해서 옮길 수 있다. 키보드에서는 s.

오브젝트 피커에 물건이 너무 많아서 검색해서 찾으면 됨. 예를 들어 chair. 엄청 예쁜 의자(
Chaise)가 최근에 추가됐네요!

인터랙션용은 개더 공간에 들어갔을 때 키보드에서 x를 눌러서 상호작용하는 것들임. 웹사이트 등 링크, 문서, 유튜브 등 비디오, 게임 등을 넣을 수 있다. 모든 물건에 인터랙티브기능을 넣을 수 있다. 

필수 넣고, 액티베이션 디스턴스는 아바타가 이 물체에 얼만큼 다가가야 작동하는지 정해주는 거. 이전 영상에서 개더 룸에서 5 발자국, 5 칸 내에 있는 사람과 소통할 수 있다고 한 거 기억하시나요. 물건이랑 소통하는 거리는 우리가 임의로 정하면 된다. 가로세로, 대각선 거리까지 다 적용됨. 모두가 정해진 시간에 영상을 보도록 강제 플레이 시간을 설정할 수 있다. 영상만 아니라 사이트가 열리게도 할 수 있는 거고.

'인서트 텍스트'로 글자를 만들어 넣을 수도 있다. 지금은 검은색만 되는데 나중엔 옵션 추가될 듯. '업로드 뉴'로 이미지를 넣을 수도 있다.

개더가 만든 이미지가 전부 여기 있는 건 아니고 깃허브에 추가로 배포하는 걸 다운받아서 업로드해서 쓸 수 있다. 사이즈는 기본 32 * 32지만 사실 사이즈 제한은 없고 아무거나 올릴 순 있는데 예쁘게 보이려면 ㅇㅇ 자기가 디자인해서 추가 가능. 저는 시각적으로 누가 말하고 있는지 알기 쉽게 아바타에 스팟라이트 주려고 그 이미지만 만들어서 넣음.

물건 없애려면 지우개 선택. 키보드에선 e.

기타 다른 사람한테 맵 공유하려면 이메일 추가.

저는 인터랙션 없는 장식용 물건들을 포토샵에서 맵에 배치해 통째로 이미지로 만들어서 올림.

행사 준비 관련

행사 진행하는 동안 맵을 수정할 수 있다. 예를 들어 대문 이미지 바꾸고 임패서블 타일 바꾸고 도착하는 장소(스폰)도 바꿔봄. 행사 시작 후 참가자들이 도착하는 룸 자체를 바꿀 수도 있겟다.

삼삼오오 모여서 대화하며 발표를 들을 수 있는 건 spotlight 받은 발표자 목소리가 더 크게 들리기 때문. 근데 처음 참여해 본 참가자 분들이, 자기 얘기 들릴까봐 대화하기 거시기했다고들 하심.

25인이 넘게 참여할 때 업그레이드 필요. 일회성 이벤트도 시간/인원수 별로 계산할 수 있어서 편하다. 결제하면 서버 배정해 줘서 좀더 안정적으로 할 수 있다고. 결제한 것보다 인원수 많으면 추가 결제 가능. 반영되는 데에 최대 10분 걸린다고. 그 사이에, 혹은 결제를 안 한 상태에서 인원이 많으면 속도가 저하된다. 그래도 입장을 막지는 않음.

유료 모델은 Town/City/Metropolis로 구분. https://gather.town/pricing
근데 기능이 무료일 때가 더 많아… 머선 129?

업데이트 속도가 빠르다. 그래서 아직 모바일에서 불편하지만 이것도 곧 해결될 듯. 대표적 불편함으로 방향키 레이어 위에 영상이 있어서 움직이지 못할 때도 있는데 해결되겠죠.

그럼 즐거운 개더 생활 하시길

"따오기 인다메이킹" 분류의 다른 글

AI 기계번역을 통한 비용 절감? 남의 인생 가지고 테스트하지 마2023/05/31
새해 다짐: 재활용 마스터가 될 테다. 굴러다니는 스마트폰 재활용은 그 서막2023/01/21
2009년 1월 21일 용산참사 현장에서, 조세희 선생님 연대 발언2022/12/28
넷플릭스 애니메이션 《사이버펑크: 엣지러너》2022/12/26
(12.7 샌프란시스코 업뎃) 🇺🇸경찰을 믿고 킬러 로봇을 도입? 어딜 어떻게 ...2022/11/06
진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기