UI의 위치 값은 두가지?

들어가며

유니티 에디터에서 UI를 코드로 다루는 작업을 하다보면, 두 개의 좌표 값이 존재한다는 것을 알 수 있다. anchoredPosition과 localPosition이다. 그동안 신경 쓰지는 않았지만, 호기심에 정리를 해보았다.

 

---

두 프로퍼티의 정의

anchoredPosition :
pivot 기준, RectTransform의 앵커와 지점과의 상대적 좌표
자신의 앵커로부터의 거리이기에 부모와는 상관없음

 

localPosition :
pivot 기준, 부모 Transform의 원점과의 상대적 좌표 (앵커를 무시한다.)
자신의 부모의 원점으로부터의 거리이기에 앵커와는 상관없음

 

pivot이란, UI 오브젝트의 중심(원점)이 어디에 위치하고 있는지를 정하는 비율?의 값이다.

1,1 = 우측 상단

0.5, 0.5 = 정 중앙

0,0 = 좌측 하단

 

---

비교

테스트를 위한 씬과 UI

이미지의 앵커를 (0,0) / 부모 오브젝트(canvas)의 왼쪽 아래에 고정

이미지 오브젝트의 Inspector

현재 상황을 해석하자면, 다음과 같다.

• 앵커만 왼쪽 아래에 고정 ( 0, 0 )
• Pivot은 ( 0.5 , 0.5 )로 본인의 중앙에 고정

현재 오브젝트의 각각의 포지션 값은 다음과 같다.

• anchoredPosition의 값 : (540, 990, 0)
• localPosition의 값 : (540, 990, 0)

 

아직은 두 값의 차이가 없어 보인다.

 

이번에는 Pivot의 값만 변경

이번에는 Pivot의 값을 ( 0, 0 )으로 변경했다. (자식 오브젝트의 좌측 하단)

그러자 두 포지션 값이 조금 변하였다.

• anchoredPosition : (490 , 940, 0)
• localPosition : (490 , 940, 0)

 

540, 1040이었던 기존의 값에서 -50씩 이동한 것을 확인할 수 있다.

왜냐하면, 두 값의 기준이었던 Pivot이 오브젝트의 크기의 절반인 50만큼 -방향으로 이동했기 때문이다.

 

이번에는 Pivot을 우측 상단으로 옮겨봄 (1, 1)

anchoredPosition : (590, 1040, 0)

localPosition : (590, 1040, 0)

 

이번에는 Pivot을 우측 상단으로 옮겨보니, 이번에는 방금 좌표 값에 100씩 더해진 값이 나왔다.

 

이 테스트로는 유의미한 차이는 알기 어려웠지만, 두 포지션 값이 Pivot을 중심으로 하기 때문에 일반적인 상황에서는 값이 다른 경우가 거의 없다는 것을 알 수 있었다.

 

---

코드 활용

코드에서의 두 포지션 값은 어떨까?

 

anchoredPosition

// 버튼을 오른쪽으로 100만큼 이동
rectTransform.anchoredPosition += new Vector2(100f, 0f);

 

anchoredPosition은 앵커 기준 좌표라서 해상도가 달라져도 상대적인 위치를 유지할 수 있다.

그래서 버튼을 살짝 오른쪽으로 옮기는 정도의 코드는 anchoredPosition이 적합하다.

 

localPosition

// 부모 좌표 기준으로 위치 이동 (UI 레이아웃에는 부적합)
rectTransform.localPosition = new Vector3(200f, 300f, 0f);

 

부모의 원점 좌표를 기준으로 하기에 anchoredPosition의 값과는 다를 수 있다. 즉, anchoredPosition과는 다르게 해상도가 다르다면 UI의 배치가 꼬일 수 있다는 뜻이다.

이런 종류의 좌표값은 오히려 UI를 3D 오브젝트 처럼 다루고 싶을 때 사용한다. (예시 : 오브젝트의 위에 있는 체력바 등)

 

position (world 좌표)

그냥 position 값은 Canvas의 공간 안에서는 직관적이지 못하다. UI 캔버스의 Render Type이 World Space로 사용하는 경우에나 사용한다.

 

---

결론

anchoredPosition과 localPositon의 값은 둘 다 UI의 pivot이 어디에 위치하고 있는지 설명하는 프로퍼티이다.

단, 그 기준이 앵커이냐 부모 오브젝트의 원점이냐의 차이일 뿐이라고 느낀다.

 

아직까지는 유의미한 차이를 나타내는 자료를 찾지 못했으므로, 좋은 자료나 예시를 발견하게 된다면 추가적인 업데이트를 하겠다.