이 글은 Claude Opus 4.6 을 이용해 초안이 작성되었으며, 이후 퇴고를 거쳤습니다.

시리즈 소개#

이 시리즈에서는 Flutter 를 사용하여 크로스플랫폼 To-Do 앱을 처음부터 끝까지 만들어 봅니다. 하나의 코드베이스로 Android, iOS, 그리고 웹까지 동작하는 앱을 완성하는 것이 목표입니다.

시리즈는 총 4개의 파트로 구성됩니다.

  1. Part 1 (이번 글) : 프레임워크 선택과 개발 환경 설정
  2. Part 2: UI 구성과 기본 기능 구현
  3. Part 3: 상태 관리와 로컬 데이터 저장
  4. Part 4: 마무리, 테스트, 빌드 및 배포

각 파트는 실습 중심으로 진행됩니다. 따라해 보시면서 자연스럽게 Flutter 개발의 흐름을 익히실 수 있습니다.

2026년 기준 크로스플랫폼 프레임워크 비교#

크로스플랫폼 모바일 개발 프레임워크는 여러 가지가 있지만, 2026년 현재 가장 널리 사용되는 세 가지를 비교해 보겠습니다.

Flutter vs React Native vs Kotlin Multiplatform#

항목 Flutter React Native Kotlin Multiplatform
개발 언어 Dart JavaScript/TypeScript Kotlin
개발사 Google Meta JetBrains
렌더링 방식 자체 렌더링 엔진 (Impeller) 네이티브 UI 컴포넌트 네이티브 UI 컴포넌트
지원 플랫폼 Android, iOS, Web, Desktop Android, iOS, Web Android, iOS (UI 공유 제한적)
Hot Reload 지원 지원 부분 지원
성능 네이티브에 근접 브릿지 오버헤드 존재 네이티브 수준
생태계 성숙도 매우 풍부 가장 풍부 성장 중
학습 곡선 중간 (Dart 학습 필요) 낮음 (JS 경험 시) 높음
UI 일관성 플랫폼 간 동일 플랫폼별 차이 존재 플랫폼별 별도 구현

Flutter를 선택한 이유#

이 시리즈에서 Flutter를 선택한 이유는 다음과 같습니다.

  1. 하나의 코드베이스로 진정한 크로스플랫폼 지원: Flutter는 자체 렌더링 엔진을 사용하기 때문에 Android, iOS, 웹 어디서든 동일한 UI를 보장합니다. 플랫폼 간 UI 차이로 고생할 일이 없습니다.

  2. 빠른 개발 사이클: Hot Reload 기능이 매우 강력합니다. 코드를 수정하면 거의 즉시 화면에 반영되어 개발 속도가 빠릅니다.

  3. 풍부한 위젯 라이브러리: Material Design과 Cupertino 스타일 위젯이 기본 제공되며, pub.dev에서 수만 개의 패키지를 활용할 수 있습니다.

  4. Dart 언어의 접근성: Dart는 Java, JavaScript, TypeScript 등 주류 언어와 문법이 유사하여 기존 개발 경험이 있다면 빠르게 적응할 수 있습니다.

  5. 안정적인 성능: Impeller 렌더링 엔진 도입 이후 성능이 크게 개선되었으며, 네이티브 앱에 근접하는 성능을 보여줍니다.

Flutter SDK 설치#

macOS#

macOS에서는 Homebrew를 통해 간편하게 설치할 수 있습니다.

# Homebrew가 없다면 먼저 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Flutter SDK 설치
brew install --cask flutter

Homebrew 없이 수동으로 설치할 수도 있습니다.

# Flutter SDK 다운로드 및 압축 해제
cd ~/development
curl -LO https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.29.0-stable.zip
unzip flutter_macos_arm64_3.29.0-stable.zip

# PATH에 Flutter 추가 (~/.zshrc 또는 ~/.bash_profile)
export PATH="$HOME/development/flutter/bin:$PATH"

쉘 설정 파일에 PATH를 추가한 뒤 터미널을 재시작하거나 source ~/.zshrc를 실행합니다.

Windows#

Windows에서는 공식 설치 가이드를 따르는 것을 권장합니다.

# Git이 설치되어 있어야 합니다
# https://git-scm.com/download/win 에서 설치

# Flutter SDK 다운로드
# https://docs.flutter.dev/get-started/install/windows/mobile 에서
# 최신 stable 버전 zip 파일 다운로드

# C:\src\flutter 에 압축 해제 (경로에 공백이 없어야 합니다)

# 시스템 환경 변수 PATH에 C:\src\flutter\bin 추가

Windows에서도 패키지 매니저를 사용할 수 있습니다.

# Chocolatey 사용 시
choco install flutter

# 또는 winget 사용 시
winget install Google.FlutterSDK

flutter doctor 실행#

설치가 완료되면 flutter doctor 명령어로 개발 환경을 점검합니다.

flutter doctor

정상적으로 설치되었다면 다음과 비슷한 결과가 출력됩니다.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.0, on macOS 15.4 24E5238a darwin-arm64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.3)
[✓] VS Code (version 1.99.0)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

처음 설치했을 때는 일부 항목에 [✗] 또는 [!] 표시가 나올 수 있습니다. 이어지는 섹션에서 하나씩 해결해 보겠습니다.

IDE 설정#

VS Code (권장)#

VS Code는 가볍고 확장성이 뛰어나며, Flutter 개발에 필요한 기능을 플러그인으로 모두 지원합니다.

  1. VS Code 다운로드 페이지에서 설치합니다.
  2. VS Code를 열고 Extensions 패널(Cmd+Shift+X 또는 Ctrl+Shift+X)을 엽니다.
  3. 다음 확장 프로그램을 검색하여 설치합니다.
확장 프로그램 설명
Flutter Flutter 개발 핵심 확장. Dart 확장도 자동 설치됨
Dart Dart 언어 지원 (코드 완성, 분석, 리팩토링)
Error Lens 에러 메시지를 코드 옆에 인라인으로 표시 (선택)
Flutter Widget Snippets 자주 쓰는 위젯 코드 스니펫 제공 (선택)

Flutter 확장을 설치하면 Dart 확장이 자동으로 함께 설치됩니다. 설치 후 VS Code를 재시작하면 하단 상태바에 Flutter SDK 버전이 표시됩니다.

Android Studio#

Android Studio는 더 무겁지만, Android 에뮬레이터 관리와 네이티브 디버깅에 강점이 있습니다.

  1. Android Studio 다운로드 페이지에서 설치합니다.
  2. 상단 메뉴에서 File > Settings > Plugins (macOS: Android Studio > Preferences > Plugins) 로 이동합니다.
  3. Flutter 플러그인을 검색하여 설치합니다. Dart 플러그인도 함께 설치됩니다.
  4. Android Studio를 재시작합니다.

Android 앱 빌드를 위해서는 Android Studio 설치가 필수입니다. VS Code를 메인 에디터로 사용하더라도 Android Studio는 함께 설치해 두는 것이 좋습니다.

에뮬레이터 / 시뮬레이터 구성#

Android Emulator#

Android Emulator를 사용하려면 Android Studio에서 AVD(Android Virtual Device)를 설정해야 합니다.

  1. Android Studio를 열고 More Actions > Virtual Device Manager 를 클릭합니다.
  2. Create Virtual Device 를 클릭합니다.
  3. 기기를 선택합니다. Pixel 8 이나 Pixel 9 같은 최신 기기를 권장합니다.
  4. 시스템 이미지를 선택합니다. 최신 API 레벨(예: API 35)의 이미지를 다운로드하고 선택합니다.
  5. AVD 이름을 확인하고 Finish 를 클릭합니다.

명령줄에서도 에뮬레이터를 실행할 수 있습니다.

# 사용 가능한 에뮬레이터 목록 확인
flutter emulators

# 에뮬레이터 실행
flutter emulators --launch <emulator_id>

# 예시
flutter emulators --launch Pixel_8_API_35

iOS Simulator (macOS 전용)#

iOS Simulator는 Xcode에 포함되어 있습니다.

# Xcode 설치 (App Store 또는 명령줄)
xcode-select --install

# Xcode 라이센스 동의
sudo xcodebuild -license accept

# iOS Simulator 실행
open -a Simulator

Simulator가 실행되면 상단 메뉴에서 File > Open Simulator 를 통해 원하는 기기를 선택할 수 있습니다. iPhone 16 시리즈를 권장합니다.

# CocoaPods 설치 (iOS 빌드에 필요)
sudo gem install cocoapods

# 또는 Homebrew로 설치
brew install cocoapods

설치 후 다시 flutter doctor를 실행하여 모든 항목이 통과하는지 확인합니다.

flutter doctor

모든 항목에 [✓] 가 표시되면 개발 환경 설정이 완료된 것입니다.

첫 프로젝트 생성 및 실행#

프로젝트 생성#

이제 To-Do 앱 프로젝트를 생성합니다.

# 작업 디렉토리로 이동
cd ~/projects  # 원하는 경로로 변경 가능

# Flutter 프로젝트 생성
flutter create todo_app

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

flutter create 명령이 성공하면 다음과 같은 메시지가 출력됩니다.

Creating project todo_app...
Running "flutter pub get" in todo_app...
Resolving dependencies...
Got dependencies.
Wrote 129 files.

All done!

프로젝트 구조 살펴보기#

생성된 프로젝트의 주요 디렉토리와 파일을 살펴보겠습니다.

todo_app/
├── android/          # Android 네이티브 코드 및 설정
├── ios/              # iOS 네이티브 코드 및 설정
├── lib/              # Dart 소스 코드 (주로 여기서 작업)
│   └── main.dart     # 앱 진입점
├── test/             # 테스트 코드
├── web/              # 웹 빌드 설정
├── pubspec.yaml      # 프로젝트 설정 및 의존성 관리
├── pubspec.lock      # 의존성 버전 잠금 파일
└── analysis_options.yaml  # Dart 분석 규칙

가장 중요한 파일은 lib/main.dart와 pubspec.yaml입니다.

  • lib/main.dart: 앱의 시작점입니다. 이 시리즈에서 주로 lib/ 디렉토리 안에서 작업하게 됩니다.
  • pubspec.yaml: 프로젝트 이름, 버전, 의존성 패키지 등을 관리하는 설정 파일입니다. Node.js의 package.json과 비슷한 역할을 합니다.

앱 실행#

에뮬레이터나 시뮬레이터가 실행 중인 상태에서 앱을 실행합니다.

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

출력 예시:

Found 3 connected devices:
  Pixel 8 (mobile)        • emulator-5554 • android-arm64  • Android 15 (API 35)
  iPhone 16 (mobile)      • A1B2C3D4-...  • ios            • com.apple.CoreSimulator (iOS 18.4)
  Chrome (web)            • chrome        • web-javascript • Google Chrome 134.0.6998

원하는 디바이스를 지정하여 실행할 수 있습니다.

# 기본 디바이스에서 실행
flutter run

# 특정 디바이스 지정
flutter run -d emulator-5554    # Android Emulator
flutter run -d chrome            # Chrome 브라우저

실행하면 Flutter 기본 카운터 앱이 나타납니다. 우측 하단의 + 버튼을 누르면 숫자가 증가하는 간단한 데모 앱입니다.

Hot Reload 체험#

앱이 실행 중인 상태에서 lib/main.dart 파일을 열어봅니다.

// lib/main.dart 의 일부
home: const MyHomePage(title: 'Flutter Demo Home Page'),

위 코드에서 'Flutter Demo Home Page' 부분을 다음과 같이 변경합니다.

home: const MyHomePage(title: 'My To-Do App'),

파일을 저장하면 앱 화면의 제목이 즉시 바뀌는 것을 확인할 수 있습니다. 이것이 Flutter의 Hot Reload 기능입니다. 앱을 다시 빌드하지 않아도 코드 변경사항이 거의 즉시 반영됩니다.

터미널에서 실행 중이라면 r 키를 눌러 수동으로 Hot Reload를 트리거할 수도 있습니다. R 키(대문자)를 누르면 Hot Restart 가 실행되어 앱 상태가 초기화됩니다.

Flutter run key commands:
  r  Hot reload
  R  Hot restart
  h  List all available interactive commands
  d  Detach (leave app running)
  c  Clear the screen
  q  Quit

정리#

이번 파트에서는 다음 내용을 다루었습니다.

  • 크로스플랫폼 프레임워크 비교와 Flutter 선택 이유
  • Flutter SDK 설치 (macOS, Windows)
  • VS Code 및 Android Studio IDE 설정
  • Android Emulator와 iOS Simulator 구성
  • 첫 Flutter 프로젝트 생성 및 실행, Hot Reload 체험

다음 파트에서는 본격적으로 To-Do 앱의 UI를 구성하고 할 일 추가, 완료, 삭제 등 기본 기능을 구현합니다.