QML
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
QML은 Qt Meta-Language의 약자로, 사용자 인터페이스(UI)를 구축하기 위한 선언적 언어이다. QML 문서는 객체 유형으로 구성되며, 속성 바인딩, 상태, 애니메이션을 지원하여 UI 요소 간의 동적 상호 작용을 구현한다. QML은 Qt/C++와 통합되어 C++ 클래스를 QML에서 사용할 수 있도록 하며, 신호, 슬롯, 속성 등 Qt의 핵심 개념을 활용한다. 또한, Qt Creator와 같은 개발 도구를 통해 QML 기반 애플리케이션을 개발할 수 있으며, KDE Plasma, Sailfish OS, BlackBerry 10 등 다양한 운영체제 및 소프트웨어에서 채택되었다.
더 읽어볼만한 페이지
- Qt - Qt (소프트웨어)
Qt는 C++로 작성된 크로스 플랫폼 애플리케이션 개발 프레임워크로, GUI, 멀티미디어, 네트워크 등 다양한 기능을 제공하며, 시그널과 슬롯 메커니즘과 Qt Creator 등의 개발 도구를 통해 데스크톱, 임베디드, 모바일 UI 개발에 널리 사용된다. - Qt - PySide
PySide는 노키아가 LGPL 라이선스로 출시한 Qt 프레임워크의 파이썬 바인딩으로, 다양한 플랫폼을 지원하며 자체 바인딩 생성기인 Shiboken을 통해 Qt의 고급 기능과의 통합을 강화했다. - 선언형 프로그래밍 언어 - XAML
XAML은 마이크로소프트에서 개발한 XML 기반의 마크업 언어로, 사용자 인터페이스, 데이터 바인딩, 이벤트 처리 등을 정의하며 WPF, Silverlight, WF, WinRT API 앱, Xamarin.Forms 등에서 UI 개발에 널리 사용된다. - 선언형 프로그래밍 언어 - 임베디드 SQL
임베디드 SQL은 호스트 프로그래밍 언어 내에 SQL 문을 삽입하여 데이터베이스와 상호 작용하는 기술로, 데이터베이스 액세스를 표준화하지만 보안 취약점과 이식성 저하의 단점도 가진다.
| QML - [IT 관련 정보]에 관한 문서 | |
|---|---|
| 기본 정보 | |
 | |
| 개발 시작일 | 2009년 |
| 개발자 | Qt 프로젝트 |
| 최신 버전 | 6.4 |
| 최신 릴리스 날짜 | 2022년 9월 29일 |
| 자료형 체계 | 동적, 강한 |
| 영향 받은 언어 | XAML, JSON, 자바스크립트, Qt |
| 영향을 준 언어 | Qt, Ring |
| 웹사이트 | QML 애플리케이션 |
| 파일 확장자 | .qml |
| 특징 | |
| 프로그래밍 패러다임 | 다중 패러다임: 선언형, 반응형, 스크립트 |
2. 문법 및 시맨틱스
QML 문법은 객체 선언, 속성 할당, `id` 속성 등을 사용하여 구성되며, 객체의 동작 방식을 정의한다.
객체는 타입을 통해 지정되며, 타입 뒤에는 중괄호({})가 온다. 객체 유형은 항상 대문자로 시작한다. 중괄호 안에는 'property: value' 형태로 속성 값을 지정할 수 있으며, 콜론(:)으로 구분된다.
각 객체는 `id`라는 특별한 고유 속성을 가질 수 있다. `id`를 할당하면 다른 객체와 스크립트에서 해당 객체를 참조할 수 있다. `id`는 소문자 또는 언더스코어(_)로 시작해야 하며, 라틴 문자, 숫자 및 언더스코어만 포함할 수 있다.
속성 바인딩은 선언적인 방식으로 속성 값을 지정한다. 속성 값은 다른 속성 또는 데이터 값이 변경될 때 반응형 프로그래밍 패러다임을 따라 자동으로 업데이트된다. QML은 표준을 준수하는 JavaScript 엔진을 확장하므로, 유효한 JavaScript 표현식은 속성 바인딩으로 사용할 수 있다.
상태는 의미 단위로 속성 변경을 결합하는 메커니즘이다. 예를 들어 버튼에는 눌린 상태와 눌리지 않은 상태가 있을 수 있다. 모든 요소는 "암시적" 기본 상태를 가지며, 다른 상태는 기본 상태와 다른 해당 요소의 속성과 값을 나열하여 설명한다. 상태 변경은 전환(Transitions)을 사용하여 애니메이션화할 수 있다.
QML 애니메이션은 객체의 속성을 애니메이션화하여 수행된다. `real`, `int`, `color`, `rect`, `point`, `size` 및 `vector3d` 유형의 속성을 모두 애니메이션화할 수 있다. QML은 기본 속성 애니메이션, 전환 및 속성 동작의 세 가지 주요 형태의 애니메이션을 지원한다. 가장 간단한 형태의 애니메이션은 `PropertyAnimation`이며, `Animation on property` 구문을 사용하여 값 소스로 지정할 수 있다.
2. 1. 기본 문법
QML 코드는 객체 선언, 속성 할당, `id` 속성 등의 요소로 구성된다.객체는 타입을 통해 지정되며, 타입 뒤에는 중괄호({})가 온다. 객체 유형은 항상 대문자로 시작한다. 예를 들어, 다음 코드는 `Rectangle`과 그 자식인 `Image` 두 개의 객체를 선언한다.
```qml
Rectangle {
id: canvas
width: 250
height: 200
color: "blue"
Image {
id: logo
source: "pics/logo.png"
anchors.centerIn: parent
x: canvas.height / 5
}
}
```
중괄호 안에는 속성과 같이 객체에 대한 정보를 지정할 수 있다. 속성은 'property: value' 형태로 지정되며, 콜론(:)으로 구분된다. 위의 예제에서 `Image` 객체는 `source` 속성을 가지며, 이 속성의 값은 "pics/logo.png"이다.
`id` 속성각 객체는 `id`라는 특별한 고유 속성을 가질 수 있다. `id`를 할당하면 다른 객체와 스크립트에서 해당 객체를 참조할 수 있다. 예를 들어:
```qml
Item {
Rectangle {
id: myRect
width: 120
height: 100
}
Rectangle {
width: myRect.width
height: 200
}
}
```
위 코드에서 첫 번째 `Rectangle` 요소는 `myRect`라는 `id`를 갖는다. 두 번째 `Rectangle` 요소는 `width` 속성을 정의할 때 `myRect.width`를 참조하여 첫 번째 `Rectangle` 요소와 동일한 너비 값을 갖게 된다.
`id`는 소문자 또는 언더스코어(_)로 시작해야 하며, 라틴 문자, 숫자 및 언더스코어만 포함할 수 있다.
2. 2. 속성 바인딩
속성 바인딩은 선언적인 방식으로 속성의 값을 지정한다. 속성 값은 다른 속성 또는 데이터 값이 변경될 때 반응형 프로그래밍 패러다임을 따라 자동으로 업데이트된다.속성 바인딩은 속성에 JavaScript 표현식이 할당될 때마다 QML에서 암묵적으로 생성된다. 다음은 사각형의 크기를 otherItem의 크기에 연결하기 위해 두 개의 속성 바인딩을 사용하는 QML 예시이다.
```qml
Rectangle {
width: otherItem.width
height: otherItem.height
}
```
QML은 표준을 준수하는 JavaScript 엔진을 확장하므로, 유효한 JavaScript 표현식은 속성 바인딩으로 사용할 수 있다. 바인딩은 객체 속성에 접근하고, 함수를 호출하며, Date 및 Math와 같은 내장 JavaScript 객체도 사용할 수 있다.
다음은 속성 바인딩의 예시이다.
```qml
Rectangle {
function calculateMyHeight() {
return Math.max(otherItem.height, thirdItem.height);
}
anchors.centerIn: parent
width: Math.min(otherItem.width, 10)
height: calculateMyHeight()
color: width > 10 ? "blue" : "red"
}
2. 3. 상태
상태는 의미 단위로 속성 변경을 결합하는 메커니즘이다. 예를 들어 버튼에는 눌린 상태와 눌리지 않은 상태가 있으며, 주소록 애플리케이션에는 연락처에 대한 읽기 전용 상태와 편집 상태가 있을 수 있다. 모든 요소는 "암시적" 기본 상태를 갖는다. 다른 모든 상태는 기본 상태와 다른 해당 요소의 속성과 값을 나열하여 설명한다.예시:
기본 상태에서 `myRect`는 0,0 위치에 있다. "moved" 상태에서는 50,50 위치에 있다. 마우스 영역 내에서 클릭하면 상태가 기본 상태에서 "moved" 상태로 변경되어 사각형이 이동한다.
상태 변경은 전환(Transitions)을 사용하여 애니메이션화할 수 있다.
예를 들어, 위의 Item 요소에 다음 코드를 추가하면 "moved" 상태로의 전환이 애니메이션화된다.
상태는 의미론 단위에서 속성의 변경을 연결하는 구조이다. 예를 들어 버튼은 눌린 상태와 그렇지 않은 상태를 가지며, 주소록 애플리케이션은 연락처에 대한 읽기 전용 상태와 편집 가능한 상태를 가질 수 있다. 모든 요소는 암묵적인 기본 상태를 가진다. 이 외의 모든 상태는 기본 상태와 다른 이러한 요소의 속성과 값을 열거하여 기술된다.
예:
기본 상태에서
myRect는 0, 0에 배치된다. moved에서는 50, 50에 배치된다. 마우스 영역 내를 클릭하면 상태가 기본 상태에서 moved로 변화하여, 직사각형이 이동한다.상태의 변경은 트랜지션을 사용하여 애니메이션으로 만들 수 있다.
예를 들어, 아래 코드를 위의
Item에 추가하면, moved로의 전환을 동적인 것으로 만들 수 있다.2. 4. 애니메이션
QML의 애니메이션은 객체의 속성을 애니메이션화하여 수행된다. `real`, `int`, `color`, `rect`, `point`, `size` 및 `vector3d` 유형의 속성을 모두 애니메이션화할 수 있다.QML은 기본 속성 애니메이션, 전환 및 속성 동작의 세 가지 주요 형태의 애니메이션을 지원한다.
가장 간단한 형태의 애니메이션은 위에 나열된 모든 속성 유형을 애니메이션화할 수 있는 `PropertyAnimation`이다. 속성 애니메이션은 `Animation on property` 구문을 사용하여 값 소스로 지정할 수 있다. 이는 반복 애니메이션에 특히 유용하다.
다음은 바운스 효과를 만드는 예제이다.
```qml
Rectangle {
id: rect
width: 120; height: 200
Image {
id: img
source: "pics/qt.png"
x: 60 - img.width/2
y: 0
SequentialAnimation on y {
loops: Animation.Infinite
NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
PauseAnimation { duration: 1000 }
NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
}
}
}
3. Qt/C++ 통합
QML은 Qt/C++ 지식이 필수는 아니지만, Qt를 통해 쉽게 확장할 수 있다.[28][29] QObject에서 파생된 모든 C++ 클래스는 QML에서 인스턴스(인스턴스화)될 수 있는 자료형으로 쉽게 등록될 수 있다.
QObject 시그널은 자바스크립트에서 콜백을 트리거하고, QObject 슬롯은 자바스크립트에서 호출할 수 있는 함수로 사용할 수 있으며, QObject 속성은 자바스크립트의 변수나 바인딩으로 사용할 수 있다.
3. 1. 친숙한 개념
- QObject 신호 – 자바스크립트에서 콜백을 트리거할 수 있다.
- QObject 슬롯 – 자바스크립트에서 호출할 수 있는 함수로 사용 가능하다.
- QObject 속성 – 자바스크립트에서 변수로 사용 가능하며, 바인딩에도 사용 가능하다.
- QWindow – Window는 창에 QML 장면을 생성한다.
- Q*Model – 데이터 바인딩에 직접 사용된다(예: QAbstractItemModel).
3. 2. 시그널 핸들러
시그널 핸들러는 이벤트에 대한 응답으로 명령형 작업을 수행할 수 있도록 하는 자바스크립트 콜백이다. 예를 들어, `MouseArea` 요소에는 마우스 누름, 뗌, 클릭을 처리하는 시그널 핸들러가 있다.[55]```qml
MouseArea {
onPressed: console.log("마우스 버튼 눌림")
}
```
모든 시그널 핸들러 이름은 "on"으로 시작한다.[55]
4. 개발 도구
QML과 JavaScript는 매우 유사하므로 JavaScript를 지원하는 거의 모든 소스 코드 편집기에서 사용할 수 있다. 단, 구문 강조·코드 완성·통합된 도움말·WYSIWYG 편집기의 완전한 지원은 Qt Creator 2.1 이후 또는 기타 통합 개발 환경에서 사용할 수 있다.
QML 실행 파일은 QML을 스크립트로 실행하는 데 사용할 수 있다. QML 파일이 시뱅으로 시작하는 경우에는 직접 실행할 수 있다. 그러나 애플리케이션을 패키징할 때(특히 모바일 플랫폼)에는 간단한 C++ 런처를 만들고 필요한 QML 파일을 리소스로 패키징해야 한다.[1]
5. QML 채택
다음은 QML을 채택한 운영체제 및 소프트웨어 목록이다.
| 운영체제/소프트웨어 | 설명 |
|---|---|
| KDE 플라스마 4[11], KDE 플라스마 5, 플라스마 6 | 플라스마 프레임워크를 통해 QML 사용 |
| [https://liri.io/ Liri OS] | |
| SDDM | |
| [https://remarkable.com/ reMarkable 태블릿 장치][12][13] | |
| Unity2D[14] | |
| 세일피시 OS[15][16][17] | |
| 블랙베리 10[18] | |
| 미고[19][20] | |
| 마에모[21] | |
| 타이젠[22] | |
| Mer[23][24][25] | |
| 우분투 폰[26] | 우분투 터치(Ubuntu Touch)로도 알려져 있다. |
| 루미나 (데스크톱 환경)[27] | |
| [https://github.com/search?l=QML&q=qml&type=Repositories 다양한 오픈 소스 응용 프로그램] |
참조
[1]
웹사이트
Qt 6.4 Released
https://www.qt.io/bl[...]
[2]
웹사이트
Which interface for a modern application?
https://www.scriptol[...]
[3]
웹사이트
The Ring programming language and other languages
https://web.archive.[...]
ring-lang
2017-12-05
[4]
웹사이트
Qt Declarative API Changes {{!}} Qt Blog
http://blog.qt.digia[...]
2014-03-25
[5]
웹사이트
Qt 3D Overview {{!}} Qt 3D 5.13.1
https://doc.qt.io/qt[...]
[6]
웹사이트
All QML Types {{!}} Qt 5.13
https://doc.qt.io/qt[...]
2019-09-07
[7]
웹사이트
Evolution of the QML engine, part 1
http://blog.qt.io/bl[...]
2018-05-11
[8]
웹사이트
What's New in Qt 5.2
http://doc.qt.io/qt-[...]
2018-05-11
[9]
웹사이트
Qt Quick Compiler
http://doc.qt.io/QtQ[...]
2019-09-07
[10]
웹사이트
Deploying QML Applications {{!}} Qt 5.13
https://doc.qt.io/qt[...]
2019-09-07
[11]
웹사이트
Development/Tutorials/Plasma4/QML/GettingStarted
https://techbase.kde[...]
KDE
[12]
웹사이트
Developing for the reMarkable tablet
https://dragly.org/2[...]
2017-12
[13]
웹사이트
QML Demo for the reMarkable Paper Tablet
https://github.com/r[...]
2022-03-09
[14]
웹사이트
Ubuntu's Unity Written In Qt/QML For "Unity Next"
https://www.phoronix[...]
Michael Larabel
[15]
웹사이트
Combining C++ with QML in Sailfish OS applications
https://sailfishos.o[...]
[16]
웹사이트
Tutorial - QML Live Coding With Qt QmlLive
https://sailfishos.o[...]
[17]
웹사이트
QML to C++ and C++ to QML
https://together.jol[...]
Jolla
[18]
웹사이트
QML fundamentals
http://developer.bla[...]
Blackberry
[19]
웹사이트
Intro to QML for Meego
https://web.archive.[...]
Nokia
2018-01-03
[20]
웹사이트
MeeGo and Qt / QML demos assault MWC
https://www.iotgadge[...]
IoT Gadgets
2011-02-23
[21]
웹사이트
QML on N900
http://wiki.maemo.or[...]
Maemo Community
[22]
웹사이트
Qt Launches on Tizen with Standard Look and Feel
http://qtfortizen.bl[...]
2013-05-20
[23]
웹사이트
Mer
http://www.merprojec[...]
[24]
웹사이트
Mer wiki
https://wiki.merproj[...]
[25]
웹사이트
Lipstick QML UI on MeeGo CE / Mer
https://www.iotgadge[...]
IoT Gadgets
2011-10-06
[26]
웹사이트
QML - the best tool to unlock your creativity
https://docs.ubuntu.[...]
Ubuntu
[27]
웹사이트
Looking at Lumina Desktop 2.0
https://www.trueos.o[...]
TrueOS
2020-08-19
[28]
웹사이트
The Qt/QML User Story
https://imaginitis.n[...]
[29]
웹사이트
The many ways to unite QML and C++
https://www.qtdevelo[...]
BlackBerry
[30]
웹사이트
QAbstractItemModels in QML views
https://jdahlbom.wor[...]
2010-04-22
[31]
웹사이트
Sorting and filtering a TableView
https://blog.qt.io/b[...]
The Qt Company
[32]
웹사이트
How to use Qt's QSortFilterProxyModel
http://imaginativeth[...]
2014-07-11
[33]
웹사이트
Qt 5.12 LTS Released
https://blog.qt.io/b[...]
Qt Blog
2018-12-06
[34]
웹사이트
Qt Declarative API Changes
http://blog.qt.digia[...]
2014-11-13
[35]
웹사이트
Qt 3D Overview
https://doc.qt.io/qt[...]
The Qt Company
[36]
웹사이트
All QML Types
https://doc.qt.io/qt[...]
The Qt Company
2018-12-13
[37]
문서
V8 (JavaScriptエンジン)|V8をカスタマイズしたJavaScriptエンジン。
[38]
웹사이트
Evolution of the QML engine, part 1
https://blog.qt.io/b[...]
2018-12-13
[39]
웹사이트
What's New in Qt 5.2
https://doc.qt.io/qt[...]
The Qt Company
2018-12-13
[40]
웹사이트
Qt Quick Compiler
https://doc.qt.io/Qt[...]
The Qt Company
2018-12-13
[41]
웹사이트
Deploying QML Applications
https://doc.qt.io/qt[...]
The Qt Company
2018-12-13
[42]
웹사이트
Development/Tutorials/Plasma4/QML/GettingStarted
https://techbase.kde[...]
KDE
2018-12-13
[43]
웹사이트
Developing for the reMarkable tablet
https://dragly.org/2[...]
KDE
2018-12-13
[44]
웹사이트
reHackable-HelloWorld
https://github.com/r[...]
GitHub
2018-12-13
[45]
웹사이트
Ubuntu's Unity Written In Qt/QML For "Unity Next"
https://www.phoronix[...]
2018-12-13
[46]
웹사이트
Tutorial - Combining C++ with QML
https://sailfishos.o[...]
SailfishOS
2018-12-13
[47]
웹사이트
Tutorial - QML Live Coding With Qt QmlLive
https://sailfishos.o[...]
SailfishOS
2018-12-13
[48]
웹사이트
QML fundamentals
https://developer.bl[...]
BlackBerry
2018-12-13
[49]
웹사이트
MeeGo and Qt / QML demos assault MWC
https://www.iotgadge[...]
2018-12-13
[50]
웹사이트
QML
https://wiki.maemo.o[...]
Maemo
2018-12-13
[51]
웹사이트
Qt Launches on Tizen with Standard Look and Feel
https://qtfortizen.b[...]
Qt for Tizen Blog
2018-12-13
[52]
웹사이트
Mer Project
http://www.merprojec[...]
Mer Project
2018-12-13
[53]
웹사이트
QML - the best tool to unlock your creativity
https://docs.ubuntu.[...]
Canonical
2018-12-13
[54]
웹사이트
Looking at Lumina Desktop 2.0
https://www.trueos.o[...]
2018-12-13
[55]
웹사이트
QAbstractItemModels in QML views
https://jdahlbom.wor[...]
The missing pieces
2018-12-13
[56]
웹인용
Qt 5.12.1 Released
https://blog.qt.io/b[...]
[57]
웹인용
Which interface for a modern application?
https://www.scriptol[...]
[58]
웹인용
The Ring programming language and other languages
http://ring-lang.sou[...]
ring-lang
2020-04-22
[59]
웹인용
Qt Declarative API Changes {{!}} Qt Blog
http://blog.qt.digia[...]
2014-03-25
[60]
웹인용
Qt 3D Overview {{!}} Qt 3D 5.13.1
https://doc.qt.io/qt[...]
[61]
웹인용
All QML Types {{!}} Qt 5.13
https://doc.qt.io/qt[...]
2019-09-07
[62]
웹인용
Evolution of the QML engine, part 1
http://blog.qt.io/bl[...]
2018-05-11
[63]
웹인용
What's New in Qt 5.2
http://doc.qt.io/qt-[...]
2018-05-11
[64]
웹인용
Qt Quick Compiler
http://doc.qt.io/QtQ[...]
2019-09-07
[65]
웹인용
Deploying QML Applications {{!}} Qt 5.13
https://doc.qt.io/qt[...]
2019-09-07
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com