game/prompt/30_responsive_ui_improvement.md

30. 통합 반응형 UI 개선 (Integrated Responsive UI Improvement)

1. 배경 (Background)

현재 UI는 모바일 화면을 기준으로 개발되었으나, 웹(Web) 환경에서 테스트 시 화면이 너무 커지거나 레이아웃이 어색해지는 문제가 있습니다. 사용자는 "웹에서 너무 커지는 것보다 태블릿에서 사용해도 문제가 되지 않을 정도의 해상도"를 원하며, BottomNavigationBar를 포함한 전체적인 UI가 웹 환경에서 어색하지 않게 조정되기를 원합니다.

2. 목표 (Objective)

• 최대 너비 및 높이 제한 (Max Width & Height Constraint):
  • 웹이나 태블릿 등 큰 화면에서 콘텐츠가 지나치게 늘어나는 것을 방지합니다.
  • MaxWidth: 600px (태블릿/모바일 적정 너비)
  • MaxHeight: 1000px (세로 비율 유지)
• 전역 중앙 정렬 (Global Center Alignment):
  • 앱의 모든 화면(MainWrapper, CharacterSelectionScreen 등)을 중앙에 배치하고, 남는 여백은 어두운 배경(검은색)으로 처리하여 몰입감을 높입니다.
• ResponsiveContainer 도입:
  • 위 제약 조건을 쉽게 적용할 수 있는 재사용 가능한 위젯을 구현합니다.

3. 작업 상세 (Implementation Details)

A. lib/widgets/responsive_container.dart 구현

• maxWidth와 maxHeight를 제한하고 중앙 정렬하는 래퍼 위젯.
• 기본값: maxWidth = 600.0, maxHeight = 1000.0.

B. 화면별 적용

1. MainWrapper (lib/screens/main_wrapper.dart):
   • 전체 앱(Scaffold + BottomNavigationBar)을 ResponsiveContainer로 감싸서 하단 바도 함께 줄어들도록 처리.
   • 외부 배경은 Colors.black으로 설정.
2. CharacterSelectionScreen (lib/screens/character_selection_screen.dart):
   • 동일하게 외부 배경과 ResponsiveContainer 적용.
3. BattleScreen (lib/screens/battle_screen.dart):
   • ResponsiveContainer 내부에서 Stack과 플로팅 텍스트(DamageEvent, EffectEvent) 위치가 올바르게 계산되도록 GlobalKey 활용 및 좌표 보정 로직 적용.

4. 검증 (Verification)

• Web 빌드 테스트:
  • 브라우저 창을 가로/세로로 크게 늘렸을 때, 앱 화면이 600x1000 박스 내에 유지되는지 확인.
  • BottomNavigationBar가 전체 너비로 늘어나지 않고 앱 너비에 맞춰지는지 확인.
  • 플로팅 텍스트가 캐릭터 위치에 정확히 뜨는지 확인.