UI 프로젝트를 애플리케이션으로 변환하기

.qmlproject 파일이 있는 프로젝트를 .pro 파일이 있는 프로젝트로 변환하기.

Qt Quick UI 프로토타입 프로젝트는 사용자 인터페이스를 만드는 데 유용합니다. Qt Creator 에서 애플리케이션 개발에 사용하려면 추가해야 합니다:

• 프로젝트 구성 파일(CMakeLists.txt 또는 .pro 파일)
• C++ 코드(.cpp)
• 리소스 파일
• 애플리케이션을 디바이스에 배포하는 데 필요한 코드

QML과 C++ 통합에 대한 자세한 내용은 개요 - QML 및 C++ 통합을 참조하세요.

Qt Design Studio 을 사용하여 프로젝트를 생성하는 방법에 대한 자세한 내용은 Qt Design Studio 문서를 참조하세요. qmake를 빌드 시스템으로 사용하려면 Qt Creator 마법사 템플릿을 사용하여 qmake 빌드 시스템을 사용하여 빌드된 Qt Quick 애플리케이션을 만든 다음 Qt UI Quick 프로젝트의 소스 파일을 애플리케이션 프로젝트로 복사합니다.

프로젝트 구성 파일에서 RESOURCES 옵션을 사용하여 모든 QML 파일과 관련 에셋을 Qt 리소스 컬렉션 파일(.qrc)에 자동으로 추가할 수 있습니다. 단, 대용량 파일은 바이너리로 컴파일하는 대신 외부 바이너리 리소스로 포함해야 합니다.

마법사는 프로젝트 파일에 필요한 QML 가져오기 경로를 지정하기 위해 QML_IMPORT_PATH 옵션을 자동으로 추가합니다. 이 경로는 둘 이상의 하위 디렉터리에 QML 파일이 있는 경우에만 필요합니다.

그런 다음 메인 C++ 소스 파일에서 QQuickView 클래스를 사용하여 애플리케이션이 시작될 때 메인 QML 파일을 표시할 수 있습니다.

Qt Quick Studio Components 모듈은 Qt Design Studio 을 설치할 때 설치됩니다. Qt Creator 에서 편집하려는 프로젝트에서 이 모듈의 Qt Quick Studio 컴포넌트 또는 효과를 사용하는 경우, 해당 모듈을 빌드하고 Qt에 설치해야 프로젝트를 빌드할 수 있습니다. 자세한 내용은 Qt 설치에 Qt Quick Studio 컴포넌트 추가하기를 참조하십시오.

모듈은 Qt Quick Timeline 모듈은 Qt Design Studio 을 설치할 때 설치됩니다. Qt Creator 와 Qt만 설치하는 경우 Qt Quick Timeline 모듈도 선택하여 설치해야 합니다. Qt가 5.14 이전 버전인 경우, 프로젝트를 빌드하려면 Qt Quick Timeline 모듈을 빌드하여 Qt에 설치해야 합니다.

qmake 프로젝트로 변환하기

.qmlproject 파일이 있는 프로젝트를 .pro 파일이 있는 프로젝트로 변환하려면 다음과 같이 하세요:

1. File > New Project > Application (Qt) > Qt Quick Application > Choose 을 선택합니다.
2. Build system 필드에서 프로젝트를 빌드하고 실행하는 데 사용할 빌드 시스템으로 qmake를 선택한 다음 Next (또는 macOS의 경우 Continue )을 선택합니다.
3. 마법사의 지시에 따라 프로젝트를 만듭니다.
4. 파일 탐색기에서 Qt Quick UI 프로젝트 디렉터리의 소스 파일을 애플리케이션 프로젝트 디렉터리의 하위 디렉터리로 복사합니다. 이 지침의 목적상 이 디렉터리는 qml 입니다.
5. 애플리케이션 프로젝트 파일을 열고 RESOURCES 옵션의 값을 편집하여 다음 줄을 추가합니다:

   RESOURCES += \
       $$files(qml/*)

6. 또한 QML_IMPORT_PATH 옵션의 값을 편집하여 QML 가져오기 경로를 지정합니다:

   QML_IMPORT_PATH = qml/imports

   여기서 qml/imports 은 가져오기 경로입니다.

7. Build 로 이동하여 Run qmake 을 선택하여 RESOURCES 옵션을 빌드 구성에 적용합니다.
8. main.cpp 파일을 열고 QQmlApplicationEngine 객체를 QQuickView 객체로 바꿉니다:

       QQuickView view;
       view.engine()->addImportPath("qrc:/qml/imports");
       view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
       if (!view.errors().isEmpty())
           return -1;
       view.show();

   여기서 qrc:/qml/imports 은 가져오기 경로이고 qrc:/qml/ProgressBar.ui.qml 은 Qt Quick UI 프로젝트에 있는 기본 QML 파일의 경로 및 이름입니다.

9. Build 으로 이동하여 Run 을 선택하여 프로젝트를 빌드하고 실행합니다.

   참고: 모듈과 관련된 오류 메시지가 표시되면 Qt 설치에 Qt Quick Studio 컴포넌트 추가하기 에 설명된 단계를 수행하세요.

예를 들어 Qt Design Studio 설치( \share\qtcreator\examples\ProgressBar 디렉터리에 위치)에서 빈 Qt Quick 애플리케이션 프로젝트로 ProgressBar 예제의 소스 파일을 복사하고 필요한 변경을 수행하면 main.cpp 파일은 다음과 같이 보일 것입니다:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQuickView view;
    view.engine()->addImportPath("qrc:/qml/imports");
    view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml"));
    if (!view.errors().isEmpty())
        return -1;
    view.show();

    app.exec();
}

대용량 데이터 파일 처리하기

이미지, 효과 또는 3D 장면과 같이 UI에 사용되는 그래픽 에셋은 UI에서 성능 문제를 일으키는 대표적인 원인입니다. 100MB 3D 모델이나 64MB 텍스처와 같은 대용량 에셋 파일을 바이너리로 컴파일하기 위해 .qrc 파일에 포함시키려고 하면 애플리케이션을 빌드할 때에도 엄청난 양의 메모리가 필요합니다.

먼저 디자인 최적화 및 최적화된 3D 장면 만들기에 설명된 대로 에셋을 최적화해 보세요.

대용량 에셋은 파일 시스템에서 직접 로드하거나 Qt 리소스 시스템을 동적으로 사용하여 로드해야 합니다. 자세한 내용은 Qt 리소스 시스템을 참조하십시오.

Qt 설치에 Qt Quick Studio 컴포넌트 추가하기

Qt Design Studio 3.9부터 Qt Quick Studio Components 모듈은 Qt Design Studio 로 생성된 애플리케이션의 일부로 기본적으로 설치됩니다. 이 모듈은 수동으로 설치할 수도 있습니다.

예를 들어

1. 모듈 리포지토리를 복제합니다.

   git clone https://code.qt.io/qt-labs/qtquickdesigner-components.git

2. Qt Quick Studio Components 모듈을 설치합니다.

   mkdir build
   cd build
   cmake -GNinja -DCMAKE_INSTALL_PREFIX=<path_to_qt_install_directory> <path_to_qtquickdesigner-components>
   cmake --build .
   cmake --install .

   참고: 여기서 <path_to_qt_install_directory>와 <path_to_qtquickdesigner-components>는 로컬 드라이브의 실제 위치로 바꿔야 합니다. 예를 들어, <path_to_qt_install_directory>는 /Qt/6.3.0/msvc2019_64, <path_to_qtquickdesigner-components>는 다음과 같이 ../qtquickdesigner-components/와 같은 경로를 사용할 수 있습니다.