운빨존망겜
"나의 뽑기 운과 전략으로 쏟아지는 괴물들을 막아내는 짜릿한 나선형 나노 코어 타워 디펜스 게임!"
💡 만든 동기
요즘 정말 인기가 많은 원작 '운빨존망겜'의 핵심 재미인 유닛 뽑기와 합성 시스템을 내 손으로 직접 구현해 보고 싶었습니다. 특히 흔한 직선 모양의 맵 대신, 적들이 뱅글뱅글 돌며 중앙으로 조여 오는 나선형 전장을 만들어 플레이어에게 더 스릴 넘치는 전략적 재미를 선물하고 싶어 개발을 시작했습니다.
🤔 어려웠던 점
첫 번째: 처음에는 화면 크기에 따라 캐릭터 소환 버튼이 아래로 잘려 보여서 유닛을 뽑을 수 없는 UX(사용자 경험) 문제가 있었습니다. 두 번째: 브라우저 보안 정책 때문에 오디오 시스템이 차단되면서 전체 게임 스크립트가 멈추고 유닛 소환이 아예 안 되는 치명적인 버그가 있었습니다. 세 번째: 유닛이 소환되거나 합성될 때 크기가 변하는 애니메이션 과정에서, 반지름 계산 값이 마이너스(음수)로 떨어져 캔버스(Canvas) 화면이 통째로 멈추는 에러가 발생했습니다.
🛠 해결한 방법
버튼 잘림 해결: 화면 크기에 맞춰 스크롤 기능(overflow-y: auto)을 넣고, 게임 시작 시 소환 버튼이 노란색으로 반짝이는 가이드를 추가해 누구나 쉽게 찾을 수 있게 했습니다. 오디오 멈춤 해결: 오디오를 게임 시작과 동시에 켜지 않고, 사용자가 첫 버튼을 누를 때 안전하게 켜지도록 코드를 분리(Lazy Initialization)하여 멈춤 현상을 완벽히 고쳤습니다.
✨ 배운 점
단순히 코딩으로 기능을 만드는 것뿐만 아니라, 사용자가 화면을 볼 때 불편함이 없도록 UI/UX를 신경 쓰는 것이 얼마나 중요한지 깨달았습니다. 그리고 예상치 못한 버그로 게임이 멈췄을 때, 개발자 도구를 보며 에러의 원인을 차근차근 분석하고 안전장치 코드를 짜서 해결하는 **'디버깅(Debugging)의 즐거움과 끈기'**를 깊이 배웠습니다!