Flutter GUI 개발 기초 : Flutter GUI 개발 시작하기

Flutter는 Google에서 개발한 오픈소스 UI 소프트웨어 개발 키트입니다. 단일 코드베이스를 사용하여 모바일 (Android, iOS), 웹, 데스크톱 (Windows, macOS, Linux) 애플리케이션을 구축할 수 있게 해줍니다. 이 시리즈에서는 Flutter를 사용한 GUI 개발의 기초부터 실전 애플리케이션 구축까지 단계별로 알아보겠습니다. 제1부에서는 Flutter 개발을 시작하기 위한 기본 개념과 환경 설정에 대해 다룹니다.

Flutter란 무엇이며 왜 사용해야 할까요?

Flutter는 현대적이고 반응성이 뛰어난 UI를 빠르고 쉽게 만들 수 있도록 설계되었습니다. 주요 특징과 장점은 다음과 같습니다:

• 빠른 개발 속도: '핫 리로드(Hot Reload)' 기능을 통해 코드 변경 사항을 거의 즉시 앱에 반영하여 생산성을 크게 향상시킵니다.
• 풍부하고 표현력 있는 UI: 머티리얼 디자인(Material Design) 및 쿠퍼티노(Cupertino) 위젯 세트를 기본으로 제공하여 아름답고 일관된 UI를 쉽게 구축할 수 있습니다.
• 네이티브에 가까운 성능: Dart 언어로 작성된 코드는 ARM 또는 Intel 머신 코드로 직접 컴파일되어 네이티브 앱에 버금가는 성능을 제공합니다.
• 크로스 플랫폼: 하나의 코드로 여러 플랫폼에서 동일한 경험을 제공하는 애플리케이션 개발이 가능합니다.

개발 환경 설정

Flutter 개발을 시작하려면 몇 가지 도구를 설치해야 합니다.

1. Flutter SDK 설치: Flutter 공식 웹사이트의 안내에 따라 사용 중인 운영체제(Windows, macOS, Linux)에 맞는 Flutter SDK를 다운로드하고 설치합니다.
2. IDE 설정: Android Studio 또는 Visual Studio Code (VS Code)를 권장합니다. 각 IDE에 Flutter 및 Dart 플러그인을 설치해야 합니다.
3. 플랫폼별 개발 도구:
   • Android: Android Studio, Android SDK, 에뮬레이터 또는 실제 Android 기기.
   • iOS (macOS 전용): Xcode, CocoaPods, iOS 시뮬레이터 또는 실제 iOS 기기.
4. Flutter Doctor 실행: 터미널 또는 명령 프롬프트에서 flutter doctor 명령을 실행하여 설치 상태를 확인하고 필요한 추가 설정이 있는지 점검합니다.

환경 설정이 완료되면, 첫 번째 Flutter 프로젝트를 생성할 준비가 된 것입니다.

핵심 개념: 위젯 (Widgets)

Flutter에서 UI는 위젯(Widget)이라는 기본 구성 요소로 만들어집니다. 앱의 모든 것, 즉 레이아웃, 텍스트, 버튼, 애니메이션 등은 모두 위젯입니다. 위젯은 화면에 보이는 것을 설명하는 '설계도'와 같습니다.

주요 위젯 유형은 다음과 같습니다:

• StatelessWidget (상태 없는 위젯): 한 번 그려진 후에는 변하지 않는 정적인 UI를 구성할 때 사용됩니다. 예를 들어, 아이콘이나 텍스트 레이블 등이 있습니다.
• StatefulWidget (상태 있는 위젯): 사용자와의 상호작용이나 데이터 변경에 따라 모습이 변할 수 있는 동적인 UI를 구성할 때 사용됩니다. 예를 들어, 체크박스나 슬라이더, 또는 사용자가 입력한 텍스트에 따라 변하는 UI가 있습니다. StatefulWidget은 실제 상태를 관리하는 State 객체와 함께 작동합니다.

모든 위젯은 build 메소드를 가지고 있으며, 이 메소드는 위젯 트리를 반환하여 Flutter가 화면에 UI를 그릴 수 있도록 합니다. BuildContext는 위젯 트리 내에서 현재 위젯의 위치와 관련된 정보를 제공합니다.

첫 번째 Flutter 앱 만들기

이제 간단한 "Hello, Flutter!" 앱을 만들어 보겠습니다. 터미널에서 다음 명령어를 실행하여 새 프로젝트를 생성합니다:

flutter create my_first_app
cd my_first_app

프로젝트가 생성되면 lib/main.dart 파일을 열고 다음 코드로 수정합니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '첫 번째 Flutter 앱',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 데모'),
          backgroundColor: Colors.blue, // AppBar 배경색 변경
        ),
        body: Center(
          child: Text(
            '안녕하세요, Flutter GUI!',
            style: TextStyle(fontSize: 24, color: Colors.deepPurple), // 텍스트 스타일 변경
          ),
        ),
      ),
    );
  }
}

이 코드를 간략히 설명하면:

• main(): 앱의 진입점입니다. runApp() 함수를 호출하여 최상위 위젯(MyApp)을 실행합니다.
• MyApp: StatelessWidget을 상속받는 사용자 정의 위젯입니다.
• MaterialApp: 머티리얼 디자인 앱을 만들기 위한 기본 구조를 제공하는 위젯입니다. title, home 등의 속성을 가집니다.
• Scaffold: 기본적인 머티리얼 디자인 시각적 레이아웃 구조를 구현합니다. appBar (상단 바), body (주요 콘텐츠 영역) 등을 포함할 수 있습니다.
• AppBar: 화면 상단에 표시되는 앱 바입니다.
• Center: 자식 위젯을 중앙에 배치합니다.
• Text: 문자열을 화면에 표시하는 위젯입니다.

앱을 실행하려면 터미널에서 flutter run 명령을 사용하거나 IDE의 실행 버튼을 클릭합니다.

(실제 앱 실행 화면 예시 - 위 코드를 실행하면 이와 유사한 화면이 나타납니다)

기본 레이아웃 위젯

Flutter는 다양한 레이아웃 위젯을 제공하여 복잡한 UI도 쉽게 구성할 수 있도록 합니다. 몇 가지 기본적인 레이아웃 위젯을 소개합니다:

• Container: 사각형 시각적 요소입니다. 패딩, 마진, 테두리, 배경색 등 다양한 스타일을 적용할 수 있습니다. 자식 위젯을 하나 가질 수 있습니다.
• Row: 자식 위젯들을 가로로 배치합니다.
• Column: 자식 위젯들을 세로로 배치합니다.
• Stack: 자식 위젯들을 겹쳐서 배치합니다. 먼저 추가된 위젯이 아래에, 나중에 추가된 위젯이 위에 놓입니다.
• Padding: 자식 위젯 주위에 여백을 추가합니다.
• Expanded / Flexible: Row나 Column 내에서 자식 위젯이 사용 가능한 공간을 어떻게 차지할지 결정합니다.

예를 들어, Row와 Column을 사용하여 아이콘과 텍스트를 함께 배치하는 간단한 예제입니다:

// ... Scaffold의 body 부분 ...
body: Center(
  child: Container(
    padding: EdgeInsets.all(16.0),
    color: Colors.grey[200],
    child: Column(
      mainAxisSize: MainAxisSize.min, // Column의 크기를 자식 크기에 맞춤
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center, // 가로축 중앙 정렬
          children: <Widget>[
            Icon(Icons.star, color: Colors.yellow[700], size: 30),
            SizedBox(width: 8), // 위젯 사이 간격
            Text('별점 5점', style: TextStyle(fontSize: 20)),
          ],
        ),
        SizedBox(height: 16), // 위젯 사이 간격
        Text(
          '이것은 예제 레이아웃입니다.',
          textAlign: TextAlign.center,
        ),
        SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 가로축 균등 분배
          children: <Widget>[
            Icon(Icons.thumb_up, color: Colors.green),
            Icon(Icons.thumb_down, color: Colors.red),
            Icon(Icons.share, color: Colors.blue),
          ],
        )
      ],
    ),
  ),
),
// ...

(위 레이아웃 코드 실행 화면 예시)

결론

이번 Flutter의 기본 개념, 개발 환경 설정 방법, 그리고 첫 번째 앱을 만들고 기본적인 레이아웃 위젯을 사용하는 방법을 알아보았습니다. Flutter의 '모든 것은 위젯이다'라는 철학은 UI 개발을 매우 직관적으로 만들어줍니다.