유니티 앵커와 피벗 그리고 위치의 관계에 대하여

유니티에서 UI작업을 하다 보면 내가 원하는 위치에 UI요소를 위치시키는 게 어려운 경우가 가끔 있습니다. 이는 사실 인스펙터에 노출되는 RectTransform의 위치값이 직관적이지 않기 때문이기도 합니다. 

 

RectTransform의 PosX, PosY 값은 Pivot의 위치가 Anchor의 위치로부터 얼마만큼 떨어져 있는지를 나타냅니다.

 

$1000\times1000$ 크기의 화면에서 작업을 하고 있다고 가정해 봅시다. Image 오브젝트를 하나 생성하면 아래와 같은 화면이 될 것입니다. 

현재는 Anchor도 정중앙에 있고, Pivot도 이미지의 정중아에 있기 때문에 PosX와 PosY가 $(0,0)$으로 나오죠. 이 상태에서 Anchor의 위치를 좌측아래로 바꾸면 PosX와 PosY의 값이 스크린 스페이스의 정중앙인 $(500, 500)$으로 오는 것을 보실 수 있습니다.

또 하나 UI요소의 Position값이 헷갈리는 경우는 UI요소의 위치를 스크립트상에서 변경할 때입니다. 스크립트에서 UI의 RectTransform을 참조해 Position값을 바꾸는 경우를 생각해 봅시다. 우리가 인스펙터상에서 보는 PosX, PosY값이 Pivot의 위치가 Anchor로부터 얼마나 떨어져 있는지를 나타내는 값이었기 때문에 위 스크린샷과 같은 설정에서 아래와 같은 코드를 실행했을 때 마우스의 위치가 화면 정중앙$(500, 500)$이라면 이미지의 위치가 화면 우상단$(1000,1000)$에 있어야 한다고 생각할 수 있습니다. 

void Update()
{
    rectTransform.position = Input.mousePosition;
}

하지만 RectTransform의 Position필드는 스크린스페이스에서의 피벗위치를 의미합니다. 즉, 마우스위치가 $(500,500)$이라면 스크린스페이스의 원점에서 $(500,500)$만큼 떨어져 있는 정중앙에 위치하게 됩니다.

원래 예상했던 Position값 즉, Anchor에 상대적인 Pivot의 위치값은 RectTransform에서 anchoredPosition이라는 필드값으로 제공합니다. 위에서 실행했던 코드를 아래와 같이 바꾸고 다시 실행해 보면 아래의 화면 같은 결과값이 나오게 됩니다.

void Update()
{
    rectTransform.anchoredPosition = Input.mousePosition;
}