Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘
개발 · 프로그래밍

/

데스크톱 앱 개발

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

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

(4.8) 수강평 5개

수강생 25명

QtQMLC++

초급자를 위해 준비한
[데스크톱 앱 개발, QML] 강의입니다.

이런 걸 배울 수 있어요

  • QML을 이용한 현대적인 UI 개발

  • QML과 C++ 을 이용한 UI 개발

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

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

329512-0

프로그래밍 언어 QML?

Qt 프레임워크에서 현대적인 고급 UI를
쉽게 개발할 수 있는 프로그래밍 언어입니다. 

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

what-is-qt

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

function_Design

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

그림1

쉬운 문법, 간결한 가독성
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_hello_world

QML 예제소스코드 실행화면

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

designer_developer_2

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

QML 프로그래밍 입문

이런 분들께 추천합니다 🙋‍♀

  • Qt에서 QML을 이용해 현대적인 고급 UI/UX를 쉽게 구현하려는 분 (개발자, 디자이너)

  • 디자인 로직과 기능 로직을 분리함으로써 소스코드 유지보수성, 재사용성을 높이고자 하는 분

  • QML과 동일한 도구를 통해 디자이너와 개발자가 효과적으로 소통하고 협력할 수 있습니다.

강의 목표 💡

  • QML을 이용해 현대적인 고급 UX/UI를 개발하는 방법을 배울 수 있습니다.

  • QML을 사용하며 디자인 로직과 기능 로직을 완벽히 분리하는 방법에 대해서 배울 수 있습니다.

  • 섹션별로 이론을 공부하고 다양한 실무 예제를 중심으로 코드를 직접 작성해볼 수 있기 때문에 실무에서 필요한 QML 개발 능력을 자연스럽게 배울 수 있습니다.

Architecture_차이점

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

이론과 실전을 한번에

QML 문법 외에 실전 능력까지 향상시킬 수 있도록 강의를 구성하였습니다. 모든 섹션별 이론 학습 후에는 실전 예제를 강의를 따라 직접 구현해가며 배울 수 있는 수업이 준비되어 실무 능력을 높일 수 있습니다.

329512-2

온라인의 벽을 넘어서

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

강의구성📖

섹션1. Anaimation
Animation은 GUI요소에 Animation을 쉽게 적용할 수 있는 방법을 제공합니다. 예를 들어 버튼이 나타났다 사라질 수 있습니다. 이 때 Animation을 사용할 수 있습니다. 버튼이 사라질 때 1초동안 사라질 수 있습니다. 즉 Opacity 값이 100% 에서 0%로 바뀌데 특정 시간을 줄 수 있습니다.

이러한 Animation을 이용하면 GUI상에 Effect와 같은 효과를 줄 수 있습니다. 그리고 화면 전환 시 부드럽게 화면이 전환 될 수 있는 Effect를 구현 할 수 있습니다. 따라서 이번 섹션에서는 GUI 요소에 Animation을 사용할 수 있는 방법에 대해서 배웁니다.

2024-09-11 23 28 16

섹션 2. Animation과 Easing curve를 이용한 Ball Bounding 예제 구현
Easing Curve란 Animation상에 특정 옵션을 사용함으로써 좀더 세련된 Effect를 사용할 수 있습니다. 예를 들어 10초 동안 Animation이 동작할 때 특정 시간 구간에 가속을 하도록 함으로써 다양한 Effect를 구현할 수 있습니다.
이번 섹션에서는 실습예제를 통해서 Animation상에 Easing curve를 사용하는 방법에 대해서 배웁니다.

2024-09-11 23 30 41

섹션 3. State 와 Transition
State는 조건을 말합니다. Transition은 행동을 말합니다. 예를 들어 ON/OFF 스위치에서 ON과 OFF가 조건이고 ON에서 OFF로 바뀌는 것을 행동(Transition) 으로 정의할 수 있습니다. State와 Transition을 사용하면 상당히 복잡한 행동들을 그룹화해 해당 조건이 바뀔 때 일괄적으로 바뀌게 함으로써 GUI의 복잡한 구현을 좀더 쉽게 구현할 수 있는 방법에 대해서 배웁니다.

2024-09-11 23 32 47

섹션 4. State 와 Transition을 이용한 Image Viewer 예제 구현
이번 섹션에서는 이전 섹션에서 배운 State와 Transition을 이용해 Image Viewer를 구현해보는 섹션입니다.

2024-09-11 23 35 02

섹션 5. Model and View
Model과 View는 GUI상에 많은 양의 데이터를 보여줄 때 사용합니다. 예를 들어 100개의 데이터를 표로 보여질 때 데이터는 Model에 저장하고 View는 Model에 저장된 데이터를 어떤 방식으로 GUI상에 표시하는 종류를 말합니다. View는 표 또는 Tree 모양이 될 수 있습니다. 이번 섹션에서는 Model과 View를 사용하는 방법에 대해서 배웁니다.

2024-09-11 23 37 40

섹션 6. Model and View를 이용한 Chess Game 구현
Model 과 View 를 이용해 Chess 의 Knight를 구현하는 예제를 구현하는 방법에 대해서 배웁니다.

2024-09-11 23 39 45

섹션 7. QML 과 C++간의 Integration
QML에서 C++의 특정 클래스 특정 함수를 호출하는 방법과 C++에서 QML에서 특정 JavaScript 함수를 호출하는 방법을 배웁니다. 그리고 실습 예제를 통해서 QML과 C++간 함수호출과 데이터를 전달하는 방법을 구현을 통해 배울 수 있습니다.

2024-09-11 23 41 38

섹션 8. C++을 이용해 새로운 QML 타입 구현
QML에서 제공하는 Type과 같이 직접 필요한 Type을 구현하는 방법을 배웁니다. 그리고 실습 예제에서는 Timer Type을 직접 구현해보는 방법에 대해서 배웁니다.

2024-09-11 23 43 52

섹션 9. QQuickPaintedItem 클래스를 이용해 QML Type 구현
QWidget 에서 QPainter를 이용해 2D 그래픽요소를 QWidget 상에 표시했던것과 같이 C++에서 제공하는 QQuickPaintedItem 클래스를 이용해 QPainter를 이용해 2D 그래픽 요소를 QML의 Type상에 표시할 수 있는 방법에 대해서 배웁니다.

2024-09-11 23 46 12

섹션 10. 중첩 구조의 QML Type 구현
단순히 Type을 구현할 때 계층 구조와 같은 Type을 구현할 필요가 있습니다. 예를 들어 Type 안에 하위에 여러 개의 Types을 구현해야 하는 경우가 있습니다. 이번 섹션에서는 Chart 라는 주제를 통해서 계층 구조의 Type을 구현하는 방법에 대해서 배웁니다.

2024-09-11 23 48 03

섹션 11. C++로부터 QML Object 와 변수 매핑
이번 섹션에서는 C++과 QML간의 데이터 교한 및 C++과 QML간의 변수 타입을 어떻게 매핑해야 하는지 배웁니다.

2024-09-11 23 51 29

섹션 12. C++과 QML을 이용해 채팅 예제 구현
이번 예제에서는 C++로 채팅의 기능을 구현하고 QML로 화면을 구현해 간단한 채팅 예제를 구현하는 섹션입니다. 이번 섹션을 통해서 C++과 QML을 이용해 어플리케이션을 구현하는 방법에 대해서 배웁니다.

2024-09-11 23 53 19

Q&A 💬

👉 학습 후 달라진 여러분의 모습을 만나보세요.

  • 강의를 듣고 나면 QML을 자유자재로 활용할 수 있습니다. 또한 실전 프로젝트에서 QML을 사용하는 경우와 기존의 C++/Qt 방식인 QWidget을 사용할 경우 어떤 차이점이 있는지, 장단점이 무엇인지 파악할 수 있습니다.

  • 또한 QML을 사용해 프로젝트를 구현할 경우 구현한 소스코드의 디자인로직(QML 부분)과 기능로직(C++)을 완벽히 분리할 수 있어 작성한 코드의 재사용성을 높일 수 있습니다.

Q. 이론, 문법 외에 실제로 쓰이는 다양한 예제도 접할 수 있을까요?

네. 가능합니다. 각 섹션별 이론 수업 후 예제를 통해 직접 강사와 코딩하는 과정이 준비되어 있어 현업에서 QML로 실전 프로그래밍을 할 때의 노하우를 함께 배울 수 있습니다.

Q. 학습하는 강의 내용을 참고할 만한 자료나 교재가 있을까요?

현재 Qt 개발자 커뮤니티(qt-dev.com)에서 운영자로 활동하고 있습니다. Qt 및 QML과 관련한 추가 자료를 이 사이트에서 얻으실 수 있습니다.

Q. 강의를 듣기 전 배워야 할 게 있을까요?

C++과 Qt에 대한 기초 지식이 있어야 수강할 수 있는 강의입니다. Qt에 대한 경험이 없으신 분들은 지난 "Qt 프로그래밍" 강의를 미리 들으시고 이 강의를 수강하시는 것을 권장합니다.

Q. 수업 내용은 어느 수준까지 다루나요?

QML 기초부터 다양한 활용 분야에 해당하는 고급 내용까지 다룹니다.

💾 참고 사항

  • 자세한 내용은 미리보기로 공개된 섹션 1 [QML 참고자료 및 QML 학습을 위한 권장 Qt 버전 설명] 수업을 확인해주세요.

이런 분들께
추천드려요!

학습 대상은 누구일까요?

  • QML을 이용해 UI를 개발하시려는 분

  • Qt 프레임워크에서 QML을 이용해 UI를 개발하시려는 분

선수지식, 필요할까요?

  • C++ 기초

  • Qt 기초

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • QML을 이용해 UI를 개발하시려는 분

  • Qt 프레임워크에서 QML을 이용해 UI를 개발하시려는 분

선수 지식,
필요할까요?

  • C++기초

  • Qt

안녕하세요
김대진입니다.

925

명

수강생

67

개

수강평

95

개

답변

4.7

점

강의 평점

9

개

강의

지식공유자 소개 ✒️


근무경력
현: Embedded 분야 Senior software developer
LG전자, VS사업부 IVI선행플랫폼/모듈개발
SW마에스트로, SW 멘토

강의경력
삼성전자, Qt & QML 강의
LG전자, Qt & QML 분야 사내 강사
한컴아카데미 Qt 강의 출강
다수의 IT기업 Qt 강의 출강


저서
Qt 프로그래밍
Qt Quick 프로그래밍
Qt5 프로그래밍 가이드
MeeGo 프로그래밍 완벽 가이드
Qt 실전 프로그래밍

SW커뮤니티 운영
Qt 개발자 커뮤니티 운영자 ( www.qt-dev.com )

더보기

커리큘럼

전체

47개 ∙ (8시간 56분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!