튜토리얼: 모바일 애플리케이션

이 자습서에서는 최소 Qt 버전으로 Qt 6을 사용하고 빌드 시스템으로 CMake를 사용할 때 Qt Creator 을 사용하여 Android 및 iOS 기기용 Qt Quick 애플리케이션을 개발하는 방법을 설명합니다.

가속도계 값의 변화에 따라 SVG(스케일러블 벡터 그래픽) 이미지를 가속하는 Qt Quick 애플리케이션을 개발합니다.

개발 환경 설정하기

모바일 장치용 애플리케이션을 빌드하고 모바일 장치에서 실행하려면 장치 플랫폼에 대한 개발 환경을 설정하고 Qt Creator 와 모바일 장치 간의 연결을 구성해야 합니다.

Android 기기용으로 개발하려면 Android용 개발하기의 지침에 따라 Android용 Qt를 설치하고 개발 환경을 설정해야 합니다.

iOS 기기용으로 개발하려면 Xcode를 설치하고 이를 사용하여 기기를 구성해야 합니다. 이를 위해서는 Apple로부터 받은 Apple 개발자 계정과 iOS 개발자 프로그램 인증서가 필요합니다. 자세한 내용은 iOS용 개발을 참조하세요.

프로젝트 만들기

1. File > New Project > Application (Qt) > Qt Quick Application.

   

2. Choose 을 선택하여 Project Location 대화 상자를 엽니다.
3. Name 에 애플리케이션의 이름을 입력합니다. 프로젝트 이름을 지정할 때는 나중에 쉽게 이름을 바꿀 수 없다는 점에 유의하세요.
4. Create in 에 프로젝트 파일의 경로를 입력합니다. 나중에 문제 없이 프로젝트 폴더를 이동할 수 있습니다.
5. Next 을 선택하여 Define Project Details 대화 상자를 엽니다.

   

6. Next 을 선택하여 Kit Selection 대화 상자를 엽니다.
7. 애플리케이션을 빌드할 플랫폼에 대해 Qt 6.5 이상 키트를 선택합니다. 모바일 기기용 애플리케이션을 빌드하려면 Android 및 iOS용 키트도 선택합니다.

   참고: 목록에는 환경설정 > Kits 에서 지정한 키트가 표시됩니다. 자세한 내용은 키트 추가 및 키트를 참조하세요.

8. Next 을 선택하여 Project Management 대화 상자를 엽니다.
9. 프로젝트 설정을 검토하고 Finish (또는 macOS의 경우 Done )를 선택하여 프로젝트를 만듭니다.

이미지를 리소스로 추가하기

애플리케이션의 기본 보기에는 디바이스를 기울이면 화면에서 움직이는 SVG 풍선 이미지가 표시됩니다.

애플리케이션을 실행할 때 이미지를 표시하려면 마법사가 생성한 CMakeLists.txt 파일의 RESOURCES 섹션에서 이미지를 리소스로 지정해야 합니다:

qt_add_qml_module(appaccelbubble
    URI accelbubble
    VERSION 1.0
    QML_FILES Main.qml
    RESOURCES Bluebubble.svg
)

Accelbubble 기본 보기 만들기

Bluebubble.svg 을 소스로 하는 이미지 컴포넌트를 추가하여 main.qml 파일에 메인 보기를 만듭니다:

    Image {
        id: bubble
        source: "Bluebubble.svg"
        smooth: true

다른 이미지나 컴포넌트를 대신 사용할 수 있습니다.

사용자 지정 속성을 추가하여 메인 창의 너비와 높이에 따라 이미지의 위치를 지정합니다:

        property real centerX: mainWindow.width / 2
        property real centerY: mainWindow.height / 2
        property real bubbleCenter: bubble.width / 2
        x: centerX - bubbleCenter
        y: centerY - bubbleCenter

가속도계 센서 값에 따라 풍선을 움직이는 코드를 추가합니다. 먼저 다음 가져오기 문을 추가합니다:

import QtSensors

필요한 속성을 가진 Accelerometer 컴포넌트를 추가합니다:

    Accelerometer {
        id: accel
        dataRate: 100
        active:true

현재 가속도계 값을 기반으로 버블의 x 및 y 위치를 계산하는 다음 JavaScript 함수를 추가합니다:

    function calcPitch(x,y,z) {
        return -Math.atan2(y, Math.hypot(x, z)) * mainWindow.radians_to_degrees;
    }
    function calcRoll(x,y,z) {
        return -Math.atan2(x, Math.hypot(y, z)) * mainWindow.radians_to_degrees;
    }

가속도계 컴포넌트의 onReadingChanged 신호에 다음 자바스크립트 코드를 추가하여 가속도계 값이 변경될 때 버블이 움직이도록 합니다:

        onReadingChanged: {
            var newX = (bubble.x + calcRoll(accel.reading.x, accel.reading.y, accel.reading.z) * .1)
            var newY = (bubble.y - calcPitch(accel.reading.x, accel.reading.y, accel.reading.z) * .1)

            if (isNaN(newX) || isNaN(newY))
                return;

            if (newX < 0)
                newX = 0

            if (newX > mainWindow.width - bubble.width)
                newX = mainWindow.width - bubble.width

            if (newY < 18)
                newY = 18

            if (newY > mainWindow.height - bubble.height)
                newY = mainWindow.height - bubble.height

                bubble.x = newX
                bubble.y = newY
        }

버블의 위치가 항상 화면의 범위 내에 있는지 확인해야 합니다. 가속도계가 숫자 (NaN)가 아닌 값을 반환하면 해당 값은 무시되고 버블 위치는 업데이트되지 않습니다.

풍선의 x 및 y 속성에 SmoothedAnimation 동작을 추가하여 풍선의 움직임이 더 부드럽게 보이도록 합니다.

        Behavior on y {
            SmoothedAnimation {
                easing.type: Easing.Linear
                duration: 100
            }
        }
        Behavior on x {
            SmoothedAnimation {
                easing.type: Easing.Linear
                duration: 100
            }
        }

디바이스 방향 잠금

디바이스 방향이 세로와 가로로 변경되면 기본적으로 디바이스 디스플레이가 회전됩니다. 이 예시에서는 화면 방향을 고정하는 것이 좋습니다.

Android에서 방향을 세로 또는 가로로 고정하려면 Qt Creator 에서 생성할 수 있는 AndroidManifest.xml 에서 방향을 지정합니다. 자세한 내용은 매니페스트 파일 편집하기를 참조하세요.

매니페스트 파일을 생성하여 사용하려면 CMakeLists.txt 파일에 Android 패키지 소스 디렉토리( QT_ANDROID_PACKAGE_SOURCE_DIR )를 지정해야 합니다:

set_property(TARGET appaccelbubble APPEND PROPERTY
    QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
)

3.19 이전 CMake 버전과의 호환성을 위해 qt_add_executable 함수에 수동 최종화 단계를 추가합니다:

qt_add_executable(appaccelbubble
    main.cpp
    MANUAL_FINALIZATION
)

그런 다음 qt_finalize_executable 함수를 추가합니다:

qt_finalize_executable(appaccelbubble)

iOS에서는 CMakeLists.txt 파일에서 MACOSX_BUNDLE_INFO_PLIST 변수의 값으로 지정한 Info.plist 파일에서 디바이스 방향을 잠글 수 있습니다:

set_target_properties(appaccelbubble PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE_INFO_PLIST "${CMAKE_CURRENT_SOURCE_DIR}/Info.plist"
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

종속성 추가하기

프로젝트 파일에 종속성을 지정하여 애플리케이션에 필요한 Qt 모듈을 빌드 시스템에 알려야 합니다. Projects 를 선택하여 다음 Qt 모듈 정보로 CMake 구성을 업데이트합니다: Sensors, Svg, Xml.

CMakeLists.txt 파일에는 애플리케이션에 필요한 Qt Sensors, Qt SVG, Qt XML 모듈을 임포트하도록 CMake에 지시하는 다음 항목이 있어야 합니다:

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Sensors Svg Xml)

또한 대상 링크 라이브러리 목록에 Qt 모듈을 추가해야 합니다. target_link_libraries 는 위의 find_package() 호출로 가져온 대상을 참조하여 가속버블 실행 파일이 Qt Sensors, Qt SVG, Qt XML 모듈을 사용한다고 CMake에 알려줍니다. 이렇게 하면 링커에 필요한 인수가 추가되고 적절한 include 디렉터리와 컴파일러 정의가 C++ 컴파일러에 전달됩니다.

target_link_libraries(appaccelbubble
    PRIVATE Qt6::Quick Qt6::Sensors Qt6::Svg Qt6::Xml)

종속성을 추가한 후 Build 으로 이동하여 Run CMake 을 선택하여 구성 변경 사항을 적용합니다.

CMakeLists.txt 파일에 대한 자세한 내용은 CMake 시작하기를 참조하세요.

애플리케이션 실행하기

이제 애플리케이션을 장치에 배포할 수 있습니다:

1. Android 기기에서 USB 디버깅을 활성화하거나 iOS 기기에서 개발자 모드를 활성화합니다.
2. 장치를 개발용 PC에 연결합니다.

   Android v4.2.2를 실행하는 장치를 사용하는 경우 PC에서 USB 디버깅을 허용하기 위해 연결을 확인하라는 메시지가 표시됩니다. 장치를 연결할 때마다 이러한 메시지가 표시되지 않도록 하려면 Always allow from this computer 을 선택한 다음 OK 을 선택합니다.

3. 장치에서 애플리케이션을 실행하려면 Ctrl+R을 선택합니다.

파일을 선택합니다:

• accelbubble/Bluebubble.svg
• accelbubble/CMakeLists.txt
• accelbubble/main.qml