Scaffold: 개념, 구조 및 Flutter 위젯

Flutter에서 Scaffold란

Scaffold는 Material Design 라이브러리의 레이아웃 위젯으로, 화면의 기본적인 시각적 구조를 형성합니다. 표준 Material 애플리케이션 패턴(상단 바, 화면 본문, 사이드 메뉴 및 플로팅 버튼)을 구현합니다. 단순히 크기와 스타일을 설정하는 Container와 달리 Scaffold는 전체 화면을 통합 시스템으로 관리합니다.

Material Design으로 구축된 모든 Flutter 애플리케이션은 MaterialApp으로 시작하며, 각 화면은 Scaffold로 래핑됩니다. Scaffold가 iPhone X 이상의 SafeArea를 고려하여 모든 기기에서 AppBar의 올바른 표시를 보장합니다. 또한 z 순서를 담당합니다. Drawer는 body 위에 표시되고 SnackBar는 전체 인터페이스 위에 표시되지만 대화 상자 창 아래에 표시됩니다.

공식 Flutter API 참조(2026)에 따르면 Scaffold는 SnackBar, BottomSheet 및 PersistentBottomSheet와 같은 위젯의 올바른 작동을 위한 필수 요구 사항입니다. Scaffold가 없으면 이러한 구성 요소는 InheritedWidget Scaffold.of에 의존하여 Scaffold 컨텍스트에 액세스하므로 예외를 throw합니다. 따라서 Scaffold 대신 Container에 직접 콘텐츠를 배치하는 것은 초보 개발자의 일반적인 실수이며 Material 기능 손실로 이어집니다.

위젯 계층 구조에서의 Scaffold

일반적인 Flutter 애플리케이션에서 Scaffold는 MaterialApp 내에 위치하며, 일반적으로 크로스 플랫폼 개발에서 WidgetsApp 또는 CupertinoApp 아래에 있습니다. MaterialApp은 Navigator와 테마를 만들고 Scaffold는 현재 화면의 구조를 정의합니다. 각 화면은 고유한 AppBar, Drawer 및 BottomNavigationBar를 갖춘 자체 Scaffold를 가질 수 있어 특정 페이지에 맞게 인터페이스를 유연하게 사용자 지정할 수 있습니다.

심층 사용자 지정을 위해 Scaffold를 NestedScrollView와 결합할 수 있습니다. 이를 통해 시차 효과가 있는 접히는 AppBar와 같은 복잡한 스크롤 효과를 구현할 수 있습니다. 그러나 대부분의 경우 표준 Scaffold와 그 속성만으로도 프로덕션 준비 화면을 구축하기에 충분합니다.

Scaffold 구조: 프레임워크의 주요 부분

Scaffold는 여러 필수 및 선택적 영역으로 구성되며, 각 영역은 인터페이스의 특정 부분을 담당합니다. 각 부분을 개별적으로 살펴보고 서로 어떻게 상호 작용하는지 이해해 보겠습니다.

AppBar — 상단 바

AppBar는 제목, 탐색 버튼 및 작업을 표시하는 화면 상단의 바입니다. 자동으로 올바른 높이 56dp를 얻고 노치가 있는 기기의 SafeArea를 고려합니다. bottom 속성을 사용하여 탭 전환을 위한 TabBar를 AppBar에 포함할 수 있습니다.

Drawer — 사이드 메뉴

Drawer는 왼쪽에서 슬라이드 아웃되는 패널로, 애플리케이션 섹션 간의 탐색을 제공합니다. drawer 속성이 설정된 경우 Scaffold는 AppBar에 자동으로 햄버거 아이콘을 추가합니다. Drawer에는 DrawerHeader, 메뉴 항목이 있는 ListView 및 사용자 정보가 포함될 수 있습니다.

BottomNavigationBar — 하단 탐색

BottomNavigationBar는 주요 섹션 간 전환을 위한 화면 하단의 패널입니다. 레이블이 있는 2~5개의 아이콘을 포함하며 NavigationBar를 통한 활성 표시로 Material 3를 지원합니다. Scaffold는 이를 화면 하단에 배치하고 콘텐츠가 겹치지 않도록 자동으로 body를 위로 이동시킵니다.

FloatingActionButton — 플로팅 액션 버튼

FloatingActionButton은 화면 오른쪽 하단 모서리에 배치된 원형 버튼입니다. 새 항목 추가 또는 메시지 보내기와 같은 화면의 주요 작업에 사용됩니다. Scaffold는 extended 속성을 통해 확장 애니메이션이 있는 여러 FAB를 지원합니다.

Body — 주요 콘텐츠

Body는 주요 콘텐츠가 배치되는 화면의 중앙 영역입니다. body로 Column, ListView, GridView, Stack 또는 사용자 정의 구성과 같은 모든 위젯을 사용할 수 있습니다. Scaffold는 AppBar, BottomNavigationBar 및 SafeArea를 고려하여 body 높이를 자동으로 계산하므로 수동 크기 조정이 필요하지 않습니다.

Scaffold의 주요 속성

Scaffold는 화면의 모양과 동작을 사용자 지정하기 위한 30개 이상의 속성을 제공합니다. 필수 속성(body)과 여백, 배경 및 키보드 상태를 제어하는 선택적 속성이 모두 포함됩니다. 각 속성을 이해하면 디자인 요구 사항에 따라 인터페이스를 정확하게 구성하는 데 도움이 됩니다.

resizeToAvoidBottomInset 속성은 양식 작업 시 특히 중요합니다. true(기본값)로 설정하면 키보드가 나타날 때 Scaffold가 자동으로 body를 축소하여 입력 필드를 계속 볼 수 있게 합니다. 이렇게 하면 사용자 지정 키보드 리스너를 작성할 필요가 없습니다. SingleChildScrollView를 사용하는 사용자 지정 시나리오의 경우 속성을 비활성화할 수 있습니다.

애플리케이션에서 Scaffold 사용 예제

전체 Material 구성 요소 세트를 갖춘 Scaffold의 실제 예제를 살펴보겠습니다. 코드는 AppBar, Drawer, BottomNavigationBar, FloatingActionButton 및 SnackBar가 있는 화면을 만듭니다. Flutter의 일반적인 모바일 애플리케이션 구조입니다.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('내 앱'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('메뉴')),
            ListTile(title: const Text('설정'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('작업 완료')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

이 예제는 더 이상 사용되지 않는 BottomNavigationBar 대신 Material 3의 NavigationBar를 사용합니다. Scaffold는 모든 부분을 자동으로 연결합니다. Drawer를 열면 SnackBar가 숨겨지고, 탭을 전환하면 body가 업데이트되며, FloatingActionButton은 그 자리에 유지됩니다. ScaffoldMessenger는 계층 구조에 여러 Scaffold가 있어도 SnackBar 표시를 보장합니다.

Scaffold와 Material 3: 구성 기능

Material 3(M3)는 Google이 2023년에 발표한 Material Design의 진화입니다. M3의 Scaffold는 몇 가지 변경 사항을 받았습니다. BottomNavigationBar 대신 새로운 NavigationBar 위젯, ColorScheme.fromSeed를 통한 동적 색상 지원, 여백 및 구성 요소 높이에 대한 업데이트된 권장 사항입니다. M3로 전환하기 위해 Scaffold를 교체할 필요는 없습니다. 애플리케이션 테마만 업데이트하면 됩니다.

프로젝트에서 Material 3를 활성화하려면 ThemeData에서 useMaterial3: true를 설정해야 합니다. Scaffold는 시각적 스타일을 자동으로 조정합니다. 여백이 더 커지고(16dp에서 24dp로), 색상이 시드 색상에서 다시 계산되며, FloatingActionButton의 크기가 더 커지고 모서리가 둥글게 됩니다. 동시에 기존의 모든 Scaffold 속성은 계속 작동합니다.

Material Design 3 사양(2026)에 따르면 BottomNavigationBar 대신 3~5개 항목이 있는 NavigationBar를 사용하는 것이 좋습니다. Scaffold는 두 옵션을 모두 지원하지만 NavigationBar는 Pixel 기기에서 적응성과 Material You에 대한 더 나은 지원을 제공합니다.

Material 3용 Scaffold 구성

M3와 함께 Scaffold를 올바르게 작동시키려면 테마를 업데이트하고 BottomNavigationBar를 NavigationBar로 바꾸면 됩니다. 색상은 ColorScheme.fromSeed를 통해 자동으로 계산되고 Scaffold는 여백을 새 표준에 맞게 조정합니다. 필요한 경우 backgroundColor를 직접 재정의할 수 있습니다.