2D UI 디자인

2D 보기에서 애플리케이션을 디자인하려면 컴포넌트 파일을 열고 2D 컴포넌트 및 자산의 인스턴스를 배치합니다.

2D 보기에서 컴포넌트 인스턴스를 선택하면 가장자리와 모서리에 마커가 나타납니다. 커서의 모양에 따라 컴포넌트 인스턴스를 드래그하여 다음 작업을 컴포넌트 인스턴스에 적용할 수 있습니다:

• 이동
• 크기 조정
• 회전

컴포넌트 이동

이동 커서가 표시되면 선택한 컴포넌트 인스턴스를 2D 보기의 원하는 위치로 이동할 수 있습니다.

UI에서 컴포넌트 인스턴스를 배치하는 다른 방법에 대한 자세한 내용은 레이아웃을 확장 가능하게 만들기를 참조하세요.

컴포넌트 크기 조정하기

크기 조정 커서가 표시되면 마커를 드래그하여 컴포넌트 인스턴스의 크기를 조정할 수 있습니다.

선택한 컴포넌트 인스턴스의 가장자리가 아닌 중앙에서 크기를 조정하려면 Alt (또는 macOS의 경우 선택 )를 선택합니다.

모서리 마커를 사용할 때 크기를 조정하는 동안 이미지 종횡비를 유지하려면 Shift 키를 선택합니다. 이 방법은 왼쪽, 오른쪽, 위쪽 또는 아래쪽 앵커를 사용하여 고정된 컴포넌트 인스턴스에서도 작동합니다.

컴포넌트 인스턴스의 중앙에서 크기를 조정하고 화면 비율을 유지하려면 Alt+Shift (또는 macOS의 경우 Opt+Shift )를 선택합니다.

UI에서 컴포넌트 또는 컴포넌트 인스턴스의 크기를 지정하는 다른 방법에 대한 자세한 내용은 2D 지오메트리 설정을 참조하세요.

컴포넌트 회전

컴포넌트 인스턴스의 모서리 중 하나에 회전 커서 가 표시되면 시계 방향 또는 시계 반대 방향으로 드래그하여 컴포넌트 인스턴스를 원점을 중심으로 자유롭게 회전할 수 있습니다.

또한 Shift 또는 Alt (macOS의 경우 Opt )를 선택하여 컴포넌트 인스턴스를 각각 5도 또는 45도 단위로 회전할 수 있습니다.

원점은 Properties > Geometry - 2D > Origin 에서 설정할 수 있습니다. 여기에서 Rotation 속성 값을 도 단위로 입력할 수도 있습니다.

확대 및 축소

툴바의 확대/축소 버튼을 사용하여 2D 보기를 확대/축소하거나 목록에서 확대/축소 수준을 백분율로 선택할 수 있습니다. 뷰의 모든 콘텐츠에 맞게 확대하거나 현재 선택한 컴포넌트 인스턴스에 맞게 확대하는 데 사용할 수 있는 버튼이 더 있습니다.

부모 및 형제 구성 요소에 스냅

스냅을 사용하여 2D 보기에서 컴포넌트 인스턴스를 정렬할 수 있습니다. 스냅이 켜져 있으면 모든 컴포넌트 인스턴스가 부모 및 형제 컴포넌트에 스냅됩니다. 앵커와 함께 스냅을 사용하는 경우 컴포넌트를 다른 컴포넌트에 스냅할 때 앵커가 생성됩니다.

스냅을 켜려면 2D 보기를 마우스 오른쪽 버튼으로 클릭하고 Snapping > Snap with Anchors 또는 Snap without Anchors 을 선택합니다.

컴포넌트 인스턴스 위치를 지정하는 데 도움이 되는 스냅 선이 자동으로 나타납니다.

Edit > Preferences > Qt Quick > Qt Quick Designer 를 선택하여 스냅에 대한 설정을 지정합니다. Parent component padding 필드에서 부모와 스냅 라인 사이의 거리를 픽셀 단위로 지정합니다. Sibling component spacing 필드에 형제자매와 스냅 라인 사이의 거리를 픽셀 단위로 지정합니다.

다음 이미지는 Parent component padding 을 8픽셀로 설정한 경우의 스냅 라인(1)을 보여줍니다.

Properties 보기를 사용하여 컴포넌트 인스턴스를 정렬하고 배포하는 다른 방법은 컴포넌트 정렬 및 배포를 참조하세요.

컴포넌트 경계 숨기기

2D 보기는 컴포넌트 인스턴스의 경계를 표시합니다. 경계를 숨기려면 2D 보기를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 Show Bounds 을 선택합니다.

컴포넌트 크기 미리보기

UI 파일에서 루트 컴포넌트의 너비와 높이에 따라 컴포넌트의 크기가 결정됩니다. 버튼과 같은 컴포넌트를 다른 UI 파일에서 다른 크기로 재사용하고 다양한 장치 프로필, 화면 해상도 또는 화면 방향에 맞게 UI를 디자인할 수 있습니다. 컴포넌트의 최종 크기가 속성 바인딩에 의해 결정되는 경우 컴포넌트 크기는 0(0,0)이 될 수도 있습니다.

다양한 컴포넌트 크기를 실험하려면 툴바의 Override Width 및 Override Height 필드(1)에 값을 입력합니다. 변경 사항은 2D 보기(2)와 States 보기(3)에 표시되지만 속성 값은 UI 파일에서 영구적으로 변경되지 않습니다. Properties 보기(4)에서 속성 값을 영구적으로 변경할 수 있습니다.

루트 컴포넌트의 초기 크기를 설정하려면 Edit > Preferences > Qt Quick > Qt Quick Designer 를 선택하고 Root Component Init Size 그룹에서 컴포넌트 너비와 높이를 지정합니다.

캔버스 크기 지정

캔버스 크기를 변경하려면 Edit > Preferences > > Qt Quick > Qt Quick Designer 를 선택하고 Canvas 그룹에서 캔버스 너비와 높이를 지정합니다.

캔버스 색상 설정

루트 컴포넌트의 배경을 투명하게 설정하면 작업 영역의 색상으로 인해 작업 중인 컴포넌트 인스턴스가 잘 보이지 않을 수 있습니다. 컴포넌트 인스턴스를 더 잘 보이게 하려면 목록에서 캔버스 색상을 선택할 수 있습니다. 기본적으로 색상은 투명합니다. 캔버스 색상을 설정해도 루트 컴포넌트나 컴포넌트 인스턴스의 배경색에는 어떤 영향도 미치지 않습니다.

2D 뷰 콘텐츠 새로 고침

UI 파일을 열면 파일에 정의된 컴포넌트와 파일에 포함된 컴포넌트 인스턴스가 2D 보기에 그려집니다. Properties 에서 컴포넌트 인스턴스 속성을 편집하면 코드와 2D 보기의 표시가 동기화되지 않을 수 있습니다. 예를 들어 열 또는 행 내에서 컴포넌트 인스턴스의 위치를 변경하면 2D 보기에 새 위치가 올바르게 표시되지 않을 수 있습니다.

2D 보기의 콘텐츠를 새로 고치려면 R 키 또는 (Reset View) 버튼을 선택합니다.