앵커, 피벗, 위치는 유니티 UI 시스템에서 요소의 크기, 위치, 그리고 반응성을 결정하는데 사용되는 Rect Transform 컴포넌트의 세 가지 핵심 개념이다.
다양한 화면 크기(해상도)에 대응 하는 UI를 만들 때 매우 중요하다
1. 앵커(Anchor)
부모 요소(화면 또는 다른UI)의 어느 위치를 기준으로 삼을지를 결정하는 네 개의 작은 삼각형 모양의 마커이다.
UI 요소의 위치와 크기를 결정하는 기준점 또는 기준 프레임으로 부모 요소의 크기가 변할 때, 이 기준점에 고정되거나 기준점을 따라 늘어나면서 UI의 반응성(Resilience)을 결정한다.
앵커의 두 가지 주요 모드
앵커 마커가 모여 있느냐, 떨어져 있느냐에 따라 요소의 위치와 크기 작동 방식이 달라진다.
1. 고정 모드(Fixed/Grouped Anchor)
마커 상태: 앵커 마커 네 개가 한점에 모여 있음( 예: 중앙, 좌상단 등)
결과: 요소의 크기는 고정되고, 위치만 앵커를 따라 이동함. Position은 앵커를 기준으로 한 거리가 됨
2. 스트레치 모드 (Stretch/Split Anchor)
마커 상태: 앵커 마커가 서로 떨어져 있음 (예: 좌우로 떨어져 있음)
결과: 요소의 크기가 부모 요소의 크기에 따라 늘어남. Left, Right, Top, Bottom 값이 활성화 되며, 이 값들은 앵커 경계선으로부터의 패딩(Padding) 거리를 지정함
2. 위치(포지션) 및 Offset (오프셋)
위치 값은 UI 요소의 피벗(Pivot)이 앵커가 지정한 기준점 또는 기준 프레임에서 얼마나 떨어져 있는지 나타냄
앵커를 기준으로 측정되는 UI 요소의 실제 중심점 위치 (픽셀 단위)
요소의 정확한 화면상 좌표를 결정함. 앵커가 어디에 있느냐에 따라 값의 의미가 달라진다.
앵커가 고정 모드 일때는 Pos X, Pos Y로 표시되고, 앵커가 스트레치 모드일 때는 Left, Right, Top, Bottom(오프셋) 값으로 표시 된다.
Position(0,0) 이 앵커가 화면 중앙이라면 중앙을 뜻하고 좌상단이면 좌상단 모서리를 의미함
3. 피벗 (Pivot)
피벗은 UI 요소 자체 내에서 변환(크기 조절, 회전 등)이 일어나는 기준점임
요소 자체의 로컬 좌표계에서 (0,0)을 나타내는 회전 및 크기 조절의 중심점
(0,0) 부터 (1,1) 사이의 정규화 된 값으로 표현 됨. (0.5,0.5)가 기본값으로, 요소의 정중앙을 의미함
요소를 회전시키거나 스케일을 변경할 때, 이 피벗을 중심으로 변화가 일어남. 또한 Position 값이 피벗을 기준으로 측정됨.
세 요소의 관계 요약
세 가지 개념은 다음과 같은 순서로 상호작용함
1. 앵커가 부모 화면/요소 내에서 UI의 기준점/기준 영역을 정함 (어디를 따라 움직일 것인가?)
2. 위치 (Position/Offset)가 앵커 기준점에서 피벗(Pivot) 까지의 거리를 결정하여 요소의 최종 위치를 확정함 (기준으로부터 얼마나 떨어져 있을 것인가?)
3. 피벗은 요소 내에서 움직임과 변형의 중심 역할을 함 (내 안에서 어디를 중심으로 돌고 늘어날 것인가?)
따라서 화면 크기가 바뀌어 앵커의 위치가 변하면, Position 값은 유지된 채 요소의 피벗이 애어를 따라가게 되어, UI 요소가 의도한 반응성을 갖게 됨
위치는 피벗 위치를 변경 (0,0) -> (1,1) 로 하면 위치(Position)도 변경하게 된다.
위치(Position)가 피벗 위치에 따라 자동으로 변경되더라도 위치는 수동으로 지정할 필요가 있다.
위치(Position)의 가장 중요한 역할은 UI 요소의 실제 위치를 결정하는 것이기 때문이다.
1. 포지션의 핵심 역할: 배치 (Placement)
UI 요소를 앵커(Anchor)를 기준으로 원하는 곳에 놓기 위해 포지션 값을 사용함
예) 앵커를 화면 정중앙 (0.5,0.5)에 설정했다고 할 때
버튼을 중앙에서 오른쪽으로 50픽셀 떨어진 곳에 배치하고 싶다면, Pos X를 50으로 직접 입력해야 함(Pos X:50, Pos Y: 0)
이 경우에는 유니티가 Position을 자동으로 계산해 주지 않음. 개발자가 원하는 Offset(오프셋) 거리를 포지션 값으로 지정하는 것임
2. 피벗 변경은 일회성 보정
피벗을 변경하는 작업은 보통 UI 요소를 배치하는 작업 중 한 번만 이루어진다. 그 이후에는 앵커를 기준으로 포지션 값을 직접 변경하며 UI요소들을 정렬하고 배치하는 것이 주된 작업 방식임
결론은, 피벗 변경 시의 자동 조정은 위치를 고정하는 기능이고, 포지션을 수동으로 입력하는 것은 위치를 이동시키는 기능이라고 구분하여 이해하면 됨
제미나이의 도움을 받아 작성하였습니다.
댓글 없음:
댓글 쓰기