Thumbnail
개발 · 프로그래밍 데스크톱 앱 개발

QML 프로그래밍 입문편 대시보드

(5)
5개의 수강평 ∙  87명의 수강생
143,000원

월 28,600원

5개월 할부 시
지식공유자: 김대진
총 99개 수업 (17시간 33분)
수강기한: 
4개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[데스크톱 앱 개발, 프로그래밍 언어] 강의입니다.

QML은 Qt에서 제공하는 UI를 만드는 프로그래밍 언어입니다. JSON과 유사하고 JavaScript를 사용할 수 있습니다. C++ 언어 대신 QML을 이용하면 C++을 사용하지 않고도 쉽게 현대적인 고급 UI를 쉽게 개발할 수 있습니다.

✍️
이런 걸
배워요!
QML을 이용한 현대적인 고급 UI 개발
C++을 대체한 Qt UI 프로그래밍

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

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

프로그래밍 언어 QML?

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

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️⃣

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

2️⃣

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

선수 지식으로 C++ 언어 및 Qt 프레임워크 기초 지식을 이해하고 있어야만 이 과정을 학습하실 수 있습니다.

강의 목표 💡

  • QML을 이용해 현대적인 고급 UX/UI를 개발하는 방법을 배울 수 있습니다.
  • QML을 사용하며 디자인 로직과 기능 로직을 완벽히 분리하는 방법에 대해서 배울 수 있습니다. 
  • 섹션별로 이론을 공부하고 다양한 실무 예제를 중심으로 코드를 직접 작성해볼 수 있기 때문에 실무에서 필요한 QML 개발 능력을 자연스럽게 배울 수 있습니다. 

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

이론과 실전을 한번에

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

온라인의 벽을 넘어서

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

4-Step으로 따라 배우는 QML 프로그래밍 📚

1. QML 소개와 기초 프로그래밍

이 주제에서는 QML의 문법, 이벤트, 모듈화 등을 배웁니다.

  • 섹션 00. What is QML 
  • 섹션 01. QML의 Syntax 및 구조 
  • 섹션 02. Variable
  • 섹션 03. Types
  • 섹션 04. Graphic Effects
  • 섹션 05. Events 
  • 섹션 06. Loader를 이용한 QML Component 동적(dynamically) 배치
  • 섹션 07. Module Programming 
  • 섹션 08. Canvas를 이용한 2D Graphics

2. 다양한 QML 타입 이해와 QML에서 JavaScript 사용

Dialog, Layout, Qt Quick Controls 등과 같이 GUI에서 사용하는 UI 타입(예를 들어 Widget) 을 학습하고 QML에서 JavaScript 를 사용하는 방법에 대해서 학습합니다.

  • 섹션 09. Dialog
  • 섹션 10. Layout
  • 섹션 11. Qt Quick Controls
  • 섹션 12. Model & View
  • 섹션 13. Type Positioning
  • 섹션 14. QML에서 JavaScript 사용

3. Animation & State Transition 

현대적인 고급 UI에서 사용하는 Effect와 같은 효과를 이용해 UI를 구현할 수 있는 애니메이션과 State Transition에 대해서 배웁니다.

  • 섹션 15. Animation
  • 섹션 16. Animation과 Easing Curve를 이용한 Ball Bouncing 예제 구현
  • 섹션 17. State와 Transition
  • 섹션 18. State와 Transition을 이용한 Image Viewer 예제 구현

4. QML과 C++간의 연동 

QML에서 C++로 이벤트 발생, C++에서 QML로 이벤트 발생, C++과 QML간의 데이터 교환하는 방법에 대해 배웁니다. 이 파트에서 QML과 C++ 사이의 다양한 인터랙션(Interaction)을 배울 수 있습니다.

  • 섹션 19. QML과 C++간의 Integration
  • 섹션 20. C++을 이용해 새로운 QML 타입 구현
  • 섹션 21. QML에서 QQuickPaintedItem 클래스를 사용하기
  • 섹션 22. C++로부터 QML Object와 변수 매핑
  • 섹션 23. 채팅 예제 구현

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

  • 강의를 듣고 나면 QML을 자유자재로 활용할 수 있습니다. 또한 실전 프로젝트에서 QML을 사용하는 경우와 기존의 C++/Qt 방식인 QWidget을 사용할 경우 어떤 차이점이 있는지, 장단점이 무엇인지 파악할 수 있습니다.
  • 또한 QML을 사용해 프로젝트를 구현할 경우 구현한 소스코드의 디자인로직(QML 부분)과 기능로직(C++)을 완벽히 분리할 수 있어 작성한 코드의 재사용성을 높일 수 있습니다.

Q&A 💬

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

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

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

네. 있습니다. 무료 Qt 프로그래밍(450페이지) 및 Qt Quick 프로그래밍(350 페이지) PDF를 무료로 배포, 제공하고 있습니다. 교재를 이용해 강의 학습 후 참고 자료로 활용할 수 있습니다. (Github 바로가기) 

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

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

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

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

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

💾 참고 사항

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

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
QML을 이용해 UI를 개발하시려는 분
Qt 프레임워크에서 QML을 이용해 UI를 개발하시려는 분
📚
선수 지식,
필요할까요?
C++
Qt

안녕하세요
김대진 입니다.
김대진의 썸네일

지식공유자 소개 ✒️

: IT 관련 기업 연구소 부장
전: LG전자, VS사업부 IVI선행플랫폼/모듈개발
전: SW마에스트로, SW 멘토

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

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

커리큘럼 총 99 개 ˙ 17시간 33분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. QML 타입의 기본구조
QML의 문법과 타입 미리보기 10:30
이미지와 마우스 이벤트를 이용한 실습 예제 18:29
섹션 2. Variable (QML에서 사용 가능한 변수)
Property의 이해와 Type을 이용한 예제 07:44
다양한 형태의 확장된 변수와 Vector2d를 이용한 예제 07:46
Text 타입을 이용한 실습 예제 07:50
섹션 3. Types
타입의 특징, Rectangle, Image 그리고 AnimatedImage 12:21
anchors, gradient, Screen 그리고 FontLoader 09:40
Transform 과 Accessible 타입 07:36
anchors를 이용한 실습 예제 11:17
Accessible 타입을 이용한 버튼 기능 구현 실습 예제 21:33
섹션 4. Graphic Effects
Qt Quick 에서 제공하는 Graphic Effect 종류 02:48
Blend, BrightnessContrast 그리고 ColorOverlay 04:58
Colorize, Desaturate, GammaAdjust 그리고 HueSaturation 02:27
LevelAdjust, Displace, FastBlur 그리고 DirectionBlur 07:37
Glow 와 RectangularGlow 04:10
섹션 5. Events
이벤트 종류와 MouseArea 10:46
TextInput와 KeyNavigation Type을 이용한 이벤트 처리 06:55
Keys, MultiPointTouchArea, TouchPoint 그리고 Flickable 10:36
Flickable 응용 실습 예제 16:23
Signal 과 Signal Handler 실습 예제 16:32
Connections 타입 사용 예제 02:24
1개의 Signal과 2개의 Method를 연결하기 위한 실습예제 10:08
섹션 6. Loader를 이용한 동적(Dynamically) 배치
Loader 타입의 특징 및 기능 08:55
Component 와 Loader 타입의 사용 예 08:20
Loader타입에서 여러개의 타입 호출과 status 05:56
Loader타입으로 타입 프로퍼티 값 변경 04:19
Loader타입을 이용한 동적 QML 로딩 실습 예제 22:58
섹션 7. Module Programming
타입 모듈화 및 QML 파일로 모듈화 하기 15:46
사용자 정의 CheckBox 모듈화 구현 실전 예제 27:21
섹션 8. Canvas를 이용한 2D Graphics
Canvas의 특징 및 기능 13:42
이미지 표시와 객체 이동(Translate) 04:54
Canvas영역을 Image타입으로 복사와 Composition Mode 09:56
Canvas를 이용한 그림판 구현 실습 예제 26:29
섹션 9. Dialog
QML에서 제공하는 다이얼로그 11:09
Color 다이얼로그 구현 실전 예제 08:56
섹션 10. Layout
Layout의 종류와 사용 방법 08:39
Layout을 이용한 GUI 구현 실전 예제 14:57
섹션 11. Qt Quick Controls
Qt Quick Controls 모듈에서 제공하는 타입들 17:45
Button과 Action타입을 이용한 실습 예제 구현 05:05
섹션 12. Model and View
Model과 View의 개념과 사용 예 08:06
ListModel과 ListElement 08:00
ListView의 사용 방법 11:42
Repeater, Header 그리고 Footer 08:37
GridView 10:34
TableView와 ObjectModel 04:33
ListView에서 JavaScript 함수 사용하기 04:02
Chess 게임 실습 예제 22:45
섹션 13. Type Positioning
타입들을 배치하기 위한 방법 07:32
Calendar 구현 실습 예제 34:17
섹션 14. QML에서 JavaScript 사용
QML에서 JavaScript 함수 사용 방법의 종류 02:47
Property Binding 방식과 Signal과 JavaScript 함수 연결 04:10
QML에서 JavaScript 함수를 호출 05:38
JavaScript 파일을 QML에서 Import 하기 04:48
계산기 구현 실습 예제 25:33
섹션 15. Animation
Animation에 대한 이해 05:06
NumberAnimation 과 PropertyAnimation 05:19
RotationAnimation 과 Animation의 이벤트 07:13
Behavior, SmoothedAnimation 그리고 SpringAnimation 12:10
SequentialAnimation 과 ParallelAnimation 06:17
Easing Curves 06:54
섹션 16. Animation과 Easing curve를 이용한 Ball Bouncing 구현
구현할 Ball Bouncing 예제에 대한 설명 01:25
Ball Bouncing 구현 20:31
섹션 17. State and Transition
State 와 Transition의 개념 04:18
State를 이용해 Rectangle타입의 Color 변경 05:24
State와 Transition 06:23
State와 when 06:05
Transition을 사용한 실습 예제 11:36
섹션 18. State 와 Transition을 이용한 Image Viewer 구현
Image Viewer를 어떻게 구현할지 전체적인 구조 설명 05:58
프로젝트 생성, 리소스 등록 그리고 모듈 추가 11:49
Button 타입 구현 07:11
RotationButton 타입 구현 08:19
Thumbnail 타입 구현 08:56
구현한 타입들을 이용해 전체 구조설계 및 타입배치 08:23
각 타입별 세부 구현 16:21
Transition 세부 구현 15:38
섹션 19. QML 과 C++ 간 Integration
QML과 C++간의 Interaction 시 필요한 기능 07:17
Q_PROPERTY( ) 의 이해 및 사용 방법 08:10
QML과 C++간의 Interaction 하기 위한 실습 예제 15:10
Q_INVOKABLE을 이용해 QML에서 C++ 함수 호출 실습 예제 21:40
섹션 20. C++을 이용해 새로운 QML 타입 구현
qmlRegisterType( ) 를 이용해 새로운 타입 구현하기 08:19
C++을 이용해 새로운 QML 타입을 구현하는 실습 예제 20:57
새로운 타이머 타입 구현 실습 예제 27:24
섹션 21. QML에서 QQuickPaintedItem 클래스 사용하기
QML에서 QQuickPaintedItem 클래스를 사용하는 이유 04:52
QML에서 QQuickPaintedItem을 이용해 2D 드로잉 구현 실습 예제 13:12
섹션 22. C++로부터 QML Object 와 변수 매핑
C++에서 특정 타입의 프로퍼티 값을 제어하기 11:57
C++에서 invokeMethod()를 사용해 JS함수 호출 04:33
C++에서 QML 시그널과 C++ 슬롯 함수 연결하기 05:06
QML Object를 C++에서 형변환 및 사용 07:04
QML에서 C++로 변수 및 오브젝트 변환 09:14
Model 과 View를 이용한 ListModel 사용 예 06:17
C++에서 구현한 Enum을 QML에서 사용하기 위한 실습 예제 12:19
섹션 23. C++과 QML을 이용해 채팅 예제 구현
구현할 Server 와 Client 채팅 예제 설명 05:25
채팅 Server 에제 구현 24:37
채팅 Client 예제 구현 22:41
강의 게시일 : 2022년 11월 10일 (마지막 업데이트일 : 2022년 11월 10일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다.
5
5개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
rioyu321 thumbnail
5
임베디드 프로젝트를 구현해야 하는데 도움이 많이 될것 같습니다. 또한 좋은 강의와 책, 그리고 Github를 주셔서 매우 감사 합니다.
2023-01-12
지식공유자 김대진
rioyu321님, 도움이 되었다니 너무 감사합니다. ^^; 더 좋은 QML 강의가 있으면 강의를 추가하고, QML상에서 업데이트 되는 기능이 있으면 이 강의에 업데이트 할 수 있도록 노력하겠습니다.
2023-01-12
Junghwan Jeong thumbnail
5
QML을 향후 어떻게 사용 할 지에 대해서 많은 도움이 되었습니다. 향후에 실무적인 아이템을 하나를 선정해서 전체 과정을 구현하는 교육과정이 있으면 노하우를 습득하는데 도움이 될 것 같습니다.
2023-02-04
지식공유자 김대진
Junghwan Jeong 님 도움이 되셨다니 너무 감사합니다. 좋은 피드백 감사합니다. 다음 QML 활용편에서는 전체 과정을 구현하는 것을 추가하고 Qt Design Studio 도 넣을 수 있도록 하겠습니다.
2023-02-04
수뼈 thumbnail
5
QML에 대한 부담감을 많이 줄여주는 입문용 강의로 아주 좋은 강의라고 생각합니다. 잘 들었습니다.
2024-02-13
지식공유자 김대진
안녕하세요. 좋은 평가해 주셔서 너무 감사합니다.
2024-02-14
flatjam thumbnail
5
QML 을 처음 접했을 때, 이거 또 귀찮게 매뉴얼을 파보면서 공부해야 하나 싶었는데 우연찮게 이 강의를 보게 되었고 듣고 나니 QML 에 대해서 감을 잡을 수 있어서 매우 좋았습니다. 만약 이어서 좀 더 고급 과정과 실무 예제가 있는 후속 강의가 있다면 빨리 나왔으면 합니다. 강사님 정말 너무 고맙습니다 ^^
2023-08-18
지식공유자 김대진
안녕하세요. flatjam 님 좋은 평가해 주셔서 너무 감사합니다. ^^;
2023-08-18
임대희 thumbnail
5
QML에 대해서 감을 잡기 좋은 강의 였던 것 같습니다.
2023-07-31
지식공유자 김대진
임대희님, 좋은 평가해주셔서 너무 감사합니다. ^^;
2023-07-31
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!