Flutter 시작하기 — Dart 설치부터 Hello World까지

Flutter는 Google이 만든 크로스플랫폼 UI 프레임워크입니다. 하나의 코드베이스로 iOS, Android, Web, Desktop 앱을 만들 수 있습니다.

면접에서 "Flutter를 왜 선택했나요?"라는 질문이 자주 나오는데, **단일 코드베이스 **, ** 핫 리로드 **, ** 네이티브에 가까운 성능 **이 핵심 답변 포인트입니다.

Flutter SDK 설치

macOS

BASH

# Homebrew로 설치하는 방법이 가장 간편합니다
brew install --cask flutter

# 설치 확인
flutter --version

Windows

BASH

# winget으로 설치
winget install -e --id Google.Flutter

# 또는 공식 사이트에서 zip 다운로드 후 PATH 등록

환경 점검

BASH

# 개발 환경 전체를 점검해주는 명령어
flutter doctor

flutter doctor를 실행하면 Android Studio, Xcode, VS Code 등 필요한 도구가 설치되어 있는지 한눈에 확인할 수 있습니다.

첫 프로젝트 생성

BASH

# 프로젝트 생성
flutter create hello_flutter

# 프로젝트 디렉토리로 이동
cd hello_flutter

# 앱 실행
flutter run

생성된 프로젝트 구조를 간단히 살펴보겠습니다.

PLAINTEXT

hello_flutter/
├── lib/
│   └── main.dart          # 앱 진입점
├── test/                  # 테스트 코드
├── android/               # Android 네이티브 설정
├── ios/                   # iOS 네이티브 설정
├── web/                   # 웹 설정
├── pubspec.yaml           # 패키지 의존성 관리
└── pubspec.lock

Hello World 코드 분석

lib/main.dart를 다음과 같이 수정해봅시다.

DART

import 'package:flutter/material.dart';

// 앱의 진입점
void main() {
  runApp(const MyApp());
}

// 앱 최상위 위젯
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

// 홈 화면 위젯
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello Flutter'),
      ),
      body: const Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

핵심 개념 정리

runApp()

Flutter 앱의 시작점입니다
전달받은 위젯을 화면 전체에 렌더링합니다

MaterialApp

Material Design을 적용하는 최상위 위젯입니다
테마, 라우팅, 로케일 등 앱 전반의 설정을 관리합니다

Scaffold

기본적인 화면 구조(AppBar, Body, FloatingActionButton 등)를 제공합니다
대부분의 화면에서 Scaffold를 뼈대로 사용합니다

Hot Reload vs Hot Restart

구분	Hot Reload	Hot Restart
속도	매우 빠름 (1초 이내)	상대적으로 느림
상태 유지	유지됨	초기화됨
사용 시점	UI 변경, 로직 수정	상태 초기화 필요할 때
단축키	`r`	`R`

면접 포인트: Hot Reload가 가능한 이유는 Flutter가 JIT(Just-In-Time) 컴파일 을 개발 모드에서 사용하기 때문입니다. 릴리스 빌드에서는 AOT(Ahead-Of-Time) 컴파일 로 네이티브 성능을 냅니다.

자주 쓰는 Flutter CLI 명령어

BASH

# 연결된 디바이스 목록 확인
flutter devices

# 특정 디바이스에서 실행
flutter run -d chrome

# 릴리스 빌드
flutter build apk
flutter build ios

# 패키지 설치
flutter pub get

# 패키지 업그레이드
flutter pub upgrade

정리

Flutter SDK 설치 후 flutter doctor로 환경 점검부터 하세요
runApp() → MaterialApp → Scaffold 순서로 앱이 구성됩니다
개발 시 Hot Reload를 적극 활용하면 생산성이 크게 올라갑니다
JIT vs AOT 컴파일 차이는 면접에서 자주 물어보는 포인트입니다