3강: Hello, Flutter! 첫 번째 앱 만들기

Visual Studio Code나 Android Studio를 실행하고, hello_flutter 폴더를 열어.
이 단계에서 필요한 플러그인들이 제대로 설치되었는지 확인하라는 메시지가 뜰 수 있어. ‘Get dependencies’ 버튼을 눌러 필요한 라이브러리들을 다운로드해줘.

플러터 프로젝트 구조 이해하기

프로젝트를 생성했으면, 폴더 구조를 한번 살펴보자. 주요 파일들은 다음과 같아:

lib/main.dart: 이 파일이 앱의 진입점이야. 모든 Flutter 앱은 main.dart 파일에서 시작해.
pubspec.yaml: 앱의 설정과 필요한 라이브러리를 정의하는 파일이야. 플러그인이나 패키지를 추가할 때 이 파일을 편집하게 될 거야.
android, ios, web: 각각의 플랫폼에 필요한 설정 파일들이 있어. 우리는 기본적으로 Dart 파일을 수정하지만, 특정 플랫폼에 맞는 설정을 할 때 이 폴더들을 건드리게 될 거야.

main.dart 파일 수정하기

이제 기본 코드가 들어 있는 main.dart 파일을 열어보자. 처음 생성된 코드에는 몇 가지 기본적인 위젯이 설정되어 있을 거야. 우리는 이 코드를 간단히 수정해서 ‘Hello, Flutter!’라는 메시지를 화면에 띄워볼 거야.

코드 수정하기: lib/main.dart 파일을 열고, 코드를 다음과 같이 수정해봐:

  import 'package:flutter/material.dart';

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

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Hello, Flutter!'),
          ),
          body: Center(
            child: Text('Hello, Flutter!'),
          ),
        ),
      );
    }
  }

코드 설명:

main() 함수: main() 함수는 앱이 시작하는 지점이야. 여기서 runApp() 함수를 호출하고 MyApp이라는 클래스를 넘겨주고 있어.
MyApp 클래스: 이 클래스는 StatelessWidget을 상속받아, 앱의 기본 구조를 정의해. MaterialApp을 사용해서 전체 앱을 감싸고, Scaffold를 사용해 앱의 기본 화면을 구성해.
Scaffold와 AppBar: Scaffold는 플러터의 기본 레이아웃을 제공해. 여기서는 상단에 AppBar를 추가해 제목을 표시하고, 중앙에는 텍스트를 배치하고 있어.

앱 실행하기

코드를 작성했으면 이제 앱을 실행해 보자. Flutter는 에뮬레이터나 실제 디바이스에서 앱을 테스트할 수 있는 다양한 방법을 제공해.

1) 에뮬레이터 설정

Android Studio를 사용하고 있다면, 상단 메뉴에서 Device Manager를 클릭해 가상 디바이스(에뮬레이터)를 실행해.
Visual Studio Code를 사용하고 있다면, PC에 연결된 안드로이드 폰이나 iOS 기기를 바로 사용할 수도 있어.

2) 앱 실행

터미널에서 flutter run 명령어를 입력하거나, IDE에서 Run 버튼을 눌러 앱을 실행할 수 있어. 조금 기다리면 에뮬레이터나 연결된 디바이스에서 ‘Hello, Flutter!’라는 메시지가 보일 거야.

Hot Reload 기능 사용하기

Flutter의 가장 큰 장점 중 하나는 핫 리로드(Hot Reload) 기능이야. 이 기능은 코드 변경 사항을 즉시 반영해 주기 때문에, 앱을 다시 시작하지 않아도 수정한 내용을 실시간으로 확인할 수 있어.

코드 수정하기: body 부분의 텍스트를 ‘Welcome to Flutter!’로 변경해 보자.
Hot Reload: IDE에서 Hot Reload 버튼을 누르거나, 터미널에서 r 키를 입력하면 앱이 재시작 없이 바로 업데이트될 거야.

마무리

이번 강의에서는 Flutter로 간단한 앱을 만드는 과정을 살펴보았어. 플러터의 기본적인 프로젝트 구조와 main.dart 파일을 수정해서 간단한 메시지를 화면에 띄우는 방법을 익혔지. 다음 강의에서는 위젯에 대해 더 깊이 알아보고, 다양한 위젯을 사용해 앱을 꾸며볼 거야. 계속해서 함께 배우자!