42 lines
2.4 KiB
Markdown
42 lines
2.4 KiB
Markdown
# 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`가 전체 너비로 늘어나지 않고 앱 너비에 맞춰지는지 확인.
|
|
- 플로팅 텍스트가 캐릭터 위치에 정확히 뜨는지 확인.
|