[초급] QML 프로그래밍 1편

Qt UI 개발을 위한 QML,
입문부터 실습까지 자세하게 알려드려요.

Qt 프레임워크 UI 구현, 
QML로 더 강력하게!

QML(Qt Modeling Language)은 Qt 프레임워크에서 제공하는 프로그래밍 언어입니다. QML은 Qt 프레임워크에서 UI 개발을 위해 사용할 수 있는 프로그래밍 언어로, 현대적인 고급 UI를 쉽게 구현할 목적으로 사용할 수 있습니다.

Qt 프레임워크를 이용해 GUI 프로그램을 개발할 때, UI 부분의 디자인 로직과 기능 부분의 기능 로직을 구분해서 볼 수 있습니다. 이중에서도 QML은 디자인 로직에 해당하는 UI를 개발할 때 C++의 대안으로 선택할 수 있는 언어입니다. 특히 QML로 UI를 개발하게 되면 디자인 로직과 기능 로직을 완벽히 분리할 수 있어 소스코드 재사용성을 높일 수 있습니다.

QML을 사용해 디자인 로직을 개발하면 C++을 사용해 개발하는 것보다 훨씬 쉽고 빠르게 UI를 구현할 수 있습니다. 또한 Flickable, Gesture, Animation, 3D 등 현대적인 고급 GUI 기술을 쉽게 적용할 수 있습니다. 

---

쉬운 문법, 간결한 가독성 
QML의 장점을 경험해보세요.

프로그래밍 언어를 처음 배울 때 주로 하는 “Hello World” 출력 예제를 살펴볼까요? QML이 얼마나 간결한 언어인지를 쉽게 알 수 있습니다.

import QtQuick

Window {
    width: 300
    height: 200
    visible: true
    title: qsTr("QML 예제소스코드")

    Text {
        x: 80
        y: 70
        text: "Hello World"
        font.pixelSize: 25
    }
}

_{QML 예제 소스코드}

_{QML 예제 소스코드 실행화면}

QML은 쉽고 간단합니다. 개발자가 아니더라도 쉽게 이해할 수 있습니다. 그러므로 디자이너와 개발자는 QML 코드를 이용해 서로 대화가 가능며 서로 아이디어를 공유할 수 있습니다. 

따라서 QML을 이용하면 디자이너와 개발자가 서로 같은 개발 툴을 갖고 협력함으로써 이전보다 개발 기간을 단축할 수 있게 됩니다.

---

QML 프로그래밍 입문 
이런 분들께 추천합니다 🙋‍♀️

강의 목표 💡

---

이 강의만의 특징을 
확인해보세요 📖

온라인의 벽을 넘어서

지식공유자의 모습을 강의 화면에 함께 담았습니다. 생생한 라이브 코딩과 함께 진행되는 수업을 통해 마치 오프라인 수업을 듣는 느낌으로 언제 어디서나 학습하여 보세요.

 

---

강의구성 📖

섹션1. What is QML
QML은 Qt Framework에서 제공하는 인터프리터 언어입니다. 이번 시간에서는 QML은 어떤 특징과 장점이 있는지 살펴봅니다.

섹션2. QML의 Syntax 및 구조
QML의 구조와 문법을 배웁니다.  그리고 실습 예제를 통해서 QML을 사용하는 방법에 대해서 배우는 섹션입니다
섹션3. Type 
Type이란 Qt의 QWidget과 같은 개념입니다. 이번 섹션에서는 Type이 무엇인지 배우고 QML에서 제공하는 Type중에서 자주 사용하는 Type을 중심으로 배웁니다. 그리고 실습 예제로 Accessible 타입을 이용해 버튼 Type을 구현해 보도하는 시간입니다. 

섹션4. Events 
터치, 마우스, 키보드등과 같이 사용자 인터페이스상에서 발생하는 Event 처리를 어떻게 구현해야 하는지 배우는 섹션입니다. 그리고 QML에서 Signal 을 구현하는 방법에 대해서 배웁니다. 실습 예제에서는 Signal 과 Method(함수)를 연결하는 예제를 통해서 Signal을 다루는 방법을 자세히 배웁니다. 

섹션 5. Loader type을 이용한 Dynamic UI 구현하기 
UI에서 사용자가 특정 영역을 동적으로 변화시키는 방법을 배웁니다. 예를 들어 A라는 GUI화면에서 특정 조건을 만족하는 경우 B화면으로 전환해야 하는 방법을 배웁니다. 따라서 이번 섹션을 통해서 동적으로 화면을 구현하는 방법에 대해서 배웁니다. 마지막 실습 예제에서는 Loader 타입을 이용해 동적으로 화면을 바꾸는 방법을 예제로 다루는 시간입니다.

섹션 6. Canvas 
그림판과 같이 화면상에 이미지, 선, 도형, 텍스트을 표시하기 위한 방법에 대해서 배웁니다. 예제로 Color를 선택해 그림판에 그림을 그릴 수 있는 예제에 대해서 다루오 보도록 하겠습니다.

섹션 7. Graphic Effects 
Blur, Blend, Color 등과 같은 Effect를 이미지 상에 사용하는 방법에 대해서 배웁니다. 

섹션 8. Module Programming 
버튼, 콤보박스와 같이 GUI상에서 자주사용하는 모듈을 모듈화를 시키는 것과 같이 사용자가 정의한 Type을 모듈하는 방법에 대해서 배웁니다. 그리고 직접 실습 예제를 통해서  QML을 모듈화해 구현해보는 방법에 대해서 알아봅니다. 

섹션 9. QML에서 JavaScript 사용 
QML에서 JavaScript 함수 사용 방법에 대해서 배웁니다. 그리고 JavaScript 파일을 QML에서 Import하는 방법에 대해서 알아봅니다. 실습 예제에서는 계산기 구현을 통해서 JavaScript를 사용하는 방법에 대해서 자세히 배울 수 있습니다. 

섹션 10. Dialog
QML에서 다이얼로그를 사용하는 방법에 대해서 배웁니다. 그리고 실습 예제로 Color를 선택하는 다이얼로그를 직접 구현해 봄으로써 다이얼로그 사용 방법에 대해서 배울 수 있습니다.

섹션 11. Layout 
QML에서는 Anchors 외에도 RowLayout, ColumnLayout, GridLayout, Layout 등과 같은 Layout을 사용할 수 있습니다. 이번 시간에는 다양한 Layout의 사용방법에 대해서 배웁니다.

섹션 12. Type Positioning 
Type Positioning이란 화면 상에 Type들을 표시하기 위한 방법을 배웁니다. 예를 들어 타입들을 배치할 때 가로로, 세로로 또는 바둑판과 같은 모양으로 Type들을 배치하는 방법에 대해서 배웁니다.

섹션 13. Qt Quick Controls 
Qt Quick Controls는 Button, Dial, CheckBox, BusyIndicator등 화면을 구성하는데 필요한 GUI 인터페이스를 제공합니다. 이번 섹션에서는 Qt Quick Controls를 사용하는 방법에 대해서 배웁니다.

---

Q&A 💬