Flutter 튜토리얼 1편: Flutter 소개와 첫 앱 만들기

Why#

NOTE

“Android 따로, iOS 따로” 개발하면 같은 기능을 두 번 만들어야 합니다.
예를 들어, 로그인 화면을 만든다고 생각해 보세요.
Android용 로그인 화면을 Kotlin으로 만들고, iOS용 로그인 화면을 Swift로 또 만들어야 합니다.

버그가 생기면요?
Android에서 고치고, iOS에서도 고쳐야 합니다.
두 배의 시간과 노력이 들어갑니다.

그래서 “한 번 작성하고 여러 플랫폼에 배포”하는 방식이 필요합니다.

What#

NOTE

Flutter는 하나의 코드로 iOS³, Android⁴, Web⁵, Windows, macOS, Linux 앱을 만드는 오픈소스 UI 프레임워크입니다.

쉽게 말해서:

• 코드를 한 번만 작성합니다.
• 그 코드가 6개 플랫폼에서 모두 동작합니다.
• Google이 만들고 유지보수합니다.

How#

TIP

Flutter는 Widget이라는 개념으로 UI를 구성합니다.
Widget은 화면에 보이는 모든 것입니다.
버튼, 텍스트, 이미지, 심지어 여백까지 모두 Widget입니다.

가장 간단한 Flutter 앱

1
void main() {
2
  runApp(Text('Hello, Flutter!'));
3
}

이게 전부입니다.
runApp()에 Widget을 넣으면 화면에 표시됩니다.

좀 더 실용적인 예시

1
void main() {
2
  runApp(
3
    MaterialApp(
4
      home: Scaffold(
5
        appBar: AppBar(title: Text('내 앱')),
6
        body: Center(child: Text('Hello!')),
7
      ),
8
    ),
9
  );
10
}

코드를 분석해 봅시다:

코드	역할
runApp()	앱을 시작합니다
MaterialApp	Material 디자인 앱의 틀입니다
Scaffold	화면의 기본 구조입니다
AppBar	상단 바입니다
Center	가운데 정렬합니다
Text	텍스트를 표시합니다

Watch out#

WARNING

Flutter는 자체 렌더링 엔진을 사용합니다.
이게 무슨 뜻일까요?

Android의 버튼이나 iOS의 버튼을 직접 사용하는 게 아닙니다.
Flutter가 직접 그림을 그려서 버튼을 표시합니다.

장점: 모든 플랫폼에서 똑같이 보입니다.
단점: 카메라, GPS 같은 기능은 플러그인이 필요합니다.

1
# pubspec.yaml에 플러그인 추가
2
dependencies:
3
  camera: ^0.10.0  # 카메라 사용하려면 필요

결론: Flutter는 하나의 코드로 여러 플랫폼 앱을 만들어 개발 비용을 줄입니다.

Why#

NOTE

Flutter를 사용하려면 먼저 개발 환경을 설정해야 합니다.
”개발 환경”이란 코드를 작성하고 앱을 실행할 수 있는 상태를 말합니다.

설정 방법에 따라 시작 속도가 달라집니다.
빠르게 시작할 수도 있고, 세밀하게 설정할 수도 있습니다.

What#

NOTE

Flutter는 두 가지 설치 방법을 제공합니다.

1. 빠른 시작(Quick Start): VS Code가 알아서 설치해 줍니다.
2. 사용자 정의 설정(Custom Setup): 직접 다운로드하고 설정합니다.

입문자라면 빠른 시작을 권장합니다.

How#

TIP

방법 1: 빠른 시작 (권장)

VS Code를 사용하면 Flutter 확장이 SDK 설치를 자동으로 처리합니다.

단계	작업	소요 시간
1	VS Code 설치	5분
2	Flutter 확장 설치	1분
3	Flutter SDK 다운로드 (자동)	10분
4	첫 프로젝트 생성	2분

총 20분이면 시작할 수 있습니다.

방법 2: 사용자 정의 설정

SDK를 직접 다운로드하고 환경 변수를 설정합니다.

1
# 환경 변수 설정 (macOS/Linux)
2
export PATH="$PATH:$HOME/development/flutter/bin"

항목	빠른 시작	사용자 정의
설정 난이도	쉬움	중간
유연성	제한적	높음
권장 대상	입문자	경험자

Watch out#

WARNING

설치가 제대로 됐는지 어떻게 확인할까요?
flutter doctor 명령어를 사용합니다.

1
$ flutter doctor

모든 항목에 체크 표시(✓)가 나타나야 정상입니다.

1
[✓] Flutter (Channel stable, 3.38.1)
2
[✓] Android toolchain
3
[✓] Xcode
4
[✓] Chrome
5
[✓] VS Code
6
[✓] Connected device

체크 표시가 아닌 항목이 있다면?
해당 항목을 클릭하면 해결 방법이 나옵니다.

결론: 입문자는 VS Code + Flutter 확장으로 빠르게 시작하는 것을 권장합니다.

Why#

NOTE

개발 환경이 준비되면 실제로 앱을 만들어봐야 합니다.
읽기만 해서는 절대 배울 수 없습니다.
직접 코드를 작성하고 실행해 봐야 합니다.

Flutter 공식 Codelab은 약 1.5시간 분량입니다.
이 튜토리얼에서는 핵심만 빠르게 다룹니다.

What#

NOTE

Flutter 앱은 lib/main.dart 파일에서 시작합니다.
main() 함수가 앱의 진입점입니다.
runApp() 함수로 화면에 Widget을 표시합니다.

How#

TIP

프로젝트 생성하기

VS Code에서 Ctrl+Shift+P (macOS: Cmd+Shift+P)를 누릅니다.
”Flutter: New Project”를 선택합니다.

또는 터미널에서:

1
flutter create my_first_app
2
cd my_first_app
3
flutter run

프로젝트 구조 이해하기

1
my_first_app/
2
├── lib/
3
│   └── main.dart      ← 여기서 코드 작성
4
├── pubspec.yaml       ← 패키지 설정
5
└── (기타 폴더들)

지금은 lib/main.dart만 기억하세요.
모든 코드는 여기에 작성합니다.

hot reload 체험하기

hot reload는 Flutter의 핵심 기능입니다.
코드를 수정하고 저장하면 앱이 즉시 업데이트됩니다.

1
// 이 텍스트를 변경해 보세요
2
child: Text('Hello, Flutter!'),
3
// ↓ 저장하면 바로 바뀝니다
4
child: Text('안녕, Flutter!'),

앱을 재시작할 필요가 없습니다.
1초 이내에 화면이 바뀝니다.

Watch out#

WARNING

hot reload와 hot restart는 다릅니다.

기능	단축키	상태	사용 시점
hot reload	r	유지	UI만 바꿀 때
hot restart	R	초기화	상태를 리셋할 때

hot reload는 UI 변경에 적합합니다.
하지만 앱의 상태(예: 변수 값)는 그대로 유지됩니다.

상태까지 초기화하려면 hot restart(대문자 R)를 사용하세요.

결론: 프로젝트를 생성하고 hot reload로 변경사항을 즉시 확인하며 개발합니다.

Why#

NOTE

첫 앱을 만들었다면 “다음에 뭘 배워야 하지?”라는 질문이 생깁니다.
Flutter는 배울 것이 많습니다.
하지만 순서가 있습니다.

잘못된 순서로 배우면 시간이 오래 걸립니다.
올바른 순서로 배우면 빠르게 익힐 수 있습니다.

What#

NOTE

Flutter 학습의 권장 순서입니다:

1
Dart 기초 → Widget 기초 → 레이아웃 → 상태 관리 → 네비게이션

하나씩 차근차근 배워야 합니다.
건너뛰면 나중에 막히게 됩니다.

How#

TIP

입문자 권장 학습 순서

순서	주제	왜 필요한가?
1	Dart 언어	Flutter의 기본 언어이기 때문
2	Widget 기초	UI를 만드는 기본 단위이기 때문
3	레이아웃	Widget을 배치해야 하기 때문
4	상태 관리	데이터 변경을 화면에 반영해야 하기 때문
5	네비게이션	여러 화면을 오가야 하기 때문

다른 플랫폼 경험이 있다면?

Flutter 공식 문서에 전환 가이드가 있습니다:

• Android 개발자 → Flutter for Android developers
• iOS 개발자 → Flutter for SwiftUI developers
• 웹 개발자 → Flutter for web developers
• React Native 개발자 → Flutter for React Native developers

기존 지식을 활용하면 더 빠르게 배울 수 있습니다.

Watch out#

WARNING

가장 흔한 실수: Dart를 건너뛰고 Flutter만 배우려는 것입니다.

Flutter 코드는 Dart로 작성합니다.
Dart를 모르면 코드를 이해할 수 없습니다.

예를 들어, 이 코드가 무슨 뜻인지 모른다면 Dart 공부가 필요합니다:

1
String? name;        // ?가 뭐지?
2
final count = 0;     // final이 뭐지?
3
await fetchData();   // await가 뭐지?

Dart 기초(변수, 함수, 클래스, 비동기)를 먼저 익히세요.
2시간이면 충분합니다.

결론: Dart 기초부터 시작해서 Widget, 레이아웃, 상태 관리 순으로 학습합니다.