logo
PostsMariOver도입기

도입기

저는 슈퍼마리오 게임을 좋아합니다.
요즘엔 슈퍼마리오 메이커 2라는 게임을 즐기고 있습니다.


smm2 icon

슈퍼마리오 메이커 2란?

슈퍼마리오 메이커 2는 슈퍼마리오 시리즈의 캐릭터와 아이템을 활용하여 자신만의 스테이지를 제작하고, 이를 다른 사람들과 공유할 수 있는 게임입니다. 저는 여기서 다른 유저들이 만든 맵들을 플레이하고 있습니다.

게임에서 얻은 영감

어느날 유튜브를 보다가 슈퍼마리오 메이커 2에서 저와 같은 사용자가 만든 인게임 맵뷰어 사이트가 있다는 것을 알게 되었습니다.


maker-central icon

아래는 해당 사이트의 주소입니다.

이 사이트를 보며 저 또한 비슷한 사이트를 만들어보고 싶다는 생각이 들었습니다. 그래서 닌텐도에서 공식적으로 제공하는 Open API를 찾아보기 시작했습니다.

도전과 한계

조사해 보았으나 정말 아쉽게도 닌텐도에서는 슈퍼마리오 메이커 2 뿐만 아니라, 모든 게임의 open api를 제공하지 않았습니다. 다만, 조금 더 검색을 해보니 슈퍼마리오 메이커 2의 맵 정보를 가져올 수 있는 unofficial api가 있었습니다.
바로 The Great Rambler라는 개발자가 슈마메2 api 를 리버스엔지니어링하여 만든 MariOver 입니다.

다음은 해당 API 의 Docs 주소입니다.

처음에는 이 사이트에서 제공하는 api를 이용하여, 슈퍼마리오 메이커 2의 맵 정보를 가져와서, 이를 이용한 사이트를 만들어보고자 하였습니다. 그런데, 이 api 를 활용하는데는 몇가지 문제가 있었습니다.

첫번째, 썸네일을 화면에 띄우기 위해선, 각 맵의 이미지를 가져와야 했습니다.
그런데 이 이미지를 한번에 호출하면 TOO MANY REQUEST 에러가 발생하였습니다.

두번째, 사실은 이 문제가 결정적이었는데요, api 호출 속도가 너무 느렸습니다.
간단하게 맵 정보를 10개만 요청하여 보았는데, 평균 5초 이상이 걸렸습니다.

한편, MakerCentral 사이트는 다수의 맵 정보를 0.128초 만에 불러오는 뛰어난 성능을 보여주었습니다. 이에 궁금해진 저는 개발자 도구를 사용해 MakerCentral 사이트의 네트워크 요청을 분석해 보았습니다.

MakerCentral의 비결


maker-central-network icon

MakerCentral 사이트는 MariOver API를 사용하면서도 자체적인 캐싱 서버를 구축하여 속도를 극대화하고 있었습니다. 즉, API 요청을 개인 서버에서 미리 처리하고, 사용자는 빠르게 캐싱된 데이터를 받아볼 수 있었습니다.

이를 보며 저도 단순히 TGR API를 직접 호출하는 방식이 아닌, 자체 서버를 구축하여 데이터를 효율적으로 관리해보기로 결심했습니다.

시작하기

TGR은 MariOver API를 오픈소스로 제공하고 있기에, 이를 활용해보려 합니다. 아래는 해당 API의 GitHub 주소입니다.

우선 이 프로젝트를 Fork 하여 제 GitHub 에 올리고, 이를 바탕으로 제가 구상하는 사이트를 만들어보려고 합니다. 다음 글부터는 사이트 개발 과정과 기술적인 세부사항을 다뤄보겠습니다.