# 메타버스 서비스, 메타 그라운드 개발, 안티 그래비티

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/130105_eIq45RWigbrrixw7vD?q=80&s=1280x180&t=outside&f=webp)

개발하고 있는 교육 서비스 그라운드에 메타 그라운드 서비스를 신규 기능으로 추가했습니다. 국내에선 ZEP 이나 개더 타운 등이 잘 알려져있고 특히 ZEP이 매우 많은 기능과 다양한 기능들로 특히 교육계에서 많이 활용되고 있기도 하죠.

 

학생들과 수업하면서 메타버스 형태의 게이미피케이션 기능 구현에 대한 학생들의 니즈가 크다는 걸 알고 있고, 언젠가는 구현을 해봐야지하고 생각하던 기능이기도 했는데요. 다만 소규모 서비스를 운용하는 입장이라 웹소켓 등으로 통신하기 보다는 서버 리소스를 최소화 하면서도 학생들에게는 유사한 UX를, 그리고 교사들에게는 공간(Space) 개념의 핵심적인 교육 기능을 제공하기 위해 한 몇일은 구현 방식에 대해 고민했던 것 같습니다. 

오픈소스 WorkAdventure 도 고려를 했었는데, 그렇게 되면 기존의 그라운드와 너무 동떨어진 구현이 될것이 뻔한데다 실제 별도 운영 서버를 추가로 구현하고 이리저리 복잡한 통신 방법을 고려해야 했기 때문에 그냥 한땀한땀 직접 모두 만들자-로 결정이 되었습니다.

결과적으로 메타 그라운드라고 오픈된 이 서비스는 교사가 맵 에디터에서 공간을 기반으로 맵을 에디팅하면, 학생들은 이동 창구를 통해 여러 공간을 이동하며, 클래스원들에게 학생들이 위치한 "공간"에 대한 정보를 전파합니다. 

이 개념을 구현하기 위해서, 일단 접속 화면 라우팅을 개발 모드에서 세팅하고, 메타 그라운드 룸 진입 페이지, 맵 에디터 페이지, 실제 메타 그라운드 실행 페이지 등 다양한 컴포넌트를 먼저 고민하고, 연동 방식을 설계한 뒤에 인공지능과 함께 작업을 시작했습니다. 

바이브 코딩이라기 보다는 설계안을 디테일하게, 인공지능에게 요청하는 건데 개인적으로는 별도의 PRD 문서를 인공지능에게 요청해서 만들기 보다는 제가 PRD 초안을 만들고, 이후에 체크리스트화 하여 작업하도록 인공지능에게 지시하는 편입니다. 

 

여튼 그렇게 하루종일 컴퓨터 앞에서 개발을 진행했고, One Canvas 기반의 공간 스페이스 구조가 핵심인 메타 그라운드의 베타 버전이 오픈되었습니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/133323_9aKC6zOmZ8U6F76MJc?q=80&s=1280x180&t=outside&f=webp)

본격적으로 게임 화면을 만들기 전에 맵 설계 파트를 먼저 작업

항상 디자인을 그래도 조금 더 많이 신경 쓰는 편인데, 디테일은 나중에 잡더라도 심플하고 만들기 쉬우면서도 그렇게 없어보이진 않도록 레이아웃과 여러 컴포넌트 요소를 설계한 뒤 공용으로 활용합니다. 

맵 에디팅에 사용되는 모든 이미지 요소는 순수 CSS와 SVG로 구현되었고, 단 하나의 비트맵 이미지도 사용되지 않았습니다. 서버 비용, 트래픽 절감을 위한 마른 걸래 쥐어 빠는 노력이랄까..

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/133415_Ms8IOfMNh39XQHNluz?q=80&s=1280x180&t=outside&f=webp)

 

여튼 서버 리소스의 제한, 개발 시간 단축 등으로 학생들의 공간 이동, 공간 정보 등을 핵심으로 메타 그라운드의 실제 게임 화면을 구성했고 다음과 같은 실제 메타 그라운드 화면이 만들어졌습니다. 

 

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/130105_eIq45RWigbrrixw7vD?q=80&s=1280x180&t=outside&f=webp)

맵은 FHD 비율을 고려하여 캔버스 사이즈를 단일화 했고(최초에는 여러 규격을 사용하도록 설계했지만 폐기), 한 화면에서 다양한 공간을 모두 구축하고 공간 이동이 가능하도록 구현했습니다.

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/131343_hTmArFcdqaMnMDqAoY?q=80&s=1280x180&t=outside&f=webp)

공간 스페이스가 핵심이라 하지만, 사실 별건 아니고 예를 들어 이미지에 보이듯 다했어요, 하는 중이에요 존을 만들어두고, 학생의 활동 여부에 따라서 학생들이 해당 존으로 이동하면, 교사 역시 해당 학생들의 과제 제출 여부를 메타 그라운드에서 확인할 수 있다거나 하는 공간 기반 메타버스인 셈입니다. 다만 모든 학생들의 그리드 위치 정보가 실시간 전파되진 않고, 특정 공간이 변화할 때에만 공간 데이터가 모든 참여자들에게 송신되며 화면을 갱신합니다.

각 공간에는 비밀번호와 그 비밀번호를 풀 수 있는 설명을 추가할 수 있고, 공간에 입장할 수 있는 최대 인원수를 설정하여 선착순 미션을 제공한다던가, 여러 퀴즈 공간, 컴퓨터 등의 오브젝트를 통해 방탈출 미션을 만들어볼수도 있습니다. 

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/131443_24XtyLFKzRXJKKA40I?q=80&s=1280x180&t=outside&f=webp)

이렇게 이모지도 표시가 되고, 이후에는 타이핑으로 짧은 대화도 표시되게 할 예정.

그리고 학생들은 이모지 표시기능을 통해 O,X 퀴즈를 진행한다거나 공간을 활용해서 O,X 퀴즈를 진행할 수도 있죠. 

명색이 메타그라운드이니 그라운드의 클래스 데이터를 그대로 활용하고, 메타 그라운드에서는 선생님도 직접 참여할 수 있습니다. 

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/131323_DPZWeDpfQccNm1la4g?q=80&s=1280x180&t=outside&f=webp)

이제 선생님도 입장이 가능하다!

그라운드의 포인트 기능을 당연히 메타 그라운드에도 연동할 예정이고, 공간 단위로 포인트를 한번에 일괄 부여하는 시스템으로 그라운드와 "공간(space)" 개념을 최대한 활용할 생각입니다. 

순전히 혼자서 개발을 하고 있기 때문에 ZEP 수준의 다양한 배경 이미지, 3D 맵 구조 등을 적용하긴 시기 상조에다 리소스 부족이고 현재는 그리그 기반 2D 메타버스로도 충분히 클래스 단위의 메타 클래스 개념을 적용할 수 있을 것 같습니다. 

이번 개발은 서비스 방향성, 서비스 구조를 고민하는데 일주일 정도 걸렸고 방향을 잡고 머리에 설계 방향을 정리한 이후 실제 개발은 12시간 정도 걸렸습니다. 뭐 이후 자잘한 버그를 잡고 기능 수정에 반나절 더 투자해서 하루 정도 걸린것 같네요. 

개발은 모두 안티그래비티로 진행이 되었습니다. 특히 Opus 4.5가 가장 많이 고생을 했고, 이후 Gemini 3.0 Flash를 사용했는데 왠걸? 할루시네이션이 높다 하지만, 소넷과 견주어도 딱히 모자란다는 생각이 들지 않을 만큼 매우 훌륭한 성능을 보여서 앞으로도 당분간 Opus 4.5와 Gemini 3.0 Flash를 사용하지 않을까 싶어요. 

 

인공지능을 써서 코딩을 하고 있지만, 이번 메타 그라운드를 개발하면서 설계와 방향성을 설정하는데에는 거의 인공지능이 관여하지 않았습니다. 관여할 수도 없었을거 같구요. 

일주일 내내 눈을 감고, 어떤 형태로 구현을 해야할까? 어떤 방식이어야 리소스를 줄이면서도 교실에 실제 도움이 될 수 있고 유용하면서도 메타버스의 느낌을 충실히 재현할 수 있을까? 이것만 고민했던 것 같네요. 

오히려 이 과정에서 도움을 받았던건 인공지능에게 제 구상을 이야기하며 요청했던 디자인 컨셉이었습니다. 

![Image](https://upload.cafenono.com/image/slashpagePost/20251221/132356_VQStuiI6c1ShQqKPSu?q=80&s=1280x180&t=outside&f=webp)

이 이미지 한장을 보면서 어떠한 컬러감으로 어떤 기능으로 구현을 할까? 많이 고민했고 키 컨셉을 확정할 수 있었습니다. 다소 추상적이지만 그러한 추상화 과정을 통해 오히려 실제 기능과 구현을 현실화 하는데 많은 가능성을 열어둘 수 있었지 않았나 싶기도 하구요. 

 

여튼 매우 오랜시간 동안 막연하게만 생각했던 메타 그라운드 프로젝트를 운영기에 배포하고 나서 간단히 개발 과정 썰을 풀어봤습니다.

For the site tree, see the [root Markdown](https://slashpage.com/lop.md).