2025년 12월 26일 🔢 2048 신규 기능
UI 컴팩트 레이아웃 개선
게임보드 중심의 컴팩트한 UI 레이아웃으로 전면 개편

#ui#layout#ux
UI 컴팩트 레이아웃 개선
변경 내용
레이아웃 개선
- 헤더를 한 줄로 통합 (홈버튼 + 타이틀 + 점수 + 새게임)
- 게임보드를 화면 중앙에 배치하여 집중도 향상
- 불필요한 여백 제거
UI 간소화
- 장황한 조작법 설명 → 간단한 힌트 (
↑↓←→ or WASD) - 게임오버/승리 메시지 → 보드 위 오버레이로 변경
에셋 추가
- Kenney 폰트 (Blocks, Future, Pixel)
- UI 이미지 (btn_grey, btn_yellow, box_grey)
- 오디오 매니저 및 효과음
Before / After
Before: After:
┌────────────────────────┐ ┌────────────────────────┐
│ 2048 ← 홈으로 │ │ ← 2048 [SCORE][BEST] New│
│ 타일을 움직여서... │ ├────────────────────────┤
├────────────────────────┤ │ ┌──────────┐ │
│ [점수] [최고점수] │ │ │ 게임보드 │ │
│ [새 게임] │ │ │ (중앙집중)│ │
│ 게임 오버 메시지 │ │ └──────────┘ │
├────────────────────────┤ │ (오버레이: Game Over) │
│ ┌──────────┐ │ ├────────────────────────┤
│ │ 게임보드 │ │ │ ↑↓←→ or WASD │
│ └──────────┘ │ └────────────────────────┘
├────────────────────────┤
│ 조작법 설명... │
└────────────────────────┘
수정 파일
src/routes/games/2048/+page.sveltesrc/lib/components/Game2048Board.sveltesrc/lib/utils/audioManager.ts(신규)static/assets/(폰트, 이미지, 오디오)
커밋: 9725bb7