최근 업데이트
2025년 12월 26일 🔢 2048 신규 기능

UI 컴팩트 레이아웃 개선

게임보드 중심의 컴팩트한 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.svelte
  • src/lib/components/Game2048Board.svelte
  • src/lib/utils/audioManager.ts (신규)
  • static/assets/ (폰트, 이미지, 오디오)

커밋: 9725bb7