킬러 빈 완전 전략 가이드 — 팁·메커니즘·숨은 기능

Source: Dev.to

요즘 킬러 빈 팬 사이트를 만들면서, 특히 게임 허브나 위키 형태의 사이트를 구축하고 있다면 흥미로운 구현 디테일 몇 가지를 공유하고 싶어요.
가장 큰 난관은 무기 스탯을 플레이어가 로드아웃을 비교하는 데 실제로 도움이 되도록 표시하는 것이었어요. 대부분의 슈팅 위키는 숫자를 표에 그냥 나열하지만, 킬러 빈의 무기 풀은 이상한 보정치가 많거든요—예를 들어 일부 총은 “빈을 추적하는 탄도 물리”가 적용돼 기본 DPS 값에 반영되지 않아요. 그래서 저는 게임 내 테스트 데이터 스프레드시트에서 데이터를 끌어와 시각적인 스탯 바와 숨겨진 메커니즘을 설명하는 조건부 툴팁을 렌더링하는 간단한 데이터 레이어를 만들었어요.

미션 가이드는 전통적인 워크스루 형식을 버리고 의사결정 트리 컴포넌트를 사용했어요. 각 보스전 섹션은 이전에 클릭한 무기 로드아웃에 따라 동적으로 팁을 로드합니다. 듀얼 웨일드 디글스(Dual Wield Deagles)를 쓰느냐 폭발 부리또 런처(Explosive Burrito Launcher)를 쓰느냐에 따라 전략이 크게 갈라지거든요. 이 상태 관리는 예상보다 복잡해졌고, 갈라지는 경로가 얼마나 많은지 과소평가했어요.

놀랍게도 잘 작동한 몇 가지 요소:

• 무기 아이콘에 SVG 빈 스프라이트 사용. PNG 스프라이트시트보다 훨씬 가볍고, 한 페이지에 40개가 넘는 총을 렌더링할 때 모바일에서도 흐림 없이 완벽하게 스케일됩니다.
• 적 데이터베이스를 위한 클라이언트‑사이드 검색에 fuse.js 활용. 미션 중에 약점 부위를 빠르게 찾아야 하는 플레이어가 많아 매밀리초가 중요하거든요. 퍼지 매칭 덕분에 “clmbot”(climbot 오타) 같은 철자를 실수해도 바로 잡아줍니다.
• 게임플레이 GIF를 레이지 로딩. 콤보 시연 영상이 8 MB 정도 되는 경우가 많아 LCP 점수를 크게 떨어뜨리던 문제를 해결했어요.

전체 사이트는 정적 생성(Next.js)으로 만들었고, $5 VPS에 호스팅하고 있습니다. 실제 컴포넌트 코드와 데이터 스키마를 보고 싶다면 [my blog URL]에 더 자세한 분석을 올려두었으니 참고하세요—레포도 공유할게요.

현지화 작업이 사실상 가장 큰 골칫거리였어요. 게임 파일에서 모든 아이템 설명과 대사를 추출해 번역 파이프라인에 넣는 데 프론트엔드 작업보다 훨씬 오래 걸렸거든요. 팬 프로젝트를 위해 게임 데이터를 추출해본 경험이 있는 분이 있다면, 파싱 로직을 어떻게 접근했는지 알려주세요— 아직 제 쪽은 좀 해킹 느낌이라서요.