[ 앱 개발자 도전기 : 크로스플랫폼_Flutter ] Flutter 공부 순서 정리.

Data-Forge : 데이터로 세상 이해해보기.·2025년 4월 17일

App_Dev : Flutter

목록 보기

1/9

[ 앱 개발자 도전기 : 크로스플랫폼_Flutter ] Flutter 공부 순서 정리.

▽ Flutter 공부 순서 정리.

목  차

1. 시작하기 전에: Flutter 개요와 개발 환경 준비
2. Dart 언어 & Flutter 개발을 위한 기초 다지기
3. Flutter 위젯 기본기와 레이아웃 설계
4. 상태 관리 완전 정복
5. 라우팅과 내비게이션
6. API 통신과 데이터 처리
7. 플러그인과 네이티브 기능 연동
8. 아키텍처 설계 & 프로젝트 구조화
9. 테마 & 다국어 지원
10. 테스트 및 운영
11. 퍼포먼스 최적화 및 디버깅
12. 고급 UI 구성 및 애니메이션
13. 데이터베이스와 로컬 저장소
14. 앱 보안 및 사용자 인증
15. 플러그인 개발 및 네이티브 연동
16. 앱 구조화 & 유지보수 전략

1. 시작하기 전에: Flutter 개요와 개발 환경 준비

📱1.1 Flutter란?

Flutter의 특징과 장단점
Native 앱 개발과 Flutter의 차이
단일 코드베이스의 개념
Flutter 최신 동향 (Impeller, Desktop/Web 지원) 추가 설명

🛠️1.2 개발 환경 설정

Flutter SDK 설치
VSCode / Android Studio 설정
에뮬레이터와 실기기 테스트 환경 구성
fvm(Flutter Version Manager) 사용법 → 여러 프로젝트 버전 관리

🧪1.3 첫 Flutter 앱 만들기

flutter create 명령어로 기본 프로젝트 생성
디렉토리 구조 이해
Hot Reload / Hot Restart의 개념

🧬 1.4 Flutter의 아키텍처 이해

📦 1.4.1 Flutter 런타임 구조

Flutter 엔진(Dart VM, Skia, 플랫폼 채널)의 역할
impeller vs Skia 렌더링 엔진 비교
Framework → Engine → Embedder 계층 구조
앱이 실행될 때 내부적으로 어떤 단계로 진행되는지

🔁 1.4.2 위젯 트리와 렌더 트리, Element 트리의 관계.

BuildContext, Element Tree, Widget Tree의 관계
Render Tree와 Paint 단계
State 변화가 화면에 반영되는 과정

🧩 1.4.3 플랫폼 채널 구조

Dart ↔ Native (Java/Kotlin, Swift/Obj-C) 간 통신
MethodChannel, EventChannel, BasicMessageChannel 차이
커스텀 네이티브 기능 호출 구조

⚙️ 1.4.4 플러터 앱의 생명주기

main() → runApp()의 흐름
initState, didChangeDependencies, dispose 등 위젯 생명주기
앱이 백그라운드 / 포그라운드로 전환될 때 처리 방법
백그라운드/포그라운드 외에 앱 종료 → cold start 동작 추가

2. 🧠Dart 언어 & Flutter 개발을 위한 기초 다지기

💡 2.1 Dart 언어 소개

Dart의 탄생 배경과 철학
Flutter에서 Dart를 사용하는 이유
JavaScript/Java 개발자 관점에서 본 Dart 특징
Dart 3 특징 (Records, Pattern Matching, Sealed Class)

✍️ 2.2 기본 문법과 데이터 타입

변수 선언 (var, final, const)
주요 데이터 타입 (int, double, String, bool, List, Map)
Null Safety와 Nullable 타입 이해
sound null safety 심화 (late, required, ! 연산자 주의 )

🔁 2.3 제어문과 컬렉션

조건문 (if, else, switch)
반복문 (for, while, for-in)
리스트, 맵, 셋의 활용
컬렉션 if / for / spread 연산자
collection 패키지 확장 가능 (maplndexed, groupBy 등)

🔣 2.4 함수와 람다식

함수 선언 및 호출 방식
Named vs Positional Parameter
익명 함수 & 람다 표현식

🧱 2.5 클래스와 객체지향

클래스 정의 및 생성자 사용
상속, 추상 클래스, 인터페이스
Getter, Setter 사용법
static과 const 차이

❗ 2.6 예외 처리와 에러 핸들링

try-catch-finally 구조
throw와 사용자 정의 예외
async/await와 Future 에러 처리
Future.microtask vs scheduleMicrotask / Isolate 개념

3.📐 Flutter 위젯 기본기와 레이아웃 설계

위젯의 개념과 빌드 메커니즘
상태 관리의 필요성과 차이점 이해
BuildContext 제약 사례 (initState에서 context 사용 불가 등)

📏 3.2 기본 위젯 익히기

Text, Container, Image, Icon, ElevatedButton 등
위젯의 속성 변경 실습

📦 3.3 레이아웃 구성 위젯

Row, Column, Stack, Expanded, Flexible
Padding, Margin, Align, Center 등 배치 속성 위젯
SingleChildScrollView, ListView, GridView 등 스크롤 뷰
반응형 UI ( MediaQuery, LayoutBuilder)

🎯 3.4 레이아웃 실습 예제

카드 UI 만들기
그리드 상품 리스트 UI 구성
Adaptive UI ( Material vs Cupertino 위젯 비교 )

4.🔄 상태 관리 완전 정복

🧍‍ 4.1 상태란 무엇인가?

Widget의 State가 가지는 의미
setState의 사용법과 한계

🎛️ 4.2 Provider 기본 사용법

ChangeNotifier, ChangeNotifierProvider
Consumer / Selector 활용법
MultiProvider로 구조화

🌊 4.3 Riverpod의 등장과 장점

Provider와의 차이점 비교
기본 사용법과 상태 구조화
StateProvider, StateNotifier, AsyncNotifier
Riverpod 2.x (AsyncNotifier, NotifierProvider)

📚 4.4 다양한 상태 관리 비교

Bloc, Cubit, GetX, MobX 등 간단 소개
어떤 상황에서 어떤 패턴이 유리한가?
Bloc-to-Bloc 통신, Hydrated Bloc (상태 영속화)

5. 🌐라우팅과 내비게이션

🗺️ 5.1 기본 라우팅 방식

Navigator.push / pop
named route 설정 및 전달

🧭 5.2 GoRouter & auto_route 소개

선언형 라우팅의 장점
라우터 설정 및 리디렉션 처리
ShellRoute (BottomNavigation) / Redirect 로직 추가

📥 5.3 화면 간 데이터 전달

arguments 전달과 pop 결과 처리
Provider/Riverpod을 활용한 데이터 공유
딥링크 & 푸시 알림 기반 라우팅 추가

6. 📡API 통신과 데이터 처리.

🔗 6.1 http 요청 처리

http 패키지 사용법 (GET/POST)
async/await, try/catch 적용
dio 패키지 (Interceptor, CancelToken)

🗃️ 6.2 JSON 데이터 모델링

JSON → Dart 객체 변환
json_serializable, freezed를 활용한 자동화
Freezed + sealed class 조합

🧪 6.3 실시간 통신

WebSocket 사용법
Firebase Realtime Database, Supabase 실습
GraphQL API 연동 (Hasura, ferry 라이브러리)

📤 6.4 파일 업로드 & 다운로드

Multipart 요청 처리
이미지 업로드 및 다운로드 예제

7. 🔌플러그인과 네이티브 기능 연동

🧰 7.1 대표적인 플러그인 사용법

이미지 선택: image_picker
파일 저장/열기: path_provider, open_file
위치 정보: geolocator
permission_handler → 스토어 심사 대비 권한 전략

🧵 7.2 네이티브 API 연동 실습

MethodChannel을 통한 네이티브 기능 호출
Android/iOS 각각에서 구현 예제
Background Services (WorkManager, android_alarm_manager_plus)

📚 7.3 외부 라이브러리 사용 전략

pub.dev 검색, 버전 관리, 패키지 평가 기준
커뮤니티 vs 공식 패키지 구분

8. 아키텍처 설계 & 프로젝트 구조화

🏗️ 8.1 구조 설계 패턴

기능 기반 vs 도메인 기반 구조
MVVM / Clean Architecture 설계 실습
Clean Architecture 3계층 + UseCase 패턴 추가

🔗 8.2 계층 분리 및 DI 적용

Repository, Service, UseCase 계층
get_it, riverpod 등을 이용한 의존성 주입
injectable + get_it 자동 DI

🧹 8.3 유지보수와 확장성 고려

모듈 분리 전략
공통 위젯/스타일/로직 관리
Monorepo / Feature-based 구조

9. 🎨 테마 & 다국어 지원

🎨 9.1 테마 설정

ThemeData 구성
다크 모드 대응
공통 스타일 모듈화
Material 3 (ColorScheme.fromSeed)

🌍 9.2 다국어 (i18n)

flutter_localizations, intl, easy_localization 사용법
flutter gen-l10n (arb 파일 기반 자동화)
RTL(Right-to-Left) 지원
다국어 파일 관리 (arb/json)
실시간 언어 변경 처리

🧪10. 테스트 및 운영

✅ 테스트의 필요성과 종류 개념 정리

🧪 test 패키지를 활용한 단위 테스트 작성

함수 로직 테스트
모델 클래스 검증

🧱 flutter_test로 위젯 테스트 구현

WidgetTester 이해와 활용
버튼 클릭, 텍스트 입력 등 사용자 인터랙션 테스트

Golden Test(UI Snapshot Test)

📁 테스트 코드 디렉토리 구조화 전략

🧷 10.2 통합 테스트(Integration Test)

🔍 통합 테스트란? 위젯을 실제처럼 구동하여 전체 플로우 테스트

📦 integration_test 패키지 셋업 방법

📱 에뮬레이터 및 실기기에서 통합 테스트 실행

🧪 예제: 로그인 → 홈 이동 플로우 자동화 테스트 작성

🗂️ 테스트 데이터 처리 전략 (목업, 테스트 계정 등)

⚙️ 10.3 테스트 자동화 & CI/CD 파이프라인 연동

🤖 GitHub Actions 또는 Codemagic 기반 자동화 테스트 흐름 구성

🧬 테스트 실행 스크립트 작성 및 실패 시 알림 설정

🪄 PR 시 자동 테스트 → 머지 조건 구성하기

🧯 flaky 테스트 감지 및 안정성 관리 팁

11. ⚡퍼포먼스 최적화 및 디버깅

🚀 11.1 렌더링 최적화

rebuild 최소화, const 활용
RepaintBoundary, shouldRebuild 적용
const 위젯/ RepainBoundary 활용

🎞️ 11.2 프레임 드랍 방지

DevTools 프레임 분석
복잡한 애니메이션 최적화
Impeller vs Skia 성능 비교

🖼️ 11.3 리소스 최적화

이미지 캐싱, 리소스 압축 전략

🧩 11.4 빌드 최적화

릴리즈 빌드 설정, 불필요한 의존성 제거
deferred import(지연 로딩)

12. 🔧 고급 UI 구성 및 애니메이션

🎠 12.1 Animation 기본기

AnimationController, Tween, Curve
AnimatedBuilder, AnimatedWidget

🧩 12.2 커스텀 애니메이션

Hero Animation
Page Transition 애니메이션
Lottie 애니메이션 활용
Rive 애니메이션.

🧙‍♂️ 12.3 복잡한 UI 설계

CustomPainter, Canvas 기반 그리기
CustomScrollView + Sliver 활용
SliverPersistenHeader 심화.

13. 💾 데이터베이스와 로컬 저장소

🧱 13.1 SharedPreferences & SecureStorage

간단한 key-value 저장
보안 저장소 활용법

🗃️ 13.2 SQLite & Drift

Local DB 기본 사용법
ORM 패키지 Drift 사용 예제
Drift Migration & Stream 기반 실시간 업데이트.

🔄 13.3 Hive & Object 저장 방식

Hive의 구조와 장점
박싱(Boxing), Adapter 생성
LazyBox, ObjectBox 비교.

14. 🔐 앱 보안 및 사용자 인증.

👤 14.1 사용자 인증 흐름

이메일/비밀번호, 소셜 로그인
Firebase Auth, Supabase Auth 활용
OAuth 2.0 / OpenID Connect (구글, 카카오 로그인)

🔒 14.2 보안 강화

HTTPS 통신 원칙
SSL Pinning 소개
보안 스토리지, JWT 토큰 관리
Root/Jailbreak Detection

🧾 14.3 인증 상태 유지와 만료 처리

토큰 리프레시 전략
JWT Refresh Token + Sliding Session
로그아웃 및 세션 관리

15. 📦 플러그인 개발 및 네이티브 연동.

🔌 15.1 플랫폼 채널 이해

Dart ↔ Native 통신 구조
MethodChannel, EventChannel 차이 및 성능 비교

🛠️ 15.2 커스텀 플러그인 만들기

flutter create --template=plugin
Android/iOS 구현

☁️ 15.3 플러그인 배포

pub.dev 등록
버전 관리 및 문서 작성
federated plugin 구조

16. 📁 앱 구조화 & 유지보수 전략.

🧱 16.1 구조 설계 패턴

Clean Architecture 기반 분리
기능 모듈화

🧩 16.2 의존성 관리

get_it, provider/riverpod로 DI 구성
very_good_analysis, lint 도입.

🔄 16.3 리팩토링 전략

규모 확장 시 모듈 나누기
lint, dart fix 등 도구 활용

🧭 16.4 지속 가능한 프로젝트 관리

Git 전략, 코드 리뷰, 문서화
dartdoc + 문서화 전략.
신규 팀원 온보딩 전략

17. 🚢 배포 전략 & CI/CD.

🔄 Debug vs Release 빌드 차이

디버깅 정보 포함 여부
성능 및 사이즈 차이 이해

🧩 코드 난독화와 app bundle 제작

Proguard 설정
app bundle vs apk 이해
fastlane 기반 자동 배포

🚀 Firebase App Distribution 및 스토어 배포 흐름

내부 테스트 / 클로즈 베타 / 정식 배포 흐름
Android Play Store / iOS App Store 등록 실습

🤖 GitHub Actions, Codemagic을 활용한 자동화 배포

워크플로우 파일 작성
release 브랜치 기반 자동 배포
flavor별 빌드 (development / staging / production)

18. 🛤️ Supabase / DB 연동 및 백엔드 활용.

🧠 Supabase 구조 개념 이해

Auth, DB, Realtime, Storage 모듈
Row-Level Security (RLS)

🔐 Flutter에서 Supabase 연동 실습

로그인 / 회원가입
DB 쿼리 실행 및 UI 연동

📋 테이블 설계, join 쿼리, 필터링 고급 활용

SQL 로직 작성
Supabase Studio를 활용한 관리

🚀 Supabase Functions, Row-level security 등 고급 기능 소개

trigger / policy / access control 실습
Supabase Functions 심화.

🌐 그 외 DB 연동 방법

Firebase, MongoDB, PostgreSQL 등의 연동 예시

🔧 앱 백엔드로 사용되는 언어 및 프레임워크 소개

Node.js (Express), Python (FastAPI), Go, Firebase Functions 등

19. 📲 코드 푸쉬 기능 존재 여부.

❌ Flutter는 기본적으로 코드 푸쉬 미지원

native 앱은 빌드 후 binary 배포가 기본

🔁 대안 비교: CodePush (React Native), Shorebird (Flutter)

hot reload 기능과의 차이
OTA(Over-The-Air) 업데이트 개념
Shorebird 최신 동향 (Flutter OTA 배포)
Feature Toggle / A/B 테스트 전략

🐦 Shorebird 개요 및 적용 실습

Shorebird CLI 설치 및 초기 설정
flutter build 없이 업데이트 배포 실습

🤔 코드 푸쉬가 필요한 경우 vs 그렇지 않은 경우의 판단 기준

민감한 기능 변경 여부
UX 지속성, 앱 심사 우회 필요 여부

Data-Forge : 데이터로 세상 이해해보기.

Roll with the punches

다음 포스트

[ 앱 개발자 도전기 : 크로스플랫폼_Flutter ] Flutter 공부 순서 정리.

App_Dev : Flutter

[ 앱 개발자 도전기 : 크로스플랫폼_Flutter ] Flutter 공부 순서 정리.

▽ Flutter 공부 순서 정리.

1. 시작하기 전에: Flutter 개요와 개발 환경 준비

📱1.1 Flutter란?

🛠️1.2 개발 환경 설정

🧪1.3 첫 Flutter 앱 만들기

🧬 1.4 Flutter의 아키텍처 이해

📦 1.4.1 Flutter 런타임 구조

🔁 1.4.2 위젯 트리와 렌더 트리, Element 트리의 관계.

🧩 1.4.3 플랫폼 채널 구조

⚙️ 1.4.4 플러터 앱의 생명주기

2. 🧠Dart 언어 & Flutter 개발을 위한 기초 다지기

💡 2.1 Dart 언어 소개

✍️ 2.2 기본 문법과 데이터 타입

🔁 2.3 제어문과 컬렉션

🔣 2.4 함수와 람다식

🧱 2.5 클래스와 객체지향

❗ 2.6 예외 처리와 에러 핸들링

3.📐 Flutter 위젯 기본기와 레이아웃 설계

🔤 3.1 Stateless vs Stateful Widget

📏 3.2 기본 위젯 익히기

📦 3.3 레이아웃 구성 위젯

🎯 3.4 레이아웃 실습 예제

4.🔄 상태 관리 완전 정복

🧍‍ 4.1 상태란 무엇인가?

🎛️ 4.2 Provider 기본 사용법

🌊 4.3 Riverpod의 등장과 장점

📚 4.4 다양한 상태 관리 비교

5. 🌐라우팅과 내비게이션

🗺️ 5.1 기본 라우팅 방식

🧭 5.2 GoRouter & auto_route 소개

📥 5.3 화면 간 데이터 전달

6. 📡API 통신과 데이터 처리.

🔗 6.1 http 요청 처리

🗃️ 6.2 JSON 데이터 모델링

🧪 6.3 실시간 통신

📤 6.4 파일 업로드 & 다운로드

7. 🔌플러그인과 네이티브 기능 연동

🧰 7.1 대표적인 플러그인 사용법

🧵 7.2 네이티브 API 연동 실습

📚 7.3 외부 라이브러리 사용 전략

8. 아키텍처 설계 & 프로젝트 구조화

🏗️ 8.1 구조 설계 패턴

🔗 8.2 계층 분리 및 DI 적용

🧹 8.3 유지보수와 확장성 고려

9. 🎨 테마 & 다국어 지원

🎨 9.1 테마 설정

🌍 9.2 다국어 (i18n)

🧪10. 테스트 및 운영

🔬 10.1 단위 테스트(Unit Test) & 위젯 테스트(Widget Test)

✅ 테스트의 필요성과 종류 개념 정리

🧪 test 패키지를 활용한 단위 테스트 작성

🧱 flutter_test로 위젯 테스트 구현

Golden Test(UI Snapshot Test)

📁 테스트 코드 디렉토리 구조화 전략

🧷 10.2 통합 테스트(Integration Test)

🔍 통합 테스트란? 위젯을 실제처럼 구동하여 전체 플로우 테스트

📦 integration_test 패키지 셋업 방법

📱 에뮬레이터 및 실기기에서 통합 테스트 실행

🧪 예제: 로그인 → 홈 이동 플로우 자동화 테스트 작성

🗂️ 테스트 데이터 처리 전략 (목업, 테스트 계정 등)

⚙️ 10.3 테스트 자동화 & CI/CD 파이프라인 연동

🤖 GitHub Actions 또는 Codemagic 기반 자동화 테스트 흐름 구성

🧬 테스트 실행 스크립트 작성 및 실패 시 알림 설정

🪄 PR 시 자동 테스트 → 머지 조건 구성하기

🧯 flaky 테스트 감지 및 안정성 관리 팁

11. ⚡퍼포먼스 최적화 및 디버깅

🚀 11.1 렌더링 최적화

🎞️ 11.2 프레임 드랍 방지

🖼️ 11.3 리소스 최적화

🧩 11.4 빌드 최적화

12. 🔧 고급 UI 구성 및 애니메이션

🎠 12.1 Animation 기본기

🧩 12.2 커스텀 애니메이션

🧙‍♂️ 12.3 복잡한 UI 설계

13. 💾 데이터베이스와 로컬 저장소

🧱 13.1 SharedPreferences & SecureStorage

🗃️ 13.2 SQLite & Drift