Flutter 기본 레이아웃 완전 기초 가이드

카테고리: Flutter 입문 · 작성일: 2026-04-09

Flutter를 배우기 시작하면 가장 먼저 부딪히는 벽이 바로 “화면 배치”입니다. 글자 하나는 넣을 수 있는데,
버튼을 아래로 내리고 싶고, 박스를 옆으로 붙이고 싶고, 가운데 정렬하고 싶은 순간부터 갑자기 복잡하게 느껴지기 시작합니다.

하지만 Flutter의 레이아웃은 생각보다 규칙이 명확합니다. 핵심은 복잡한 디자인을 한 번에 하려 하지 말고, “위젯을 쌓고, 나누고,
정렬하는 원리”를 먼저 이해하는 것입니다.

이 글에서는 Flutter 초보자도 이해할 수 있도록 Column, Row, Container, Center, Padding, Expanded, ListView 같은 가장 중요한
기본 레이아웃 개념을 아주 쉽게 정리해 보겠습니다.

왜 레이아웃이 중요한가요?

앱 개발에서 레이아웃은 단순히 “예쁘게 보이기 위한 것”이 아닙니다. 사용자가 버튼을 누르고, 정보를 읽고, 화면을 이해하는 모든 과정이 레이아웃에 달려 있습니다.

레이아웃을 이해하면 이런 것이 가능해집니다.

• 텍스트와 버튼을 원하는 위치에 배치하기
• 박스 카드 형태 UI 만들기
• 앱처럼 보이는 화면 구성하기
• 실전 앱 디자인 구조 따라 만들기
• 반응형 구조의 기초 익히기

Flutter 화면은 어떻게 만들어지나요?

Flutter에서는 화면의 거의 모든 것이 위젯(widget)입니다.

글자도 위젯, 버튼도 위젯, 박스도 위젯, 여백도 위젯, 정렬도 위젯입니다.

즉, Flutter 화면은 “위젯 안에 위젯을 넣고 또 넣는 방식”으로 만들어집니다.

예를 들어

Center(
  child: Text('안녕하세요'),
)

이 코드는 “글자를 가운데에 놓는다”는 뜻입니다.

Flutter는 이런 식으로 작은 블록을 조립해서 전체 화면을 만드는 구조입니다.

1. Center: 가운데 배치

가장 먼저 이해하기 쉬운 레이아웃 위젯은 Center입니다.

이름 그대로, 내부에 넣은 위젯을 화면의 가운데에 배치해 줍니다.

예시

Center(
  child: Text('가운데 글자'),
)

이 코드를 사용하면 텍스트가 화면 중앙에 표시됩니다.

Flutter 입문 단계에서는 가장 자주 쓰는 정렬 위젯 중 하나입니다.

2. Column: 세로로 쌓기

Column은 위젯들을 위에서 아래로 세로 배치하는 데 사용합니다.

예시

Column(
  children: [
    Text('첫 번째'),
    Text('두 번째'),
    Text('세 번째'),
  ],
)

이 코드는 텍스트 3개를 세로로 쌓아 보여줍니다.

Column이 자주 쓰이는 상황

• 제목 + 설명 + 버튼
• 프로필 화면
• 로그인 화면
• 설정 화면
• 카드형 UI

3. Row: 가로로 배치하기

Row는 Column과 반대로, 위젯들을 왼쪽에서 오른쪽으로 가로 배치합니다.

예시

Row(
  children: [
    Icon(Icons.star),
    Text('즐겨찾기'),
  ],
)

이렇게 하면 아이콘과 글자가 옆으로 나란히 배치됩니다.

Row가 자주 쓰이는 예

• 아이콘 + 텍스트
• 버튼 2~3개 나란히 배치
• 프로필 이미지 + 이름
• 설정 메뉴의 좌우 배치

4. Container: 박스 만들기

Container는 Flutter에서 매우 자주 쓰이는 “박스 역할” 위젯입니다.

배경색, 크기, 여백, 테두리, 모서리 둥글기 등을 줄 수 있어 UI를 앱답게 만드는 핵심 도구입니다.

예시

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text('박스 안 글자'),
  ),
)

이 코드는 파란 박스 안에 글자를 가운데 배치합니다.

Container로 자주 하는 것

• 카드 박스 만들기
• 버튼처럼 보이는 영역 만들기
• 배경 영역 나누기
• 화면 섹션 구분하기

5. Padding: 여백 주기

앱 화면이 촘촘하고 답답해 보이는 가장 큰 이유 중 하나는 여백 부족입니다.

Flutter에서는 Padding으로 위젯 주변에 공간을 줄 수 있습니다.

예시

Padding(
  padding: EdgeInsets.all(16),
  child: Text('여백이 있는 글자'),
)

이 코드는 텍스트 주변에 16만큼의 여백을 줍니다.

자주 쓰는 형태

• EdgeInsets.all(16) → 사방 여백
• EdgeInsets.symmetric(horizontal: 20) → 좌우 여백
• EdgeInsets.only(top: 10) → 특정 방향만 여백

6. 정렬 개념 이해하기

Flutter에서 레이아웃이 어렵게 느껴지는 가장 큰 이유는 정렬 속성 때문입니다.

특히 Column과 Row에서는 두 가지 정렬 개념을 자주 보게 됩니다.

• mainAxisAlignment
• crossAxisAlignment

쉽게 이해하면

mainAxis는 “주 방향”, crossAxis는 “반대 방향”입니다.

Column에서는

• mainAxis = 세로 방향
• crossAxis = 가로 방향

Row에서는

• mainAxis = 가로 방향
• crossAxis = 세로 방향

예시

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('A'),
    Text('B'),
  ],
)

이 코드는 세로 방향도 가운데, 가로 방향도 가운데 정렬하는 예시입니다.

7. Expanded와 Flexible

Row나 Column 안에서 공간을 자동으로 나눠 쓰고 싶을 때 사용하는 것이 Expanded입니다.

예시

Row(
  children: [
    Expanded(
      child: Container(height: 100, color: Colors.red),
    ),
    Expanded(
      child: Container(height: 100, color: Colors.blue),
    ),
  ],
)

이 코드는 빨간 박스와 파란 박스가 화면 너비를 반씩 나눠 가집니다.

언제 유용한가요?

• 버튼 두 개를 동일 크기로 만들 때
• 카드를 균등하게 나눌 때
• 가변 크기 레이아웃 만들 때

8. Stack: 겹쳐 놓기

위젯을 위아래로 쌓는 것이 아니라 겹쳐서 배치하고 싶을 때는 Stack을 사용합니다.

예시

Stack(
  children: [
    Container(width: 200, height: 200),
    Text('위에 올린 글자'),
  ],
)

이 구조를 사용하면 배경 이미지 위에 텍스트를 올리거나, 프로필 사진 위에 작은 아이콘을 얹는 식의 UI를 만들 수 있습니다.

활용 예시

• 배경 이미지 + 텍스트
• 알림 뱃지 표시
• 프로필 위 상태 아이콘
• 카드 위 버튼 배치

9. 스크롤 화면 만들기

Flutter에서 내용을 많이 넣다 보면 화면이 아래로 길어져서 스크롤이 필요해지는 경우가 많습니다.

이때 자주 쓰는 것이 SingleChildScrollView입니다.

예시

SingleChildScrollView(
  child: Column(
    children: [
      Text('내용 1'),
      Text('내용 2'),
      Text('내용 3'),
    ],
  ),
)

이렇게 하면 내용이 길어져도 아래로 스크롤해서 볼 수 있습니다.

10. ListView: 목록 화면 만들기

여러 항목을 세로 목록으로 보여줄 때는 ListView가 매우 유용합니다.

예시

ListView(
  children: [
    ListTile(title: Text('항목 1')),
    ListTile(title: Text('항목 2')),
    ListTile(title: Text('항목 3')),
  ],
)

이 코드는 항목들이 세로로 나열된 목록 화면을 만듭니다.

ListView가 자주 쓰이는 앱 예시

• 메모 목록
• 할 일 목록
• 채팅방 목록
• 설정 메뉴
• 뉴스/게시글 목록

실제 앱 구조에서는 Column보다 ListView를 더 자주 쓰게 되는 경우도 많습니다.

11. 초보자가 자주 헷갈리는 부분

Flutter 레이아웃에서 초보자가 가장 자주 막히는 부분은 아래와 같습니다.

자주 헷갈리는 포인트

• Column과 Row 차이
• Center와 Align 차이
• Padding과 margin 개념 혼동
• 스크롤 안 넣어서 화면 잘림
• Row 안에서 글자가 넘쳐서 오류 발생
• Container 크기와 부모 위젯 관계 이해 부족

12. 꼭 해봐야 할 연습

레이아웃은 눈으로 읽는 것보다 직접 손으로 배치해 보는 것이 훨씬 중요합니다.

처음 해보면 좋은 연습

1. 가운데에 제목과 버튼 배치하기
2. 프로필 카드 화면 만들기
3. 아이콘 + 글자 가로 배치하기
4. 버튼 2개를 동일 크기로 나란히 배치하기
5. 긴 설명 화면을 스크롤 가능하게 만들기
6. 간단한 설정 목록 화면 만들기

이 정도만 해도 Flutter 기본 레이아웃 감각이 꽤 빨리 생깁니다.

정리: 레이아웃은 조립입니다

Flutter 레이아웃은 처음엔 복잡해 보여도, 사실은 몇 가지 핵심 위젯만 익히면 대부분의 기본 화면을 만들 수 있습니다.

1. Center → 가운데 배치
2. Column → 세로 배치
3. Row → 가로 배치
4. Container → 박스 만들기
5. Padding → 여백 주기
6. Expanded → 공간 나누기
7. ListView → 목록 만들기