[TIL][C++] 251029 MMO 서버 개발 125일차: [언리얼] UMG 앵커 제대로 알아보기 + Canvas Panel Slot

주의사항: 해당 글은 일기와 같은 기록용으로, 다듬지 않은 날것 그대로인 글입니다. 

[언리얼] UMG 앵커 제대로 알아보기

 

앵커(Anchor)란?

• 앵커는 Canvas Panel 위젯을 부모 위젯으로 두는 위젯이 사용할 수 있으며, 위젯을 Canvas Panel에 배치할 때 기준점으로써의 역할을 한다.
• 아래 사진은 Canvas Panel 위젯을 부모 위젯으로 두었을때 디테일 패널에 나타나는 앵커 목록이다.
  • 정확히는 Slot(Canvas Panel Slot) → Anchors에 있다.

 

앵커 프로퍼티 알아보기

 

Anchors

• 앵커를 설정하는 프로퍼티이다.
• 사용하는 법: 드롭다운 메뉴에서 프리셋 앵커를 사용하거나, Minimum, Maximum 값을 수동으로 입력하여 앵커를 설정할 수 있다. 또는 앵커 매달을 드래그해도 된다.

• 앵커 메달(Anchor Medal)은 왼쪽 위에 있는 꽃모양처럼 생긴 심벌을 의미한다. 앵커 매달은 앵커를 사용할 수 있는(Canvas Panel의 자식인) 위젯을 선택하면 자동으로 표시된다.
• 앵커 파라미터인 Minimum과 Maximum은 앵커 메달을 쪼개쓰지 않는 한(?) 값이 동일하다.(앵커 메달에 대한 이야기는 뒤에서 설명) 왼쪽 상단이 (0, 0)이고, 오른쪽 하단이(0, 0)이다.
  • 예를 들어, 왼쪽 상단 기준 Canvas Panel에서 가로로 70% 지점에 세로로 30% 지점인 위치에 앵커를 박고 싶다면 Minimum과 Maximum의 값은 각각 (0.7, 0.3)이 된다.

 

 

Position X / Position Y

• 앵커로부터 오프셋이다. 설정한 오프셋만큼 떨어진 곳에 위젯이 배치된다.
  • 예를 들어, Anchor가 (0, 0)에 박혀있는 상태에서 Position X, Position Y의 값을 100, 200만큼 주었다면 앵커로부터 오른쪽으로 100픽셀, 아래로 200픽셀 떨어진 위치에 위젯이 배치된다.

Size X / Size Y

• 선택한 위젯의 가로 세로 길이를 정한다. Size X는 가로, Size Y는 세로 길이를 의미한다. 그림은 생략한다.

---

추가로 알아보는 프로퍼티 - Slot(Canvas Panel Slot의 Alignment)

Alignment

• 위젯의 정렬을 설정한다. 0부터 1 사이의 값을 설정할 수 있으며, 값이 커질수록 왼쪽으로(또는 위로) 위젯이 이동한다.
• Alignment가 (0, 0)이면 Anchor가 위젯의 좌측 상단에, (1, 1)이면 위젯의 우측 하단에 위치하게 된다.
  • 주의: 여기서 Anchor는 앵커 메달의 위치가 아닌, PositionX/Y나 SizeX/Y 등의 Anchor 프로퍼티가 전부 적용된 위치를 의미한다.

 

 

Size To Content

• 현재 위젯 내부에 들어있는 위젯들이 요구하는 크기에 딱 맞게끔 현재 위젯의 Size가 조절된다. 텍스트처럼 그 크기가 동적으로 변하는 위젯이 있을 때 유용하다.

 

ZOrder

• 위젯의 표시 순서를 결정하는 숫자. 위젯이 곂칠 경우, ZOrder가 높은 위젯이 위에 위에 표시된다.

---

앵커 메달 쪼개기?

• 앵커 메달을 쪼개기가 가능하다. 가장 대표적으로 앵커 프리셋에서 Stretch를 사용하면 앵커가 2개로 쪼개지는데, 이렇게 앵커 메달이 2개로 쪼개지는 이유는 단순히 앵커가 2개로 늘었기 때문. 즉, 기준점이 2개가 된 것이다.
• Stretch의 경우 설정한 범위에 대해서 종횡비가 유지된다. 즉, 예제는 아래의 언리얼 공식 문서를 참고.

https://dev.epicgames.com/documentation/ko-kr/unreal-engine/umg-anchors-in-unreal-engine-ui

 

 

---

유의사항. 항상 모든 위젯은 왼쪽 상단이 기준이 된다.

• 이 사실은 꽤나 중요하다. 위젯을 생성할때 계산된 위치에 배치를 한다고 하면, 그 위치는 위젯의 중간이 아니라 왼쪽 상단이라는 것! 위치가 이상할 경우 이 사실을 명심해라.
  • 예를 들어, 뷰포트에서 (100, 200) 위치에 위젯을 배치했다고 한다면, (100, 200) 위치 = 위젯의 왼쪽 상단 꼭짓점 위치가 된다. 이게 싫다면 Alignment를 추가로 건드려야 한다.

---

UMG 화면 채우기 모드 옵션 드롭다운 메뉴 설명

• UMG 위젯 블루프린트(WBP)의 디자이너 탭 상단에는 화면 크기 드롭다운 메뉴가 있다. 이는 현재 위젯 블루프린트의 디자인 영역 크기를 어떻게 설정할 것인지 결정한다.

설정 값	실제 의미	용도
Fill Screen	위젯 블루프린트 디자인 영역의 크기를 선택된 뷰포트 해상도와 동일하게 설정	UI가 뷰포트 전체를 기준으로 제작된 경우(HUD, 메인 메뉴 등)
Desired	내부 콘텐츠 크기에 맞는 최소한의 공간으로 크기를 설정	다른 위젯에 삽입되는 위젯인 경우(서브 위젯)
Custom	디자이너가 임의로 가로/세로 길이를 설정	해상도 상관없이 위젯이 고정된 크기를 가져야 하는 경우
Custom On Screen	Custom으로 설정하되, 뷰포트 해상도 윤곽선을 표시.	용도는 Custom과 완전히 동일. 그냥 윤곽선만 추가되는 것
Desired On Screen	Desired로 설정하되, 뷰포트 해상도 윤곽선을 표시.	용도는 Desired와 완전히 동일. 그냥 윤곽선만 추가되는 것

 

요약

• Fill Screen은 뷰포트 기준으로 할 때 사용
• Desired는 부모 위젯을 기준으로 할 때 사용
• Custom은 테스트용