3D에 Transform이 있다면... - Rect Transform
Rect Transform이란?
Unity에서 제공하는 UI를 위한 Transform이다. UI를 위하여 Transform을 상속하여 만든 컴포넌트이기 때문에 UI를 제어하는데 필요한 여러가지 기능을 포함하고 있다. Canvas가 Rect Transform으로 구성되어 있기 때문에 하위의 모든 이미지를 비롯한 모든 UI는 Rect Transform을 기본으로 가진다. Transform과 Rect Transform의 큰 차이점은 Anchors와 Pivot 그리고 Edit Mode가 있다는 점이다. 이에 대한 자세한 설명은 아래에 기술하였다.
3D오브젝트를 위한 Transform3D 오브젝트를 제어하기 위해 사용되는 Transform은 기본적으로 위치(Position), 회전(Rotation), 크기(Scale) 등을 제어할 수 있는 옵션을 가지고 있다.
1. Anchors
앵커란, 부모 오브젝트로부터의 기준을 제어할 수 있는 옵션이다. Anchors의 Min(X, Y) 와 Max(X, Y)를 통해 제어할 수 있지만, Rect Transform 왼쪽 상단에 Anchors의 프리셋을 시각적으로 표현한 UI를 통해서 쉽게 제어할 수 있다. UI에 표현된 프리셋은 아래와 같다.
프리셋은 Top, Middle, Bottom, Stretch 와 Left, Center, Right, Stretch의 조합으로 이루어진 16개를 제공한다. 프리셋 UI를 통해서 Anchors를 제어하면 값이 실제 옵션의 값이 변경된다. 예를 들어 [Top, Left]를 설정할 경우 Min(0, 1), Max(0, 1)로 변경되고, [Bottom, Right]로 설정할 경우 Min(1, 0), Max(1, 0)로 변경된다. [Stretch, Stretch]로 설정하면 Min(0, 0), Max(1, 1)로 변경된다. 만약 여러분이 프리셋을 제외한 다른 새로운 Anchors를 사용하고 싶다면 프리셋 UI를 이용하는 것보다는 Anchors의 값을 직접 바꾸면 된다.
Anchors는 Viewport 좌표계 상에서 계산한다. Anchors를 [Top, Left]로 설정했다면 부모의 캔버스 상에서 X 비율 0.5, Y 비율 0.5인 위치가 Rect Transform의 (0, 0)이 된다. 만약 새로운 Anchors 값을 사용하기 위해 Min(0.2, 0.2), Max(0.8, 0.8)로 설정을 했다면 부모의 좌표계 상에서 0.2에 해당하는 위치에서 0.8에 해당하는 위치까지 Stretch 될 것이다.
아래 그림은 앞 서 설명한 커스텀 Anchors에 대한 결과이다.
프리셋 UI를 통해서 Anchors를 제어할 때, 위치와 피벗을 함께 제어할 수 있다. Shift를 누르면 Pivot도 함께 변경된다. Alt를 누르고 변경하면 위치를 함께 변경할 수 있다.
Anchors 변화에 따른 Rect Transform 컴포넌트의 변화Rect Transform은 Anchors 옵션에 따라서 Position 옵션 부분이 변화한다. 또한, Anchors에 따라서 값도 자동으로 계산하여 변경해주기 때문에 알아두면 놀라지 않을 수 있다. 밑에서 설명하는 Rect Transform 컴포넌트의 변화는 다음 그림처럼 위치한 이미지의 RectTransform을 Anchors만 변경한 것이다.
* 일반 프리셋 변환
Anchors의 프리셋 중에서 Top, Middle, Bottom과 Left, Center, Right의 조합으로 이루어진 프리셋으로 설정을 변경하면 Rect Transform의 옵션이 변경되지는 않지만, 현재 위치를 바뀐 Anchors를 기준으로 한 위치 값으로 변경해준다.
위 그림을 처럼 Anchors를 [Top, Right]에서 [Top, Left]로 바꿨을 때, 현재 있는 위치를 [Top, Left]에 맞춰 490으로 바꾼 것을 볼 수 있다.
* Stretch를 포함한 프리셋 변환
하지만 Horizontal 혹은 Vertical 중 적어도 하나가 Stretch를 포함하고 있다면 Position 옵션의 형태가 변환되며, 현재 위치를 기준으로 새롭게 계산한 값을 적용시킨다.
Horizontal이 Stretch로 설정되면 Vertical은 바뀐 Anchors에 따라서 위치가 계산되고, Horizontal 옵션이었던 Pos X 와 Width 가 Left와 Right로 변경된다. Left와 Right는 Margin 혹은 Border라고 생각하면 이해하기 쉽다. 양수를 입력하면 입력된 값 만큼 폭이 줄어든다.
Vertical이 Stretch로 설정되면 Horizontal은 바뀐 Ancrhos에 따라서 값을 계산된다. 반대로 Vertical의 옵션이었던 Pos Y 와 Height가 Top과 Bottom으로 변경된다. Horizontal때와 같은 개념이다.
Horizontal과 Vertical 둘 모두 Stretch로 설정되면 PosZ를 제외한 모든 옵션이 Left, Right, Top, Bottom으로 변경된다.
위 세 그림을 통해 제어되는 이미지는 여전히 같은 위치에 있지만, Anchors의 옵션이 변경됨에 따라 위치 값이 변하는 것을 볼 수 있다.
2. Pivot
앵커가 부모 오브젝트로부터의 기준을 제어하는 옵션이라면 Pivot은 RectTransform을 가진 오브젝트의 출력 기준을 제어할 수 있는 옵션이다. Anchors와 같이 Viewport 좌표계 위에서 동작한다. 일반적으로 Anchors와 같은 값으로 맞추는 것이 Canvas에 렌더링 되는데 문제가 없으므로 위에서 설명한 UI를 통해 함께 설정한다. Pivot은 Shift를 누르고 Anchors를 제어하는 것으로 함께 변경할 수 있다.
3. 기타 옵션
위에서 Position 및 Anchors를 변경하는 예시들을 보면 왼쪽 귀퉁이에 점선으로 이루어진 사각형과 R이 적힌 버튼이 있다. 이들은 Anchors 및 Pivot등을 변경할 때, 특정한 기능을 적용할지에 대한 여부를 결정하는 것이다.
1) Blueprint Mode
점선으로 이루어진 사각형이 그러진 버튼을 누르면, Blueprint Mode가 활성화된다. 이 모드가 활성화되면 Rect Tool을 이용하여 UI를 제어할 때, 회전을 할 수 없도록 고정한다.
Transform 제어 툴
Transform을 Scene View에서 기즈모를 통해 제어할 수 있는 옵션은 위 그림과 같다.
1. Hand Tool
Scene View의 카메라 위치를 마우스로 제어하기 위한 Tool 모드이다. 굳이 이 모드로 변경하지 않더라도 중앙 마우스 버튼과 오른쪽 마우스 버튼을 이용하여 이동 및 회전이 가능하다. Hot Key는 'Q'이다.
2. Move Tool
Transform의 위치를 변경할 수 있는 Tool 모드이다. 선택 시 X축, Y축, Z축을 향하는 화살표 기즈모가 활성화 된다. Hot Key는 'W'이다.
3. Rotate Tool
Transform의 회전을 제어할 수 있는 Tool 모드이다. 선택 시 원형 기즈모가 활성화된다. Hot Key는 'E'이다.
4. Scale Tool
Transform의 Scale 값을 변경할 수 있는 Tool 모드이다. 선택 시 네모가 달린 화살표 기즈모가 활성화 된다. Hot Key는 'R'이다.
5. Rect Tool
Transform의 Rect를 변경할 수 있는 Tool 모드이다. Transform의 Position, Scale, Rotate를 변경할 수 있다. 단, Scene View 카메라의 Forward 방향에 해당하는 축은 변경이 불가능하다.
6. 기즈모 중심점 변경
위에서 소개한 Tool 모드의 기즈모를 어떤 점을 Pivot으로 하여 출력할 것인지 결정하는 옵션이다. Pivot과 Center 두 가지 모드가 있으며 Pivot은 Local Position 이 (0, 0, 0)에 해당하는 위치를, Center는 Renderer가 그리고 있는 이미지 혹은 3차원 메쉬의 중심을 가르킨다. 해당 오브젝트 하위에 Child가 여럿있다면 모든 오브젝트의 중심점을 Center로 잡는다.
7. 기즈모 중심 좌표계 변경
6번과 마찬가지로 위에서 소개한 Tool 모드의 기즈모를 그리기 위한 옵션이다. 기즈모의 중심 좌표계를 World 좌표계로 둘지, 아니면 Local 좌표계로 둘지 결정한다. World로 설정하면 기즈모가 World 좌표계를 따라 출력된다. Local로 설정할 경우 Rotation 값에 따라 기즈모가 함께 회전한다.
2) Raw Edit Mode
R이 적힌 버튼을 누르면 Raw Edit Mode가 활성화된다. 이 모드는 위에서 설명했던 Anchors나 Pivot을 수정할 때, 자동으로 바뀐 설정에 대해서 값을 계산해주던 기능을 끄는 역할을 한다.
참고
