도입기
저는 슈퍼마리오 게임을 좋아합니다.
요즘엔 슈퍼마리오 메이커 2
라는 게임을 즐기고 있습니다.
![smm2 icon](/_next/image?url=%2Fassets%2Fnextra-docs%2Fsmm2.webp&w=1080&q=75)
슈퍼마리오 메이커 2란?
슈퍼마리오 메이커 2는 슈퍼마리오 시리즈의 캐릭터와 아이템을 활용하여 자신만의 스테이지를 제작하고, 이를 다른 사람들과 공유할 수 있는 게임입니다. 저는 여기서 다른 유저들이 만든 맵들을 플레이하고 있습니다.
게임에서 얻은 영감
어느날 유튜브를 보다가 슈퍼마리오 메이커 2
에서 저와 같은 사용자가 만든 인게임 맵뷰어 사이트가 있다는 것을 알게 되었습니다.
![maker-central icon](/_next/image?url=%2Fassets%2Fnextra-docs%2Fmaker-central.png&w=1080&q=75)
아래는 해당 사이트의 주소입니다.
이 사이트를 보며 저 또한 비슷한 사이트를 만들어보고 싶다는 생각이 들었습니다. 그래서 닌텐도에서 공식적으로 제공하는 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](/_next/image?url=%2Fassets%2Fnextra-docs%2Fmaker-central-network.png&w=1080&q=75)
MakerCentral 사이트는 MariOver API를 사용하면서도 자체적인 캐싱 서버를 구축하여 속도를 극대화하고 있었습니다. 즉, API 요청을 개인 서버에서 미리 처리하고, 사용자는 빠르게 캐싱된 데이터를 받아볼 수 있었습니다.
이를 보며 저도 단순히 TGR API를 직접 호출하는 방식이 아닌, 자체 서버를 구축하여 데이터를 효율적으로 관리해보기로 결심했습니다.
시작하기
TGR은 MariOver API를 오픈소스로 제공하고 있기에, 이를 활용해보려 합니다. 아래는 해당 API의 GitHub 주소입니다.
우선 이 프로젝트를 Fork 하여 제 GitHub 에 올리고, 이를 바탕으로 제가 구상하는 사이트를 만들어보려고 합니다. 다음 글부터는 사이트 개발 과정과 기술적인 세부사항을 다뤄보겠습니다.