오버레이 클라이언트 및 실시간 날짜 표시 기능 구현기
시작하며
최근 GameAdvisor 프로젝트에서 클라이언트 UI를 한 단계 업그레이드하는 작업을 진행하였습니다. 단순한 정보 제공을 넘어, 게임 화면 위에 자연스럽게 녹아드는 오버레이 클라이언트와 실시간 날짜/시간 표시 기능을 구현하는 것을 목표로 삼았습니다. 실제로 구현하면서 겪었던 시행착오와 고민, 그리고 얻은 결과를 정리하여 공유드립니다.
오버레이 클라이언트 UI 개선
기존에는 JavaFX로 만든 단순한 창이었지만, 이번에는 게임 플레이에 방해되지 않으면서도 정보를 직관적으로 전달해드릴 수 있도록 여러 UI 요소를 개선하였습니다.
- 항상 최상단(오버레이) 표시: 클라이언트 창이 게임 화면 위에 겹쳐서 항상 보이도록 설정하였습니다. 덕분에 게임 중에도 필요한 정보를 즉시 확인하실 수 있습니다.
- 좌측 상단 고정: 오버레이가 화면의 좌측 상단에 고정되어, 시야를 가리지 않으면서도 눈에 잘 띄게 배치하였습니다.
- 반투명 효과 적용: 배경 투명도를 70%로 설정하여, 게임 화면과 자연스럽게 어우러지도록 디자인하였습니다.
- 크기 조정: 창 크기를 400x200으로 줄여, 화면을 최소한만 차지하도록 하였습니다.
서버 연동 및 실시간 날짜/시간 표시
UI만 예쁘게 바꾼 것이 아니라, 서버와의 연동을 통해 실시간 정보를 제공하는 기능도 추가하였습니다.
- 날짜/시간 API 구현: Spring Boot 백엔드에
/api/games/date엔드포인트를 만들어, 서버의 현재 날짜와 시간을 반환하도록 하였습니다. - 클라이언트에서 실시간 표시: 클라이언트는 1초마다 서버에 요청을 보내, 최신 날짜와 시간을 받아와 오버레이 우측 상단에 표시합니다. 서버와의 연결 상태도 직관적으로 확인하실 수 있습니다.
개발 과정에서의 고민과 시행착오
- macOS 환경에서 JavaFX 오버레이가 제대로 동작하지 않는 경우가 많아, StageStyle, setAlwaysOnTop 등 다양한 옵션을 실험하였습니다.
- 날짜/시간 동기화를 위해 REST API 통신을 주기적으로 처리하는 구조를 설계하였습니다.
- UI 요소 배치(BorderPane, Label 정렬 등)와 시인성(폰트, 색상, 투명도)에도 신경을 많이 썼습니다.
결과 및 느낀 점
이번 개선을 통해 GameAdvisor 클라이언트는 단순 정보 제공을 넘어, 실시간으로 변화하는 정보를 직관적으로 보여드릴 수 있는 오버레이 도구로 발전하였습니다. 게임을 하시면서도 방해받지 않고 필요한 정보를 한눈에 확인하실 수 있다는 점에서 사용자 경험이 크게 향상되었습니다.
이 글은 실제 개발 경험을 바탕으로 작성되었습니다. 코드와 더 구체적인 시행착오, 배운 점 등은 추후 별도 포스팅에서 자세히 다룰 예정이오니 많은 관심 부탁드립니다.