누구나 인정하는 대세 Flutter, 실제 기업에서는 Flutter를 어떻게 활용하고 있을까요?

이제 핵심은 [ Flutter로 Native 앱과 차이가 없을 정도의 결과물을 만들 수 있느냐 ] 입니다.
단순히 Flutter 자체를 배우는 것을 넘어서, 높은 수준으로 완성도 있는 서비스를 만들기 위해
Flutter를 자유자재로 사용할 방법을 배워보세요!

오직 패스트캠퍼스에만 있는
Flutter 200% 활용을 위한 프로젝트

단순히 예쁜 UI 구현이 목적이거나, 앱을 그냥 따라 만들어보는 강의가 아닙니다!

실제 서비스 되는 완성도 높은 앱 개발을 위한 Flutter 강의입니다.

Point 1

깊이와 트렌드를 모두 반영한
실무형 2개 프로젝트

Flutter만 활용한 대규모 앱 구현부터, Native 앱에 Flutter 도입까지
실제 기업에서 Flutter를 활용하는 2가지 방법을 완벽하게 담은 프로젝트를 소개합니다.

ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide
ImageSlide

* 위 이미지는 예시 이미지로 실제 강의 자료와 상이할 수 있습니다.

| 구현 단계별 주요 학습 포인트

ImageSlide<b style="font-size:16px">
상태관리, 클린 아키텍처 등 사전 개발<br>
환경 설정을 통한 안정성 높은 앱 구현법 학습
</b>

<hr style="border: solid 0.5px #EBEBEB;">
<span style="color:#808080;font-sizze:12px">#CI/CD #클린아키텍처</span>

<hr style="border: solid 0.5px #EBEBEB;">

<details>
<summary>
<span style="font-size:14px;color:#00A91E;">
▸ 학습내용 자세히보기</span></summary>
<span style="color:#808080;">
∙ 앱 개발 환경 및 도구 설정<br>
∙ 프로젝트 구조 설정<br>
∙ 프로젝트 배포 환경(CI/CD) 구성
</span></details>

<style>
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
</style>
상태관리, 클린 아키텍처 등 사전 개발
환경 설정을 통한 안정성 높은 앱 구현법 학습

#CI/CD #클린아키텍처
▸ 학습내용 자세히보기 ∙ 앱 개발 환경 및 도구 설정
∙ 프로젝트 구조 설정
∙ 프로젝트 배포 환경(CI/CD) 구성
ImageSlide<b style="font-size:16px">
GoRouter를 통해 라우트 구조,<br>
다양한 화면 전환 패턴 등 화면 구성 학습 
</b>
<hr style="border: solid 0.5px #EBEBEB ">
<span style="color:#808080;">#GoRouter #Navigator 2.0 </span>

<hr style="border: solid 0.5px #EBEBEB;">

<details>
<summary>
<span style="font-size:14px;color:#00A91E;">
▸ 학습내용 자세히보기</span></summary>
<span style="color:#808080;">
∙ Go Router를 활용한 다양한 화면 전환 패턴<br>
∙ 리디렉션 & 가드 구현, 에러 및 404 화면 처리
</span></details>

<style>
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
</style>
GoRouter를 통해 라우트 구조,
다양한 화면 전환 패턴 등 화면 구성 학습

#GoRouter #Navigator 2.0
▸ 학습내용 자세히보기 ∙ Go Router를 활용한 다양한 화면 전환 패턴
∙ 리디렉션 & 가드 구현, 에러 및 404 화면 처리
ImageSlide<b style="font-size:16px">
Dio 패키지를 활용한<br>
빠르고 간편한 네트워크 요청 마스터
</b>

<hr style="border: solid 0.5px #EBEBEB;">
<span style="color:#808080;">
#Dio #Retrofit #Freezed</span>

<hr style="border: solid 0.5px #EBEBEB;">

<details>
<summary>
<span style="font-size:14px;color:#00A91E;">
▸ 학습내용 자세히보기</span></summary>
<span style="color:#808080;">
∙ Dio 패키지를 활용한 파일 업로드/다운로드, 에러 핸들링<br>
∙ Dio & Retrofit & Freezed와 Mock up으로 웹툰 정보 및 좋아요 페이지 구현<br>
∙ Code gen으로 네트워크 요청 처리
</span></details>

<style>
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
</style>
Dio 패키지를 활용한
빠르고 간편한 네트워크 요청 마스터

#Dio #Retrofit #Freezed
▸ 학습내용 자세히보기 ∙ Dio 패키지를 활용한 파일 업로드/다운로드, 에러 핸들링
∙ Dio & Retrofit & Freezed와 Mock up으로 웹툰 정보 및 좋아요 페이지 구현
∙ Code gen으로 네트워크 요청 처리
ImageSlide<b style="font-size:16px">
WebView를 통해 구현할 수 있는<br>
다양한 화면 구성 (결제, 로그인, 콘텐츠 등)
</b>

<hr style="border: solid 0.5px #EBEBEB;">
<span style="color:#808080;">
#Webview #InAppWebView</span>

<hr style="border: solid 0.5px #EBEBEB;">

<details>
<summary>
<span style="font-size:14px;color:#00A91E;">
▸ 학습내용 자세히보기</span></summary>
<span style="color:#808080;">
∙ 소셜 로그인, 결제 시스템 통합 페이지 구현<br>
∙ 동적 콘텐츠 표시, 멀티미디어 콘텐츠 처리<br>
∙ 결제 모듈 호출
</span></details>

<style>
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
</style>
WebView를 통해 구현할 수 있는
다양한 화면 구성 (결제, 로그인, 콘텐츠 등)

#Webview #InAppWebView
▸ 학습내용 자세히보기 ∙ 소셜 로그인, 결제 시스템 통합 페이지 구현
∙ 동적 콘텐츠 표시, 멀티미디어 콘텐츠 처리
∙ 결제 모듈 호출
ImageSlide<b style="font-size:16px">
Native 기능을 연동할 수 있는 Platform Channel과 대체할 수 있는 라이브러리 학습
</b>

<hr style="border: solid 0.5px #EBEBEB;">
<span style="color:#808080;">
#Platform Channel #ffi #Pigeon</span>

<hr style="border: solid 0.5px #EBEBEB;">

<details>
<summary>
<span style="font-size:14px;color:#00A91E;">
▸ 학습내용 자세히보기</span></summary>
<span style="color:#808080;">
∙ Platform Channel vs Flutter Pigeon 차이점<br>
∙ OpenCV를 활용한 카메라 기능 구현
</span></details>

<style>
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
</style>
Native 기능을 연동할 수 있는 Platform Channel과 대체할 수 있는 라이브러리 학습
#Platform Channel #ffi #Pigeon
▸ 학습내용 자세히보기 ∙ Platform Channel vs Flutter Pigeon 차이점
∙ OpenCV를 활용한 카메라 기능 구현
ImageSlide<b style="font-size:16px">
안정화된 앱을 위한 다양한 종류의 테스트와 DevTools를 통한 디버깅, 성능 최적화 학습
</b>

<hr style="border: solid 0.5px #EBEBEB;">
<span style="color:#808080;">
#GIthub Actions #DevTools</span>

<hr style="border: solid 0.5px #EBEBEB;">

<details>
<summary>
<span style="font-size:14px;color:#00A91E;">
▸ 학습내용 자세히보기</span></summary>
<span style="color:#808080;">
∙ 단위 테스트, 통합 테스트, 위젯 테스트 진행<br>
∙ Github Actions를 활용한 테스트 자동화 
</span></details>

<style>
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
</style>
안정화된 앱을 위한 다양한 종류의 테스트와 DevTools를 통한 디버깅, 성능 최적화 학습
#GIthub Actions #DevTools
▸ 학습내용 자세히보기 ∙ 단위 테스트, 통합 테스트, 위젯 테스트 진행
∙ Github Actions를 활용한 테스트 자동화

요즘 대기업 트렌드는 기존 Native 앱의 일부 기능을 새롭게 Flutter로 개발하는 것!

실제 금융회사에서 Native 앱에 Flutter를 도입해본 강사님이 알려주는
Add-to-app 프로젝트는 오직 이 강의에서만 배울 수 있습니다.

▸ Add-to-app 방식이란? Native 앱 프로젝트에 Flutter가 모듈이나 라이브러리 형태로 포함되는 방식으로, 기존에 존재하던 네이티브 앱 위에 새로운 페이지를 빠르게 추가 또는 변경하고자 할 때 OS별로 따로 개발하는 방식이 아닌 Flutter로 모듈을 만들어 안드로이드/iOS 앱에 동시에 적용합니다. 주로 레거시가 많은 대규모 앱에서 사용하고 있는 방식으로 한정된 자원으로 빠르게 새로운 기능/화면을 추가할 수 있다는 장점을 가지고 있습니다.

* 위 이미지는 예시 이미지로 실제 강의 자료와 상이할 수 있습니다.

Flutter 단독 개발이 아닌 이미 완성된 Native 기반 금융앱에 Flutter 로 개발된 화면을 추가합니다.

Native OS로 만들어진 간단한 애플리케이션에 Flutter로 새로운 기능을 추가하는 프로세스를 실무와 동일한 방식으로 진행합니다.
Add-to-app 방식 적용 시 어려울 수 있는 개발 환경, 디버깅, 배포 프로세스 방식을 실습합니다.

강사님의 한 마디
Flutter를 도입하고 싶지만, 기존 Native app을 유지할 수 밖에 없는 경우 Flutter Add-to-App이 좋은 선택이 될 것 같습니다. 하지만 기존 Native 앱 개발 방식에 비해 도입 사례나 예제, 강의 등은 찾기가 쉽지 않아, 최근에 Flutter Add-to-App을 실제 도입한 저의 경험을 바탕으로 빠르고 쉽게 도입할 수 있도록 도와드리겠습니다.

Point 2

앱 개발 심화 & 실전 개념의 이해는 물론,
각 개념들의 상호작용 방식까지 완전 정복

개별적인 심화 개념 학습은 그만! 심화 개념만 배운다고 프로젝트에서 바로 사용할 수 있는게 아닙니다.
진짜 내 프로젝트에 바로 사용할 수 있도록 연계해서 학습해요!

| Project
ChatGPT를 이용한
챗봇 만들기

2개 개념, 7개 기술 스택
ImageSlide<b>① 고급 UI 구현</b>
① 고급 UI 구현
Flutter 위젯의 작동 원리와 생명 주기 학습합니다. 또한 Sliver, Inherited Widget을 학습하며 고급 Flutter UI를 구현해봅니다.
▸ 기술스택 ∙ Flutter Build Context
∙ Sliver
∙ StreamBuilder
∙ FutureBuilder
∙ Inherited Widget
ImageSlide<b>② 캐싱전략과 비동기 프로그래밍</b>
② 캐싱전략과 비동기 프로그래밍
비동기 통신의 기본 원리와 Flutter에서의 적용 방법부터 핵심인 Future와 Stream의 개념과 사용법 및 차이점을 학습합니다. 로컬 데이터베이스 캐싱 필요성과 메커니즘을 Hive 패키지를 활용하여 캐싱 전략을 배웁니다.
▸ 기술스택 ∙ HTTP
∙ Hive

| Project
클린 아키텍처 실전 적용
feat. Todo 앱

2개 개념, 7개 기술 스택
ImageSlide<b>① 클린 아키텍처</b>
① 클린 아키텍처
클린 아키텍처의 구성 요소인 프레젠테이션 레이어, 도메인 레이어, 데이터 레이어를 학습합니다. 대표적으로 자주 쓰이는 BLoC, Riverpod를 배우고 예제인 ToDo 앱에 적용해봅니다.
▸ 기술스택 ∙ BLoC
∙ Riverpod
∙ Retrofit
∙ Dio
ImageSlide<b>② 의존성 주입</b>
② 의존성 주입
클린 아키텍처의 구성 요소 중 하나인 의존성 주입을 학습하고 ToDo 앱 적용을 통해 마무리합니다.
▸ 기술스택 ∙ get_it
∙ injectable
∙ Riverpod

| Project
웹툰 앱으로 끝내는 실전 Flutter 앱 개발
9개 개념, 23개 기술 스택

ImageSlide<b>① CI/CD & 배포 환경 설정</b>
① CI/CD & 배포 환경 설정
Flutter 안에서 CI/CD의 개념과 기본 원리를 학습하고, Fliutter Flavor를 통해 플랫폼별 빌드 및 배포 환경을 설정합니다.
▸ 기술스택 ∙ Fastlane
∙ Github Actions
ImageSlide<b>② 상태관리</b>
② 상태관리
앞서 클린 아키텍처에서 학습한 Riverpod을 적용해 웹툰 앱의 상태관리 환경 설정을 마무리합니다.
▸ 기술스택 ∙ Riverpod
ImageSlide<b>③ 라우팅</b>
③ 라우팅
라우팅에 쓰이는 GoRouter와 Navigator 2.0의 차이를 학습하고, 다양한 화면 전환 패턴, 에러 화면 처리 등을 실습해봅니다.
▸ 기술스택 ∙ GoRouter
∙ Navigator 2.0
ImageSlide<b>④ 백엔드 통신</b>
④ 백엔드 통신
백엔드 대용으로 쓰는 Mock Server의 개념과 OS별 Postman 설치와 초기 셋팅 방법, 임의로 오류 상황을 만들어 소통하는 방법을 학습합니다.
▸ 기술스택 ∙ PostMan
ImageSlide<b>⑤ 네트워크 요청</b>
⑤ 네트워크 요청
파일 업로드/다운로드 등 Dio 패키지의 다양한 기능을 학습합니다. Dio와 Retrofit, Freezed의 조합으로 빠르고 간편한 네트워크 통신을 구축합니다.
▸ 기술스택 ∙ Dio
∙ Retrofit
∙ Json_Serializable
ImageSlide<b>⑥ WebView</b>
⑥ WebView
WebView의 작동 원리, WebView와 InAppWebView의 차이점을 학습합니다. WebView를 적용한 다양한 화면을 구현합니다.
▸ 기술스택 ∙ Webview
∙ InAppWebView
ImageSlide<b>⑦ Concurrency</b>
⑦ Concurrency
Isolate, Compute를 사용하여 복잡한 작업을 분리하는 방법 학습과 백그라운드 처리, 데이터 처리, 네트워크 요청 등을 실습합니다.
▸ 기술스택 ∙ Isolate
∙ Compute
ImageSlide<b>⑧ Native 요소</b>
⑧ Native 요소
프로모션 페이지, 카메라 필터 등을 Platform Channel과 C 언어 라이브러리를 활용하여 구현합니다.
▸ 기술스택 ∙ Platform Channel
∙ ffi
∙ pigeon
∙ local notification
∙ OpenCV
ImageSlide<b>⑨ 테스트 & 디버깅</b>
⑨ 테스트 & 디버깅
다양한 테스트의 정의, 종류와 목적을 학습합니다. Flutter 앱 개발 시 자주 하는 테스트인 단위 테스트, 위젯 테스트, 통합 테스트 등을 학습합니다.
▸ 기술스택 ∙ Unit Test
∙ Widget Test
∙ Integration Test
∙ 테스트 자동화
∙ DevTools

ImageSlide<b style="color:#004881;">| Project</b>
<br>
<b style="font-size:20px;color:#004881;">
Flutter Add to App
</b><br>
2개 개념, 2개 기술 스택
| Project
Flutter Add to App
2개 개념, 2개 기술 스택
ImageSlide<b>① Flutter Add to app</b>
① Flutter Add to app
Flutter Add to app 도입 후기와 개발툴 소개, 프로젝트를 생성해 Native 앱에 Flutter 화면을 신규 개발해 도입합니다.
▸ 기술스택 ∙ Flutter Module
ImageSlide<b>② 코드푸시</b>
② 코드푸시
React Native의 혁신적인 기능인 Code Push를 Flutter에서 Shorebird를 활용하여 어떻게 구현할 수 있을지 학습합니다.
▸ 기술스택 ∙ Shorebird

강사님의 한 마디 by Bluefrog 기술 이사 양수장 강사님
Flutter는 처음 배우기는 쉽지만, 숙달하기에는 어려운 러닝 커브를 가지고 있습니다. 이때 심화 개념이라는 건 단순히 어려운 개념이 아니라 실제 프로젝트, 서비스에 적용하기 어려운 개념을 의미합니다. 대부분 Flutter를 시작할 때 기능 구현에 초점을 맞춰 학습하다보니 여러 개념들이 서로 어떻게 연계되는지 파악하지 못하는 경우가 있습니다. 그래서 이번 강의에서는 하나의 개념과 기능을 설명할 때 해당 개념이 어떻게 하나의 기능을 구현할 수 있는지 과정에 초점을 맞춰 구성했습니다.

모바일 앱 개발이 처음이신가요?
단순 기능 구현에 초점을 맞춘 학습으로는 원하는 수준의 결과물을 만들기 어렵습니다.

Point 3

실무에서 가장 빈번하게 발생하는
Flutter & 앱 개발 관련 트러블 슈팅

실제 프로젝트에서 중요한 것은 문제가 발생했을 때 원인을 분석하고 해결 과정 입니다.
Native 앱 대비 Flutter가 가지고 있는 문제점 & 앱 개발 전반에서 발생하는 문제에 대한 접근 방법부터 해결까지 배워가세요!

ImageSlide
ImageSlide

Point 4

UI 구현 & 심화 개념 이해 & 응용 대규모 프로젝트까지
Flutter 실력을 높여줄 꽉찬 약 48시간 커리큘럼

Flutter를 더 다양하게 응용 & 자유자재로 활용하고 싶은 분들을 위해
필요한 모든 것을 체계적으로 꾹꾹 하나의 커리큘럼에 눌러 담았습니다.

Point 5

완성도 높은 앱 개발할 수 있도록 준비한 2가지 부록

앱 개발이 처음이어도, Flutter가 처음이어도 문제없습니다.
기업에서 우대하는 양손잡이 개발자가 되고 싶다면 Native & Flutter 앱 개발 기초 강의도 함께 챙겨가세요!

* 약 10시간 분량의 영상 강의가 제공될 예정입니다.
* [네카라쿠배 5개 앱으로 완성하는 iOS 앱 개발] 강의의 Part 1과
[35개 프로젝트로 배우는Android 앱 개발]강의의 Part 0을 사용할 예정입니다.

* 약 2시간 분량의 영상 강의가 제공될 예정입니다.
* 강의 2차 오픈 일정에 맞춰 제공될 예정입니다.

구성이 좋아도 아무나 가르치면 의미가 없습니다.
Flutter 관련 찾기 힘든 정보들을 알려드리고, 실제 서비스 도입 경험까지 전수해주실 전문가분들을 모셨습니다!

미리보기

아직 고민 중이신가요?
강의를 미리보고 결정하세요!

| 오리엔테이션 |

강사 및 강의 커리큘럼, 실습 환경 소개

강사 소개

빠르고, 실력있는 전문가에게 배우는 Flutter

Flutter와 관련된 정보를 누구보다 빠르게 도입 & 공유하는 커뮤니티 오거나이저와
실제 대기업 앱에 Flutter를 도입해본 전문가가 알려주는 Flutter는 다릅니다.

양수장 강사님
| Part 1 ∙ Flutter 기초 부록

Bluefrog 기술 이사
∙ GDG Songdo Organizer & Flutter Songdo Organizer
∙ Flutter Forward Extended Korea 등 Flutter 행사 다수 참여 강연
- 2023 Google I/O Extended Seoul : Flutter에 Clean Architecture를 얹어보자
- 2023 Google I/O Extended Daejeon : 처음 시작하는 Flutter
Flutter는 입문하기 쉽지만 막상 숙달하기 어려운, 그런 프레임워크인 것 같습니다. 이제 막 Flutter 주니어 개발자가 된 분들이 이번 강의를 수강하시게 된다면, Flutter UI에 대한 근본적인 이해와 고급기술, 실제 앱 개발 프로젝트에서 적용할 수 있는 실용적인 능력을 키울 수 있습니다. 또한, 클린 아키텍처 개념을 배워 체계적이고 전문적인 앱 개발자로 성장할 수 있을 것입니다. 이번 강의 제작 과정에서, 저의 모바일 앱 개발 경험을 돌아보며 용케 여기까지 왔구나 생각했습니다. 이 강의가 주니어 개발자들에게 도움이 되길 바라며, 여러분 모두 이 강의로부터 유용한 인사이트와 지식을 얻어 가셨으면 좋겠습니다.
송승현 강사님
| Part 2

테이블매니저 모바일 앱 개발 리드
∙ Flutter Seoul Organizer
∙ Flutter I/O Extended Korea 등 Flutter 행사 다수 참여 강연
- Flutter MeetUp - In Sondo : 플러터로 설명하는 WebSite와 WebApp의 차이
- Flutter Festival Korea : Flutter에 Architecture & Design Pattern 적용하기
이번 강의는 "실무에서 발생할 수 있는 시나리오" 와 "네이티브의 기능"을 Flutter 실습예제로 경험하는것에 초점을 맞추었습니다. Flutter 개발에 입문하는 네이티브 개발자와 Flutter 개발자에게 실전에서 사용할 수 있는 다양한 경험을 제공해드리고자 합니다. 이 강의가 Flutter 개발을 공부하는 분들에게 좋은 이정표가 되었으면 합니다. 중요한 건 꺾이지 않는 마음입니다!
김성재 강사님
| Part 3

H증권 채널개발팀 앱 파트, 최근 Flutter Add-to-app 도입 프로젝트 리드
∙ 여러 간편투자앱, 저축은행앱 등 Native 금융앱 개발 및 운영 리드 진행
∙ 그외 React Native 및 Flutter와 같은 크로스플랫폼 프레임워크로 앱 개발 진행
지난 10여년간 앱 개발을 꾸준히 해왔습니다. 주로 iOS Native였으며 React Native 및 Android native도 간간히 진행해 왔습니다. 최근에 Flutter의 매력에 빠져서 신규앱 및 Add-to-App 통한 Native에 추가를 진행하고 있습니다. 이번 강의를 통해 실전에서의 경험을 바탕으로 한 App 개발 방식 소개를 하며 현재 상황에 맞는 개발 방식 선택에 도움 드리고 Flutter Add-to-App을 가장 최근 대규모 프로젝트에서 실제 도입하여 구현한 경험 바탕으로 Flutter Add-to-App을 쉽게 익힐 수 있도록 도와드리겠습니다.

FAST CAMPUS ONLY

약 48시간 분량의 완성도 높은 강의
가격은 타사 대비 1/7 저렴하게!

단 한 번의 구매로 언제든 원하는 만큼 학습하세요!
하나의 강의로 앱 개발 전 과정을 학습하며 완성도 및 연계성 높은 학습이 가능합니다.

쏟아지는 혜택, 압도적인 격차
월 1만 원대로 이 모든 내용을 평생 소장 & 무한 수강!

대규모 앱 개발부터 Native 앱 도입까지 : Flutter의 모든 것 초격차 패키지 Online
정가550,000
할인 금액(-67%) 369,000
현재 판매가181,000

월 15,084원

* 12개월 무이자 할부 시