온더마스

프로젝트 소개

온더마스(On the Mars)는 유저마다 각자의 작물을 재배하는 파밍 게임과 NFT 작물 카드의 수집·거래 활동을 합쳐, NFT 라이프사이클에 익숙해질 기회를 제공하는 웹 + Unity 메타버스 서비스입니다.

삼성 청년 SW 아카데미 특화 프로젝트로, FE 3명·BE 3명이 함께 진행했습니다.

• GitHub

담당 업무

웹에 이식되는 Unity 게임 클라이언트를 단독으로 개발했습니다.

• Unity로 오브젝트와 상호작용 가능한 파밍 게임 클라이언트 제작
• WebGL로 빌드해 React 컴포넌트에 이식
• React에서 로그인한 사용자 정보를 게임에 로드하고, 게임 내 저장 데이터를 DB로 전달
• React ↔ Unity ↔ DB 간 통신을 담당해 웹 서비스 안에서 게임 데이터를 활용하도록 구현

서비스 기능 소개 — 나의 농장 (Unity)

React에서 게임 시작을 클릭한 뒤 Unity 로딩이 완료되면 게임을 시작할 수 있습니다.

보유하고 있는 이더리움(O2 코인)으로 씨앗을 구매할 수 있습니다.

구매한 씨앗을 심고 '물주기' 퀘스트를 2회 완료하면 랜덤 작물을 수확할 수 있습니다.

보유 씨앗이 부족할 때는 씨앗을 심을 수 없다는 경고가 뜹니다.

수확한 작물은 저장을 통해 메타마스크와 연동해 NFT로 발급됩니다.

기술적 구현

• 프론트엔드 클라이언트는 React 컴포넌트와 Unity 컴포넌트를 react-unity-webgl 라이브러리로 통신합니다.
• 백엔드 서버는 Active - Stand By 이중화 구조로 서비스 장애에 즉각 대응할 수 있는 환경을 제공합니다.

트러블슈팅

React ↔ Unity 클라이언트 통신

Unity 게임 클라이언트를 React 컴포넌트에 이식하기 위해 WebGL 빌드로 추출했고, React 컴포넌트와 연동해 데이터를 저장·로드할 방법이 필요했습니다.

두 클라이언트 간 통신을 위해 react-unity-webgl 라이브러리를 사용했습니다. 자료와 활용 사례가 적은 라이브러리여서 공식 문서만을 꼼꼼히 읽고 프로젝트에 투입했습니다.

• 컴포넌트 마운트 시 React에서 유저 데이터를 단일 문자열로 변환해 sendMessage의 파라미터로 전달했습니다.
• Unity 게임 클라이언트에서는 저장 시점에 데이터를 SaveData 메서드와 함께 전달하도록 했습니다.
• 이렇게 수신한 unityjson 데이터를 React 컴포넌트에서 전송하면 통신 과정이 완료됩니다.

성과

• 삼성 청년 SW 아카데미 특화 프로젝트 우수 프로젝트 수상 (2023.05)

회고

Unity 빌드를 React 컴포넌트에 이식하고 통신을 구성하는 과정을 통해 폭넓은 웹 개발 역량을 쌓았고, 자료가 적은 분야에 대한 학습 자신감을 키울 수 있었던 경험이었습니다.