Rect Transform 이란?
UI에 한정해서 사용하는 컴포넌트입니다.
기본적으로 Transform을 상속을 받고 있어서, Transform의 필드나 함수들을 가지고 있습니다.
Anchor
- Anchor는 4개의 삼각형(핀)의 형태로 존재합니다.
- 위 사진처럼 Anchor가 모여있으면, Anchor의 위치가 UI 좌표계의 원점이 됩니다.
Pivot
- UI 오브젝트의 중점이라고 생각하면 좋습니다.
UI의 Position
즉, UI 오브젝트(Box)의 Position은 Anchor를 원점으로 하여, 중점인 Pivot까지의 거리라고 볼 수 있습니다.
Anchor는 나눌 수 있다.
Anchor는 아래 사진처럼 나눌 수 있습니다.
이를 Stretch라고 표현합니다.
이렇게 나누게 되면 Rect Transform의 Position 정보가 (x, y, z)에서 (Left, Right, Top, Bottom)의 형태로 바뀌게 됩니다. 각 원소들은 각각 해당 부분과 떨어져있는 거리입니다.
위에 작성한 내용은 이 영상에 더 자세하게 나와있으니 참고하면 좋을 것 같습니다.
- 만약 Pivot이 움직이지 않는다면?
Scene창 좌측 상단의 이 부분을 Center → Pivot으로 바꿔주면 됩니다.
부모-자식 관계일 때의 Rect Transform
아래 이미지를 보면, White Box는 부모, Red Box는 자식입니다.
White Box : 부모
Red Box : 자식
White Box는 Canvas의 자식이므로 Anchor는 Canvas의 Pivot에 맞춰져 있습니다.
기본적으로 자식의 Anchor는 부모의 Pivot 위치에 설정되며, 부모의 위치가 바뀌면 자식도 그에 맞게 이동합니다.
그러나 지금의 경우에는 부모의 크기를 변경해도 자식의 크기는 변하지 않습니다.
부모의 크기가 변하더라도 자식의 크기는 변하지 않는데, 자식의 크기도 함께 변경되도록 하려면 어떻게 해야 할까요?
Anchor 설정으로 부모-자식 크기 동기화
정답은 자식의 Anchor를 조정하는 것입니다.
부모 크기에 따라 자식의 크기도 함께 변하게 하려면, 자식의 Anchor를 부모의 가장자리에 설정해 주면(Stretch)됩니다. Anchor를 "박아둔다"고 생각하면 이해가 쉬운데, 이렇게 하면 부모의 크기가 변할 때 자식도 같이 커지게 됩니다.
자식 Anchor를 부모의 가장자리에 박아두고
자식 Anchor를 부모의 가장자리에 박아두고부모의 크기를 조정하면 자식의 크기도 자동으로 조정
해상도에 따른 대응 방법
여기까지는 부모-자식 간의 크기 비율을 동기화하는 방법이었지만, 해상도가 바뀌어도 UI가 적절히 대응하는 방법은 따로 필요합니다. (사실 방법은 동일합니다.)
그 이유는 Canvas의 크기(해상도)가 달라져도 Canvas의 자식인 WhiteBox의 Anchor는 정중앙에 박혀있기 때문에, 크기 변화가 없기 때문입니다.
FHD
QHD
640x360
이 문제를 해결하려면 자식인 White Box의 Anchor도 Stretch해 주어야 합니다. 아래 이미지처럼 자식의 Anchor를 부모의 모서리에 맞춰 Stretch하면, 해상도가 달라져도 자식 UI 요소가 부모 UI 요소의 크기 변화에 맞춰 자동으로 조정됩니다.
이 방식으로 해상도가 변경되더라도 UI 비율이 유지되는 것을 확인할 수 있습니다.
이처럼 Rect Transform에서 Anchor와 Pivot의 설정을 적절히 활용하면 해상도에 맞춰 자동으로 조정되는 UI를 구현할 수 있습니다.
