[플러터 / Flutter] Row 와 Column 으로 구조 잡기

Row와 Column으로 구조 잡기: 플러터 레이아웃의 핵심

최근 바이브 코딩을 통해 다양한 화면을 구성해 보면서, 위젯들을 내가 원하는 위치에 딱 맞게 배치하는 것이 얼마나 중요한지 다시금 깨닫고 있습니다. 낱개의 위젯이 아무리 예뻐도 배치가 엉망이면 앱의 완성도가 떨어지기 때문이죠. 오늘은 플러터 레이아웃의 기둥과 같은 존재인 Row(가로)와 Column(세로) 위젯을 상세히 정복해 보겠습니다.

---

1. 주축(Main Axis)과 교차축(Cross Axis)

Row와 Column을 배울 때 가장 먼저, 그리고 가장 완벽하게 이해해야 하는 개념이 바로 축(Axis)입니다. 이 개념만 잡으면 레이아웃의 90%는 끝난 셈입니다.

↔️ Row (가로 배치)

위젯들을 왼쪽에서 오른쪽으로 나열합니다.

• Main Axis: 가로 방향
• Cross Axis: 세로 방향

↕️ Column (세로 배치)

위젯들을 위에서 아래로 나열합니다.

• Main Axis: 세로 방향
• Cross Axis: 가로 방향

💡 팁: 'Main'은 위젯이 나열되는 진행 방향이라고 생각하면 기억하기 쉽습니다!

2. 주요 정렬 속성 (Alignment)

축의 개념을 잡았다면, 이제 그 축 위에서 위젯들을 어떻게 정렬할지 결정해야 합니다.

① MainAxisAlignment (주축 정렬)

진행 방향을 기준으로 어떻게 배치할지 결정합니다.

• start: 시작점에 옹기종기 모입니다. (기본값)
• center: 정중앙에 모입니다.
• end: 끝점으로 밀착합니다.
• spaceBetween: 자식들 사이에 동일한 간격을 둡니다. (양 끝 위젯은 벽에 붙음)
• spaceEvenly: 자식 사이와 양 끝 여백까지 모두 동일하게 맞춥니다.
• spaceAround: 자식들 주변에 동일한 간격을 둡니다. (양 끝 여백이 자식 사이 간격의 절반)

② CrossAxisAlignment (교차축 정렬)

진행 방향의 반대 방향(줄 높이 혹은 줄 너비) 내에서의 배치를 결정합니다.

• center: 교차축 기준 중앙 정렬 (기본값)
• start/end: 교차축의 시작/끝 정렬
• stretch: 매우 중요! 교차축 방향으로 위젯을 꽉 채웁니다. 버튼을 화면 너비에 맞게 꽉 채울 때 자주 씁니다.

3. MainAxisSize: 크기 결정하기

Row나 Column이 화면에서 얼마나 많은 공간을 차지할지 결정하는 속성입니다.

• MainAxisSize.max: 부모가 허용하는 최대 길이를 차지합니다. (기본값이며, 화면 전체를 쓰려고 함)
• MainAxisSize.min: 포함된 자식들의 크기 합만큼만 딱 차지합니다. 다이얼로그나 작은 컴포넌트를 만들 때 유용합니다.

4. 실전 코드로 익히기

바이브코딩 실습에서 자주 사용되는 중첩 레이아웃 구조입니다. Column 안에 Row가 들어가는 형태를 유심히 보세요.

Column(
  // 1. 세로(주축) 기준으로 가운데 정렬
  mainAxisAlignment: MainAxisAlignment.center,
  
  // 2. 가로(교차축) 기준으로 자식들을 꽉 채웁니다.
  // 버튼 등을 만들 때 유용한 속성입니다.
  crossAxisAlignment: CrossAxisAlignment.stretch,
  
  children: [
    Container(height: 50, color: Colors.red),
    
    // 위젯 사이 간격은 SizedBox를 쓰는 것이 성능과 가독성 면에서 관례입니다.
    const SizedBox(height: 10),
    
    Container(height: 50, color: Colors.green),
    
    const SizedBox(height: 10),
    
    // Column 내부에 Row를 넣어 가로 배치를 구현합니다. (중첩 레이아웃)
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        const Icon(Icons.star, color: Colors.orange),
        const Icon(Icons.star, color: Colors.orange),
        const Icon(Icons.star, color: Colors.orange),
      ],
    ),
  ],
)
        

💡 퀴즈 (Check-point)

Q. Column 위젯 안에서 자식들을 화면 가로 방향으로 꽉 채우고 싶을 때 설정해야 하는 속성은 무엇일까요?

(정답: CrossAxisAlignment.stretch입니다! Column의 진행 방향은 세로이므로, 가로 방향은 '교차축(Cross)'에 해당하기 때문이죠.)