Flutter와 Dart가 뭔가
Flutter는 Google이 2017년에 공개한 오픈소스 UI 프레임워크다. 핵심은 하나의 코드베이스로 여러 플랫폼을 동시에 대응할 수 있다는 점이다. iOS, Android는 물론이고 웹, Windows, macOS, Linux까지 지원한다.
Dart는 Flutter의 프로그래밍 언어다. JavaScript와 Java의 장점을 조합한 느낌인데, 타입 시스템이 탄탄하면서도 문법이 깔끔하다. AOT(Ahead of Time) 컴파일로 네이티브 수준의 성능을 내고, JIT(Just in Time) 컴파일로 개발 중 Hot Reload를 지원한다.
React Native가 JavaScript 브릿지를 통해 네이티브 컴포넌트를 호출하는 방식이라면, Flutter는 자체 렌더링 엔진(Skia/Impeller)으로 화면을 직접 그린다. 이 덕분에 플랫폼 간 UI 일관성이 높고, 복잡한 애니메이션도 60fps를 안정적으로 유지한다.
- 자체 렌더링 엔진으로 플랫폼 간 동일한 UI
- Hot Reload로 코드 수정 즉시 반영
- Material Design과 Cupertino 위젯 기본 제공
- Dart 언어의 null safety와 강력한 타입 시스템
환경 설정과 첫 프로젝트
Flutter 개발을 시작하려면 Flutter SDK를 설치해야 한다. 공식 사이트에서 운영체제에 맞는 버전을 받으면 된다.
Flutter SDK 설치
flutter.dev에서 SDK를 다운로드하고 환경 변수에 등록한다. flutter doctor 명령어로 설정 상태를 확인할 수 있다.
IDE 설정
VS Code 또는 Android Studio에 Flutter/Dart 플러그인을 설치한다. VS Code가 가볍고 빠르지만, Android Studio는 에뮬레이터 관리가 편하다.
첫 프로젝트 생성
flutter create my_app 명령어로 프로젝트를 만들고 flutter run으로 실행한다. 에뮬레이터나 실제 기기에서 카운터 앱이 바로 뜬다.
Flutter 3.x부터 Impeller 렌더링 엔진이 iOS에서 기본 활성화됐다. Skia 대비 렌더링 지터(jank)가 크게 줄었으니, 가능하면 최신 버전을 사용하자.
Widget 기초와 레이아웃
Flutter에서 화면에 보이는 모든 것은 Widget이다. 텍스트, 버튼, 이미지, 레이아웃 전부 Widget으로 구성된다. Widget은 크게 StatelessWidget과 StatefulWidget으로 나뉜다.
StatelessWidget vs StatefulWidget
StatelessWidget은 상태가 없는 고정 UI다. 한 번 그려지면 변하지 않는다. StatefulWidget은 내부 상태를 가지고, setState()를 호출하면 화면이 다시 그려진다.
레이아웃 기본: Row, Column, Stack
수평 배치는 Row, 수직 배치는 Column, 겹침 배치는 Stack을 쓴다. Expanded와 Flexible로 비율을 조절하고, Padding과 SizedBox로 여백을 넣는다. 이 세 가지만 잘 조합해도 대부분의 레이아웃을 만들 수 있다.
자주 쓰는 Widget 목록
| Widget | 용도 | 비고 |
|---|---|---|
| Container | 박스 모델 (크기, 배경, 테두리) | CSS의 div와 유사 |
| ListView | 스크롤 가능한 리스트 | builder로 지연 렌더링 |
| GridView | 그리드 레이아웃 | 상품 목록 등에 적합 |
| GestureDetector | 터치 이벤트 감지 | 탭, 스와이프, 드래그 |
| AnimatedContainer | 자동 애니메이션 전환 | 속성 변경 시 부드럽게 전환 |
상태 관리 전략
앱이 커질수록 상태 관리가 핵심이 된다. Flutter에서는 여러 가지 상태 관리 방식이 있는데, 프로젝트 규모에 맞게 선택하면 된다.
Provider
Flutter 팀이 공식 추천했던 상태 관리 도구다. ChangeNotifier 기반으로 동작하고, 학습 곡선이 낮아서 입문자에게 적합하다. 소규모 앱에서는 이것만으로도 충분하다.
Riverpod
Provider의 제작자가 단점을 보완해서 만든 차세대 상태 관리다. 컴파일 타임에 안전성을 보장하고, 전역 상태와 비동기 상태를 깔끔하게 처리한다. 2026년 기준으로 새 프로젝트라면 Riverpod을 권한다.
BLoC
비즈니스 로직을 UI와 완전히 분리하는 패턴이다. 스트림 기반이라 이벤트 주도 아키텍처에 적합하다. 대규모 팀 프로젝트에서 코드 일관성을 유지하기 좋다. 다만 보일러플레이트 코드가 많은 편이다.
| 방식 | 복잡도 | 추천 규모 |
|---|---|---|
| setState | 최소 | 단일 화면 내 |
| Provider | 낮음 | 소규모 앱 |
| Riverpod | 중간 | 중규모 이상 |
| BLoC | 높음 | 대규모 팀 프로젝트 |
HTTP API 연동
대부분의 앱은 서버와 데이터를 주고받아야 한다. Flutter에서 HTTP 통신은 http 패키지로 기본 처리가 되지만, 실전에서는 Dio를 쓰는 게 편하다.
Dio 라이브러리
인터셉터, 타임아웃, 파일 업로드/다운로드, 취소 토큰 등 실무에서 필요한 기능을 전부 지원한다. 인터셉터로 토큰 자동 갱신이나 에러 처리를 공통화하면 코드 중복이 크게 줄어든다.
JSON 파싱과 모델 클래스
서버에서 받은 JSON 데이터를 Dart 객체로 변환해야 한다. json_serializable과 freezed 패키지를 조합하면 모델 클래스를 자동 생성할 수 있다. 타입 안전성이 확보되고, 직렬화/역직렬화 코드를 수동으로 작성할 필요가 없다.
앱 스토어 배포
개발이 끝나면 실제 스토어에 올려야 한다. Android와 iOS 배포 과정은 다르지만, Flutter에서 빌드 자체는 간단하다.
Android 배포
flutter build appbundle로 AAB 파일을 생성하고, Google Play Console에 업로드한다. 서명 키 관리와 버전 코드 관리에 신경 쓰자.
iOS 배포
flutter build ipa로 빌드하고, Xcode나 Transporter로 App Store Connect에 업로드한다. Apple Developer 계정이 필요하고, 첫 심사에 3~7일 정도 걸린다.
Fastlane이나 Codemagic 같은 CI/CD 도구를 연동하면 빌드부터 배포까지 자동화할 수 있다. 반복되는 수동 작업을 줄이고 실수를 방지하는 데 효과적이다.
마무리
Flutter는 크로스플랫폼 앱 개발에서 가장 균형 잡힌 선택지다. Dart 언어의 생산성, 자체 렌더링 엔진의 일관성, 풍부한 위젯 라이브러리가 결합되어 실제 프로덕션 수준의 앱을 빠르게 만들 수 있다.
물론 Dart라는 새로운 언어를 배워야 하고, 네이티브 코드가 필요한 고급 기능에서는 추가 작업이 생긴다. 하지만 하나의 코드베이스로 여러 플랫폼을 대응할 수 있다는 이점은 개발 비용과 유지보수 측면에서 압도적이다.
이미 JavaScript에 익숙하다면 React Native도 좋은 선택이지만, 처음부터 새로 배우는 거라면 Flutter를 추천한다. 공식 문서가 잘 되어 있고, 커뮤니티도 활발하다. 일단 flutter create부터 실행해보자.
