Flutter 모바일 레이아웃이 배포 후 깨지는 문제 해결하기

Flutter 앱이 로컬에서는 완벽해도 배포 후 사용자의 실기기에서 레이아웃이 깨지는 일은 흔하다. 특히 다양한 화면 크기와 해상도를 모두 지원해야 할 때 더욱 그렇다.

기본 진단

먼저 개발 환경이 제대로 설정되었는지 확인한다:

flutter doctor -v

Xcode나 Android Studio의 버전에 따라 레이아웃 렌더링이 달라질 수 있다. 또한 사용하는 Flutter SDK 버전도 중요하다.

다양한 기기에서 테스트

모바일 레이아웃 문제의 가장 좋은 해결 방법은 실제 기기들에서 테스트하는 것이다:

flutter devices  # 연결된 기기 목록
flutter run  # 선택된 기기에서 실행

시뮬레이터뿐만 아니라 실제 폰들에서도 테스트해야 한다. 특히 고해상도와 저해상도 기기, 다양한 화면비의 기기에서 확인한다.

반응형 레이아웃 확인

MediaQuery를 사용해서 화면 크기에 따라 다르게 동작하는지 확인한다:

var screenWidth = MediaQuery.of(context).size.width;
var screenHeight = MediaQuery.of(context).size.height;

// 화면 크기에 따라 다른 레이아웃 반환
if (screenWidth > 600) {
  return buildDesktopLayout();
} else {
  return buildMobileLayout();
}

로컬에서는 고정된 창 크기로 테스트하지만, 실제 기기는 다양한 화면을 가지고 있다.

프로덕션 빌드로 검증

배포되는 실제 빌드로 테스트해야 한다:

flutter build apk --release  # Android
flutter build ipa --release  # iOS

Release 빌드에서는 Debug 정보가 제거되고 최적화가 이루어진다. 이 과정에서 레이아웃이 달라질 수 있다.

화면 회전 테스트

세로 모드와 가로 모드를 모두 테스트한다:

• 세로 모드에서 잘 보이던 레이아웃이 가로 모드에서 깨지는가?
• 기기를 회전시킬 때 상태 데이터가 유지되는가?
• 키보드가 나타났을 때 레이아웃이 제대로 조정되는가?

발견한 문제들

배포 후 주로 나타나는 문제들:

1. 오버플로우: 텍스트나 이미지가 화면을 벗어남
2. 패딩/마진 오류: 특정 기기에서만 여백이 잘못됨
3. 폰트 크기: 기기별 DPI가 다르면 텍스트 크기가 예상과 다름
4. Safe Area: 노치나 동적 아일랜드를 고려하지 않음

단계별 검증

1. 증상을 정확히 재현한다. 어느 화면에서, 어느 크기의 기기에서 문제가 생기는가?
2. 로그와 레이아웃 바운드를 확인한다. 특정 위젯이 화면을 넘어가는가?
3. 실제 기기에서 스크린샷을 찍어 로컬 시뮬레이터와 비교한다.

마무리

작은 확인을 남겨두면 다음 배포 때 훨씬 빠르게 처리할 수 있다. 특히 모바일 레이아웃은 시각적이므로, 배포 전 다양한 기기에서의 검증이 매우 중요하다.