Flutter 시작하기

이 장에서는 Flutter SDK를 설치하고, 개발 환경을 점검한 뒤, 첫 프로젝트를 만들어 실행하는 과정까지 다룹니다. Flutter 앱은 Dart 언어로 작성합니다. Dart는 Google이 만든 객체 지향 언어로, 문법이 Java·TypeScript·Kotlin과 비슷해 이들 언어를 써 본 사람이라면 금방 익숙해집니다. Dart SDK는 Flutter SDK 안에 함께 들어 있으므로 따로 설치할 필요가 없습니다.

Flutter SDK 설치

설치 방법은 크게 두 가지입니다.

1. VS Code로 설치: VS Code에 Flutter 확장을 설치하고 명령 팔레트에서 Flutter: New Project를 실행하면, SDK가 없을 때 내려받을 위치를 묻고 자동으로 설치합니다. 처음 시작할 때 가장 간단한 방법입니다.
2. 직접 설치: docs.flutter.dev에서 운영체제별 SDK 압축 파일을 내려받아 원하는 폴더에 풀고, 그 안의 bin 폴더를 PATH 환경 변수에 추가합니다.

Git에 익숙하다면 안정(stable) 채널을 직접 받아도 됩니다.

# 원하는 폴더에서 안정 채널을 내려받습니다
git clone https://github.com/flutter/flutter.git -b stable

# macOS·Linux: 셸 설정 파일(~/.zshrc 등)에 PATH를 추가합니다
export PATH="$HOME/flutter/bin:$PATH"

# 설치 확인
flutter --version

Windows에서는 압축을 푼 폴더(예: C:\src\flutter)의 bin을 시스템 환경 변수 Path에 추가한 뒤 새 터미널을 엽니다. 이후 SDK를 최신 안정판으로 올릴 때는 flutter upgrade를 실행합니다.

flutter doctor로 환경 점검

Flutter는 하나의 코드로 Android, iOS, 웹, Windows, macOS, Linux 앱을 만들지만, 각 플랫폼용으로 빌드하려면 그 플랫폼의 도구가 따로 필요합니다. flutter doctor는 무엇이 설치되어 있고 무엇이 빠졌는지 한눈에 보여 줍니다.

flutter doctor

# 더 자세한 정보
flutter doctor -v

# Android SDK 라이선스 동의(Android 개발 시 한 번)
flutter doctor --android-licenses

플랫폼별로 필요한 도구는 다음과 같습니다. 모든 항목을 갖출 필요는 없고, 만들려는 플랫폼만 준비하면 됩니다.

iOS 앱은 macOS에서만 빌드할 수 있다는 점에 유의합니다. Windows나 Linux에서 시작한다면 Android 에뮬레이터, Chrome, 데스크톱 대상으로 먼저 연습하면 됩니다.

첫 프로젝트 만들기와 실행

flutter create로 새 프로젝트를 만듭니다. 프로젝트 이름은 Dart 패키지 이름 규칙에 따라 소문자와 밑줄만 씁니다.

flutter create hello_app
cd hello_app

# 연결된 기기와 에뮬레이터, 브라우저 목록
flutter devices

# 기본 기기에서 실행
flutter run

# 특정 기기를 골라 실행
flutter run -d chrome
flutter run -d windows

--org 옵션으로 Android 패키지 이름과 iOS 번들 식별자의 앞부분을 정할 수 있고(예: --org com.example), --platforms=android,ios처럼 필요한 플랫폼만 골라 만들 수도 있습니다.

새 프로젝트에는 버튼을 누르면 숫자가 올라가는 카운터 앱이 들어 있습니다. 앱의 진입점은 lib/main.dart의 main 함수이며, runApp에 넘긴 위젯이 화면 전체가 됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(child: Text('안녕하세요, Flutter!')),
      ),
    );
  }
}

핫 리로드

flutter run으로 앱이 실행 중일 때 코드를 고치고 저장하면 편집기가 핫 리로드를 실행합니다. 터미널에서 직접 실행했다면 다음 키를 씁니다.

핫 리로드는 디버그 모드에서만 동작하며, 화면을 바꾸고 결과를 바로 확인하는 Flutter 개발 흐름의 핵심입니다. main 함수나 상태의 초깃값을 바꾼 경우에는 핫 리스타트가 필요합니다.

편집기 설정

• VS Code: Flutter 확장(Dart 확장이 함께 설치됨)을 설치합니다. 상태 표시줄에서 기기를 고르고 F5로 디버그 실행합니다.
• Android Studio · IntelliJ IDEA: 플러그인 설정에서 Flutter 플러그인을 설치합니다. Android 에뮬레이터 관리가 편리합니다.
• 두 편집기 모두 위젯 검사, 성능 분석을 위한 DevTools를 열 수 있습니다.

정리

• Flutter SDK에는 Dart SDK가 들어 있으며, VS Code 확장이나 압축 파일로 설치합니다.
• flutter doctor로 플랫폼별 도구가 갖춰졌는지 확인합니다.
• flutter create로 프로젝트를 만들고 flutter run으로 실행합니다.
• 실행 중에는 핫 리로드로 상태를 유지한 채 바뀐 코드를 바로 확인합니다.