마비노기 영웅전 게임의 캐릭터 정보를 쉽게 조회하고 비교할 수 있는 웹 서비스입니다. 게임 내 캐릭터 정보 조회, 다양한 랭킹 조회, 거래소 가격 조회, 길드 검색 및 다양한 통계 기능을 제공합니다.
넥슨 API가 출시되면서 게임 데이터를 직접 조회할 수 있게 되었고, 이를 활용해 게임 커뮤니티에 도움이 되는 서비스를 개발할 수 있는 기회가 생겼습니다. 저는 실제 유저들이 지속적으로 사용할 수 있는 웹 서비스를 만들어보고 싶었으며, 동시에 Next.js, TypeScript, Tailwind CSS 등 최신 웹 기술을 실전에서 적용해보고자 했습니다. 이를 바탕으로 꾸준한 업데이트를 통해 게임 유저들에게 실질적인 가치를 제공하는 것을 목표로 삼았습니다. 개인 프로젝트로 기획에서부터 개발, 디자인, 배포에 이르기까지 모든 과정을 온전히 혼자 힘으로 해냈습니다.
서비스 출시 후 월 3,000명 이상의 활성 사용자를 확보했으며, 게임 커뮤니티에서 유용한 도구로 인정받고 있습니다. 사용자 피드백을 통해 지속적으로 기능을 개선하며 운영하고 있습니다.
캐릭터 검색 및 상세 정보 조회
거래소 가격 조회
랭킹 조회
길드 검색 및 조회
다양한 통계 도구
이 프로젝트는 Next.js를 기반으로 한 JAMstack 아키텍처를 사용했습니다. 게임 데이터는 정적 생성(SSG)을 통해 빠른 로딩 속도를 제공하고, 유저 데이터는 서버리스 함수를 통해 동적으로 처리합니다. 데이터베이스는 PostgreSQL을 사용하여 유연한 스키마로 게임 데이터를 관리합니다.
문제
이용자 수의 폭증으로 백엔드와 DB서버의 동시 연결 제한 횟수가 초과하는 문제가 발생하여 DB 속도가 저하되거나 연결이 불가능한 현상 발생.
접근
이를 해결하기 위해 Supabase의 가이드 대로 Pgbouncer를 적용하고자 했으나 SQLAlchemy 라이브러리에서 Pgbouncer를 직접적으로 지원하지 않는 문제가 존재. 여러 대안을 검토한 결과 SQLAlchemy 오픈 소스 라이브러리 분석을 통해 일부 기능 우회가 가능함을 발견함.
해결
Pgbouncer를 성공적으로 적용하였음. 결과적으로 응답 속도가 개선되고 동접자 수가 3배로 증가해도 안정적인 서비스를 제공할 수 있게 됨.
문제
초기 버전에서는 정적인 통계 그래프와 차트만 제공하여 유저들이 원하는 방식으로 데이터를 분석하기 어려움. 또한 대량의 통계 데이터를 표시할 때 리스트 렌더링 성능이 저하되고 UI가 버벅거리는 문제 발생.
접근
이후 유저가 직접 통계 데이터를 조작할 수 있도록 기능을 추가하였음. 데이터 구조를 간결화하여 하나의 통계 컴포넌트로 다양한 통계를 볼 수 있도록 구성함.
해결
UI가 복잡해보인다는 피드백을 바탕으로 Tailwind CSS의 반응형 유틸리티를 활용한 디바이스별 최적화 UI를 설계하고, React의 useMemo를 활용하여 불필요한 재계산과 렌더링을 방지함. 이를 통해 10,000개 이상의 항목도 부드럽게 스크롤되는 UX를 제공할 수 있었고, 메모리 사용량도 크게 줄일 수 있었음.