이매진 스타일

Imagine 스타일은 사용자 정의가 가능한 이미지 자산을 기반으로 합니다. 더 보기...

연동 속성

• path: string

상세 설명

Imagine 스타일은 이미지 자산을 기반으로 합니다. 이 스타일에는 기본 이미지 세트가 포함되어 있지만, 미리 정의된 명명 규칙을 따르는 이미지가 포함된 디렉터리를 지정하면 이미지를 쉽게 변경할 수 있습니다.

기본 이미지가 적용된 Imagine 스타일

Imagine 스타일로 애플리케이션을 실행하려면 Qt Quick Controls 의 ‘스타일 사용’ 섹션을 참조하십시오.

파일 이름

이미지 파일의 이름은 다음 규칙에 따라 지정됩니다:

<control>-<element>-<states>

<control> 및 <element> 섹션은 필수이지만, <states> 섹션은 선택 사항입니다. 예를 들어, Button 에 대해 "button-background.9.png" 라는 단일 파일이 제공되면, 이 파일은 Button 가 지원하는 모든 상태에 사용됩니다. 어떤 상태에 대한 이미지를 제공할지는 개발자가 결정할 수 있습니다. 그러나 가능하면 disabled, pressed 등과 같이 가장 일반적인 컨트롤 상태에 대한 이미지를 제공하는 것이 좋습니다. 이렇게 하면 대화형 컨트롤이 최종 사용자가 기대하는 대로 시각적으로 작동하도록 보장할 수 있습니다.

요소 참조

다음 표에는 각 컨트롤에서 지원되는 요소와 해당 요소의 가능한 상태, 그리고 요구되는 파일 확장자가 나열되어 있습니다. 요소란 컨트롤의 특정 시각적 부분을 나타내는 이미지를 말합니다. 예를 들어, Button 의 "background" 요소는 background 를 나타냅니다.

자산 예시

다음 표에는 모든 컨트롤에 대한 자산 예시( 기본 Imagine 스타일 자산에서 발췌)가 나열되어 있습니다. 모든 요소에 자산이 필요한 것은 아니므로 이 목록이 모든 경우를 망라하는 것은 아니지만, 사용자 정의 자산을 제작할 때 지침으로 활용할 수 있습니다.

이 자산들이 내보내진 템플릿은 Sketch 프로젝트 형태로 제공됩니다.

^1. 단일 색상으로 구성된 1x1 크기의 이미지를 컨트롤 전체를 채우도록 늘린 것입니다.

9-패치 이미지

Imagine 스타일은 디자이너가 특정 요소의 크기 조정 시 반응 방식을 제어할 수 있도록 9-패치 이미지를 사용합니다. 다음은 Button 의 background 을 나타내는 9-패치 이미지와, 9-패치 선을 더 쉽게 볼 수 있도록 확대한 버전의 예시입니다:

이미지의 콘텐츠 크기는 가로 44픽셀, 세로 32픽셀입니다. 모든 9-패치 이미지는 각 변을 따라 1픽셀 두께의 선(통칭 “9-패치 선”)이 필요하므로, 이미지의 실제 크기는 가로 46픽셀, 세로 34픽셀이 됩니다. 9-패치 선은 이미지의 대상 DPI와 관계없이 반드시 1픽셀 두께여야 한다는 점에 유의하십시오. 예를 들어, button-background.9.png와 button-background@2x.9.png의 9-패치 선은 모두 1픽셀 두께여야 합니다.

9-패치 선은 반드시 검은색이어야 하며, 나머지 영역은 투명하거나 흰색이어야 합니다:

확장 가능한 영역

상단과 왼쪽 가장자리에 있는 9-패치 선은 이미지 크기가 조정될 때 어느 부분이 늘어나는지 결정합니다.

다음은 9-패치 이미지의 크기를 원래 크기의 1.5배로 다양한 방향으로 확대한 예시입니다:

둥근 모서리는 선의 범위 밖에 있으므로 원래 크기를 그대로 유지하는 것을 확인할 수 있습니다.

패딩 영역

오른쪽 및 하단 가장자리에 있는 9-패치 선은 컨트롤의 내부 패딩( contentItem)에 사용할 수 있는 공간을 결정하며, 이는 외부 패딩( padding)을 제어하는 것으로도 볼 수 있습니다. 패딩을 설명하는 다이어그램은 Control Layout 에서 확인할 수 있습니다.

아래에는 9-패치 이미지의 크기가 조정되는 추가 예시가 나와 있으며, 이번에는 패딩 9-패치 선이 어떻게 작동하는지 보여줍니다.

contentItem 는 음영 처리된 영역 내에서 필요한 만큼의 공간을 차지할 수 있습니다. 패딩 라인을 생략하면, contentItem 는 신축 가능한 영역을 초과하지 않는 범위 내에서 필요한 만큼의 공간을 차지하게 됩니다.

삽입 영역

예를 들어, 경우에 따라 컨트롤에 드롭 섀도우를 적용해야 할 필요가 있습니다. 하지만 위의 버튼에 드롭 섀도우를 추가하면 버튼의 크기에 영향을 미치게 되어, 레이아웃 구성과 마우스/터치 입력 경계 설정 모두에 문제가 발생합니다.

인셋 영역은 9-패치 이미지의 특정 영역이 컨트롤 밖으로 나가야 함을 컨트롤에 알려줌으로써 이 문제를 해결합니다:

아래 이미지에서 점선은 버튼의 클릭 가능한 영역과 레이아웃에서 버튼이 차지할 공간을 나타냅니다. 그림자는 그 뒤의 줄무늬 영역으로 표시되어 있습니다:

9-패치 이미지 내보내기

다양한 벡터 및 비트맵 편집기를 사용하여 Imagine 스타일에 적합한 9-패치 이미지를 만들 수 있습니다. 다음 섹션에서는 각 편집기의 내보내기 과정을 간략히 설명하며, 마지막 섹션에서는 내보낸 이미지가 9-패치 규격을 준수하는지 확인하는 방법을 설명합니다.

Affinity Designer

Affinity의 ‘내보내기 설정’ 문서를 참조하십시오.

Adobe Illustrator

Adobe의 ‘자산 내보내기’ 패널 설명서를 참조하십시오.

Adobe Photoshop

Adobe의 ‘레이어에서 이미지 자산 생성’ 문서를 참조하십시오.

Inkscape

Inkscape 9-Patch 내보내기 확장 기능을 사용하면 Inkscape에서 자산 파일을 내보낼 수 있습니다.

스케치

Sketch의 내보내기 문서를 참조하십시오.

Qt Quick Controls 또한, 에셋을 내보낸 후 9-패치 선의 두께를 자동으로 수정해 주는 Sketch용 플러그인도 제공합니다. 이 파일을 설치하려면 파일을 두 번 클릭하세요. Sketch에서 9-패치 내보내기 플러그인이 설치되었음을 확인하면, 플러그인은 이미지를 내보낼 때 자동으로 처리합니다.

9-패치 선 수정하기

여러 DPI 변형(@2x, @3x 등)으로 9-패치 이미지를 내보낼 때, 9-패치 선은 일반적으로 이미지와 함께 확대됩니다. 이를 해결하는 방법은 여러 가지가 있지만, 가장 간단한 방법은 ImageMagick의 mogrify 도구를 사용하는 것입니다. 이 도구에는 9-패치 선의 두께를 줄이기 위해 이미지를 자를 수 있는 ' -shave ' 기능이 있습니다:

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

일반 DPI 이미지( @Nx 접두사가 없는 이미지)는 영향을 받지 않으므로, 고해상도(high DPI) 디스플레이용으로 제작된 이미지에 대해서만 이 명령을 실행하면 됩니다.

애니메이션 이미지

Imagine 스타일은 WebP 및 GIF 애니메이션 이미지 형식을 지원합니다.

사용자 지정

경로

Imagine 스타일에서는 이미지 에셋 선택에 사용되는 경로를 사용자 정의할 수 있습니다. 이 경로는 모든 창이나 항목에 지정할 수 있으며, ` fonts`와 동일한 방식으로 자식 요소로 자동으로 적용됩니다. 다음 예시에서는 창과 세 개의 라디오 버튼 모두 어두운 색상의 이미지 자산(`"qrc:/themes/dark"`에 위치한 파일)으로 표시됩니다.

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Imagine

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium"); checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

QML에서 경로를 지정하는 것 외에도, 환경 변수나 구성 파일을 통해 경로를 지정할 수도 있습니다. QML에서 지정된 속성은 다른 모든 방법보다 우선합니다.

구성 파일

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

구성 파일에 대한 자세한 내용은 ‘Qt Quick Controls 구성 파일’을 참조하십시오.

환경 변수

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

지원되는 환경 변수의 전체 목록은 Qt Quick Controls 의 ‘지원되는 환경 변수’ 항목을 참조하십시오.

팔레트

Imagine 스타일은 palette 속성과 qtquickcontrols2.conf 파일을 통해 팔레트 사용자 지정을 지원합니다. 다른 스타일과 마찬가지로, Imagine 스타일이 사용하는 정확한 palette roles 는 스타일에 따라 다릅니다. 그러나 컨트롤의 시각적 외관(예: 배경) 대부분은 이미지 자산을 통해 관리되므로, 일반적으로 텍스트에 사용되는 역할에만 효과가 적용됩니다.

글꼴

font 속성과 구성 파일을 통해 사용자 정의 글꼴을 설정할 수 있습니다.

의존성

Imagine 스타일에 특화된 속성을 사용하려면 Imagine 스타일을 별도로 임포트해야 합니다. Imagine 스타일에 대한 참조 여부와 관계없이 동일한 애플리케이션 코드는 다른 어떤 스타일로도 실행된다는 점에 유의해야 합니다. Imagine 전용 속성은 애플리케이션이 Imagine 스타일로 실행될 때만 적용됩니다.

항상 로드되는 QML 파일에 Imagine 스타일이 임포트된 경우, 어떤 스타일로 애플리케이션을 실행하든 상관없이 애플리케이션을 실행할 수 있도록 하려면 Imagine 스타일을 애플리케이션과 함께 배포해야 합니다. 파일 선택기를 사용하면 스타일에 대한 고정된 의존성을 생성하지 않고도 스타일별 조정을 적용할 수 있습니다.

참조: 스타일링 Qt Quick Controls

부착 속성 문서

이 부착 속성은 이미지 자산의 경로를 저장합니다...

Button {
    Imagine.path: "qrc:/themes/dark"
}

관련 정보

• 스타일링 Qt Quick Controls
• 자동차 적용 사례