하란

본문

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

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

개더 타운 만들기는 대충 크게 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?

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

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

본문

개더타운으로 이벤트 만드는 법(운영자 매뉴얼)도 업데이트했어용 (클릭)

1. 온라인 모임을 재밌고 귀엽게(!) 할 수 있는 화상 채팅 서비스가 있다. 바로 개더 타운! 따오기를 만드는 진보넷에서 개더를 이용한 온라인 총회를 준비하고 있다. 총회 안내를 통해 간단한 개더 이용법을 알려드리겠다
2. 개더 소개 : 먼저 개더는 픽셀 아트 기반의 가상 공간을 만들고 거기서 가까이 있는 사람들과 영상 통화할 수 있는 온라인 플랫폼이다. 최대한 오프라인의 규칙을 온라인에 적용했다. 예를 들어 내 아바타랑 5발자국 안에 있는 사람이랑만 대화할 수 있다. 내가 소통할 수 있는 사람만 영상이 보이고, 소리 들리고, 오프에서 그렇듯 멀어질수록 연결도 끊겨서 점점 안 들리고 안 보임. 아이디를 만들지 않아도 참여만 하는 데는 문제가 없다. 단점은 아직 모바일은 기능이 엄청 제한적임..모바일이면 뒤에 <모바일 안내> 챕터를 봐달라. 그리고 아직 다 영어임. 다행히 오픈소스를 긍정적으로 검토 중이라네요. 영업 시간을 보면 미국회산 거 같다. (사람들이 자꾸 물어봄 어느 나라 회사냐고; 찾아보니까 캘리포니아에 있음
3. 이름 설정 / 비디오 오디오 켜고 들어오삼
4. 개더가 제공하는 안내가 뜸. 방향키나 ASWD로 이동.
5. 인터페이스 소개: 다른 참여자들 비디오는 상단, 내 얼굴은 오른쪽 하단
6. 메뉴는 좌측과 하단 중앙에 두 개. 일단 좌측부터 소개
7. 들어오면 채팅창이 기본으로 켜져 있다. 계속 켜달라.
8. 일단 진보넷 활동가들 중 팔로우를 하자! 실제 총회장에서 활동가들이 한 분씩 안내해 드릴 거임. 팔로하는 동안 방향키 누르면 안 됨. 팔로 해제됨. (영상은 걸어가는 중) 이 팔로 기능을 통해서 참여자 목록에서 내가 아는 사람을 찾아서, 그 사람 있는 데로 찾아갈 수 있다.
9. 채팅 : 가까이(to Nearby), 모든 사람(to Everyone), 특정인에게 채팅 보내려면 참여자 목록에서 그 사람 찾아서 메세지 바로 보낼 수 있음
10. 설정- 비디오 화질 기본 구린데, HD로 설정 가능
11. 방명록: 인터랙티브 오브젝트 소개. 키보드에서 x키를 누르라는 안내문. 안내문은 계속 여기 뜸. 일단 회장으로 들어옴/
12. 하단 메뉴: 이름/아바타 설정 가능. 맨처음 도착 장소로 이동도. 맵(회장 붐벼서 나 어딨나 볼 때), 화면공유, 이모티콘(중요) - 1~6 번호키로 의사 표명 가능. 아바타 머리 위로 띄워짐. 6번 손드는 것만 자동으로 안 사라지기 때문에 6번 다시 눌러서 직접 손 내려야 함
13. 화상을 키워서 대화에 집중하고 싶다면? 오른쪽 상단에 좌우 화살표
14. 내 화면 공유할 수 있다. 남의 발표를 듣고 있다면 공유된 화면을 작게, 다시 크게 만들 수 있다. 발표자가 화면 공유를 중지해야 공유 화면이 사라짐.
15. 같은 프라이빗 타일 위에 있는 사람끼리 소통 가능.
16. 멀리 있는 사람 얘긴 안 들리고 대화중임을 머리 위에 뜬 말풍선으로 알 수 있다.
17. 포탈 : 다른 공간 이동 타일 (옥상 ㄱㄱ)
18. 게임: 테트리스 등
19. spotlight 기능: 마치 오프라인에서 마이크 주듯이 특정인에게 스팟라이트 하면 그 사람 얘기 모두 들리고 보임
20. 모바일 안내:  폰이랑 태블릿에선 기능 거의 안 됨. 아직 앱은 없고 브라우저도 크롬/사파리만 됨.. 비디오가 안 켜져서 음성 참여만 가능. 발표 듣는 데에는 지장 없지만 채팅이나 손을 든다거나 다른 참여가 불가능. 키보드를 연결하면 키보드로 일부 조작은 된다. 다만 안드로이드는 데스크탑 보기 모드에서 가능. 아이오에스는 이것도 안 됨.
21. 실제 행사 준비하면서 맵 만들고 하는 건 총회 후 다음 영상에서

대충 이렇게 써놓고 녹음함

행사 준비 영상 따로 만들겠지만,, 기획서에 쓴 내용이 들어가진 않겠징(아직 무계획)

온라인 총회를 첨 해보는데 마침 개더 타운이란 걸 알게 돼서 넘 좋아서 컨셉을 이렇게 잡았다.

• 최대한 오프 미믹. 오프라인에서 총회를 기회로 오랜만에 만난 사람들이 삼삼오오 모여서 떠들 듯이 온라인도 ㅇㅇ
• 총회 발표를 들으며 같은 자리에 앉은 사람들과 대화할 수 있다.
• (총회 못 오는 분들은 기존대로 사전에 총회 홈페이지에서 투표, 나머지는 현장 투표)

사람마다 접속 환경이 다양한데 아직 지원이 미비함..

접속 브라우저 안내

1. 모바일(핸드폰/타블렛) 접속이라면: 크롬 필수
2. 데스크탑 접속인데 웹캠과 마이크가 없다면: 엣지 (크롬/파이어폭스에선 웹캠과 마이크 없다는 경고창이 사라지지 않음
3. 맥에서: 사파리 안 됨. 크롬 필수

온라인 총회에 마지막까지 함께 해 주신 회원분들(NPC 제외 24인)과 단체사진을 찍었습니당.

개더타운으로 만든 총회장을 열어둘테니 야경 맛집 옥상도 꼭 올라가 주세요🥰

🎡 총회장 https://gather.town/app/8rvC3xW53lqdl5VD/conference
🎶 브금 플레이리스트 https://www.youtube.com/playlist?list=PL28JTlE6ZN0RVmu6DoLRZhBl9PxrndBjn