파닥파닥 Flutter (빠르고 가볍게 Flutter 흔들기)
    • 01
      PREFACE
    • 구름MEDIA 추천사
      책 소개
    • 02
      What is Flutter
    • Flutter?
      크로스 플랫폼이란?
      Flutter vs React Native
      Flutter로 만들어진 앱들
    • 03
      환경 구축하기
    • Flutter 개발을 위한 환경
      Mac OS에서 환경 구축하기
      Windows에서 환경 구축하기
      Git 설치
    • 04
      Dart 기초 다지기
    • Hello, Flutter
      자료형
      변수
      조건문
      반복문 (for)
      반복문 (for-in)
      조건문 (while)
      함수란?
      객체로서의 함수
      함수의 인자
      주석
      임포트
      클래스
      상속
      추상 클래스
      인터페이스
      정리
    • 05
      Let's Toy Project - Part1
    • 무엇을 만들까요?
      starter 프로젝트 가져오기
      코드 분석
      화면(UI) 구축 시작하기
      상단 화면 개발
      탭 화면 개발
      Widget의 생명주기
      리스트 화면 (일반) 개발
      리스트 화면 (Grid) 개발
      상세 화면 연결
      상세 화면 개발
      포스터와 간략 정보 화면 개발
      줄거리 화면 개발
      감독 및 출연진 정보 화면 개발
      한줄평 화면 개발
      댓글 입력 화면 개발
      기타 마무리 작업
    • 06
      Let's Toy Project - Part2
    • HTTP 알아보기
      데이터 연동 준비
      영화 목록 데이터 요청
      팝업 항목 선택에 따른 영화 목록 호출
      영화 상세 데이터 요청
      영화 한줄평 데이터 요청
      영화 한줄평 입력 요청
      프로젝트를 마무리하며
    • 07
      맺음말
    • 맺음말
    Flutter?
    02 What is Flutter
    Flutter?

    Flutter는 단일 코드(dart) 를 기반으로,
    모바일(Android, iOS), 웹, 데스크톱 등에서 새로운 서비스를 빌드할 수 있는 앱 SDK(Software Development Kit)입니다.

    Why Flutter?

    Flutter를 이용하면서 얻는 이점은 무엇일까요?

    • 높은 생산성
      1. 단일 코드로 다양한 플랫폼을 대응합니다.
      2. 선언적 문법을 통해 UI를 직관적으로 확인하며, 적은 코드로 더 많은 것을 할 수 있습니다.
      3. 다양한 기능을 활용해 빠른 개발이 가능합니다.
        1. hot Reload
        2. hot Restart
        3. Debugging with BreakPoint
    • 아름다운 UX
      1. Google의 Material 디자인, Apple의 Cupertino 디자인에 맞는 다양한 위젯을 사용할 수 있습니다.
      2. Hero 등과 같이 아름다운 애니메이션을 쉽게 구현할 수 있습니다.


    핵심 원리

    1. 모든 것은 'Widget'이다.

    Widget은 Flutter 앱의 UI를 이루는 기본 구성 요소입니다.

    기존에 다른 프레임워크에서는 뷰, 컨트롤러, 레이아웃, 속성들이 분리되어 있었지만, Flutter는 이러한 것들을 모두 Widget으로 관리합니다.

    다음의 것들이 Widget의 대표 예시입니다.

    • 디스플레이 위젯 (버튼, 이미지 등)
    • 레이아웃 위젯 (패딩, 마진 등등)
    • 스타일 위젯 (폰트, 색상 등)

    Widget은 Widget 간 조합을 통해 계층 구조를 형성합니다. 이러한 구조에서 자식 Widget은 부모의 속성을 상속받습니다.

    이런 구조를 가짐으로서, Widget을 새로 그려줄 때, 필요한 부분만 새로 그려줌으로서 효율성과 성능을 극대화시킬 수 있습니다.


    default

    그림 1. Widget의 구성

    2. 네이티브에 뒤쳐지지 않는 성능

    기존의 도구는 작성한 코드가 모든 플랫폼을 아우를 수 있는 도구를 거쳐, Android, iOS 등 각 플랫폼들의 UI 라이브러리에 접근하여 화면을 그리려는 시도가 많았습니다.
    이 방식은 작성한 코드와 플랫폼 사이에 많은 상호작용이 있을 경우 성능과 시간적으로 무조건 손해를 보았습니다.

    하지만 Flutter는 자체 UI 엔진인 Skia 엔진을 활용하여, 각 플랫폼들의 UI 라이브러리를 우회합니다. Flutter 내 Dart 코드는 직접 시스템에 접근하여 UI 를 그립니다.
    Flutter 내에서 자체 UI 엔진을 가지고 있으므로 개발자는 플랫폼 정보, 버전 등에 상관없이 동일한 스타일의 화면을 만들어낼 수 있습니다.

    default

    그림 2. Flutter와 기존 접근 방식의 차이

    3. 레이어 케이크는 맛있다

    Flutter 프레임워크는 계층으로 구성되어 있습니다.
    각 계층은 하위 계층을 기반으로 하며, 상위 계층일 수록 더 자주 사용하게 됩니다.

    default

    그림 3. Flutter 계층 구조

    위의 이야기 도중 우리는 크로스 플랫폼 이라는 용어를 접했습니다.
    이러한 용어가 왜 등장했고 기존의 크로스 플랫폼과 Flutter 가 무슨 차이가 있는지 이해하기 어려우실 수 있습니다.

    따라서 본격적인 학습을 시작하기에 앞서 크로스 플랫폼이 무엇인지 알아보고, Flutter는 어떤 특성을 가지고 있는지, Flutter가 가지는 차별성은 무엇인지 알아봅시다.

    질문하기