운영 중 · 재미로

Pokepedia

게임보이 배틀처럼 꾸민 실루엣 퀴즈입니다. 포켓몬 이름을 맞히면 몬스터볼을 던지고, 띠부씰 컬렉션에 들어갑니다. 1세대 151마리 도감도 함께 있습니다.

소개

2023년에 JSP 팀 프로젝트로 포켓몬 도감을 만들었습니다. 이건 그걸 요즘 스택으로 혼자 다시 만든 것입니다. 대부분은 재미있어서, 그리고 작은 앱을 어디까지 다듬을 수 있는지 보고 싶어서요.

이제는 게임이 첫 화면입니다. 실루엣이 나오면 세 언어 중 아무 이름으로 답하고, 맞히면 트레이너가 몬스터볼을 던집니다. 세 번 틀리면 게임 오버. 가입 없이 게스트로 바로 플레이하고, 나중에 Google을 연결해도 띠부씰과 점수는 그대로 남습니다.

실루엣 배틀: 싸우다로 답하고, 힌트로 이름 절반을 보고, 넘기기와 도망치다도 있습니다. 방향키와 Z키로도 됩니다. 피카츄, Pikachu, ピカチュウ 모두 정답입니다.
몬스터볼 던지기: 맞히면 게임보이 회색으로 직접 그린 트레이너가 공을 던지고 나서 포켓몬이 모습을 드러냅니다. 연속으로 맞히면 점수와 색이 다른 띠부씰 확률이 올라갑니다.
도감: 151마리를 한 페이지에서. 세 언어 이름이나 번호로 찾고, 타입 필터와 정렬은 주소에 남습니다.
상세 카드: 능력치, 특성, 진화. 아트워크는 마우스나 손가락을 따라 기울어지는 홀로그램 카드이고, 누르면 색이 다른 모습으로 바뀝니다.
띠부씰 컬렉션과 랭킹: 색이 다른 것까지 채워 가는 151칸, 그리고 모두의 최고 기록 랭킹.
휴대폰에서도: 게임보이 전체가 작은 화면에 들어오고, 배틀 중에는 손가락으로 만져도 페이지가 스크롤되지 않습니다.

앱: Next.js 16 (App Router, RSC, Server Actions) · React 19 · TypeScript
UI: Tailwind CSS v4 · Motion · Zustand · next-intl
데이터: Supabase — Postgres, Auth, Storage · Row Level Security · RPC · pg_cron
테스트: Vitest · Playwright
호스팅: Vercel (도쿄) · Supabase (도쿄) · Analytics · Speed Insights

진행 중인 문제에는 의미 없는 파일 이름의 실루엣과 가려진 이름만 있습니다. 정답은 private 스키마에 둡니다.

규칙은 순수 TypeScript입니다. 점수, 띠부씰, 다음 문제를 Postgres 함수 하나로 기록해서, 두 번 제출해도 두 번 받지 않습니다.

답 하나에 1.6~2.5초가 걸렸습니다. 함수는 워싱턴, DB는 도쿄에 있었습니다. 함수를 도쿄로 옮기고 왕복을 8번에서 3번으로 줄여 약 0.25초가 됐습니다.

포켓몬과 관련 이름·아트워크의 권리는 Nintendo, The Pokémon Company, Creatures Inc., GAME FREAK inc.에 있습니다. 비공식·비영리 팬 프로젝트입니다.