2D UI 디자인

2D 뷰에서 애플리케이션을 디자인하려면 컴포넌트 파일을 열고, 그 안에 2D 컴포넌트 및 에셋의 인스턴스를 배치하십시오.

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

• 이동
• 크기 조정
• 회전

컴포넌트 이동

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

UI에서 컴포넌트 인스턴스의 위치를 지정하는 다른 방법에 대한 자세한 내용은 레이아웃의 크기 조정 기능을 참조하십시오.

컴포넌트 크기 조정

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

선택한 컴포넌트 인스턴스의 가장자리가 아닌 중심을 기준으로 크기를 조정하려면 Alt 키 (macOS에서는 Opt 키)를 누르십시오.

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

컴포넌트 인스턴스의 중심에서 크기를 조정하고 종횡비를 모두 유지하려면 Alt+Shift (macOS에서는 Opt+Shift )를 누르십시오.

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

컴포넌트 회전

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

또한, Shift 또는 Alt (macOS에서는 Opt )를 누르면 컴포넌트 인스턴스를 각각 5도 또는 45도 단위로 회전할 수 있습니다.

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

확대 및 축소

도구 모음의 확대/축소 버튼을 사용하여 ‘ 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이 될 수도 있습니다.

다양한 컴포넌트 크기를 시험해 보려면 툴바의 ‘ 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) 버튼을 선택하십시오.