레포몬

프로젝트 소개

레포몬(REPO-MON)은 GitHub 레포지터리를 캐릭터로 변환해, 자신의 프로젝트 기여와 특성을 확인하고 레포지터리의 성장과 완성도를 눈으로 확인할 수 있는 서비스입니다.

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

• GitHub

담당 업무

• 레포몬 배틀 구현
• 레포몬 유저 페이지 구현
• 3D 모델의 렌더링 및 애니메이션 구현
• 레포몬 등록 페이지 구현

주요 기능

• 유저 프로필 페이지: GitHub 카드 추출과 요약 정보, 레포지터리 목록을 조회합니다. 레포몬 등록 페이지로 이동하거나 레포지터리 공개 여부를 전환할 수 있습니다.
• 레포몬 등록 페이지: 랜덤 캐릭터 선택, 레포몬 정보 입력, 능력치 설정 후 등록할 수 있습니다.
• 레포몬 배틀 페이지: 능력치와 확률을 기반으로 생성된 배틀 데이터를 토대로 배틀 애니메이션이 진행됩니다. 게임이 진행되는 동안 같은 종류의 통신(새로고침 등)은 방지됩니다.
• 레포몬 상세 페이지: 레포몬의 상세 정보와 배틀 정보, 컨벤션 입력 정보, 성장치, 프로젝트 기여도를 조회합니다. 유저 ID가 동일한 사용자는 해당 레포몬으로 배틀 매칭을 시작할 수 있습니다.

기술적 구현

• 프로젝트에 사용된 모델과 이미지 파일은 S3 버킷에 저장 후 URL String으로 반환해 활용했습니다.
• 프론트엔드는 Axios로 Spring Boot 엔드포인트를 통해 API를 호출합니다.

트러블슈팅

3D 모델 중복 렌더링

Three.js 모델을 재사용하기 위해 컴포넌트로 모듈화해 렌더링했을 때, 모든 컴포넌트가 같은 모델을 출력하고 함께 렌더링되는 현상이 발생했습니다. S3에 저장한 3D 모델 URL만으로 gltfLoader를 통해 로드한 것이 원인이었습니다.

해당 레포지터리의 ID 값을 고유값으로 사용하고, URL을 loader 파라미터로 전달할 때 함께 첨부해 컴포넌트 중복을 방지했습니다.

Three.js만으로 Canvas 위에 3D 모델을 로드하고 애니메이션을 재생하니 코드 분량이 늘고 JSX 내 가독성이 떨어졌습니다. React Three Fiber와 Drei를 도입해 모델·조명 등 요소 구현 코드 분량을 줄이고 JSX 내 가독성을 개선했습니다.

배틀 진행 방식

실시간 통신이 아니라 기존 유저 데이터를 비교한 수치 데이터를 토대로 배틀을 진행해야 했고, 생동감을 위해 모델 애니메이션까지 고려해야 했습니다.

백엔드 팀원과 조율해 매칭된 두 유저의 게임 결과 데이터를 배틀 시작 시점에 생성하고 프론트엔드 클라이언트로 전달하기로 결정했습니다. 사용자는 정해진 결과 데이터에 따라 재생되는 배틀을 진행하며, 클릭 이벤트로 애니메이션과 텍스트 스크립트가 순차적으로 재생되도록 했습니다.

배틀 결과 스크립트 데이터는 state 배열로 저장한 뒤 순차적으로 재생했습니다.

성과

• 전체 등록 레포지토리 92건 이상
• 삼성 청년 SW 아카데미 우수 프로젝트 수상 (2023.05.26)

회고

자료가 적은 3D 웹 렌더링 영역을 다루며, 라이브러리 도입 전후의 코드 품질 차이를 체감했습니다. 실시간 통신 없이도 결과 데이터와 재생 방식만으로 게임의 리듬을 만들 수 있다는 점이 인상적이었습니다.