Flutter를 실무 흐름으로 이해하기
Google이 만든 크로스플랫폼 UI 툴킷 Flutter로 Android·iOS·웹을 하나의 코드베이스로 만드는 방법을 학습합니다. 이 가이드는 개념을 나열하기보다, 실제 프로젝트에서 판단해야 하는 순서대로 내용을 따라갈 수 있게 구성했습니다.
Dart 기반 크로스플랫폼 UI 가이드
Flutter 완전 가이드
Google이 만든 크로스플랫폼 UI 툴킷 Flutter로 Android·iOS·웹을 하나의 코드베이스로 만드는 방법을 학습합니다.
가이드 사용법
프론트엔드 / 앱 개발
화면을 그리는 법에서 멈추지 않고, 상태, 데이터 요청, 라우팅, 접근성, 배포 단위까지 함께 봅니다.
구조 다이어그램
글로 읽은 내용을 머릿속에 오래 남기려면 먼저 흐름을 그림으로 잡는 편이 좋습니다. 아래 두 그림은 Flutter를 학습할 때 계속 되돌아볼 수 있는 기준 지도입니다.
학습 흐름
다이어그램 렌더링 중…
아키텍처 관점
다이어그램 렌더링 중…
설치 & 프로젝트 생성
Flutter를 처음 펼칠 때는 세부 명령보다 큰 그림이 먼저입니다. 이 섹션에서는 앞으로 배울 개념들이 어떤 문제를 풀기 위해 등장했는지부터 잡아봅니다.
flutter doctor는 Android Studio, Xcode, 각 플랫폼 툴체인이 제대로 연결됐는지 진단해주므로, 첫 빌드 전에 반드시 실행해 경고 항목을 먼저 해결하는 것이 좋습니다. flutter run은 코드를 수정할 때마다 핫 리로드로 앱 상태를 유지한 채 UI만 갱신해 개발 속도를 크게 높여줍니다.
BASH
# macOS
brew install --cask flutter
flutter doctor # 환경 점검
# 새 프로젝트 생성 & 실행 (핫 리로드 지원)
flutter create my_app && cd my_app
flutter run위젯 & 레이아웃
여기서는 위젯 & 레이아웃을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
Flutter는 모든 것이 위젯입니다. StatelessWidget은 내부 상태 없이 입력값만으로 UI를 그리며, Column/Row/Container로 레이아웃을 구성합니다.
DART
class Greeting extends StatelessWidget {
final String name;
const Greeting({super.key, required this.name});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('안녕하세요, $name!'),
ElevatedButton(onPressed: () {}, child: const Text('눌러보세요')),
],
);
}
}상태 관리
여기서는 상태 관리을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
가장 기본적인 상태 관리는 StatefulWidget과 setState()입니다. setState()가 호출되면 build()가 다시 실행되어 화면이 갱신됩니다. 앱이 커지면 Provider나 Riverpod으로 확장합니다.
DART
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() => setState(() { _count++; });
@override
Widget build(BuildContext context) {
return Column(children: [
Text('카운트: $_count'),
ElevatedButton(onPressed: _increment, child: const Text('증가')),
]);
}
}네트워크 통신
여기서는 네트워크 통신을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
REST API 호출은 http 패키지와 async/await 조합이 가장 널리 쓰입니다. FutureBuilder 위젯으로 로딩/성공/실패 상태를 UI에서 바로 분기 처리할 수 있습니다.
DART
Future<List<User>> fetchUsers() async {
final res = await http.get(Uri.parse('https://api.example.com/users'));
if (res.statusCode == 200) {
final List<dynamic> data = jsonDecode(res.body);
return data.map((j) => User.fromJson(j)).toList();
}
throw Exception('사용자 목록을 불러오지 못했습니다');
}Flutter 실무 설계
Flutter 실무 설계은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
Flutter는 위젯 트리 깊이와 rebuild 범위를 의식해서 설계해야 합니다. 상태를 위젯 트리 상위에 두지 말고 필요한 범위로 좁혀야 불필요한 rebuild를 막을 수 있습니다.
| 결정 지점 | 확인 질문 | 실무 기준 |
|---|---|---|
| 경계 | Flutter 코드에서 바뀌기 쉬운 부분은 어디인가? | 입출력, 설정, 외부 연동, 핵심 규칙을 분리합니다. |
| 상태 | 상태가 어디서 생성되고 어디서 사라지는가? | 상태 소유자와 수명 주기를 코드로 드러냅니다. |
| 장애 | 실패했을 때 호출자는 무엇을 받는가? | timeout, fallback, error contract를 먼저 정합니다. |
Flutter 운영 기준
이 섹션은 Flutter 운영 기준을 실무 관점에서 정리합니다. 개념을 외우기보다, 어떤 상황에서 이 기준을 꺼내 쓸지에 초점을 맞춰보세요.
운영에서는 프레임 드롭(jank) 모니터링, 이미지 캐싱, 플랫폼 채널 예외 처리, 앱 크기(APK/IPA) 관리가 필요합니다.
Flutter 검증 전략
Flutter 검증 전략은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
widget test, golden test(스크린샷 비교), integration_test 패키지로 실제 기기 시나리오까지 검증해야 합니다.
| 품질 축 | 검증 방법 | 완료 기준 |
|---|---|---|
| 정확성 | 정상/실패 케이스를 자동화합니다. | 핵심 시나리오가 재현 가능하게 통과합니다. |
| 회귀 방지 | 버그 수정 시 동일 케이스를 테스트로 남깁니다. | 같은 장애가 다시 배포되지 않습니다. |
| 운영성 | 로그, 메트릭, 알림을 확인합니다. | 문제가 생겼을 때 원인 추적 경로가 있습니다. |