게임2026. 9. 12.
에임연습
다양한 모드와 정교한 시청각 피드백으로 게임의 몰입감과 직관성을 극대화한 인터랙티브 웹 에임 트레이너
만든 동기
마우스 반응 속도와 정확도를 재미있게 훈련할 수 있는 직관적인 웹 기반 미니 게임을 직접 구현해 보고 싶어 제작하게 되었습니다.
어려웠던 점
100% 명중 시 일반 고득점과 시각적으로 명확히 구분되는 파티클 및 텍스트 효과를 구현하는 것과, 타겟이 화면 안에서 무작위로 움직이며 벽에 닿았을 때 자연스럽게 반사되도록 물리 렌더링 로직을 조율하는 과정이 까다로웠습니다.
해결한 방법
100% 전용 핫핑크/골드 색상 팔레트와 파티클 파이어 앤 스프레드 로직을 분리 설계하고, CSS 클래스와 레이아웃 속성을 정돈하여 텍스트 가독성을 높였습니다. 또한 캔버스 내부 좌표 제한 및 속도 벡터 반사 공식을 적용해 움직이는 타겟의 자연스러운 움직임을 완성했습니다.
배운 점
사용자 경험(UX)을 결정하는 미세한 디테일(카운트다운 타이머, 페널티 밸런스, 텍스트 및 파티클 피드백 분리)의 중요성을 체감했으며, 동적 요소가 많아지는 하드코어 모드에서 상태 관리와 렌더링 최적화가 얼마나 중요한지 깊이 있게 배웠습니다.