플러터 강좌, 2.4 첫 번째 프로젝트 만들기

이번 강좌에서는 Flutter를 사용하여 첫 번째 모바일 애플리케이션 프로젝트를 만드는 방법에 대해 알아보겠습니다. Flutter는 구글에서 개발한 UI 툴킷으로, 단일 코드 베이스를 사용하여 iOS와 Android 플랫폼 모두에서 네이티브 애플리케이션을 개발할 수 있는 기술입니다. 다양한 위젯과 훌륭한 성능 덕분에 오늘날 많은 개발자들이 이 프레임워크를 선택하고 있습니다.

1. 환경 설정

플러터를 사용하기 위해서는 먼저 개발 환경을 설정해야 합니다. 플러터 SDK를 다운로드하고 IDE를 설정하는 과정이 필요합니다.

1.1 Flutter SDK 다운로드

Flutter 공식 웹사이트 (flutter.dev)를 방문하여 SDK를 다운로드합니다.
다운로드한 zip 파일을 압축 해제하고 원하는 위치에 저장합니다.
시스템 환경 변수에 Flutter의 bin 디렉토리를 추가하여 명령어를 사용할 수 있게 설정합니다.

1.2 IDE 설치

Flutter는 다양한 IDE를 지원합니다. 가장 많이 사용되는 IDE 중 하나인 Visual Studio Code와 Android Studio를 추천합니다.

Visual Studio Code: Flutter 및 Dart 확장을 설치한 후, 프로젝트를 쉽게 관리할 수 있는 경량 IDE입니다.
Android Studio: 필요한 모든 툴과 함께 제공되며, Android 개발에 최적화되어 있습니다.

2. 첫 번째 프로젝트 생성

이제 Flutter 프로젝트를 생성하겠습니다. 이를 통해 Flutter의 기본 구조와 내용을 이해할 수 있을 것입니다.

2.1 새로운 프로젝트 시작하기

flutter create my_first_app

이 명령어를 입력하면 “my_first_app”이라는 이름의 새 Flutter 프로젝트가 생성됩니다. 이 폴더에는 기본적인 Flutter 앱의 구조가 포함되어 있습니다.

2.2 프로젝트 파일 구조 이해하기

프로젝트가 생성되면, 여러 개의 파일과 폴더가 생성됩니다. 그 중 주요 내용을 살펴보겠습니다.

lib/main.dart: 이 파일은 Flutter 애플리케이션의 진입점입니다. 앱의 구조와 UI를 정의하는 주요 부분이 포함됩니다.
pubspec.yaml: 이 파일은 프로젝트의 메타데이터 및 의존성을 관리합니다. 라이브러리 추가는 여기서 이루어집니다.
ios 및 android: 각각 iOS와 Android 플랫폼에서의 빌드 설정 및 코드가 포함됩니다.

2.3 프로젝트 실행하기

터미널에서 다음 명령어를 입력하여 프로젝트를 실행합니다:

cd my_first_app
flutter run

이 명령어를 통해 기본 앱이 실행됩니다. 기본적으로 카운터가 있는 앱이 표시되며, 버튼 클릭 시 카운트가 증가합니다.

3. UI 구성하기

이제 애플리케이션의 UI를 수정하여 조금 더 재미있는 앱으로 만들어 보겠습니다.

3.1 StatelessWidget vs StatefulWidget

Flutter에서 UI 구성 요소는 크게 두 가지 종류로 나뉩니다. StatelessWidget과 StatefulWidget입니다. 각각의 차이점을 이해하는 것이 중요합니다.

StatelessWidget: 상태를 가지지 않는 위젯입니다. 변화가 없는 정적인 UI를 위한 위젯입니다. 예를 들어, 텍스트나 아이콘 등이 있습니다.
StatefulWidget: 상태를 가지며, 상태가 변경될 때 UI를 업데이트할 수 있는 위젯입니다. 예를 들어, 버튼 클릭에 따라 반응하는 UI입니다.

3.2 앱 UI 수정하기

이제 main.dart 파일을 열고, 기본 UI를 수정할 것입니다. 다음 코드로 변경해 보세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '첫 번째 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("첫 번째 프로젝트"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '버튼을 클릭한 횟수:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위의 코드를 통해 앱의 메인 화면에 텍스트와 카운터를 표시하는 간단한 UI를 만들 수 있습니다.

4. 애니메이션 추가하기

Flutter의 강력한 기능 중 하나는 애니메이션을 손쉽게 다룰 수 있다는 것입니다. 애플리케이션에 애니메이션을 추가하여 더 매력적인 UI를 만들어 보겠습니다.

4.1 Fade Transition 애니메이션 추가하기

드를 따라 눌렀을 때 텍스트가 사라졌다가 나타나는 페이드 애니메이션을 추가해 보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '첫 번째 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State with SingleTickerProviderStateMixin {
  int _counter = 0;
  bool _visible = true;

  void _incrementCounter() {
    setState(() {
      _counter++;
      _visible = !_visible; // fade in/out effect
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("첫 번째 프로젝트"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              opacity: _visible ? 1.0 : 0.0,
              duration: Duration(milliseconds: 500),
              child: Text(
                '버튼을 클릭한 횟수: $_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

이 코드를 통해 버튼 클릭 시 카운터와 함께 텍스트가 서서히 사라졌다가 나타나는 멋진 애니메이션을 추가할 수 있습니다.

5. 최종 테스트 및 배포

마지막으로 프로젝트의 최종 상태를 확인하고, 배포 준비를 할 시간입니다. Flutter는 iOS와 Android에 모두 배포할 수 있습니다. 다음 단계로 진행해 보세요.

5.1 Android 에뮬레이터에서 테스트

Android Studio의 에뮬레이터를 사용하여 앱을 테스트할 수 있습니다. 에뮬레이터를 실행하고 앱이 정상적으로 작동하는지 확인합니다.

5.2 iOS 디바이스에서 테스트

Mac을 사용하고 있다면, Xcode를 통해 iOS 디바이스에서 앱을 테스트할 수 있습니다. 실행 전에 iOS 디바이스의 신뢰성을 확인해야 합니다.

5.3 앱 배포하기

앱이 완성되면, 다음 단계로 배포할 준비를 해야 합니다. Flutter는 flutter build 명령어를 통해 앱을 빌드하고, 각 플랫폼에 맞는 파일을 생성할 수 있습니다.

flutter build apk          # Android용 APK 파일 생성
flutter build ios          # iOS용 빌드

이 과정을 통해 최종 APK나 iOS 파일을 생성할 수 있으며, Google Play Store와 Apple App Store에 배포할 수 있습니다.

결론

이번 강좌를 통해 Flutter를 사용하여 첫 번째 프로젝트를 생성하는 방법을 배우셨습니다. 기본적인 UI 구성 요소와 애니메이션을 추가하는 등의 기초적인 요소를 살펴보았습니다. 향후 추가적인 기능이나 디자인을 추가하여 더 훌륭한 애플리케이션을 만들 수 있도록 도전해 보세요.

플러터는 강력한 툴킷으로, 더 많은 기능과 위젯을 이용하여 다양한 애플리케이션을 개발할 수 있습니다. 다음 강좌에서는 더욱 복잡한 기능 구현이나 API 연동 등 심화적인 내용들을 다룰 예정이니 기대해 주세요.

감사합니다! 질문이나 논의할 내용이 있다면 댓글로 남겨 주세요.