Flutter에 대한 소개 및 간단한 어플 제작영상

2020년 12월 24일 · 이수현

Flutter에 대한 소개 및 간단한 어플 제작영상

이번 시간에는 개인적으로 스터디 하고있는 Flutter에 대한 소개 그리고 간단하게 Django Rest Framework와 Flutter를 이용하여 만든 간단한 퀴즈앱, Firebase를 이용하여 만든 Netflix클론 앱 에 대하여 말씀 드려볼까 합니다.

Flutter란 ?

Flutter는 2017년 5월 구글에서 제작한 Android, iOs, Web 모바일 어플리케이션을 하나의 소스로 개발할 수 있는 UI 프레임워크입니다.
쉽게 얘기하면 Flutter로 코드를 작성하면 Android 기기와 iOs기기에 동시에 배포할 수 있습니다.
또한 기존 UI를 모두 버리고 자체적으로 UI를 렌더링하기 때문에 iOs에서 Material 디자인을 볼 수 있고, Android에서 Cupertino 디자인을 볼 수 있습니다
사용되는 언어는 Dart 라는 언어를 사용하였습니다. Dart 는 C, Java, JavaScript와 유사한 점이 많기 때문에 몇 가지 특징만 숙지하고 있다면 수월하게 넘어갈 수 있습니다.

대표적으로 Google Adwords 와 Alibaba 가 Flutter를 사용하고 있습니다.

Flutter 특징 ?

Flutter 에서는 모든것이 Widget 으로 시작합니다.
Image, Icon, Text, Row, Column, Padding 등 모두 Widget 입니다.
해당 코드를 보시면 main.dart 에서 runApp 함수에 Widget 전달하는 것부터 앱을 시작하는 것을 확인 할 수 있습니다.

import 'package:flutter/material.dart';  
void main() => runApp(  
 Center(  
 child: Text(  
 'Hello world!'  ),     
 ),  
);

이 코드에서 레이아웃을 포함하여 모든 것들은 Widget입니다. Center Widget은 스크린 중앙에 자식Widget들을 위치시킵니다. 그리고 자식 Widget인 child로 Text Widget을 전달하여, 화면에 ‘Hello World!’를 표출하는 기본적인 코드를 작성해 보았습니다.

Flutter 장점 ?

  • 다양한 IDE 지원 Flutter는 다양한 Editor(Android Studio, VS Code, InteliJ IDE 등)를 사용하여 빌드가 가능합니다.
    Android Studio는 Flutter Inspector와 Flutter Outline 이라는 개발 도구를 추가적으로 지원해줍니다.
    또한 VS Code에서는 Plugin으로 Flutter를 설치하여 손 쉽게 사용할 수 있습니다.

  • Material, Cupertino 디자인 기본 지원
    구글의 Material 디자인의 홈페이지에는 이미 Flutter가 포함되어 있고 바로 추가하여 사용할 수 있는 패키지도 제공합니다.
    Android와 iOs에서 같은 Material 디자인을 사용하더라도 Platform에 따라 다르게 출력되는 부분을 각각 디자인 가이드에 맞게 화면을 그립니다.

  • 빠른 성능
    기존 React Native 의 경우 Native Bridge를 통한 통신이 불가피했습니다. 하지만 Flutter는 직접 컴파일되어 Render를 직접 하기 때문에 성능이 빠릅니다.
    현재 여러 Cross Platform이 있지만 직접 컴파일 후 Render 한다는 점이 현재 Flutter가 자부하는 가장 큰 장점인 것 같습니다.

  • 핫 리로드
    Flutter는 핫 리로드 기능을 이용하여 빠른 개발 사이클을 제공합니다. 핫 리로드는 앱이 살아있는 상태에서 리스타트나 앱의 상태를 잃어버리지 않고 코드를 리로드 하는 기능입니다.
    앱소스를 고치고, IDE나 커맨드 라인 툴을 통해 알리고, 그것을 시뮬레이터(iOs), 에뮬레이터(Android), 혹은 연결되어있는 Device에서 확인할 수 있습니다.

Firestore를 이용한 Netflix Clone 어플리케이션과 Django와 Heroku를 이용한 간단한 Flutter Quiz 어플리케이션입니다.

Alt Text Alt Text