지난 힘들었던 리팩토링의 다음 작업은 메인 페이지 리모델링이었다.
지금의 메인 페이지는 처음에 고안한 투박한 디자인이고,
프론트엔드 프로젝트라고 보기엔 요소가 많이 부족했다.
그래서 다양한 디자인 기법을 활용해
FPS Aim Test 게임과 어울리는 페이지로 만들어 보고자 했다.
이전 글들에서 렌더링 구조, 상태 관리, UX를 정리하며
프로젝트는 어느 정도 안정성을 갖추게 되었다.
그 상태에서 다시 전체를 바라보니,
이제 무엇을 해야 할지 비교적 명확하게 보였다.
바로 사이트의 첫 인상이었다.
기능적인 문제는 없지만,
프로젝트가 어떤 경험을 제공하는지
첫 화면에서 잘 전달되지 않는 느낌이 있었고,
디자인 자체가 너무 투박하고 심플해
열심히 구현한 게임까지도 상대적으로 수준이 낮아 보인다고 느꼈다.
그래서 이번 작업은 기능 확장이 아니라
UI 리디자인에 집중한 작업이다.
1. 디자인 통일성 – 메인 페이지에서 전체 UI로
처음에는 메인 페이지만 새로 디자인할 계획이었다.
하지만 메인 페이지의 디자인 톤을 크게 바꾸는 순간,
다른 UI들이 그대로 남아 있으면 분명한 이질감이 생겼다.
- 메인은 사이트 랜딩 페이지처럼 보이는데
- 시작 메뉴, 결과 화면, 랭킹 보드, 가이드는 이전 스타일 그대로라
- 화면들이 서로 다른 앱처럼 느껴졌다
메인 페이지는 결국 다른 UI들의 기준점이 된다.
그래서 메인만 바꾸는 건 오히려 더 어색하다고 판단했고,
전체 UI를 같은 방향으로 정리하기로 했다.
2. 메인 페이지 리디자인 (Before / After)
| Before | After |
|---|---|
 |  |
기존 메인 페이지는 정보 전달에는 문제가 없었지만,
- 전체적으로 정적인 인상
- 게임의 몰입감을 전달하기엔 부족한 화면
이라는 한계가 있었다.
리디자인 이후에는
웹 게임 랜딩 페이지에 가까운 인상을 목표로 구성했다.
3. UI 리디자인 기준
이번 UI 리디자인에서 잡은 기준은 단순했다.
- 화려함보다는 집중도
- 장식보다는 명확한 계층 구조
- UI는 보이는 요소가 아니라 플레이를 보조하는 요소
디자인 키워드는 다음과 같다.
- Dark UI: 기존과 동일한 다크 모드 유지
- Glassmorphism: 유리 질감을 활용한 카드/패널 디자인
- Minimal & Focused: 과하지 않지만 시선을 모아주는 구성
4. 기술적으로 신경 쓴 핵심
이번 작업의 대부분은 디자인 변경이었고,
기능이나 데이터 구조는 거의 바뀌지 않았다.
다만 메인 페이지에는
디자인적 기능에 가까운 인터랙션이 일부 추가되었다.
4-1. 마우스 스포트라이트 인터랙션
메인 페이지에서 마우스 위치에 반응하는
조명 효과를 추가했다.
이 효과는 단순한 장식이 아니라,
- 프로젝트 정체성인 마우스 움직임을 강조하면서
- 시선을 중앙 카드로 자연스럽게 유도하고
- 버튼 영역을 은은하게 강조하는 역할을 한다
구현은 복잡하게 가져가지 않았다.
mousemove이벤트로 좌표 추적radial-gradient를 이용한 조명 효과- 메인 메뉴에서만 렌더링
4-2. 상태 기반 UI – 서버 상태 표시
메인 하단에는 서버 상태를 작은 인디케이터로 표시했다.
상태는 다음 세 가지로 단순화했다.
- Checking
- Online
- Offline
| Checking | Online | Offline |
|---|---|---|
 |  |  |
UI는 상태를 계산하지 않고,
상태 값만 받아서 표현하는 역할만 한다.
이 구조 덕분에
UI와 비즈니스 로직이 자연스럽게 분리되었다.
4-3. 모바일 환경 UX 처리
AimTest는 마우스 기반 게임이라
모바일 환경에서는 정상적인 플레이가 어렵다.
이 점은 프로젝트 기획 단계부터 고려하고 있던 제약이었다.
그래서 모바일 기준을 768px로 잡고,
그 이하 해상도에서는
- 게임 모드 선택 버튼을 숨기고
- PC 환경을 안내하는 화면으로 대체했다
제약 조건을 숨기기보다
UI로 명확하게 드러내는 방향을 선택했다.
5. 메인 외 UI 변경 범위
메인 페이지를 기준으로
다음 UI들은 기능 변화 없이 디자인만 정리했다.
- 시작 메뉴
- 결과 화면
- 랭킹 보드
- 게임 가이드
- 게임 상태창
| 시작메뉴, 게임 가이드 | 랭킹보드 | 결과 메뉴 |
|---|---|---|
 |  |  |
목표는 단 하나였다.
어느 화면으로 이동해도
같은 프로젝트처럼 느껴지게 하는 것
맵과 타겟은 현재도 나쁘지 않다고 판단해 수정하지 않았다.
완전히 미술적인 영역이라 쉽지는 않겠지만,
기회가 된다면 다시 만들어 보고 싶은 부분이기도 하다.
6. 마무리
이번 작업을 통해 느낀 점은 분명하다.
메인 페이지 하나를 바꾸는 일은
생각보다 훨씬 큰 변경이라는 점이다.
처음에는 단순한 디자인 수정일 거라 생각했지만,
실제로는 기능 개발과 크게 다르지 않은 난이도의 작업이었다.
모든 사용자의 첫 눈에 보이는 것은
결국 화면 위에 배치된 글과 그림이다.
이번 작업을 하며,
만약 뛰어난 미적 감각과 대중적인 심미안을 함께 갖출 수 있다면
프론트엔드 개발자로서 분명 작지 않은 강점이 되겠다는 생각을 여러 번 하게 되었다.
