— QT Desing Studio \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 : Desktop \uc120\ud0dd\ud558\uc154\uc11c \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
Create a QT Design Studio project: Select Desktop and create a project.<\/p>\n\n\n\n
— \uc88c\uce21 \uc0c1\ub2e8\uc5d0 LIve Preview\uc120\ud0dd\ud558\uc2dc\uace0 \uc138\ubaa8 \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud558\uc2dc\uba74 \ud504\ub9ac\ubdf0\ub97c \ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. — QT Desing Studio \uc88c\uce21 \uba54\ub274\uc5d0\uc11c \uadf8\ub0e5 \ud654\uba74\uc5d0 \ub04c\uc5b4\ub3c4 \ub193\uc73c\uba74 \ub429\ub2c8\ub2e4. — \ud654\uba74 \uad6c\uc131\uc774 \uc798 \uc548\ub418\uba74 code\ud0ed\uc5d0\uc11c \ucf54\ub4dc\ub97c \uc9c1\uc811 \uc218\uc815\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4. — 2D,Code\ud0ed\uc774 \uc548\ubcf4\uc774\uba74 \uba54\ub274\uc5d0\uc11c VIew->Views\uc5d0 \ubcf4\uc2dc\uba74 2D,Code \uccb4\ud06c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. — QT Design Studio \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\uc5d0 \uac00\ubcf4\uc2dc\uba74 \uc800\uc758 \uacbd\uc6b0\ub294 \uc774\ub807\uac8c \ub9cc\ub4e4\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. — Screen01.ui.qml\uc774 \ud30c\uc77c\uc744 QT Creator\uc5d0\uc11c \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4. — \uc774 \ud30c\uc77c\uc744 QT Creator\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uacbd\uc6b0 Screen01.ui.qml \ucf54\ub4dc \uc218\uc815\uc774 \ud544\uc694 \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. — \uc5ec\ub7ec\ubd84\uc758 \ud658\uacbd\uc5d0 \ub9de\uac8c \uc218\uc815\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4. 1)QML\ud30c\uc77c \ubcf5\uc0ac \ubc0f \ub514\ub809\ud1a0\ub9ac \uc815\ub9ac \/ Copy QML files and organize directories<\/strong> — \ub514\ub809\ud1a0\ub9ac\ub97c \ub9cc\ub4e4\uace0 \ud30c\uc77c\uc744 \ubd99\uc5ec\ub123\uc5b4\ub3c4 QT Creator\uc5d0\uc11c\ub294 \ubcf4\uc774\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. –QT Creator\uc5d0 \ubcf4\uc774\uac8c \ub9cc\ub4e4\ub824\uba74 CmakeLists.txt\ud30c\uc77c\uc744 \uc234\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. 2)CmakeLists.txt \ud30c\uc77c \uc218\uc815 \/ Modify the CmakeLists.txt file<\/strong><\/p>\n\n\n\n — CmakeLists.txt\uc5d0 qml\ud30c\uc77c\uc744 \uc778\uc2dd \ud560 \uc218 \uc788\uac8c \ub2e4\uc74c \ub0b4\uc6a9\uc744 \ucd94\uac00 \ud569\ub2c8\ub2e4. — \ud30c\uc77c\uc744 \uc218\uc815\ud558\uace0 \uc800\uc7a5\ud558\uba74 \ud504\ub85c\uc81d\ud2b8 \ucc3d\uc5d0 \ud30c\uc77c\uc774 \ub098\ud0c0\ub0a9\ub2c8\ub2e4. <\/p>\n\n\n\n 3)Main.qml\ud30c\uc77c \uc218\uc815 \/ Modify the Main.qml file<\/strong><\/p>\n\n\n\n — \ube4c\ub4dc\ud558\uba74 \uc774\ub807\uac8c \ud654\uba74\uc5d0 \ud504\ub85c\uadf8\ub7a8\uc774 \uc2e4\ud589\ub418\ub294 \ubaa8\uc2b5\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. — qml\/Screen01.qml<\/p>\n\n\n\n — main.cpp<\/p>\n\n\n\n — Main.qml<\/p>\n\n\n\n — QT\uc0ac\uc6a9\uc2dc \ud504\ub860\ud2b8\uc5d4\ub4dc \ub514\uc790\uc778\uc744 QT Creator\uc5d0\uc11c widget\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\uae30\uc874 \ubc29\uc2dd)When using QT, you can create front-end designs as widgets in QT Creator (existing method). — QML\uc740 QT\ub85c \ub9cc\ub4e4 \uc571\uc758 \ub514\uc790\uc778\uc744 \ub9cc\ub4dc\ub294 \uc0c8\ub85c\uc6b4 \ubc29\uc2dd\uc785\ub2c8\ub2e4.QML is a new way to create designs for apps built with QT. — QT Design Studio\uc744 \uc0ac\uc6a9\ud558\uba74 \uc9c1\uc811 \ub2e4 \ucf54\ub529\ud558\uc9c0\uc54a\uc544\ub3c4 QML […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,1],"tags":[],"class_list":["post-2161","post","type-post","status-publish","format-standard","hentry","category-qt","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2161"}],"version-history":[{"count":48,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2161\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2161\/revisions\/2224"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can see the preview by selecting LIve Preview in the upper left corner and clicking the triangle icon.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designstudio-0-1024x616.png\")
<\/figure>\n\n\n\n
You can simply drag and drop it onto the screen from the left menu in QT Design Studio.<\/p>\n\n\n\n
If the screen configuration is not correct, you can directly edit the code in the code tab.<\/p>\n\n\n\n
If you don’t see the 2D, Code tab, go to View->Views in the menu and check 2D, Code.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designstudio-1-1024x658.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-desingStudio-2-1024x662.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designStudio-3-1-1024x636.png\")
<\/figure>\n\n\n\n2.QT Creator\uc5d0\uc11c QML \uc801\uc6a9\ud558\uae30 \/ Applying QML in QT Creator<\/strong><\/h6>\n\n\n\n
If you go to the QT Design Studio project folder, in my case it is created like this.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designStudio-4.png\")
<\/figure>\n\n\n\n
You can use this file Screen01.ui.qml in QT Creator.<\/p>\n\n\n\n
If you use this file in QT Creator, you may need to modify the Screen01.ui.qml code.<\/p>\n\n\n\n
You can modify it to suit your environment.<\/p>\n\n\n\n
— \uc704\uc758 Screen01.ui.qml\ud30c\uc77c\uc744 QT Creator\ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 qml\ub514\ub809\ud1a0\ub9ac\ub97c \ub9cc\ub4e4\uace0 \ud30c\uc77c\uc744 \ubd99\uc5ec \ub123\uc2b5\ub2c8\ub2e4.
Create a qml directory within the QT Creator project directory and paste the reen01.ui.qml file.<\/p>\n\n\n\n
Even if I create a directory and paste a file into it, it is not visible in QT Creator.<\/p>\n\n\n\n
You need to edit the CmakeLists.txt file to make it visible in QT Creator.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designStudio-5.png\")
<\/figure>\n\n\n\n
Add the following to CmakeLists.txt to enable qml file recognition<\/p>\n\n\n\n
When you edit and save a file, it will appear in the project window.<\/p>\n\n\n\n# qml \ud30c\uc77c\ub4f1\ub85d \/ Registering qml file\nqt_add_qml_module(appexample2\n URI example2\n VERSION 1.0\n QML_FILES\n Main.qml\n qml\/Screen01.qml<\/strong>\n)<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designStudio-6.png\")
<\/figure>\n\n\n\nimport QtQuick\n\nWindow {\n width: 640\n height: 480\n visible: true\n title: qsTr(\"Hello World\")\n\n \/\/ UI \ud30c\uc77c \ub85c\ub529 \/ UI file loading\n Loader {\n anchors.fill: parent\n source: \"qml\/Screen01.qml\"\n }\n}\n<\/code><\/pre>\n\n\n\n3.\uc2e4\ud589 \/ run<\/strong><\/h6>\n\n\n\n
When you build, you will see the program running on the screen like this.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/10\/qt-designStudio-7.png\")
<\/figure>\n\n\n\n4.\uc804\uccb4\ucf54\ub4dc \/ Full Code<\/strong><\/h6>\n\n\n\n
\n\n\/*\nThis is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.\nIt is supposed to be strictly declarative and only uses a subset of QML. If you edit\nthis file manually, you might introduce QML code that is not supported by Qt Design Studio.\nCheck out https:\/\/doc.qt.io\/qtcreator\/creator-quick-ui-forms.html for details on .ui.qml files.\n*\/\nimport QtQuick\nimport QtQuick.Controls\n\n\/*-- \ud30c\uc77c\uc744 \uc778\uc2dd \ubabb\ud568 --*\/\n\/\/ Constants.qml\ud30c\uc77c\uc744 \ubd88\ub7ec\uc624\uae30\n\/\/import \"Settings.qml\" as Constants\n\nRectangle {\n \/\/ id: rectangle\n \/\/ width: Constants.width\n \/\/ height: Constants.height\n\n \/\/ color: Constants.backgroundColor\n\n \/\/ \uc0c1\uc218 \uc9c1\uc811 \uc120\uc5b8\n property int widthConst: 1920\n property int heightConst: 1080\n property color backgroundColorConst: \"#EAEAEA\"\n\n width: widthConst\n height: heightConst\n color: backgroundColorConst\n\n Column {\n id: column\n width: 200\n anchors.centerIn: parent\n spacing: 10\n\n Rectangle {\n width: 180\n height: 30\n color: \"white\"\n border.color: \"black\"\n\n TextEdit {\n id: textEdit\n anchors.fill: parent\n width: 80\n height: 20\n text: qsTr(\"\uc785\ub8251\/input1\")\n font.pixelSize: 12\n }\n }\n\n Rectangle {\n width: 180\n height: 30\n color: \"white\"\n border.color: \"black\"\n\n TextEdit {\n id: textEdit2\n width: 80\n height: 20\n text: qsTr(\"\uc785\ub8252\/input2\")\n font.pixelSize: 12\n }\n }\n\n Text {\n id: text1\n text: qsTr(\"\uac12\ucd9c\ub825\/Print Value\")\n font.pixelSize: 12\n }\n\n Button {\n id: button\n text: qsTr(\"Button\")\n }\n }\n}\n<\/code><\/pre>\n\n\n\n#include <QGuiApplication>\n#include <QQmlApplicationEngine>\n\nint main(int argc, char *argv[])\n{\n QGuiApplication app(argc, argv);\n\n QQmlApplicationEngine engine;\n QObject::connect(\n &engine,\n &QQmlApplicationEngine::objectCreationFailed,\n &app,\n []() { QCoreApplication::exit(-1); },\n Qt::QueuedConnection);\n engine.loadFromModule(\"example2\", \"Main\");\n\n return app.exec();\n}\n<\/code><\/pre>\n\n\n\nimport QtQuick\n\nWindow {\n width: 640\n height: 480\n visible: true\n title: qsTr(\"Hello World\")\n\n \/\/ UI \ud30c\uc77c \ub85c\ub529 \/ UI file loading\n Loader {\n anchors.fill: parent\n source: \"qml\/Screen01.qml\"\n }\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"