Dart Programmer 되기 [31]

< Flutter 활용하기 – Hello World! >

앞서에서 Dart 언어를 설치한 것처럼, 개발용 컴퓨터에 Flutter를 설치해야 합니다. Flutter 공식 홈페이지로 이동하여, 가이드라인에 따라서 Flutter를 설치하고 환경을 설정하도록 합니다. 본 연재 글을 따라가기 위해서는 공식 홈페이지의 “Get started” 절차에서 다음의 단계는 반드시 읽고 이해한 후, 완료해 주어야 합니다.

1. Install : Flutter 구동을 위한 개발 환경 설정, Flutter SDK 설치 및 환경 설정, iOS 혹은 Android 개발 환경 설정 (본 글에서는 개발자 환경은 MacOS이며, iOS를 위한 Xcode와 Android를 위한 Android Studio를 모두 설치하였습니다)
2. Set up an editor : 개발용 Editor 설정 (본 글에서는 Dart에서 사용한 MS Visual Code를 그대로 사용합니다)
3. Test drive : 개발용 Editor를 사용하여, Flutter가 제공하는 기본 프로그램인 Start App을 실행하고, hot reload를 경험합니다 (본 글에서는 Dart에서 사용한 MS Visual Code를 그대로 사용합니다)

본 글에서는 이제 독자가 MS Visual Code를 사용하여, Flutter를 통한 신규 프로젝트를 생성하고(3. Test drive의 Create the app), 이를 실제 기기(휴대폰, 태블릿 등) 혹은 Emulator를 통해서 실행할 수 있는 것으로 가정하여, 다음의 글을 이어 갑니다. 따라서, 반드시 앞서의 3단계를 수행하기 바랍니다.

이미 앞서의 Get started의 3번에서 Flutter가 제공하는 기본 Start App을 실행해 보았지만, 본 글에서는 보다 단순한 프로그램으로 시작을 하려 합니다. 이를 위해서 Get started의 3번에서 한 것과 같이, 새로운 프로젝트를 만듭니다. Visual Code의 명령 팔레트를 열고, “Flutter: New Project”를 통해서, hello_world 프로젝트를 원하는 장소에 생성합니다. 프로젝트를 생성하면, Visual Code에 HELLO_WORLD 이름의 폴더가 생성되어 열려 있는 것을 확인 할 수 있습니다. Flutter 개발의 시작에 앞서서, 개발 환경에 문제가 없는지를 마지막으로 확인하고자, 앞서 Get started에서도 소개된, “flutter doctor”를 수행하여, 이슈 없음을 확인해 봅니다.

Simple Hello World! Program

새로 만든 hello_world 프로젝트에서 우리가 수정하고자 하는 화일은, 프로그램 수행의 가장 기본이 되는 main.dart 화일 입니다. 이 화일안에 main() 함수가 있습니다. 이 화일은 프로젝트 폴더안의 lib 디렉토리에 있습니다. 이 화일을 열고, 이 안의 내용을 다음의 dart_tutorial-31-01.dart 화일의 내용으로 변경합니다. 참고로 main.dart 화일 내용을 아래 화일의 내용으로 변경하면, test 디렉토리의 widget_test.dart 화일에 오류가 있는 것으로 나타나지만, 일단 무시하도록 합니다.

// darttutorial-31-01.dart

import 'package:flutter/material.dart'; // #1

void main() { // #2
  runApp( // #3
    Center( // #4
      child: Text( // #5
        'Hello, World!', 
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

main.dart 화일의 내용을 수정한 후, 디버그 모드에서 실행합니다. MacOS에서 ios simulator를 사용하여 iPhone 11 Pro Max에서 실행한 결과 화면이 다음과 같습니다.

프로그램을 한줄 한줄 설명 하면 다음과 같습니다.

#1: Flutter가 제공하는 material 타입의 GUI 패키지를 포함합니다.

#2: Flutter 프로젝트에서 가장 먼저 실행이 되는 main() 구문의 시작입니다.

#3: runApp() 함수는 Flutter의 main() 함수와 같은 존재 입니다. 앞서의 글에서 Flutter는 모든 것이 Widget으로 이루어 진다고 이야기 했는데, 이 함수는 주어진 widget을 GUI 화면에 연결하는 작업을 합니다. 주어진 widget은 전체 화면을 채우는 GUI의 레이아웃에 대한 조건을 제공 합니다. 예를 들어, 만약 widget을 중앙에 위치하고 싶다면, Center widget을 사용하고, 만약 화면의 한쪽에 정렬하고 싶다면 Align widget을 사용하는 식으로 프로그램을 작성합니다. (참조: https://api.flutter.dev/flutter/widgets/runApp.html )

#4: runApp()의 입력 파라메타로 Center widget을 주었으므로, 앞서 #3의 예시에서 설명한 것처럼, GUI 화면의 중앙에 뭔가를 표현 하겠다는 의도입니다. Center class는 본인의 자식(child)들을 화면의 중앙에 의치시켜서 나타냅니다. Flutter에서 제공하는 다양한 Class와 Widget들은 내부에 유용한 method 및 property를 제공합니다. 이들에 대한 세부적인 정보는 https://api.flutter.dev/ 사이트에서 확인 가능합니다. (참조: https://api.flutter.dev/flutter/widgets/Center-class.html )

#5: 앞서 #4에서 중앙에 위치시킨 정보(Center class의 child)가 문자열을 나타내는 Text class 임을 알수 있습니다. Text class도 유용한 method와 property를 제공하는데, 예제의 경우는 문자열 “Hello, World!”를 나타낸다는 것을 알수 있으며, 이의 방향(textDirection)이 “left to right”로 정렬(TextDirection.ltr) 되도록 설정한 것을 알수 있습니다. (참조: https://api.flutter.dev/flutter/widgets/Text-class.html )

Advanced, But Still Simple Hello World! Program

Flutter에서 제공하는 Start App 보다 더 단순한 형태의 Hello World 프로그램을 살펴보았습니다. Flutter를 기반으로하는 프로그램은 이렇게 글자만 나타내고 끝내지는 않으며, 화면을 업데이트하고, 내부에 정보를 저장/관리해야 합니다. 그리고, 앞서 에러가 발생했으나 무시했던 화일인 test/widget_test.dart 안으로 들어가서, 에러가 발생한 부분을 보면, main.dart에 MyApp()이라는 함수가 없기에 에러가 발생한 것으로 나타납니다. 따라서, 이 에러를 제거함과 동시에 darttutorial-31-01.dart 보다 더 많은 기능을 투입해야 제대로 된 가장 간단한 형태의 Hello World 프로그램을 만들수 있는데, 이를 반영하여 darttutorial-31-01.dart를 일부 확장한 프로그램이 darttutorial-31-02.dart 입니다.

// darttutorial-30-02.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp()); // #1

class MyApp extends StatelessWidget { // #2
  @override
  Widget build(BuildContext context) { // #3
    return Center(
      child: Text(
        'Hello, World!',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

앞서 main.dart의 내용을 darttutorial-30-02.dart의 내용으로 변경합니다. 이와 함께 widget_test.dart에서 나타났던 에러도 사라지는 것을 알수 있습니다. darttutorial-30-02.dart 프로그램에 대한 설명을 darttutorial-30-01.dart 대비 달라진 부분 중심으로 설명 합니다.

darttutorial-30-02.dart 프로그램의 #2와 같이 MyApp class를 정의하고, #1에서 이를 객체로 만들어서 실행했기 때문입니다. Flutter 프로그램을 만들때, #1과 #2는 매우 전형적인 구문입니다. MyApp class는 StatelessWidget를 기반으로 확장하였습니다. StatelessWidget는 이후의 글에서 다루겠지만, 내부적으로 지속적인 관리를 수행하는 데이타가 없는 경우(does not require mutable state)에 사용하는 class 입니다. Flutter는 지속적인 관리가 필요 없는 경우에, StatelessWidget 안에 필요한 widget들을 포함시켜서 GUI를 만듭니다. (참조: https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html )

darttutorial-30-02.dart 프로그램의 #3의 build method는 StatelessWidget의 내부에 포함된 widget들 중에 변화가 발생하는 wudget(들)이 있을때, 다시 GUI를 업데이트 하는 용도로 호출이 되는 method 입니다. 이에 대한 상세한 설명은 추후 다룰 예정입니다. (참조: https://api.flutter.dev/flutter/widgets/StatelessWidget/build.html ) build method 안을 보면, 앞서의 darttutorial-30-01.dart에서 화면을 채우는데 사용한 Center class가 동일하게 Text class를 포함하되, return 구문에 의하여 만들어지고 전달되는 것을 볼 수 있습니다.

일반적인 Flutter 프로그램은 darttutorial-30-02.dart과 같이 main() 함수에서 runApp 함수를 통하여, MyApp과 같인 StatelessWidget 혹은 추후 설명할 StatefulWidget 클래스를 만들고, 이 안에 GUI로 표시하고 싶은 widget들과 내용을 채우는 형태로 만들어 집니다.

이제 darttutorial-30-02.dart 프로그램을 실행해 봅니다. 결과는 앞서의 darttutorial-30-01.dart 기반의 프로그램과 동일한 것을 확인할 수 있습니다.

Hot-Reload based Debug

앞서 Flutter 공식 홈페이지의 Get-started를 실행하다보면 Hot Reload 라는 기능을 설명하는 부분이 짧게 나타나는 것을 볼 수 있었습니다. 이를 Hello World 프로그램에서 다시 경험하기 위하여, 프로그램이 디버그 모드로 실행중인 상태에서, Visual Code 창의, darttutorial-30-02.dart 기반 main.dart에서 “Hello, World!” 문자열을 “Good-Bye, World!”로 바꾼후 저장하기를 실행하면, 실행중인 프로그램의 문자열이 바뀌는 것을 볼 수 있습니다. 이는 Hot Reload라는 기능으로서, Flutter로 만들어진 프로그램은 내부적으로 직접 화면에 그림을 그리는 형태로 동작하기에 가능합니다.

이와 반대로 다른 모바일 개발 방법 도구들은 모바일 기기의 기능에 화면 업데이트를 의뢰하는 방식이기에, 지금처럼 화면에 나타나는 문자열을 바꾸고자 하면, 디버그 중인 프로그램의 실행을 멈추고, 프로그램 코드 수정후, 다시 빌드한 후, 이를 디버그 모드로 다시 동작해야 합니다. 당연히 이를 위한 시간이 더 필요하게 되는데, Flutter는 디버그 모드로 실행중인 프로그램의 소스 코드를 수정하며, 바로 디버그 중인 프로그램에 반영이 되므로, 디버그를 위한 시간과 노력이 매우 줄어드는 것을 알 수 있습니다. 이는 Flutter의 매우 큰 장점입니다.

Flutter의 Hot Reload가 어떻게 기존의 Native 방식, Web View 방식, Reactive 방식과 다른지에 대해서는 hackernoon의 “What’s Revolutionary about Flutter”에 잘 설명이 되어 있으니, 관심있는 경우는 한번 읽어 보기를 권장합니다. (참조: https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514?ref=morioh.com )

마무리

본 글에서는 Flutter의 Start App 보다 더 단순한 형태의 Hello World! 프로그램의 두가지 버전을 통해서, 가장 기본적으로 Flutter 기반 어플리케이션이 가져야 하는 요소들에 대해서 설명하였습니다. 또한, Flutter의 매우 큰 장점 중 하나인 Hot Reload 방식에 대해서 설명하여, 개발자가 얼마나 개발에 필요한 시간을 줄 일수 있는지를 알아보았습니다.

Creative Commons License (CC BY-NC-ND)