한국어
오픈소스포럼
 이곳은 다양한 오픈소스 프로젝트를 소개하고 리뷰, 활용 방법을 공유합니다.

Flutter/Dart 와 Qt/QML 비교

makersweb 2021.11.07 15:01 조회 수 : 1324

Flutter는 소스코드를 기계어로 컴파일해야하지만 핫 리로드를 지원한다. 즉 앱이 실행되는 동안 변경을 수행하고 결과를 즉시 확인할 수 있어 높은 생산성을 얻을 수 있다.

Flutter 2가 릴리즈되면서 이제 동일한 코드베이스를 사용하여 기본 앱을 5가지 이상 운영 체제에서 실행할 수 있다. Flutter 2 기준 iOS, Android, Windows, macOS, Linux 와 Chrome등과 같은 브라우저를 대상으로 하는 웹 앱도 가능하다. 또한 Flutter는 자동차, TV 및 스마트 가전 제품에도 내장될 수 있어 주변 컴퓨팅 세계에 가장 널리 보급되고 휴대 가능한 경험을 제공한다. 이미 Toyota 는 Flutter로 구동되는 인포테인먼트 시스템을 구축하여 차량에 최고의 디지털 경험을 제공할 계획을 발표했다.

image 8.png

 

플러터의 단점, Dart.

Dart 는 구글이 개발하여 2011년 처음 공개된 객체지향 고급 프로그래밍 언어로 플러터 응용프로그램을 개발하기위해 주로 사용된다.

필자의 주관적인 생각으로 이 언어를 이용하여 사용자 인터페이스를 구성하기에 불편하고 생각보다 세련되 보이지 않았다. 플러터의 선언형 UI 패러다임 지향에도 불구하고 UI를 바꾸기 위해, 즉 위젯이 자신의 재빌드를 위해 내부 상태가 변경되었음을 프레임워크에 알림으로써(대부분의 경우 Flutter StatefulWidgets 의 setState()를 호출 해야함) 새로운 위젯 하위 트리를 구성해야 한다는 점이다. 그리고 Dart 언어 자체가 기존 컴파일 언어들과 많이 닮았으며 비즈니스 로직과 섞이기쉬우며 가독성도 좋지 않았다. 특히 콤마나 세미콜론등의 문법등은 사용자 인터페이스를 개발하기 피곤하게 만든다. 예를 들어 다음과 같은 간단한 컬럼(Column) 레이아웃 UI를 구성하고자 한다.

Untitled (1).png

 

Dart 로 작성한 예제 소스코드는 다음과 같다.

import 'package:flutter/material.dart';

...

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
       child: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 50,
            width: 100,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 50,
            width: 100,
          ),
        ],
      ),
    ),
  );
}

 

C++및 Java 등과 같이 일반적으로 명령형 방식의 UI 프로그래밍과 비교하여 심플해 보인다. 그러나 Dart의 가독성이나 엄격한 문법(콤마나 세미콜론 등)을 신경쓰면서 UI를 구성해야하는 점이 생각보다 까다롭고 귀찮다. 이것은 현대 언어에서 기대할 수 있는 것이 아니다. 다음은 위와 같은 UI 레이아웃을 QML 을 사용하여 구성한 예이다.

Untitled (2).png

 

QML언어로 작성한 소스코드는 다음과 같다.

import QtQuick
import QtQuick.Layouts

ColumnLayout {
    anchors {
        top: parent.top
        bottom: parent.bottom
        horizontalCenter: parent.horizontalCenter
    }

    spacing: 0

    Rectangle {
        color: "dodgerblue"
        width: 100
        height: 50
    }

    Rectangle {
        color: "gold"
        width: 100
        Layout.fillHeight: true // Item will be as tall as possible.
    }

    Rectangle {
        color: "dodgerblue"
        width: 100
        height: 50
    }
}

 

현대적인 코딩 스타일과 Flutter 에 비하여 잘 추상화된 요소들로 간결하게 작성할 수 있는 장점이있다. 화면을 업데이트하기위해 프레임워크에 별도로 요청할 필요도없다.

일반적인 QtQuick 프로젝트에서 프론트엔드는 동적 스크립팅 언어(JavaScript) + 사용자 인터페이스용 마크업 언어(QML)로 개발된다. 선언적 UI를 프론트엔드라고 하고 네이티브 부분을 백엔드라고 한다. 시스템과 인터페이스하고 무거운 작업을 수행하는 백엔드 코드는 Qt C++를 사용하여 개발되었다. 이를 통해 응용 프로그램의 컴퓨팅 집약적 작업과 기본 작업을 사용자 인터페이스 부분에서 분리할 수 있다. 물론 잠재적으로 3개의 다른 언어를 배워야 하는 것은 명백한 단점이다.

둘의 공통점은 현재의 UI 상태만 묘사하고 변화는 프레임워크에 맡기는 선언형 UI와 자체 렌더링 컨트롤 및 위젯으로 네이티브 수준에 가까운 성능을 보여준다는 것이다.

구글의 전폭적인 지원으로 Flutter/Dart가 단기간에 많은 발전과 다양한 플랫폼을 지원하면서 폭발적인 관심을 받았다. 이런 성장 속에서도 사용자 인터페이스를 구현하는 작업에 있어서 마크업 언어와 비교하여 다소 아쉬운 부분도 분명 보인다.

계속해서 성장중인 프레임워크와 언어인 만큼 관심있게 지켜볼 필요가 있으며 관련 생태계가 어떻게 발전할 지 기대가 된다.

 

참조:

https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65 https://developers.googleblog.com/2021/03/announcing-flutter-2.html

번호 제목 글쓴이 날짜 조회 수
35 Flutter 위젯의 상태관리에 대해서 file makersweb 2023.04.06 396
34 [NodeGui] JavaScript로 데스크탑 응용프로그램 작성 file makersweb 2023.02.21 926
33 openFrameworks 한글 폰트 설정 및 출력하기 file makersweb 2023.02.19 173
32 LVGL 을 통해 GUI 구현 시 한글 폰트 추가 file makersweb 2023.02.07 959
31 Windows에서 Qt Creator + CMake + vcpkg 로 C++ 개발환경 구성 (POCO 라이브러리 DirectoryWatcher 예제) file makersweb 2023.01.14 587
30 NAppGUI, C언어용 크로스 플랫폼 GUI 라이브러리 file makersweb 2022.10.10 804
29 OTA 오픈소스 프로젝트 makersweb 2022.08.03 440
28 AGL (Automotive Grade Linux) 개요 file makersweb 2022.06.19 1788
27 Chromium과 Ozone 층 file makersweb 2022.03.03 696
26 Flutter Application 에서 한글(EUC-KR) 깨져서 나오는 문제 file makersweb 2022.01.06 2563
25 CopperSpice 에 대해서 (C++ Gui 라이브러리) file makersweb 2022.01.02 514
» Flutter/Dart 와 Qt/QML 비교 file makersweb 2021.11.07 1324
23 VSCode 와 Qbs 플러그인으로 C/C++ 개발환경 구성 file makersweb 2021.09.12 791
22 ZeroMQ 를 이용한 Qt 응용프로그램 간 통신 file makersweb 2021.08.28 791
21 C++를 위한 Lottie 라이브러리 with SDL2 file makersweb 2021.08.15 939
20 CANdevStudio 를 사용하여 CAN 네트워크 시뮬레이션 file makersweb 2021.03.09 1618
19 Protocol Buffers 를 이용한 직렬화 with Conan Package Manager file makersweb 2021.02.24 830
18 라즈베리파이에서 Redis의 Pub/Sub 패턴을 사용하는 Electron 응용프로그램 file makersweb 2021.01.31 656
17 Nana, C++용 크로스플랫폼 GUI 라이브러리 file makersweb 2021.01.06 2014
16 라즈베리파이4에서 openFrameworks 예제 실행 file makersweb 2020.12.13 537