GONGRAN

최근 캐주얼 웹게임 스타일의 SNS? 같은 것을 만들고 있는데, 단순 기록 목적으로 제작일지를 남기고자 블로그를 개설했습니다.

코코아츠

코코아츠는 제가 4년 이상 잡고 있던 프로젝트입니다. 사실은 언젠가는 해야지 하고 잡기만 하고 있던 프로젝트예요. 오랜 시간 붙잡아온 만큼 엎고 처음부터 다시 만들었던 적도 많고, 현재는 프로젝트의 성격도 많이 바뀌어 있습니다.

• 초기에는 직접 서비스하는 웹게임 느낌으로 구상했는데, 이제는 작은 커뮤니티 하나하나를 관리자가 직접 본인 서버에 배포하고 관리하는 시스템입니다.
• 초기에는 퍼피레드라고 하는 채팅 게임의 하위호환 버전을 생각했는데, 이제는 여러가지 기능을 조합한 메신저 + 커뮤니티 같은 역할이 더 메인으로 올라왔습니다.
• 초기에는 개인별 하우징이 제일 중요한 요소였는데, 이제는 관리자가 지정한 공용 맵에서만 모두가 모여서 놀 수 있고, 개인 방은 예전의 라인플레이 같은 느낌으로만 굴릴 수 있습니다.

역사

신기하게도, 이걸 처음 만들었을 때에 적었던 글이 벨로그에도 남아있더라고요. 이제는 공개된 글은 아니고, 전부 비공개처리된 글이었습니다.

버전 1

네. 이게 화면입니다. 화면의 전부입니다. 프레임 쪽을 다 빼고 설명드리자면, 쯔꾸르의 타일 맵 같은 것을 그대로 구현해보고 싶었습니다.

자바스크립트는 물론 CSS도 전혀 하지 못해서 간단한 것 하나에도 엄청 애먹었던 기억이 납니다. 또 이떄는 canvas를 이용해서 만들었던 것 같구요, SSH 접속이라든지 벌쳐니 아마존이니 하는 걸 몰라서, filezilla 같은 걸로 FTP 접속하는 것만 할 줄 알았던 시절이라 php를 썼습니다.

보다 못한 지인분이 Node를 사용하는 게 어떻겠냐며 추천해 주었습니다.

버전 2

3D+vue 로 변경되었던 시절입니다. three.js를 도입했었고요, 사유는 아마 캐드를 배웠기 때문에...? 도입해보고 싶었던 걸로 기억하고요. 타일 레이어링 같은 걸 할 필요가 없으니 어떤 점에서는 골머리를 덜 앓기도 했습니다. 모델링은 제가 직접 했습니다.

친구에게 Node.js를 영업당하고, 당시 Misskey를 활발하게 쓰고있었기에, vue를 써 봐야지 해서 일단 쓰긴 했는데 제대로 쓰지는 못했습니다. 지금 코드 열어보면 사실상 바닐라js랑 큰 차이가 없었고요.

그 당시, 집과 나무를 맵에 배치하는 것까지 진행했었습니다. 또 현재 날짜와 시각에 따라 해가 뜨고 지는 것도 구현해 놓았던 기억이 납니다. 왜냐면 마침 대학원에서 해 뜨고 지는 시각의 과거 근사식 중 하나에 대해 공부하고 있었기 때문에...

버전 2.5 (피치타룸)

찾느라 애먹었네요... 하지만 제가 기억하는 것보다 예쁘지 않아서 놀랐어요.

이때부터는 다시 2D로 돌아왔는데, 아이소메트릭 뷰를 쓴 것 같습니다. 이건 Misskey의 Play라는 기능을 사용해서 만든 건데, 자바스크립트와 파이썬의 중간 느낌의 스크립트 언어를 씁니다. 제약이 굉장히 많고 많은 기능을 스크립트 하나에 우겨넣어야 해서 무거웠을 겁니다. 요건 미니룸 같은 느낌이라 다른 사람과 동시 접속하는 것도 어려웠습니다. 그냥 Misskey 유저들끼리 각자의 방을 꾸미는 느낌?

버전 3 (현재)

이것이 지금의 코코아츠입니다. 초기 UI설정이나 일부 기능을 제외하고는 거의 클로드 코드를 사용해서 만들었습니다. 지금까지 코드 잘 짜다가 갑자기 바이브 코딩? 이라는 생각이 드실 수도 있지만... 사실 제가 지금까지 개발을 해 왔던 주된 동기 중 하나가 "만들고 싶은 걸 만든다" 였기 때문에, 그리고 새로운 사이트를 만드는 데 시간을 길게 투자할 수 없게 되었기에 자연스럽게 이쪽으로 이어지게 된 것 같습니다.

참고로, 현재 테스트 서버에서 사용하고 있는 타일, 맵 아이템, 아바타 등의 에셋은 직접 제작한 것이며, 그외의 에셋 역시 canva에서 제작한 배경 소스들을 사용하고 있습니다.

앞으로 쓸 글

바이브코딩이라 기술적으로는 쓸 게 별로 없습니다만, 클로드의 퍼포먼스가 그다지 좋지 못해 제가 직접 알고리즘을 떠먹여준 부분이라든지 코딩 외적의 에셋에 대해서 다룰 기회가 있을 것 같습니다.

• 스프라이트 스태킹과 의사 3D에 대해서...
• 코코아츠 전반에 사용하고 있는 폰트에 대해서...
• 부하 테스트