Version: 2021.2
캔버스
비주얼 컴포넌트

Basic Layout

In this section we’ll look at how you can position UI elements relative to the Canvas and each other. If you want to test yourself while reading, you can create an Image using the menu GameObject -> UI -> Image.

사각영역 툴(Rect Tool)

Every UI element is represented as a rectangle for layout purposes. This rectangle can be manipulated in the Scene View using the Rect Tool in the toolbar. The Rect Tool is used both for Unity’s 2D features and for UI, and in fact can be used even for 3D objects as well.

툴바에서 사각영역 버튼이 선택된 모습
툴바에서 사각영역 버튼이 선택된 모습

사각영역 툴은 UI 요소를 이동, 크기 조절, 회전하는 데에 사용할 수 있습니다. 일단 어떤 UI 요소를 선택하면 사각형 내부 아무 곳이나 클릭하고 드래그하여 이동할 수 있습니다. 크기를 조절하려면 가장자리 또는 코너를 클릭하고 드래그해야 합니다. 요소 회전은 커서를 코너에서 약간 떨어진 곳으로 이동하여 마우스 커서가 회전 심볼 모양으로 바뀌도록 한 후 클릭하여 회전하고자 하는 방향으로 드래그하면 됩니다.

다른 툴과 마찬가지로 사각영역 툴은 툴바에 설정된 현재 피벗 모드 및 공간을 사용합니다. UI 작업을 할 때에는 보통 이 모드를 PivotLocal로 설정하는 것이 좋습니다.

피벗 및 로컬로 설정된 툴바 버튼
피벗 및 로컬로 설정된 툴바 버튼

사각 트랜스폼(Rect Transform)

The Rect Transform is a new transform component that’s used for all UI elements instead of the regular Transform component.

사각 트랜스폼에는 일반 트랜스폼처럼 포지션, 회전, 스케일이 있지만, 사각형의 크기를 지정하기 위한 폭과 높이도 있습니다.

리사이징 vs 스케일링(Resizing vs Scaling)

When the Rect Tool is used to change the size of an object, normally for Sprites in the 2D system and for 3D objects it will change the local scale of the object. However, when it’s used on an object with a Rect Transform on it, it will instead change the width and the height, keeping the local scale unchanged. This resizing won’t affect font sizes or the border on sliced images.

피벗(Pivot)

회전, 크기, 스케일 수정은 피벗을 중심으로 일어나며 따라서 피벗의 포지션은 회전, 크기 조절, 스케일의 결과에 영향을 미칩니다. 툴바 피벗 버튼이 피벗 모드로 설정되어 있으면 씬 뷰에서 사각 트랜스폼의 피벗을 이동할 수 있습니다.

앵커(Anchor)

Rect Transforms include a layout concept called anchors. Anchors are shown as four small triangular handles in the Scene View and anchor information is also shown in the Inspector.

사각 트래스폼의 부모 역시 사각 트랜스폼인 경우, 자식 사각 트랜스폼은 여러 방식으로 부모 사각 트랜스폼에 고정될 수 있습니다. 예를 들어, 자식은 부모의 중심 또는 네 코너 중 하나에 고정될 수 있습니다.

부모의 중심에 고정된 UI 요소입니다. 이 요소는 중심에 대해 고정 오프셋을 유지합니다.
부모의 중심에 고정된 UI 요소입니다. 이 요소는 중심에 대해 고정 오프셋을 유지합니다.
부모의 우하단 코너에 고정된 UI 요소입니다. 이 요소는 우하단 코너에 대해 고정 오프셋을 유지합니다.
부모의 우하단 코너에 고정된 UI 요소입니다. 이 요소는 우하단 코너에 대해 고정 오프셋을 유지합니다.

이렇게 고정하면 자식이 부모의 폭 또는 높이에 맞춰 함께 늘어날 수 있습니다. 사각형의 각 코너는 해당 앵커에 대해 고정 오프셋을 가집니다. 즉 사각형의 왼쪽 상단 코너는 왼쪽 상단 앵커에 대한 고정 오프셋을 가지는 식입니다. 이 방식을 통해 사각형의 각 코너는 부모 사각형의 서로 다른 지점에 고정될 수 있습니다.

왼쪽 코너가 부모의 왼쪽 하단 코너에, 그리고 오른쪽 코너가 부모의 우하단 코너에 고정된 UI 요소입니다. 이 요소의 코너는 해당 앵커에 대해 고정 오프셋을 유지합니다.
왼쪽 코너가 부모의 왼쪽 하단 코너에, 그리고 오른쪽 코너가 부모의 우하단 코너에 고정된 UI 요소입니다. 이 요소의 코너는 해당 앵커에 대해 고정 오프셋을 유지합니다.

The positions of the anchors are defined in fractions (or percentages) of the parent rectangle width and height. 0.0 (0%) corresponds to the left or bottom side, 0.5 (50%) to the middle, and 1.0 (100%) to the right or top side. But anchors aren’t limited to the sides and middle; they can be anchored to any point within the parent rectangle.

왼쪽 코너는 부모의 왼쪽 변에서 일정 퍼센티지에 해당하는 점에 고정되어 있고 오른쪽 코너는 부모 사각형의 오른쪽 변에서 일정 퍼센티지에 해당하는 점에 고정되어 있는 UI 요소입니다.
왼쪽 코너는 부모의 왼쪽 변에서 일정 퍼센티지에 해당하는 점에 고정되어 있고 오른쪽 코너는 부모 사각형의 오른쪽 변에서 일정 퍼센티지에 해당하는 점에 고정되어 있는 UI 요소입니다.

You can drag each of the anchors individually, or if they’re together, you can drag them together by clicking in the middle in between them and dragging. If you hold down Shift key while dragging an anchor, the corresponding corner of the rectangle will move together with the anchor.

앵커 핸들의 편리한 기능 중에는 자동으로 형제 사각형의 앵커를 잡아 정확히 위치할 수 있게 해 주는 기능이 있습니다.

앵커 프리셋(Anchor Preset)

In the Inspector, the Anchor Preset button can be found in the upper left corner of the Rect Transform component. Clicking the button brings up the Anchor Presets dropdown. From here you can select from some of the most common anchoring options. You can anchor the UI element to the sides or middle of the parent, or stretch together with the parent size. The horizontal and vertical anchoring is independent.

앵커 프리셋 버튼은 현재 선택된 프리셋 옵션이 있을 경우 그 옵션을 보여 줍니다. 앵커가 수평 또는 수직 축에 대해 다른 포지션으로 설정되어 있으면 모든 프리셋에 대해 커스텀 옵션이 나타납니다.

인스펙터에서의 앵커와 포지션 필드

You can click the Anchors expansion arrow to reveal the anchor number fields if they are not already visible. Anchor Min corresponds to the lower left anchor handle in the Scene View, and Anchor Max corresponds to the upper right handle.

사각형의 포지션 필드는 앵커가 함께 있는지(고정 폭 및 높이를 만듦) 또는 분리되어 있는지(사각형이 부모 사각형에 맞추어 함께 늘어남)에 따라 다르게 나타납니다.

When all the anchor handles are together the fields displayed are Pos X, Pos Y, Width, and Height. The Pos X and Pos Y values indicate the position of the pivot relative to the anchors.

When the anchors are separated the fields can change partially or completely to Left, Right, Top, and Bottom. These fields define the padding inside the rectangle defined by the anchors. The Left and Right fields are used if the anchors are separated horizontally and the Top and Bottom fields are used if they’re separated vertically.

Note that changing the values in the anchor or pivot fields will normally counter-adjust the positioning values in order to make the rectangle stay in place. In cases where this isn’t desired, enable Raw edit mode by clicking the R button in the Inspector. This causes the anchor and pivot value to be able to be changed without any other values changing as a result. This will likely cause the rectangle to be visually moved or resized, since its position and size is dependent on the anchor and pivot values.

캔버스
비주얼 컴포넌트