Flutter 반응형 UI 만들기: 다양한 화면 크기에 대응하기

반응형 UI가 필요한 이유

모바일 앱을 개발하다 보면 다양한 화면 크기를 마주하게 됩니다. 작은 스마트폰부터 태블릿, 혹은 폴더블 기기까지 화면의 비율과 너비는 제각각입니다. 특정 기기에서만 보기 좋게 레이아웃을 고정하면, 화면이 작은 기기에서는 요소가 잘리거나 큰 기기에서는 여백이 과도하게 생기는 문제가 발생합니다.

Flutter는 유연한 레이아웃 시스템을 제공하여 이러한 환경 변화에 대응할 수 있습니다. 이번 글에서는 화면 크기에 따라 UI를 유연하게 배치하는 기초적인 방법을 살펴봅니다.

MediaQuery로 화면 정보 확인하기

가장 먼저 떠올릴 수 있는 방법은 MediaQuery를 사용하는 것입니다. 현재 화면의 너비와 높이를 확인하여 UI의 배치 방식을 결정할 수 있습니다.

Widget build(BuildContext context) {
  var screenWidth = MediaQuery.of(context).size.width;

  if (screenWidth > 600) {
    return WideLayout(); // 태블릿이나 큰 화면용
  } else {
    return NarrowLayout(); // 모바일용
  }
}

MediaQuery.of(context).size는 현재 기기의 전체 크기를 알려줍니다. 이를 통해 특정 너비(Breakpoint)를 기준으로 UI를 분기하면 기기 환경에 맞는 화면을 보여줄 수 있습니다.

LayoutBuilder로 부모 위젯 제약 활용하기

LayoutBuilder는 MediaQuery와 다르게, 해당 위젯이 배치된 부모 위젯의 크기 정보를 기반으로 반응합니다. 특정 화면 전체가 아니라, 화면 내부의 특정 영역에 반응형 레이아웃을 적용하고 싶을 때 유용합니다.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Row(children: [Expanded(child: Sidebar()), Expanded(child: Content())]);
    } else {
      return Column(children: [Content()]);
    }
  },
)

constraints 객체를 확인하면 부모 위젯이 제공하는 최대/최소 너비와 높이를 알 수 있습니다. 이는 위젯이 재사용될 때 부모의 크기에 따라 스스로 적절한 모습을 갖추도록 설계하는 데 도움을 줍니다.

비율을 고려한 유연한 레이아웃

단순히 크기 분기점만 나누는 것이 아니라, 화면 비율에 따라 위젯이 자동으로 조절되도록 하는 위젯들도 있습니다.

• FractionallySizedBox: 부모 크기의 일정 비율만큼 차지하게 합니다.
• AspectRatio: 정해진 비율을 유지하며 크기를 조절합니다.

이러한 위젯들을 활용하면 고정된 픽셀 값 대신 상대적인 크기를 설정할 수 있어, 다양한 기기에서 레이아웃이 깨지는 현상을 줄일 수 있습니다.

주의 사항

반응형 UI를 구현할 때 주의해야 할 점이 있습니다. MediaQuery는 화면 회전이나 시스템 설정 변경 시 전체 위젯 트리를 리빌드할 수 있어 성능에 영향을 줄 수 있습니다. 또한, 너무 많은 분기점을 설정하면 유지보수가 어려워질 수 있으므로, 서비스 타겟 기기에 맞춰 적절한 Breakpoint를 설정하는 것이 좋습니다.

정리

Flutter에서 반응형 UI를 만드는 핵심은 기기의 크기 정보를 읽어오고, 그에 따라 위젯 구조를 동적으로 변경하는 것입니다. MediaQuery로 전체 화면 정보를 확인하고, LayoutBuilder로 위젯 내부의 제약 조건을 활용해 보세요. 처음부터 모든 화면을 완벽하게 맞추려 하기보다, 모바일과 태블릿 두 가지 환경을 먼저 고려하는 것부터 시작하는 것을 권장합니다.

참고 자료

• Flutter 공식 문서: Responsive design
• Flutter Cookbook: Responsive layouts

---

🤖 이 글은 생성형 AI(Google Gemini)가 주제 선정 → 자료 조사 → 초안 작성 → AI 검수 과정을 거쳐 자동으로 작성했습니다. 사실과 다른 내용이 포함될 수 있으니 참고용으로 확인해 주세요.