비개발자도 쉽게 이해하는 Flutter 여백과 정렬: Padding, Margin, Alignment 완벽 정리

 
안녕하세요!  스테디빌더입니다! 😁

많은 독자분들의 의견에 부응하기 위하여,
이 글을 필두로 "비개발자도 쉽게 이해하는 Flutter" 시리즈를 써나갈까 합니다. 조금이나마 도움이 되었으면 좋겠습니다. 👍

함께 공부해 봅시다! 그래서 돈 많이 법시다 :)
 
오늘은 Padding, Margin, Alignment를 일상적인 비유와 함께 쉽게 풀어 설명해드리겠습니다.

 

1. Padding (안쪽 여백)

책을 읽을 때, 글자가 페이지 끝까지 꽉 차 있으면 뭔가 읽기 불편하죠?
글자와 페이지 경계 사이에 여백이 있으면 더 편안한 느낌이죠.
Padding은 글자(내용)와 페이지(경계) 사이의 안쪽 여백을 말합니다.
 
예제:

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('안녕하세요, Flutter!'),
)

 
동작:

• 텍스트와 경계 사이에 16픽셀만큼의 여백이 생깁니다.
• 이 여백은 텍스트를 감싸는 상자 안쪽에만 적용됩니다.

 
여기서 궁금한 점 !
EdgeInsets.all(16.0) 은 무엇일까요? 왜 이렇게 쓸까요?
 
EdgeInsets는 Flutter에서 여백을 설정할 때 사용하는 클래스입니다. 클래스는 설계도라고 보통 표현하는데 간단히 어떤 속성(색깔 등)과 동작기능(달린다)이 설정되어 있습니다.
여기에선 .all 이란 동작기능(전방위 여백을 준다)을 하는 것이죠.
클래스에 대해서는 나중에 한 번 더 풀어서 얘기해봅시다 😀
 
.all() 말고도 다른 기능도 있겠죠? 맞습니다.
.only() 는 특정 방향으로 여백을 줄 수 있어요. 때에 따라 잘 쓰면 편리하겠죠?
 
픽셀은 화면을 구성하는 가장 작은 단위예요. 해상도에서 많이 보셨죠? 1920 x 1080 이런거요. 



 

2. Margin (바깥 여백)

식탁에 접시가 여러 개 놓여있다고 상상해보세요.
접시들이 서로 너무 가까이 붙어 있으면 보기에도 불편하고, 음식을 먹기도 불편하겠죠?

Margin은 접시들(위젯) 사이의 바깥 여백을 설정해 주는 역할을 합니다.
 
예제:

Container(
  margin: EdgeInsets.all(16.0),
  color: Colors.blue,
  child: Text('안녕하세요, Flutter!'),
)

동작:

• 파란색 상자(컨테이너) 바깥쪽에 16픽셀만큼의 공간이 생깁니다.
• 이 여백은 상자와 다른 상자 또는 화면 경계 사이에 적용됩니다.

Padding vs Margin 비교

Padding / Margin

위치	내용과 경계 사이	위젯과 다른 위젯 사이
비유	책의 글자와 페이지 끝 사이 여백	접시들 사이의 공간
사용 예	글씨를 상자 안에서 띄울 때	상자끼리 서로 간격을 둘 때

3. Alignment (정렬)

책상에 물건을 놓을 때, 물건을 책상 중앙에 놓을 수도 있고, 모서리에 놓을 수도 있죠.

Alignment는 위젯 안에 있는 내용을 어디에 놓을지 정렬 위치를 정하는 역할을 합니다.
 
예제 1: 중앙 정렬

Center(
  child: Text('이 텍스트는 중앙에 위치합니다.'),
)

• 동작: 텍스트가 항상 중앙에 표시됩니다.
• 책상 한가운데에 물건을 올려놓는 느낌입니다.

예제 2: 특정 위치 정렬

Align(
  alignment: Alignment.topRight, // 오른쪽 위로 정렬
  child: Text('오른쪽 위에 위치합니다.'),
)

• 동작: 텍스트가 오른쪽 위에 위치합니다.
• 책상 오른쪽 끝 모서리에 물건을 올려놓는 느낌입니다.

4. 복합 예제

파란색 상자와 초록색 상자가 있는데, 상자 안쪽 여백, 바깥 여백, 그리고 정렬을 해야한다면 !

코드

Container(
  color: Colors.grey[300], // 화면 배경색
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center, // 세로로 중앙 정렬
    children: [
      Container(
        color: Colors.blue, // 파란 상자
        margin: EdgeInsets.only(bottom: 20.0), // 바깥쪽 아래 여백 20
        padding: EdgeInsets.all(10.0), // 안쪽 여백 10
        child: Text(
          '파란 상자',
          style: TextStyle(color: Colors.white),
        ),
      ),
      Align(
        alignment: Alignment.topRight, // 초록 상자를 오른쪽 위로 정렬
        child: Container(
          color: Colors.green, // 초록 상자
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), // 위아래 10, 좌우 20
          child: Text(
            '초록 상자',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ],
  ),
)

결과 설명

1. 파란 상자:
   • 안쪽 여백(Padding): 글씨와 상자 테두리 사이에 10픽셀 간격이 있습니다.
   • 바깥 여백(Margin): 초록 상자와의 간격이 아래쪽으로 20픽셀 생깁니다.
2. 초록 상자:
   • 정렬(Alignment): 화면 오른쪽 위로 정렬되었습니다.
   • 안쪽 여백(Padding): 글씨와 상자 테두리 사이에 위아래로 10픽셀, 좌우로 20픽셀 간격이 있습니다.

5. 한눈에 정리

구분 / 속성 / 역할

Padding	위젯 내용과 테두리(경계) 사이 간격 설정	책의 글자와 페이지 끝 사이 여백
Margin	위젯과 다른 위젯(혹은 화면) 사이 간격 설정	접시들 사이의 공간
Alignment	위젯 안에서 내용의 위치를 정렬	책상 위에 물건을 중앙, 모서리 등에 배치하는 것

6. 한 줄 요약

• Padding: 글자와 페이지 끝 사이 간격 !
• Margin: 접시들 사이 간격 !
• Alignment: 정렬 !

도움이 되셨나요? ㅎㅎ
고생하셨습니다. 끝 !