플레이 경험을 완성하는 디테일: Sky Drop UX 개선
재미있는 게임 로직을 만드는 것은 시작에 불과했습니다. 막상 Sky Drop을 배포하고 직접 플레이해보니, 게임 자체의 재미보다 **"불편함"**이 먼저 다가왔습니다. 게임이 끝났는데 어떻게 다시 시작해야 할지 모호하거나, 결과 화면이 너무 밋밋해서 성취감이 느껴지지 않는 등, '게임 외적인' 요소들이 몰입을 방해하고 있었기 때문입니다.최근 진행한 UX 개선 작업들은 이러한 **"사소해 보이지만 치명적인 불편함"**들을 제거하는 데 집중했습니다.1. 흐름의 완성: 시작과 끝 맺음
가장 큰 문제는 게임의 Life Cycle이 명확하지 않다는 점이었습니다.개선 전
- 게임 오버 시 텍스트로만 "Game Over"가 뜨고, 새로고침을 해야 재시작할 수 있었습니다.
- 난이도 초기화 실패: 게임을 재시작해도 이전 게임의 난이도(블록 낙하 속도 등)가 그대로 유지되어, 시작하자마자 죽는 경우가 빈번했습니다.
- 내 점수가 얼마인지, 이 점수가 잘한 건지 알기 어려웠습니다.
개선 후: Result Screen 도입
ResultScreen 컴포넌트를 도입하여 게임 오버 시 명확한 피드백을 주도록 변경했습니다.- 점수 시각화: 최종 점수를 크게 보여주어 성취감을 부여합니다.
- 명확한 Action:
Restart버튼과Dashboard버튼을 배치하여, 유저가 다음 행동(재도전 또는 나가기)을 주저 없이 선택할 수 있게 했습니다. - Backdrop 처리: 게임 화면 위에 반투명한 검은색 레이어를 깔아, 결과 화면에 시선이 집중되도록 연출했습니다.
2. 답답함 없는 반응형 레이아웃
PC에서는 괜찮았지만, 모바일이나 태블릿 환경에서는 화면이 잘리거나 UI가 겹치는 현상이 발생했습니다. 가장 아쉬웠던 점은 **"화면의 사이즈를 충분히 사용하지 못한다는 점"**이었습니다. 특히 브라우저의 주소창이나 하단 바 때문에 게임 영역이 가려지는 문제는 플레이 경험을 심각하게 해쳤습니다.- 뷰포트 대응:
min-h대신dvh(Dynamic Viewport Height) 단위를 활용하거나,resize이벤트에 맞춰 캔버스 크기를 유동적으로 조정하도록 수정했습니다. - UI 재배치: 좁은 화면에서는 점수판이나 조작 버튼이 게임 플레이를 방해하지 않도록 위치를 최적화했습니다.