웹 사이트 바로가기
** 열람시 PC 권장
https://pokemoem.com/calculator
https://pokemoem.com/teams/744
https://pokemoem.com/user/melucavgc
[목차]
포켓몬스터 소드/실드(2019년 작)의 랭크배틀에 대응하는 공식 앱 “Pokémon HOME”
포켓몬스터 울트라썬/울트라문(2017년 작)의 레이팅배틀에 대응하는 비공식 웹 사이트
제가 제작한 포켓몬 배틀 전문 웹 사이트인 “포케모음(Pokémoem)”은 2020년에 공개된 공식 애플리케이션 “Pokémon HOME”에 대한 문제의식에서 시작되었습니다.
전작인 울트라썬/울트라문 버전에 대응하는 “Pokémon Global Link” 웹 사이트에서는 포켓몬의 레이팅배틀(대인전) 사용 빈도 순위 및 국가별 유저 순위 등 양질의 데이터와 함께 무난한 UI를 제공하여 PC와 모바일 모두에서 편리하게 확인할 수 있었으나, 소드/실드 버전에 대응하는 새로운 공식 앱은 데이터의 양, UI와 편의성 모두에서 기존에 비해 부족한 모습을 보여주었습니다. 이 점에서, 포켓몬 레이팅배틀 코어 유저였던 저는 사람들이 편하게 더 많은 데이터를 확인할 수 있으면 좋겠다는 생각을 가지게 되었습니다.
우선 공식 앱에서 제공하는 데이터의 가공을 시도했는데, 어떻게 하는지 전혀 알지 못했지만 꼭 해 보고 싶었기 때문에 지인 개발자에게서 API를 크롤링하는 코드를 제공받고 이를 기반으로 원하는 데이터를 시각화하는 Python 코드를 작성하여 Google Colab을 통해 온라인 상에 공유하였습니다. 당시에 작성한 코드에 대한 설명은 아래 링크에 남아 있습니다.
이로써 배틀 데이터의 시각화와 분석이 가능해졌지만 더 해 보고 싶은 것이 많았습니다. 전작의 “Pokémon Global Link”에서는 유저끼리 배틀 파티를 공유할 수도 있었고, 그 중 인기있는 것들을 메인 페이지에 올려 주기도 했습니다. 그런 요소들이 공식 앱에 부재하기도 하고, 한국에서 포켓몬 배틀 커뮤니티는 여기저기 흩어져 있어 정보를 한데 모으기 쉽지 않기 때문에 이러한 요구를 총망라하는 ‘올인원 웹 사이트’를 만들자는 기획을 시작하였습니다.
사실, 저는 포켓몬 배틀을 주제로 한 워드프레스 기반 웹 사이트 ‘RyunaDB’를 2018년부터 이미 운영하고 있었습니다. 하지만 워드프레스가 웹의 흐름과 동떨어진 느낌이 들고, 동적인 기능들을 만들어내기 어려웠기 때문에 과감히 운영 중이던 사이트를 내려놓고 리브랜딩을 시도했습니다.
우선 기획 단계에서 가장 중요하게 생각한 것은 사용자들의 요구에 맞는 기능을 구현하고 기본에 충실하자는 것이었습니다. 그래서 첫 기획 의도였던 시각화와 분석 기능에 가장 신경썼습니다. 또 기존의 웹사이트(RyunaDB)는 에디터 권한을 가진 특정 유저들만 게시물을 작성할 수 있었는데, 이들의 의견만을 중심으로 정보가 모이는 것보다는 사용자 누구나 정보를 기여할 수 있도록 하는 것이 좋겠다고 생각했습니다. 그래서 포켓몬의 육성 형태(속칭 ‘샘플’)를 SNS와 유사한 형태로 쉽게 공유할 수 있도록 기획했습니다.
다음으로 웹 사이트를 실제로 구현하기 위해, 각종 웹 기술을 배워야 했는데 아무것도 모르는 상태였기 때문에 Udemy의 “The Web Developer Bootcamp” 강의를 일 주일 간 수강하면서 HTML, CSS, Javascript의 기초를 공부했습니다. 다음으로 Express, MySQL, React 등의 기술을 공부했는데, 모든 게 처음인지라 굉장히 어렵게 느껴졌습니다. 구현하기 어려운 부분은 나중으로 미루는 대신, 지금 당장 구현할 수 있는 부분을 빠르게 만들어보자는 마인드로 작업을 진행했습니다.
시각화와 분석 기능과 샘플 공유 기능은 Axios, Redux, Styled Components 등을 이용한 React 컴포넌트와 Express API의 설계가 생각보다 빠르게 이루어지고, 매일 변하는 배틀 데이터를 수집해 MySQL 데이터베이스에 저장하는 cron job도 만들어져 프로젝트 시작 후 15일 만에 완성되었습니다. 이후 SNS(Kakao와 Twitter)를 통한 로그인을 Passport.js를 공부하여 일 주일 동안 구현하고, 부가 기능 몇 가지를 더 넣은 웹 사이트의 프로토타입을 한 달 만에 AWS EC2로 배포하였습니다.
2020년 8월에 그렸던 웹 사이트 UI의 상상도
2020년 9월에 완성한 실제 웹 사이트 UI 일부
웹 사이트 정식 공개 전날 올라온 베타 테스터의 후기 영상 (제공: 오트밀님)
웹 사이트 정식 공개 전날 올라온 베타 테스터의 후기 영상 (제공: 오트밀님)
Google에 ‘포켓몬 실전 사이트’를 검색하면 1순위로 노출되는 포케모음 소개 글
Bing에서도 마찬가지…
국내에 정보 소스가 부족해 여러 해외 사이트들에 의존해야 했던 포켓몬 배틀 씬의 상황에서 포케모음 웹 사이트의 등장은 성공적인 것으로 평가받았습니다. 특히 SNS 형식의 샘플 공유 기능이 많은 호평을 받았습니다. 또한 여러 포켓몬 관련 커뮤니티에서 몇 달 동안 꾸준히 언급되었으며 각종 기능의 추가 건의가 있었기 때문에, 중장기적으로 운영에 투자해도 좋겠다는 생각을 했습니다. 그래서 기존에 운영하던 RyunaDB에서 제공하는 데미지 계산기 등의 기능을 포케모음에 완전히 구현하고, 두 웹사이트를 합병하였습니다. 데미지 계산기를 포케모음에 이식하고 난 뒤 웹 사이트의 사용자가 3배 이상 증가하는 결과가 나타났습니다. 또 여러 기능을 한꺼번에 제공하는 올인원 웹사이트로서의 기획이 빛을 발해, 시간이 많이 지난 후에도 사용자 이탈이 적었습니다.
여기에서 그치지 않고, 저는 포케모음이 국내 포켓몬 배틀 유저들의 교류와 실력적인 발전에 하나의 구심점이 되기를 바랐습니다. 그래서 사용자들이 모이는 디스코드 서버를 만들고 디스코드를 활용해 게임 대회를 진행하는 등의 시도를 했습니다. 그 결과 국내에서 최상위권 실력으로 평가되는 유저들이 연습 기회를 찾아 많이 모였고, 국내 포켓몬 배틀 씬의 저변을 확대하는 데 기여했습니다.
포케모음은 매일 1만 조회수 이상을 기록하는 웹 사이트이며, SNS 연동으로 포케모음 계정을 만든 이용자 수는 2200명 이상, 사용자 모임 디스코드 서버 인원은 600명 이상이 되었습니다. 포켓몬 배틀 유저 풀이 적은 국내에서 손에 꼽히는 규모로 성장하였으며, 이는 현재 진행형입니다.
포케모음은 2년의 운영 기간 동안 많이 개선되기는 했지만 로딩 속도가 꽤 느리다는 고질적인 단점이 있었고 데이터 시각화와 데미지 계산기를 비롯한 각종 부분에서 비효율적인 작동 방식을 사용했습니다. 당시에는 제가 만든 기능이 느리더라도 잘 돌아간다는 사실에 그저 기뻐서 단점을 개선하기보다 새 기능을 더 추가하는 데 신경썼던 것 같습니다. 하지만 부족한 완성도가 눈에 띄는 웹사이트를 언제까지나 사이즈 키우기만 할 수는 없다고 생각했습니다. 그러한 고민을 하던 중 포켓몬스터 게임 신작이 2022년 11월에 발매될 예정이었는데, 때맞춰 웹사이트의 단점들을 들어내고 밑바닥부터 리팩토링하는 프로젝트를 계획했습니다.
백엔드를 기존에 사용하던 Node.js나 serverless Next.js가 아닌 FastAPI로 옮긴 것과 데이터베이스를 MongoDB로 바꾼 것이 가장 큰 변경점이었습니다. 포케모음은 기본적으로 포켓몬 배틀 데이터를 다루기 때문에 Python을 사용하면 pandas, bokeh 등의 데이터 분석 및 시각화 라이브러리의 수혜를 입을 수 있을 것으로 판단했습니다. 또, FARM stack이라는 용어가 통용될 정도로 FastAPI, React와 MongoDB의 조합이 좋고 기술을 학습하기에도 편하기 때문에 함께 사용하는 것을 선택했습니다. 결과적으로 이것은 성공적이었는데 FastAPI의 lifespan event를 사용한 기존 cron job의 간소화와, MongoDB의 aggregation pipeline을 이용한 데이터 처리 속도 향상이 주효했기 때문이었습니다. 기존에 디스코드에서 진행하던 게임 대회의 시스템을 일부 자동화해 이분 매칭 알고리즘을 활용한 스위스 라운드 페어링 알고리즘을 만드는 시도도 하였습니다.