Bemaniutils

요약

개발범위 Web UI
레포지터리 주소 https://git.meu.works/cenox_kang/bemaniutils
레포지터리 생성 일자 2020. 09. 17..
사용한 언어 Python, MySQL, React.JS
사용한 개발 툴 (IDE) Terminal, Visual Studio Code
활성화 된 기능 N/A
사용된 라이브러리
  • N/A
  • 개요

    Bemaniutils는 KONAMI Amusement 사의 BEMANI 게임을 위한 사설 서버로써, 개인이 구입했을 경우에 하기 힘든 정품 서버 연결을 대신하기 위하여 개발된 애플리케이션입니다.
    오픈 소스로 개발되던 프로젝트를 fork하여 외국의 개발자들과 함께 최신 게임의 지원이나, 깔끔한 UI 등의 업데이트를 제공하고 있습니다.

    최신 게임의 지원을 위해 생성된 데이터를 언패킹 하여 디버그 후 필요한 값들을 추출하여 서버에 적용시키는 것으로 서비스를 제공하며, 리버스 엔지니어링과 관련한 부분은 협업하는 외국의 개발자들이, 웹 프런트엔드 및 컴포넌트 위한 부분은 제가 개발하고 있습니다.

    현재 nemiku.cc에서 서비스를 제공중이며, 해당 페이지의 CSS는 현재 보고계신 포트폴리오나, cenox.co의 CSS와 동일화 되어 있습니다.
    해당 사이트의 웹 컴포넌트는, Flask와 React.JS의 조합으로 구성되어 있습니다.

    앱 내용

    Bemaniutils는 Python Flask 웹 서버를 기반으로 소켓연결을 통해 접속되도록 구성되어 있습니다. 사용자가 기체 구성을 변경하여 해당 서버로 연결하게끔 설정을 변경 후 실행하면 아케이드 기기에서 서버의 Nginx에 연결하고, Nginx에서 uwsgi_pass를 사용하여 이 애플리케이션의 소켓에 연결합니다.

    기존 오픈소스를 포크하여 개발한 것이기 때문에, 다양한 유틸리티들이 기본적으로 제공되어 쉽게 편집할 수 있었습니다.
    현재 서비스로써 제공되는 기능은 다음과 같습니다.

    • 플레이어 카드 연동 및 플레이 데이터 저장
    • 플레이어 간 라이벌 설정 및 게임에서 해당 내용 확인
    • 저장된 플레이 데이터를 보여주기
    • [어드민] 기체 ID 관리 및 생성/편집/삭제

    기존에 존재하는 사설서버에서 필터링 하는 기능들은 대부분 미리 구현되어 있으며, 이 프로젝트를 clone해 가는 개발자들은 쉽게 서버를 구성하고 자신들의 기체를 서버에 연결할 수 있습니다.

    CSS 업데이트

    기존 Bemaniutils에서 사용하는 디자인 테마는 간단한 컴포넌트와 CSS 구성으로 이루어진 사이트였습니다. 따라서 반응형 웹 디자인과 다크모드를 지원하는 CSS를 적용하고, 각 React.JS 컴포넌트들을 업데이트 하였습니다.

    다만, Bemaniutils에서 사용되는 CSS 및 컴포넌트의 기본 테마는 현재 보고계신 포트폴리오나 cenox.co와는 다른 부분이 많습니다.
    기존의 사이트에서 보이게 되는 구성요소와는 다르기에, 좌우 여백이나 표시되는 컨텐츠의 row 갯수 등이 수정되어 좀 더 넓고 쾌적하게 점수나 표시되는 정보들을 확인할 수 있습니다.

    다크모드 지원은 CSS가 로드될 때, @media 속성 내의 prefers-color-scheme: dark 일 때와 아닐때를 분기로 나누어 색상을 다르게 표시하며, 현재 사이트가 나타내어지고 있는 브라우저의 max-width 값에 따라 표시되는 컨텐츠의 크기가 자동적으로 조절되는 반응형 웹 디자인이 적용되어 있습니다.

    스크린샷 2021-04-07 오전 11.57.04 스크린샷 2021-04-07 오전 11.57.10

    새로 추가된 기능

    기존 Bemaniutils에서 편의나 기능 상 구성요소를 추가하거나 개선한 부분들입니다.

    screenshot-1 Jubeat 게임에서 사용 가능한 ELBLEM 이라는 요소를 사이트에서 편집 가능하며, 미리보기 또한 가능합니다.

    스크린샷 2021-04-07 오후 12.00.16 Jubeat 게임에서 사용되는 실력을 표시하기 위한 용도의 Jubility 라는 지표에 대한 분석 화면을 제공합니다.
    각 Jubility 타입에 대한 점수를 각기 표시할 뿐만 아니라, 어떠한 곡들이 해당 점수를 구성하고 있는지에 대한 정보도 같이 표시합니다.

    스크린샷 2021-04-07 오전 11.52.48 Beatmania IIDX 게임에서 사용 가능한 QPro 라는 요소를 사이트에서 편집 가능합니다.

    그 외에도 기존 사이트에서 개선해 나간 부분이 많이 있습니다.

    앞으로?

    이 프로젝트는 BEMANI 기체를 얻게 됨으로써 제가 사용할 목적으로 개발을 시작하게 되었습니다.

    다만 일을 진행하다 해외 개발자들과 연락이 닿게되어 직접 생각을 나누고, 일을 분담하고 이슈를 추적하는 오픈소스 진영에서의 협업을 직/간접적으로 체험할 수 있는 값진 경험을 얻을 수 있어 좋은 시간이었습니다.

    사이드 프로젝트로써 앞으로도 이 값진 경험을 계속해나갈 예정입니다.