Flutter 튜토리얼 34편: 반응형 디자인 기초

요약#

핵심 요지#

문제 정의: 하나의 앱이 휴대폰, 태블릿, 데스크톱 등 다양한 화면 크기에서 동작해야 하는데, 고정된 레이아웃은 모든 화면에서 잘 보이지 않는다.
핵심 주장: Flutter의 반응형¹ 설계는 3단계 접근법(Abstract, Measure, Branch)을 따르며, MediaQuery²와 LayoutBuilder³를 상황에 맞게 사용해야 한다.
주요 근거: MediaQuery.sizeOf()는 화면 전체 크기를 알려주고, LayoutBuilder는 부모가 허용한 공간을 알려준다. SafeArea는 노치와 시스템 UI를 피해 콘텐츠를 배치한다.
실무 기준: 전체 레이아웃 변경은 MediaQuery, 위젯별 적응은 LayoutBuilder, 화면 가장자리 안전 영역은 SafeArea를 사용한다.

문서가 설명하는 범위#

반응형 디자인과 적응형 디자인의 차이
3단계 접근법: Abstract, Measure, Branch
MediaQuery.sizeOf()와 LayoutBuilder 비교
SafeArea로 안전 영역 확보하기
반응형 디자인 베스트 프랙티스

읽는 시간: 18분 | 난이도: 중급

참고 자료#

Adaptive and responsive design - 반응형/적응형 디자인 개요
General approach - 3단계 접근법 설명
SafeArea & MediaQuery - SafeArea와 MediaQuery 상세
Best practices - 반응형 디자인 권장사항

문제 상황#

Flutter 앱을 만들었는데, 휴대폰에서는 잘 보이지만 태블릿에서는 어색합니다.
좁은 화면에 맞춰 만든 레이아웃이 넓은 화면에서 너무 늘어나 보입니다.
노치가 있는 기기에서는 콘텐츠가 잘려서 보입니다.

1
// 고정 크기 레이아웃 - 모든 화면에서 같은 모습
2
Scaffold(
3
  body: Column(
4
    children: [
5
      Container(width: 300, height: 200), // 작은 화면에서 넘침
6
      Row(children: [
7
        Expanded(child: Card()),
8
        Expanded(child: Card()),
9
      ]), // 넓은 화면에서 카드가 너무 늘어남
10
    ],
11
  ),
12
)

문제는 다음과 같습니다.

작은 화면에서 콘텐츠가 넘치거나 잘린다.
큰 화면에서 UI 요소가 과도하게 늘어난다.
노치, 상태 바 등 시스템 UI와 콘텐츠가 겹친다.
가로/세로 모드 전환 시 레이아웃이 깨진다.

해결 방법#

Flutter는 화면 크기에 따라 레이아웃을 조정하는 다양한 도구를 제공합니다.
반응형 디자인은 콘텐츠가 화면 크기에 맞게 흐르듯 조정되는 방식이고, 적응형 디자인⁴은 특정 중단점에서 완전히 다른 레이아웃을 보여주는 방식입니다.

챕터 1: 반응형과 적응형 디자인의 차이#

Why#

NOTE
“반응형”과 “적응형”이라는 용어가 혼용되어 혼란스러울 수 있습니다.
두 개념의 차이를 이해해야 상황에 맞는 접근법을 선택할 수 있습니다.
1
// 반응형: 화면 너비에 따라 패딩이 부드럽게 변함
2
padding: EdgeInsets.all(width * 0.05)
3

4
// 적응형: 특정 너비에서 완전히 다른 레이아웃
5
width > 600 ? TwoColumnLayout() : SingleColumnLayout()

What#

NOTE
반응형 디자인 (Responsive)

화면 크기에 따라 콘텐츠가 연속적으로 조정됨

비율 기반 크기, Flex 위젯 사용

예: 카드 너비가 화면의 90%를 차지

적응형 디자인 (Adaptive)

특정 중단점⁵에서 불연속적으로 레이아웃 변경

조건문으로 다른 위젯 선택

예: 600px 이하면 1열, 이상이면 2열

특성 반응형 적응형
변화 방식 연속적 불연속적
구현 방법 비율, Flex 조건문, 중단점
사용 예 패딩, 폰트 크기 레이아웃 구조 변경

특성	반응형	적응형
변화 방식	연속적	불연속적
구현 방법	비율, Flex	조건문, 중단점
사용 예	패딩, 폰트 크기	레이아웃 구조 변경

How#

TIP

반응형 예시: 화면 비율에 맞는 패딩

1
class ResponsivePadding extends StatelessWidget {
2
  const ResponsivePadding({super.key, required this.child});
3
  final Widget child;
4

5
  @override
6
  Widget build(BuildContext context) {
7
    final width = MediaQuery.sizeOf(context).width;
8
    // 화면 너비의 5%를 패딩으로 사용
9
    return Padding(
10
      padding: EdgeInsets.symmetric(horizontal: width * 0.05),
11
      child: child,
12
    );
13
  }
14
}

적응형 예시: 중단점에 따른 레이아웃 변경

1
class AdaptiveLayout extends StatelessWidget {
2
  const AdaptiveLayout({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    final width = MediaQuery.sizeOf(context).width;
7

8
    // 600px를 기준으로 레이아웃 변경
9
    if (width < 600) {
10
      return const MobileLayout();
11
    } else if (width < 900) {
12
      return const TabletLayout();
13
    } else {
14
      return const DesktopLayout();
15
    }
16
  }
17
}

실제 앱에서는 두 가지를 함께 사용합니다.
큰 구조는 적응형으로, 세부 요소는 반응형으로 처리합니다.

Watch out#

WARNING
반응형만 사용하면 극단적인 화면 크기에서 문제가 생깁니다.
1
// ❌ 문제: 아주 넓은 화면에서 텍스트가 너무 길어짐
2
Container(
3
  width: MediaQuery.sizeOf(context).width * 0.9,
4
  child: Text('매우 긴 텍스트...'),
5
)
6

7
// ✅ 해결: 최대 너비 제한
8
Container(
9
  width: min(MediaQuery.sizeOf(context).width * 0.9, 800),
10
  child: Text('매우 긴 텍스트...'),
11
)
적응형만 사용하면 중단점 근처에서 갑작스러운 레이아웃 변경이 일어나 사용자 경험이 나빠집니다.
두 접근법을 균형 있게 조합하세요.

결론: 반응형은 부드러운 조정에, 적응형은 구조적 변경에 사용합니다.

챕터 2: 3단계 접근법 (Abstract, Measure, Branch)#

Why#

NOTE

화면 크기에 따라 다른 UI를 보여주려면 체계적인 접근이 필요합니다.
무작정 조건문을 추가하면 코드가 복잡해지고 유지보수가 어려워집니다.

1
// ❌ 체계 없이 조건문을 추가한 복잡한 코드
2
Widget build(BuildContext context) {
3
  final width = MediaQuery.sizeOf(context).width;
4
  return Column(
5
    children: [
6
      if (width > 600) const SideMenu(),
7
      Container(
8
        padding: EdgeInsets.all(width > 600 ? 24 : 16),
9
        child: width > 900
10
          ? const ThreeColumnGrid()
11
          : width > 600
12
            ? const TwoColumnGrid()
13
            : const SingleColumnList(),
14
      ),
15
    ],
16
  );
17
}

Flutter 공식 문서는 Abstract → Measure → Branch 3단계를 권장합니다.

What#

NOTE
1단계: Abstract (추상화)

화면 크기에 따라 달라지는 값을 추출

예: 열 개수, 패딩 크기, 폰트 크기

2단계: Measure (측정)

MediaQuery나 LayoutBuilder로 현재 크기 측정

필요한 정보만 측정 (너비, 높이, 방향 등)

3단계: Branch (분기)

측정된 값에 따라 적절한 UI 선택

추상화된 값을 사용하여 분기

flowchart LR A[Abstract<br/>변화 요소 추출] --> B[Measure<br/>현재 크기 측정] B --> C[Branch<br/>UI 선택]

How#

TIP

예제: 그리드 열 개수 조정

1
// 1단계: Abstract - 화면 크기에 따른 열 개수 정의
2
int getColumnCount(double width) {
3
  if (width < 600) return 1;
4
  if (width < 900) return 2;
5
  if (width < 1200) return 3;
6
  return 4;
7
}
8

9
// 2단계: Measure - 현재 너비 측정
10
// 3단계: Branch - 열 개수에 맞는 그리드 생성
11
class ResponsiveGrid extends StatelessWidget {
12
  const ResponsiveGrid({super.key, required this.items});
13
  final List<Widget> items;
14

15
  @override
16
  Widget build(BuildContext context) {
17
    // Measure
18
    final width = MediaQuery.sizeOf(context).width;
19
    // Branch (Abstract 함수 활용)
20
    final columns = getColumnCount(width);
21

22
    return GridView.builder(
23
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
24
        crossAxisCount: columns,
25
        crossAxisSpacing: 16,
26
        mainAxisSpacing: 16,
27
      ),
28
      itemCount: items.length,
29
      itemBuilder: (context, index) => items[index],
30
    );
31
  }
32
}

예제: 화면 크기 클래스 정의

1
// 1단계: Abstract - 화면 크기 클래스 정의
2
enum ScreenSize { compact, medium, expanded }
3

4
ScreenSize getScreenSize(double width) {
5
  if (width < 600) return ScreenSize.compact;
6
  if (width < 840) return ScreenSize.medium;
7
  return ScreenSize.expanded;
8
}
9

10
// 2단계 & 3단계: Measure와 Branch
11
class AdaptiveScaffold extends StatelessWidget {
12
  const AdaptiveScaffold({super.key, required this.body});
13
  final Widget body;
14

15
  @override
16
  Widget build(BuildContext context) {
17
    final width = MediaQuery.sizeOf(context).width;
18
    final screenSize = getScreenSize(width);
19

20
    return Scaffold(
21
      // 큰 화면에서만 사이드 메뉴 표시
22
      drawer: screenSize == ScreenSize.compact
23
        ? const AppDrawer()
24
        : null,
25
      body: Row(
26
        children: [
27
          // 중간 이상 화면에서 NavigationRail 표시
28
          if (screenSize != ScreenSize.compact)
29
            const NavigationRail(
30
              destinations: [...],
31
              selectedIndex: 0,
32
            ),
33
          Expanded(child: body),
34
        ],
35
      ),
36
    );
37
  }
38
}

Watch out#

WARNING

중단점 값을 여러 곳에 하드코딩하면 일관성이 깨집니다.

1
// ❌ 중단점이 여러 곳에 흩어져 있음
2
if (width > 600) ... // 어떤 파일에서
3
if (width > 599) ... // 다른 파일에서 - 1픽셀 차이!
4
if (width >= 600) ... // 또 다른 파일에서
5

6
// ✅ 중단점을 한 곳에서 관리
7
abstract class Breakpoints {
8
  static const double compact = 600;
9
  static const double medium = 840;
10
  static const double expanded = 1200;
11
}
12

13
// 사용
14
if (width >= Breakpoints.compact) ...

또한 너무 많은 중단점은 피하세요.
Material Design 3는 compact, medium, expanded 세 가지를 권장합니다.

결론: Abstract → Measure → Branch 패턴으로 반응형 코드를 체계적으로 구성합니다.

챕터 3: MediaQuery.sizeOf() 활용하기#

Why#

NOTE
화면 전체 크기를 기준으로 레이아웃을 결정해야 할 때가 있습니다.
”휴대폰인가 태블릿인가?”를 판단하려면 전체 화면 크기가 필요합니다.
1
// 화면 전체 크기에 따라 네비게이션 스타일 변경
2
final screenWidth = MediaQuery.sizeOf(context).width;
3
if (screenWidth > 600) {
4
  return const TabletNavigation();
5
} else {
6
  return const MobileNavigation();
7
}

What#

NOTE
MediaQuery.sizeOf(context)는 화면 전체 크기를 반환합니다.
1
final size = MediaQuery.sizeOf(context);
2
print(size.width);  // 화면 너비 (픽셀)
3
print(size.height); // 화면 높이 (픽셀)
MediaQuery가 제공하는 주요 정보:

속성 설명 사용 예
size 화면 크기 레이아웃 분기
orientation 가로/세로 방향 방향별 레이아웃
padding 시스템 UI 영역 SafeArea 구현
viewInsets 키보드 높이 키보드 대응
textScaleFactor 텍스트 크기 배율 접근성 대응

속성	설명	사용 예
`size`	화면 크기	레이아웃 분기
`orientation`	가로/세로 방향	방향별 레이아웃
`padding`	시스템 UI 영역	SafeArea 구현
`viewInsets`	키보드 높이	키보드 대응
`textScaleFactor`	텍스트 크기 배율	접근성 대응

How#

TIP

화면 방향에 따른 레이아웃 변경

1
class OrientationAwareLayout extends StatelessWidget {
2
  const OrientationAwareLayout({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    final orientation = MediaQuery.orientationOf(context);
7

8
    if (orientation == Orientation.landscape) {
9
      // 가로 모드: 사이드바 + 콘텐츠
10
      return Row(
11
        children: [
12
          const SizedBox(width: 200, child: Sidebar()),
13
          const Expanded(child: MainContent()),
14
        ],
15
      );
16
    } else {
17
      // 세로 모드: 콘텐츠만
18
      return const MainContent();
19
    }
20
  }
21
}

텍스트 크기 배율 대응

1
class ScalableText extends StatelessWidget {
2
  const ScalableText({super.key, required this.text});
3
  final String text;
4

5
  @override
6
  Widget build(BuildContext context) {
7
    final textScaler = MediaQuery.textScalerOf(context);
8

9
    // 사용자가 시스템에서 텍스트 크기를 키웠을 때
10
    // 레이아웃이 깨지지 않도록 최대 크기 제한
11
    return Text(
12
      text,
13
      textScaler: textScaler.clamp(maxScaleFactor: 1.5),
14
    );
15
  }
16
}

of() vs sizeOf() 차이

1
// ❌ 전체 MediaQueryData를 구독 - 불필요한 리빌드 발생
2
final size = MediaQuery.of(context).size;
3

4
// ✅ size만 구독 - 다른 MediaQuery 값이 변해도 리빌드 안 함
5
final size = MediaQuery.sizeOf(context);

Watch out#

WARNING
MediaQuery.of(context)는 모든 MediaQuery 값이 변경될 때마다 위젯을 리빌드합니다.
키보드가 나타나거나 시스템 UI가 변경될 때도 리빌드됩니다.
1
// ❌ 키보드가 나타날 때마다 리빌드
2
Widget build(BuildContext context) {
3
  final data = MediaQuery.of(context);
4
  return Container(width: data.size.width * 0.5);
5
}
6

7
// ✅ 크기가 변할 때만 리빌드
8
Widget build(BuildContext context) {
9
  final size = MediaQuery.sizeOf(context);
10
  return Container(width: size.width * 0.5);
11
}
특정 속성만 필요하면 전용 메서드를 사용하세요:

MediaQuery.sizeOf(context) - 크기만

MediaQuery.orientationOf(context) - 방향만

MediaQuery.paddingOf(context) - 패딩만

MediaQuery.viewInsetsOf(context) - 키보드 영역만

결론: MediaQuery.sizeOf()로 화면 전체 크기를 효율적으로 측정합니다.

챕터 4: LayoutBuilder 활용하기#

Why#

NOTE
위젯이 실제로 사용할 수 있는 공간은 화면 크기와 다를 수 있습니다.
부모 위젯이 제한을 걸면 자식은 그 안에서만 레이아웃을 구성해야 합니다.
1
// MediaQuery는 화면 전체 크기를 반환
2
// 하지만 이 Container의 실제 공간은 부모가 결정
3
SizedBox(
4
  width: 300, // 이 위젯 안에서
5
  child: MyWidget(), // MyWidget이 쓸 수 있는 공간은 300px
6
)
LayoutBuilder³는 부모가 허용한 공간을 알려줍니다.

What#

NOTE
LayoutBuilder는 부모의 제약 조건⁶을 받아 자식을 빌드합니다.
1
LayoutBuilder(
2
  builder: (context, constraints) {
3
    // constraints.maxWidth: 사용 가능한 최대 너비
4
    // constraints.maxHeight: 사용 가능한 최대 높이
5
    // constraints.minWidth: 최소 너비 요구사항
6
    // constraints.minHeight: 최소 높이 요구사항
7
    return SomeWidget();
8
  },
9
)
MediaQuery vs LayoutBuilder 비교

특성 MediaQuery.sizeOf() LayoutBuilder
측정 대상 화면 전체 부모가 허용한 공간
업데이트 시점 화면 크기 변경 부모 제약 변경
사용 목적 전역 레이아웃 결정 위젯별 적응
중첩 영향 없음 부모에 따라 달라짐

특성	MediaQuery.sizeOf()	LayoutBuilder
측정 대상	화면 전체	부모가 허용한 공간
업데이트 시점	화면 크기 변경	부모 제약 변경
사용 목적	전역 레이아웃 결정	위젯별 적응
중첩 영향	없음	부모에 따라 달라짐

How#

TIP

예제: 사용 가능한 공간에 맞는 카드 배치

1
class AdaptiveCardList extends StatelessWidget {
2
  const AdaptiveCardList({super.key, required this.items});
3
  final List<String> items;
4

5
  @override
6
  Widget build(BuildContext context) {
7
    return LayoutBuilder(
8
      builder: (context, constraints) {
9
        // 부모가 허용한 너비에 따라 카드 크기 결정
10
        final cardWidth = constraints.maxWidth > 600 ? 200.0 : 150.0;
11
        final crossAxisCount = (constraints.maxWidth / cardWidth).floor();
12

13
        return GridView.builder(
14
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
15
            crossAxisCount: crossAxisCount.clamp(1, 4),
16
            crossAxisSpacing: 8,
17
            mainAxisSpacing: 8,
18
          ),
19
          itemCount: items.length,
20
          itemBuilder: (context, index) => Card(
21
            child: Center(child: Text(items[index])),
22
          ),
23
        );
24
      },
25
    );
26
  }
27
}

예제: 재사용 가능한 반응형 위젯

1
// 이 위젯은 어디에 놓여도 자신의 공간에 맞게 적응
2
class ResponsivePanel extends StatelessWidget {
3
  const ResponsivePanel({super.key, required this.child});
4
  final Widget child;
5

6
  @override
7
  Widget build(BuildContext context) {
8
    return LayoutBuilder(
9
      builder: (context, constraints) {
10
        // 좁은 공간에서는 세로 배치
11
        if (constraints.maxWidth < 400) {
12
          return Column(children: [const Header(), Expanded(child: child)]);
13
        }
14
        // 넓은 공간에서는 가로 배치
15
        return Row(children: [const Sidebar(), Expanded(child: child)]);
16
      },
17
    );
18
  }
19
}
20

21
// 어디에 놓여도 적응
22
// 1. 전체 화면에 놓으면 화면 크기에 맞게
23
// 2. Dialog 안에 놓으면 Dialog 크기에 맞게
24
// 3. 다른 위젯 안에 놓으면 그 위젯 크기에 맞게

Watch out#

WARNING

LayoutBuilder의 constraints가 무한대일 수 있습니다.
ListView나 SingleChildScrollView 안에서는 maxHeight가 double.infinity입니다.

1
// ❌ 무한 높이 문제
2
ListView(
3
  children: [
4
    LayoutBuilder(
5
      builder: (context, constraints) {
6
        // constraints.maxHeight == double.infinity!
7
        // 높이 기반 계산이 불가능
8
        return Container(height: constraints.maxHeight * 0.5); // 문제!
9
      },
10
    ),
11
  ],
12
)
13

14
// ✅ 높이가 필요하면 ListView 밖에서 LayoutBuilder 사용
15
LayoutBuilder(
16
  builder: (context, constraints) {
17
    return ListView(
18
      children: [
19
        Container(height: constraints.maxHeight * 0.3),
20
        // ...
21
      ],
22
    );
23
  },
24
)

또한 LayoutBuilder는 레이아웃 단계에서 실행됩니다.
성능에 민감한 작업은 builder 함수 안에서 피하세요.

결론: LayoutBuilder로 위젯이 실제 사용할 수 있는 공간에 맞게 적응합니다.

챕터 5: SafeArea로 안전 영역 확보하기#

Why#

NOTE
최신 기기에는 노치, 홈 인디케이터, 카메라 홀 등이 있습니다.
이런 영역에 콘텐츠가 배치되면 잘리거나 가려집니다.
1
// ❌ 노치가 있는 기기에서 텍스트가 가려짐
2
Scaffold(
3
  body: Column(
4
    children: [
5
      Text('이 텍스트가 노치 뒤에 숨어요'),
6
      // ...
7
    ],
8
  ),
9
)

What#

NOTE
SafeArea⁷는 시스템 UI를 피해 콘텐츠를 안전한 영역에 배치합니다.
1
SafeArea(
2
  child: Text('이 텍스트는 항상 보여요'),
3
)
SafeArea가 피하는 영역:

영역 설명 예시
상단 상태 바, 노치, 카메라 홀 iPhone 노치
하단 홈 인디케이터, 네비게이션 바 iPhone 홈바
좌우 둥근 모서리, 폴더블 힌지 Galaxy Fold
SafeArea는 내부적으로 MediaQuery.paddingOf()를 사용합니다.

영역	설명	예시
상단	상태 바, 노치, 카메라 홀	iPhone 노치
하단	홈 인디케이터, 네비게이션 바	iPhone 홈바
좌우	둥근 모서리, 폴더블 힌지	Galaxy Fold

How#

TIP

기본 사용법

1
Scaffold(
2
  body: SafeArea(
3
    child: Column(
4
      children: [
5
        const Text('안전한 영역에 있어요'),
6
        Expanded(child: ListView(...)),
7
      ],
8
    ),
9
  ),
10
)

특정 방향만 적용

1
SafeArea(
2
  // 상단만 패딩 적용, 하단은 무시
3
  top: true,
4
  bottom: false,
5
  left: true,
6
  right: true,
7
  child: Column(...),
8
)

최소 패딩 설정

1
SafeArea(
2
  // 시스템 패딩이 없어도 최소 16px 보장
3
  minimum: const EdgeInsets.all(16),
4
  child: Column(...),
5
)

Scaffold와 함께 사용

Scaffold는 일부 SafeArea를 자동으로 처리합니다.

1
Scaffold(
2
  appBar: AppBar(), // 상단 안전 영역 자동 처리
3
  body: ListView(...), // body는 SafeArea 적용 안 됨
4
  bottomNavigationBar: BottomNavigationBar(...), // 하단 자동 처리
5
)
6

7
// body에 SafeArea가 필요하면 직접 추가
8
Scaffold(
9
  body: SafeArea(
10
    child: ListView(...),
11
  ),
12
)

Watch out#

WARNING

SafeArea를 중첩하면 패딩이 중복 적용됩니다.

1
// ❌ 패딩이 두 번 적용됨
2
SafeArea(
3
  child: Column(
4
    children: [
5
      SafeArea( // 불필요한 중첩
6
        child: Text('패딩이 너무 많아요'),
7
      ),
8
    ],
9
  ),
10
)

또한 MediaQuery.removePadding()을 사용하면 하위 위젯에서 SafeArea가 작동하지 않을 수 있습니다.

1
// SafeArea 효과를 제거하고 직접 패딩 관리할 때
2
MediaQuery.removePadding(
3
  context: context,
4
  removeTop: true,
5
  child: ListView(...), // 상단 패딩이 제거됨
6
)

스크롤 가능한 위젯에서는 SliverSafeArea를 고려하세요.

1
CustomScrollView(
2
  slivers: [
3
    SliverSafeArea(
4
      sliver: SliverList(...),
5
    ),
6
  ],
7
)

결론: SafeArea로 시스템 UI와 겹치지 않는 안전한 콘텐츠 영역을 확보합니다.

챕터 6: 반응형 디자인 베스트 프랙티스#

Why#

NOTE
반응형 디자인을 잘못 구현하면 코드가 복잡해지고 성능이 떨어집니다.
검증된 패턴을 따르면 유지보수가 쉽고 일관된 사용자 경험을 제공할 수 있습니다.
1
// ❌ 조건문이 여기저기 흩어져 있음
2
if (MediaQuery.sizeOf(context).width > 600) ...
3
if (MediaQuery.sizeOf(context).width > 599) ... // 1픽셀 차이!

What#

NOTE
Flutter 공식 문서가 권장하는 핵심 원칙:

Flex 위젯 우선: Row, Column, Wrap, Flex로 유연한 레이아웃

ConstrainedBox 활용: 최소/최대 크기 제한으로 극단적 상황 대응

중단점 중앙화: 상수로 정의하여 일관성 유지

성능 고려: 불필요한 리빌드 방지

How#

TIP

1. Flex 위젯으로 유연한 레이아웃

1
// Wrap: 공간이 부족하면 자동 줄바꿈
2
Wrap(
3
  spacing: 8,
4
  runSpacing: 8,
5
  children: [
6
    for (final item in items)
7
      Chip(label: Text(item)),
8
  ],
9
)
10

11
// Flexible: 남은 공간을 비율로 분배
12
Row(
13
  children: [
14
    Flexible(flex: 2, child: LeftPanel()),
15
    Flexible(flex: 3, child: RightPanel()),
16
  ],
17
)

2. 최대/최소 크기 제한

1
// 너무 넓어지지 않도록 제한
2
Center(
3
  child: ConstrainedBox(
4
    constraints: const BoxConstraints(maxWidth: 800),
5
    child: Content(),
6
  ),
7
)
8

9
// FractionallySizedBox: 부모의 비율로 크기 지정
10
FractionallySizedBox(
11
  widthFactor: 0.8, // 부모 너비의 80%
12
  child: Card(),
13
)

3. 중단점 중앙 관리

1
abstract class Breakpoints {
2
  // Material Design 3 기준
3
  static const double compact = 600;
4
  static const double medium = 840;
5
  static const double expanded = 1200;
6

7
  static bool isCompact(BuildContext context) =>
8
    MediaQuery.sizeOf(context).width < compact;
9

10
  static bool isMedium(BuildContext context) {
11
    final width = MediaQuery.sizeOf(context).width;
12
    return width >= compact && width < medium;
13
  }
14

15
  static bool isExpanded(BuildContext context) =>
16
    MediaQuery.sizeOf(context).width >= medium;
17
}
18

19
// 사용
20
if (Breakpoints.isCompact(context)) {
21
  return const MobileLayout();
22
}

4. 반응형 위젯 래퍼 패턴

1
class ResponsiveBuilder extends StatelessWidget {
2
  const ResponsiveBuilder({
3
    super.key,
4
    required this.compact,
5
    this.medium,
6
    this.expanded,
7
  });
8

9
  final Widget compact;
10
  final Widget? medium;
11
  final Widget? expanded;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    final width = MediaQuery.sizeOf(context).width;
16

17
    if (width >= 840 && expanded != null) return expanded!;
18
    if (width >= 600 && medium != null) return medium!;
19
    return compact;
20
  }
21
}
22

23
// 사용
24
ResponsiveBuilder(
25
  compact: const MobileView(),
26
  medium: const TabletView(),
27
  expanded: const DesktopView(),
28
)

Watch out#

WARNING

성능 주의사항

MediaQuery.of() 대신 특정 속성용 메서드 사용

1
// ❌ 모든 MediaQuery 변경에 반응
2
final width = MediaQuery.of(context).size.width;
3

4
// ✅ 크기 변경에만 반응
5
final width = MediaQuery.sizeOf(context).width;

불필요한 리빌드 방지

1
// ❌ 매 빌드마다 새 객체 생성
2
Widget build(BuildContext context) {
3
  return Container(
4
    decoration: BoxDecoration(...), // 매번 새로 생성
5
  );
6
}
7

8
// ✅ const 또는 캐싱 사용
9
static const _decoration = BoxDecoration(...);
10
Widget build(BuildContext context) {
11
  return Container(decoration: _decoration);
12
}

중단점 변경 시 과도한 애니메이션 피하기

1
// 중단점에서 레이아웃이 갑자기 바뀌면 어색함
2
// AnimatedSwitcher로 부드러운 전환 고려
3
AnimatedSwitcher(
4
  duration: const Duration(milliseconds: 300),
5
  child: Breakpoints.isExpanded(context)
6
    ? const ExpandedLayout(key: ValueKey('expanded'))
7
    : const CompactLayout(key: ValueKey('compact')),
8
)

결론: 검증된 패턴을 따라 유지보수가 쉽고 성능 좋은 반응형 UI를 만듭니다.

한계#

이 문서는 반응형 디자인의 기초를 다룹니다.
다음 주제는 별도로 학습해야 합니다.

대형 화면 최적화: 태블릿, 데스크톱 전용 레이아웃 패턴
폴더블 대응: 힌지 영역 처리, 화면 분할
플랫폼별 적응: iOS/Android/Web 각각의 디자인 컨벤션
접근성: 텍스트 크기 조정, 고대비 모드 대응

responsive(반응형): 화면 크기에 따라 콘텐츠가 연속적으로 조정되는 디자인 방식이다. ↩
MediaQuery(미디어쿼리): 화면 크기, 방향, 패딩 등 디바이스 정보를 제공하는 Flutter 위젯이다. ↩
LayoutBuilder(레이아웃빌더): 부모가 허용한 제약 조건을 받아 자식을 빌드하는 위젯이다. ↩ ↩²
adaptive(적응형): 특정 중단점에서 완전히 다른 레이아웃으로 전환하는 디자인 방식이다. ↩
breakpoint(중단점): 레이아웃이 변경되는 화면 너비 기준점이다. ↩
constraints(제약 조건): 부모가 자식에게 전달하는 최소/최대 크기 정보다. ↩
SafeArea(세이프에리어): 노치, 상태 바 등 시스템 UI를 피해 콘텐츠를 배치하는 위젯이다. ↩

Flutter 튜토리얼 34편: 반응형 디자인 기초

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

해결 방법#

챕터 1: 반응형과 적응형 디자인의 차이#

Why#

What#

How#

Watch out#

챕터 2: 3단계 접근법 (Abstract, Measure, Branch)#

Why#

What#

How#

Watch out#

챕터 3: MediaQuery.sizeOf() 활용하기#

Why#

What#

How#

Watch out#

챕터 4: LayoutBuilder 활용하기#

Why#

What#

How#

Watch out#

챕터 5: SafeArea로 안전 영역 확보하기#

Why#

What#

How#

Watch out#

챕터 6: 반응형 디자인 베스트 프랙티스#

Why#

What#

How#

Watch out#

한계#

공유

목차

Flutter 튜토리얼 34편: 반응형 디자인 기초

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

해결 방법#

챕터 1: 반응형과 적응형 디자인의 차이#

Why#

What#

How#

Watch out#

챕터 2: 3단계 접근법 (Abstract, Measure, Branch)#

Why#

What#

How#

Watch out#

챕터 3: MediaQuery.sizeOf() 활용하기#

Why#

What#

How#

Watch out#

챕터 4: LayoutBuilder 활용하기#

Why#

What#

How#

Watch out#

챕터 5: SafeArea로 안전 영역 확보하기#

Why#

What#

How#

Watch out#

챕터 6: 반응형 디자인 베스트 프랙티스#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차