인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

최고의 크로스플랫폼 Flutter, Flutter로 Web을 개발해보세요.

(5.0) 수강평 5개

수강생 58명

Thumbnail

초급자를 위해 준비한
[웹 개발, Flutter] 강의입니다.

이런 걸
배워요!

  • Flutter Responsive Web

  • Custom Widget

  • Flutter AWS 배포

  • Style 설정

  • ScrollBehavior

  • KeyboardListener

  • DropdownButton

  • Dialog

  • Beamer

Flutter로 Web을 개발해보세요

최고의 크로스 플랫폼 Flutter로 App 뿐만 아니라 Web도 개발이 가능합니다.

하나의 프레임워크와 언어로 앱과 웹을 개발해보세요.

이런 분들께 추천해요

Flutter를 다뤄본 사람

Flutter를 한 번이라도 다뤄본 사람들은 어렵지 않게 따라올 수 있습니다.

App 개발자

App 개발자 또한 Web 개발에 관심이 많지만 사용 언어와 프레임워크가 달라서 새로 공부를 해야했습니다. 이제는 Flutter로 App과 반응형 웹을 만들어 보세요

Web 개발이 필요한 서비스

이미 Flutter App 서비스를 운형하고 있는 상태에서 Web 서비스가 필요한 경우 새로운 프레임워크를 도입할 필요 없이 Flutter 하나로 전부 소화할 수 있습니다.

이 강의의 특징

인식의 변화

Flutter로도 충분히 Web을 개발할 수 있다는 인식 변화가 우선입니다. 하나의 프레임워크로 App과 Web을 개발할 수 있다는 것은 개발자로서의 자신감 향상과 더불어 할 수 있는 영역이 대폭 넓어질 수 있습니다.


Web 중심의 Flutter 강의

기존의 강의들은 대부분 App 중심의 강의였습니다. 이 강의는 Web 개발에 집중한 Flutter 강의입니다.


낮은 라이브러리 의존성

대부분의 것들을 직접 코드로 작성합니다. 때문에 라이브러리의 의존성이 낮아서 버전 변경에 유연합니다. 또한 직접 코드를 작성하기 때문에 Framework에 대한 이해도가 높아집니다.


빠른 강의 속도

강의 길이를 줄이고, 속도는 빠르게 진행했습니다.

이런 내용을 배워요

  • Responsive Web


    반응형 웹을 개발하는 방법에 대해 배울 것입니다. 웹에서 발생하는 다양한 화면 사이즈에 어떻게 대응하면 좋을지 배울 수 있습니다.

  • 위젯에 대한 이해
    커스텀 위젯을 많이 사용하기 때문에 위젯들에 대한 이해도를 높일 수 있습니다.

  • 구조 설계


    Web을 개발할 때 필요한 구조를 설계하는 방법을 배울 수 있습니다.

  • AWS S3 배포


    AWS의 S3에 Flutter로 만든 웹을 배포할 수 있습니다.

  • Style 설정


    적절한 스타일 설정 방법을 배울 수 있습니다. FrontEnd에서는 스타일들을 어떤 방식으로 설정할지가 항상 고민입니다. 많은 방법 중 하나가 될 수 있는 Style 설정 방법을 배울 수 있습니다.

강의 듣는 방법

코드를 빠르게 따라치면서 강의를 완료하는 것을 추천드립니다. 강의의 호흡이 길거나 전체적인 분량이 많은 경우에는 지치는 경우가 많습니다. 그래서 속도감을 유지하는 것이 필요합니다. 전체적인 과정을 마치고 난 후에 부족한 부분이나 디테일한 것들을 공부하는 것이 좋습니다.

물론 주의할 것들은 있습니다. 빠른 속도를 유지하되 아래의 항목들에 집중해서 강의를 들어주시기 바랍니다.

  • 화면 레이아웃의 변화에 따라서 위젯을 구성하는 방법


  • Custom Util과 Widget들이 어떤 역할을 하는지

  • 나라면 이러한 상황에서 어떻게 구조를 잡고 Class/Widget들을 공통화 할 것인지

  • 더 나아가 내가 당면한 문제점이 있다면 어떻게 이것을 해결할 것인지

수강 후에는

  • 반응형 UI를 어떠한 식으로 만드는지 배울 수 있습니다.


  • Flutter framework와 widget에 대해 이해도가 높아집니다.

  • Flutter로 웹을 개발하고, AWS에 배포까지 할 수 있습니다.

  • 개발 속도를 향상시킬 수 있습니다.

  • 개발자 한 명이 더 많은 플랫폼을 다룰 수 있습니다.

강의 시리즈

  • 이 강의는 단발로 끝나는 것이 아닙니다. 한 명의 개발자가 App, Web, Infra, Server까지 모두 다룰 수 있는 커리큘럼을 준비하고 있습니다.

  1. Flutter Responsive Web

  2. Flutter Web SEO

  3. Flutter API with State management

  4. Dart Server

  5. Flutter Real Project with Server

  6. Flutter Framework exploration


Flutter SEO에 대하여

많은 Flutter 개발자들이 Flutter Web은 구글에서 검색이 안 되는 것으로 알고 있습니다. 저 또한 예전에는 그렇게 알고 있었습니다. 하지만 이는 잘못된 지식입니다. Flutter로 만든 Web도 구글에 검색이 되고, SEO 최적화 작업도 할 수 있습니다.

구글에 '샐링잇' or 'sailing-it'을 검색해보세요. Flutter로 만든 제 회사의 홈페이지가 검색되는 것을 볼 수 있습니다.(https://sailing-it.com/)

물론 이를 위해서는 추가적인 작업들이 필요합니다. 그래서 직접 SEO 패키지(https://pub.dev/packages/flutter_seo )를 만들어서 pub.dev에 업로드 했습니다. 현재 강의인 Flutter Responsive Web 이후에 제가 만든 패키지를 활용해서 구글에서 검색이 될 수 있도록 SEO를 적용한 Flutter Web SEO 강의를 진행할 예정입니다.

수강 전 참고 사항

실습 환경

  • Flutter Web을 개발할 것이기 때문에 Windows와 macOS 둘 다 가능합니다.

  • 강의에서는 Flutter 3.22.2, Dart 3.4.3로 진행했습니다. 이보다 낮은 버전에서도 가능합니다.

선수 지식 및 유의사항

  • 기본적인 dart 언어 사용법과 Flutter 사용 경험이 있다면 충분합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Flutter 초급

  • Flutter 중급

  • Flutter를 접해본 개발자

  • Flutter로 Web을 개발하고 싶은 개발자

선수 지식,
필요할까요?

  • Flutter

  • Dart

안녕하세요
김진한입니다.

수강생 수

58

수강평 수

5

강의 평점

5.0

강의 수

1

안녕하세요

샐링잇(Sailing-it)대표 김진한입니다.

https://sailing-it.com/

 

  •  Native App 개발자로 시작해 현재 '샐링잇(sailing-it)'이라는 회사를 운영하고 있습니다.

  • 실무에서 Flutter App, Web을 사용하고 있습니다.

    시장에서 Flutter의 긍정적인 반응을 몸소 체험하고 있습니다.

  • Offline 국비지원, 기업 Flutter 강사로 활동중입니다.

  • Flutter와 Native앱 개발 블로그를 운영중입니다.
    https://jinhan38.com/

커리큘럼

전체

42개 ∙ (6시간 32분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!