[🔮Unity UI Project] #1 앵커/피벗 완벽 이해 및 해상도 대응 테스트

관련 유니티 공식 문서

캔버스 스케일러 - Unity 매뉴얼

 

 

1. Rect Transform

일반적인 오브젝트가 3D 공간에서 Transform을 사용한다면, UI 공간은 Rect Transform을 사용한다. 픽셀 단위 크기를 사용하며 자신 직계 부모의 어느 지점에 고정할 것인지 결정하는 Anchor로 배치한다.

 

2. Anchor

Anchor는 부모 RectTransform 내에서 정규화된 위치로, 부모의 크기가 변해도 같은 비율 위치를 유지한다.

위치 = 앵커 위치 + Anchored Position 
크기 = (Anchor Max - Anchor Min) x 부모 크기 + Size Delta

 

3. Pivot

Pivot은 UI 요소의 회전, 스케일, 위치 계산의 기준점이다.

 

Pivot X 값	의미	크기 증가 시 동작	사용 예시
0.0	Left	오른쪽으로만 길어짐	HP 바, 왼쪽 정렬 텍스트
0.5	Center	양쪽으로 퍼짐	중앙 팝업, 일반 버튼
1.0	Right	왼쪽으로만 길어짐	툴팁(화면 우측 끝), 우측 정렬 텍스트

PC 실전 예시 (툴팁): 마우스가 화면 오른쪽에 있을 때 툴팁이 뜨면 화면 밖으로 잘릴 수 있다. 이때 Pivot을 X=1로 설정하면 툴팁이 마우스 왼쪽으로 생성되어 잘리지 않게 할 수 있다.

 

Unity 에디터의 Anchor Presets는 Min/Max 앵커를 빠르게 설정하는 도구다. Alt+Shift를 누르고 클릭하면 앵커와 피벗이 동시에 설정된다. 보통 동일하게 설정한다.

 

4. Canvas Scaler

Canvas Scaler는 다양한 해상도에서 UI의 일관된 크기와 비율을 유지하기 위한 컴포넌트다.

- Constant Pixel Size: UI 요소의 픽셀 크기를 항상 동일하게 유지한다. 해상도가 높아지면 UI가 작아보이고, 낮아지면 커 보인다.
픽셀아트 게임, 고정 해상도 게임 등에 사용한다. 

-  Scale With Screen Size : Reference resolution을 기준으로 스케일을 계산한다. 화면 크기에 따라 UI가 비례적으로 확대 / 축소된다.

* Reference resolution : 기준 해상도 (디자이너가 작업한 기준 해상도)
ex. reference resolution이 1920 x 1080일 때 4K 모니터에서 UI는 2배 확대되어 표시된다. 

* Screen Match Mode : 가로 / 세로 중 어떤 것을 우선할지
* Match : 0.0 (가로 우선) ~ 1.0 (세로 우선)

• Match = 0.0: 가로 비율만 고려 (세로는 무시)
• Match = 1.0: 세로 비율만 고려 (가로는 무시)
• Match = 0.5: 가로와 세로의 중간값 (균형)

PC 기준으로는 Scale with Screen Size 기본값이 Match 0인데, PC게임이라면  Match 0.5 또는 1이 좋을 것 같다. 와이드 모니터 같은 경우에서 가로가 길어졌다고 UI를 확대해서 보여주게 된다. 

레이아웃에 대한 공식 문서는 여기 -> https://docs.unity3d.com/kr/2021.3/Manual/UIAutoLayout.html

 

5. PC 게임 UI 최적화

Raycast Target

PC 게임은 마우스 포인터가 쉴 새 없이 움직인다. Unity는 마우스가 움직일 때마다 Raycast Target이 켜진 모든 UI를 검사하여 "이 위에 마우스가 있나?"를 체크한다. 따라서 배경 이미지, 장식용 아이콘, 단순 텍스트에 Raycast Target이 켜져 있으면 불필요한 연산이 발생한다. 상호작용이 없는 UI의 Raycast Target은 꼭 꺼주어야 한다.

 

Draw Call 배칭

• UI는 같은 텍스처(Atlas)를 쓰는 UI끼리는 한 번에 그린다. 그렇기 때문에 텍스트와 이미지가 계층 구조상 섞여있으면 배칭이 깨진다. 따라서 같은 타입의 UI 요소들을 계층적으로 그룹화하는 것이 최적화에 도움이 된다. Sprite Atlas를 사용하는 것도 방법이다. 불필요한 UI요소는 꺼놓는 것도 중요하다.