Hello World - 텍스트 가운데 배치

웹에서 그래픽을 다룰 때 가장 기본적인 작업 중 하나는 텍스트를 화면 가운데에 배치하는 것입니다. 간단해 보이는 이 작업도 전통적인 방식으로는 꽤 복잡한 코드가 필요합니다.

왜 이것이 문제일까요?

SVG나 Canvas에서 요소를 가운데 정렬하려면:

  1. 컨테이너의 크기를 알아야 합니다
  2. 요소의 크기를 계산해야 합니다
  3. 중앙 좌표를 수동으로 계산해야 합니다
  4. 크기가 변경될 때마다 재계산해야 합니다

이런 반복적이고 복잡한 작업은 실수하기 쉽고, 코드를 읽기 어렵게 만듭니다.

선언형 vs 명령형 프로그래밍

첫 번째 Flitter 애플리케이션

동일한 결과를 얻기 위해 D3.js와 Flitter가 어떻게 다른지 비교해보세요.

Flitter 코드 (40줄)

// Flitter로 카운터 구현하기
class CounterWidget extends StatefulWidget {
  createState() {
    return new CounterWidgetState();
  }
}

class CounterWidgetState extends State<CounterWidget> {
  count = 0;

  build(context: BuildContext) {
    return Center({
      child: Column({
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(`Count: ${this.count}`, {
            style: new TextStyle({
              fontSize: 48,
              fontWeight: 'bold',
              color: '#E5E7EB'
            })
          }),
          SizedBox({ height: 20 }),
          GestureDetector({
            onClick: () => {
              this.setState(() => {
                this.count++;
              });
            },
            child: Container({
              padding: EdgeInsets.symmetric({ 
                horizontal: 32, 
                vertical: 16 
              }),
              decoration: new BoxDecoration({
                color: '#3B82F6',
                borderRadius: BorderRadius.circular(8)
              }),
              child: Text('Click Me!', {
                style: new TextStyle({
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#FFFFFF'
                })
              })
            })
          })
        ]
      })
    });
  }
}

* 선언적 UI로 레이아웃 자동 처리

실행 결과

* 버튼을 클릭해보세요! 두 코드 모두 동일한 결과를 만들지만, Flitter가 훨씬 간단합니다.

💡 주요 차이점

D3.js
  • SVG 요소를 직접 생성하고 위치 지정
  • 이벤트 핸들러를 수동으로 바인딩
  • 상태 변경 시 DOM을 직접 조작
  • 호버 효과를 별도로 구현
Flitter
  • 선언적 UI로 레이아웃 자동 처리
  • GestureDetector로 이벤트 간단 처리
  • setState로 자동 리렌더링
  • 복잡한 레이아웃도 위젯 조합으로 해결

핵심 개념 이해하기

1. Center 위젯

Flitter의 Center 위젯은 자식 요소를 자동으로 중앙에 배치합니다:

Center({
  child: Text("가운데 정렬됩니다!")
})

2. 자동 크기 조정

Flitter는 부모 컨테이너의 크기가 변경되면 자동으로 레이아웃을 다시 계산합니다. 별도의 리사이즈 이벤트 핸들러를 작성할 필요가 없습니다.

3. 선언적 스타일링

TextStyle을 사용하여 텍스트의 모양을 선언적으로 정의합니다:

Text("스타일이 적용된 텍스트", {
  style: TextStyle({
    fontSize: 24,
    fontWeight: 'bold',
    color: '#3B82F6'
  })
})

실습: 다양한 정렬 방식

Align 위젯 사용하기

Center는 사실 Align 위젯의 특별한 경우입니다. 더 세밀한 제어가 필요하다면:

// 오른쪽 상단에 배치
Align({
  alignment: Alignment.topRight,
  child: Text("오른쪽 상단")
})

// 커스텀 위치 (중앙에서 약간 위로)
Align({
  alignment: new Alignment(0, -0.5),
  child: Text("중앙 위")
})

Container와 함께 사용하기

실제 애플리케이션에서는 보통 Container와 함께 사용합니다:

Container({
  width: 300,
  height: 200,
  color: '#EFF6FF',
  child: Center({
    child: Text("컨테이너 안의 텍스트", {
      style: TextStyle({
        fontSize: 20,
        color: '#1E40AF'
      })
    })
  })
})

이것이 왜 중요한가요?

  1. 생산성: 복잡한 계산 없이 원하는 레이아웃을 바로 구현
  2. 가독성: 코드가 의도를 명확하게 표현
  3. 유지보수: 레이아웃 로직이 캡슐화되어 있어 수정이 쉬움
  4. 확장성: 복잡한 레이아웃도 위젯을 조합하여 쉽게 구현

다음 단계

이제 Flitter의 기본을 이해했으니, 기본 요소들에서 다양한 도형과 레이아웃 위젯을 알아보겠습니다.

요약

  • Flitter는 선언적 프로그래밍으로 복잡한 레이아웃을 간단하게 만듭니다
  • Center 위젯으로 자동 중앙 정렬이 가능합니다
  • 크기 변경에 대한 반응형 처리가 자동으로 이루어집니다
  • D3.js 대비 훨씬 적은 코드로 동일한 결과를 얻을 수 있습니다
설치 가이드 기본 요소들