2021.8 - 2021.12 메타버스 핀테크 개발
본 포스팅은 과거 프로젝트 진행 회고 글입니다.
프로젝트의 시작
예비창업패키지가 끝나고 바쁜 학교 생활을 보내고 있었다. 이전 프로젝트에서 느꼈던 부족한 점들을 보완하고 공부하는데 대부분 시간을 보낸 것 같다.
그 후에 node.js에서 spring으로 주 백엔드 프레임워크를 변경하고 학교에서는 빅데이터 과목을 수강하고 있었는데 이 수업도 꽤나 재밌었따. 물론 수학이 난무해서 조금 힘들었지만..
메타버스 핀테크 공모전 발견
그러다가 공모전 목록에서 메타버스 핀테크 공모전을 발견하였다. 개인적으로 예비창업패키지때도 핀테크 관련 프로젝트를 개발해보았기 때문에 핀테크 시장에 관심이 많은 편이였다.
또 차세대에 크게 될 시장이라는 메타버스에 관련해서도 조금 이야기를 들었을 뿐 어떻게 굴러가는지를 정확히 몰랐다. 뭔가 이끌린 느낌을 받아 참여하기로 마음먹었다.
일단 공모전 정보를 본 시점이 마감기한이 얼마 남지 않았던 시기라 빠르게 기획서를 작성하여 제출하였다.
메타버스 핀테크 본선 진출
기획서를 여러번 검토한 후에 제출했는데 다행히 공모전 본선에는 통과하였다. 이제 본격적으로 개발을 할 차례이다. 이에 관련해 다른 언어나 플랫폼을 사용할 수 있지만 일단은 기본 reference로는 c#과 유니티로 개발하는 것이였다.
유니티는 한창 게임에 관심이 많을 때 몇번 다뤄보기는 했지만 하도 안 다룬지 오래되가지고 기본적인 구현 로직이나 시스템 구성에 대해 잊어버렸다.
급하게 유니티 및 c# 문법을 살펴보고 핀테크 사무국으로부터 받았던 농협 유니티 API를 분석하고 개발을 시작하였다.
비쥬얼 쇼핑 기획
일단 서비스는 메타버스 내 시장 거리를 만든 후에 직접 옷들을 보면서 입고 쇼핑할 수 있는 "비쥬얼 쇼핑"이라는 이름으로 기획을 시작하였다.
이번에 DB를 많이 쓰지 않을거라 NOSQL 기반으로 firestore를 사용하였으며 (다시는 nosql를 사용하지 않겠다고 했지만 작은 프로젝트의 경우 편한것은 부정할 수 없다...ㅎ) 모델링 파일 같은 경우 마음에 드는 것들을 unity store에서 쇼핑하였다.
개발
3d modeling 배치
지금 알았는데 3d modeling 파일들이 꽤나 비싼것 같다. 소중한 나의 돈을 눈물을 머금고 지출한 뒤에 기본적인 뼈대를 세웠다.
기본적인 UI 개발
먼저 이동 방식은 1인칭에서 시작되며 미리 구현된 시장 거리에서 리스폰 되게 설정하였다. 또한 이동은 화살표가 아닌 조이스틱으로 좀 더 쉽게 이동할 수 있도록 구현하였다.
그리고 일반 쇼핑몰의 느낌이 많이 나게 장바구니나 찜목록도 기본 UI에 포함시켰고 팝업 형태로 볼 수 있게 하였다.
리스트는 상점에 들어가면 전체 물품을 볼 수 있는 일반 리스트와 옷을 클릭시 이벤트를 주어 해당 옷의 자세한 정보를 확인할 수 있는 팝업으로 나누었다.
시스템 개발
인증 시스템
로그인 방식은 oauth2 기반의 토큰 방식으로 구현하였는데 이 과정에서 Fireabase auth 시스템을 사용하였다. 회원 가입 페이지도 따로 구현하였다.
fireabase auth는 이메일 인증이나 전화번호 다른 소셜 로그인을 붙이기에 정말 편한 감이 없지 않아 있다. 직접 구현도 해본적이 있는데 뭔가 복잡한 과정이 많다.
아무래도 개인적인 로그인 모듈을 개발하여 다른 프로젝트를 진행할 때마다 붙여놔야겠다.
스타일링 시스템
디자인은 정말 할때마다 어려운 것 같다..
살면서 내가 옷입히기 서비스를 만들 줄 몰랐다. 아무래도 기획한 비쥬얼 쇼핑의 의도가 오프라인 쇼핑의 장점임 직접 옷을 입어볼 수 있는 것과 온라인 쇼핑의 간편한 결제를 합친 것이다 보니 옷을 캐릭터에 입음으로서 스타일링을 결정할 수 있도록 도와주게끔 하는 것이였다.
이 부분에서 조금 많이 애를 먹었는데 3d modeling 파일들의 디자인 방식이 각자 다르다 보니 이를 표준화 시켜주는 작업이 필요했고 세부적인 인체의 부분 (몸통이 아닌 부분, 팔이라던가, 어깨, 신발 바로 위) 부분을 동기화 시켜주는 작업이 필요했다.
여기서 3d modeling 구조를 모르니 이를 분석할 필요가 있었고 처음 다루다 보니 시간이 조금 걸렸다.
결국 어떻게든 해결이 되긴 하였다. 옷을 입히는 부위는 크게 상의, 하의, 신발, 머리(모자) 부분으로 설정하였다.
결제 부분
예상치 못하게 빠르게 구현하였다!
결제 부분은 당시에 받은 페이크아이즈 API를 통해 붙였다. 이 부분은 딱히 어려운 부분은 아니였더 미리 제공된 API는 http 통신을 통해 주고 받으며 결제를 진행하는 듯 보였다.
페이크 API를 제공받으면서 고유 token도 함께 받았는데 기본 핀테크 방식은 token까지 시스템에 받아야 해서 통신이 5번 이상 왔다갔다 거리는데 해당 api는 token과 결제 정보만 넘기면 알아서 처리되는 형식이였다
서버 구현
로그인 시 바로 접속하는 구조로 하였는데 캐릭터 선택 창을 만들 시간이 없어 똑같은 캐릭터로 구현하였다. 나중에 멀티 환경 테스트하니깐 누가 누군지 모르는 현상이 발생하기도 하였다... ㅎ
해당 부분은 메타버스 환경에서 쇼핑을 할 때 혼자서만 쇼핑하는 싱글플레이 기반이 아닌 멀티 서버 환경에서의 시스템을 구축하기 위해 유니티에 자체 서버를 만들어야 했다.
해당 부분에서 쉽게 서버를 구현할 수 있는 photon engine을 발견하여 해당 api를 설치하고 개인적인 서버 공간을 받아 이를 연결하였다. 멀티 환경 테스트는 데스크탑과 휴대폰으로 진행하였는데 잘 되었따.
그 밖에 구현
- 캐릭터 이동
- 캐릭터 애니메이션
- 카메라 1인칭 설정
- 장바구니, 찜한목록 DB 시스템 (동기화)
- 맵 이동(상점거리, 상점, 스타일링 룸) 이벤트
- 주문 목록 시스템(DB, realtime DB)
- 사소한 팝업 이벤트
핵심 비지니스 로직을 만드는데는 오래 안걸렸으나 오랜만에 만진 유니티 시스템으로 이동이나 애니메이션, 1인칭 등 기본적인 로직을 짜는데 조금 시간이 걸렸다.
아무래도 본선 시작뒤 개발한 것이라 개발 기간이 3주밖에 되지 않아 촉박한 것도 있었다. 그래도 구현하고자 했던 것들은 완성되어서 잘 제출하였따.
결과물
클릭해주세요!
후기
아쉽게 최종 발표에서 수상하지는 못했다. 해당 공모전이 개인/팀 프로젝트이다 보니 확실히 다른 분들의 최종 발표물들을 보니 디자인부터 시스템이 잘 짜여져 있었다.
여러 모로 아쉬움이 남았지만 메타버스 핀테크라는 분야를 자세히 알 수 있었고 시간이 된다면 조금 더 구체화하여 다시 개발을 하고 싶다 (백엔드 공부부터 열심히 해... 틈 나면 유니티를 공부해야겠다)
