코코아츠 : 1. 새로운 시작

약 2022년부터, 2D와 3D 등 여러 방식으로 개발했다가 중단된 프로젝트인 코코아츠를 다시 개발해보려고 합니다. 물론 시간이 많지는 않으니 정말 천천히 만들어질 예정입니다.

처음으로 개발했던 코코아츠는 그냥 메타버스였고, 두번째였나 세번째로 개발했던 유사 서비스는 링크트리 형식의 개인 블로그 느낌으로 만들었다면 이번에 개발하고 있는 새로운 코코아츠는 좀더 디스코드 커뮤니티 혹은 카페 느낌에 가깝습니다.

초창기 코코아츠

초창기 코코아츠는 퍼피레드라고 하는 추억의 게임을 대신해서, 들어가서 멍도 때리고 아바타와 하우징도 꾸밀 수 있는 서비스로 기획되었습니다. 모든 유저가 자신의 공간을 가지고 있고 여러가지 행동을 할 수 있는 컨셉이었습니다.

초반에 사용했던 로고입니다! 이건 지금도 써도 될 것 같네요. 귀엽다.

벨로그에서 긁어온 정말 초기의 2D 코코아츠. 진짜 UI라고 할 게 없네요. node.js도 모를 때 바닐라 js랑 php(..!)로 만들었습니다.

이건 3D 버전의 코코아츠. 역시 UI라고 할 게 없습니다. 실제로는 몇몇 아이템, 채팅이랑 모바일 조작창 등 다양하게 구현했었는데 스크린샷은 없어졌어요. 나름 Vue로 만들려고 노력을 했는데, 이것도 아무것도 모를 때 만든 거라 사실상 바닐라 js로 구현했던 것 같아요.

이건 그나마 개발을 할 줄 알게 되었을 때 Nuxt로 만들었던, 코코아츠는 아니고 모음집이라는 이름의 유사 서비스였습니다. 링크트리와 메타버스, 그리고 소셜 미리보기를 결합한 무언가였어요. 이것도 결국 이렇다할 단계까지는 가지 못하고 끝났던 것 같아요.

현재 개발상태 (이틀 차)

이틀차 치고 꽤 먼 곳까지 왔습니다. 지금까지 유사 서비스를 개발했던 경험이 있어서인지, 그 경험이 있는 구간까지는 빠르게 해내는 편입니다. 당연히 이전 코드를 그대로 가지고 온 부분은 없습니다.

말씀드렸다시피 디스코드 커뮤니티 느낌이어서, 좀더 그런 성격에 맞는 UI를 채택했습니다. 위쪽에 커뮤니티 기본정보, 왼쪽에 채널들, 그리고 가운데에 맵과 채팅을 중심으로 한 UI를 구현했습니다.

UI

초반 메인화면	아바타 조작

임시로 scrabling이라는 분의 타일셋의 미리보기 이미지들을 사용했었습니다. 캐릭터를 조작하면 화면 안에서 캐릭터가 이동하는 것은 아니고, 주변 맵이 움직이면서 캐릭터를 둘러싼 환경이 변화 하는 느낌입니다.

채팅창 확대	게시판

디스코드 유사 서비스답게 채팅을 메인으로 볼 수도 있고, 스레드 기능은 없지만 별도의 게시판을 생성해서 글들을 모아볼 수도 있습니다. 현재 Read 기능 구현은 어느정도 해 두었지만 데이터베이스 상에 글이 없어서 목록이 출력되지 않습니다.

게시판엔 맵 대신 임의의 배경 그림을 걸 수 있습니다.

맵, 아이템

현재는 애셋을 전부 새로 그렸습니다. 실외 지형은 마인크래프트와 유사한 정육면체 블록 느낌으로 되어 있습니다. 임시로 9칸의 블록을 배치해보았습니다.

이렇다할 아이템은 없고, 기본 캐릭터 하나만 만들어 두었군요.

개발 현황판

코코아츠의 개발 현황판은 이곳 에서 확인 가능합니다. 정식 서비스로 이어질 가능성은 거의 없습니다만 그래도 관심을 가져주신다면 기쁘게 생각합니다.

이 포스트가 유익하거나 재미있었다면