👨‍💻 [Unreal] 언리얼 엔진에서 앵커 (Anchor) 란 무엇이며, 어떻게 활용할 수 있나요?

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

언리얼 엔진에서 앵커 (Anchor) 란 무엇이며, 어떻게 활용할 수 있는지 간략히 알아보았습니다.

---

질문 >

언리얼 엔진에서 앵커 (Anchor) 란 무엇이며, 어떻게 활용할 수 있나요?

답변 >

앵커(Anchor)는 언리얼 엔진의 UMG(Unreal Motion Graphics)에서 UI 요소의 위치를 화면 크기와 비율에 따라 동적으로 조정하기 위해 사용되는 속성입니다. UI가 다양한 해상도와 화면 비율에서 적절히 표시되도록 도와줍니다.

---

1. 앵커의 역할

• UI 요소의 위치 고정:
  • 특정 화면 영역(예: 화면 상단, 하단)에 UI 요소를 고정합니다.
• 해상도 독립적 배치:
  • 화면 크기나 비율이 변경되어도 UI 요소의 배치가 올바르게 조정됩니다.
• 동적 크기 조정:
  • UI 요소가 부모 컨테이너 크기에 따라 크기와 위치를 동적으로 변경할 수 있도록 설정합니다.

---

2. 앵커의 동작 방식

(1) 기본 원리

• 앵커는 위젯이 배치된 부모 캔버스에서의 기준점을 설정합니다.
• UI 요소는 앵커를 기준으로 상대적 위치와 크기를 계산합니다.

(2) 앵커와 오프셋

• UI 요소는 앵커의 위치에서 일정 오프셋 값을 기준으로 배치됩니다.
• 앵커가 움직이면 오프셋을 기준으로 UI 요소의 위치도 재계산됩니다.

(3) 앵커의 좌표

• 앵커는 부모 캔버스의 0~1 범위 좌표로 설정됩니다.
  • (0, 0): 캔버스의 왼쪽 위.
  • (1, 1): 캔버스의 오른쪽 아래.
  • (0.5, 0.5): 캔버스의 중심.

---

3. 앵커 설정 방법

1. 캔버스 패널 사용:
   • UMG 위젯을 디자인할 때, UI 요소를 Canvas Panel 안에 배치.
   • 캔버스 패널에서 앵커를 설정 가능.
2. Details 창에서 앵커 조정:
   • UI 요소를 선택한 후 Details 패널에서 Anchors 속성 설정.
   • 앵커 위치를 미리 정의된 옵션(상단, 하단, 중앙 등)이나 사용자 정의로 설정.
3. 시각적 앵커 편집:
   • 디자이너 뷰에서 앵커 핸들을 드래그하여 원하는 위치로 이동.

---

4. 앵커 활용 예시

(1) 고정된 위치

• 상단에 텍스트 배치:
  • 앵커를 (0.5, 0)으로 설정하여 화면 상단 중앙에 텍스트를 고정.

(2) 상대적 위치

• 하단 중앙 버튼:
  • 앵커를 (0.5, 1)으로 설정.
  • 오프셋으로 버튼 크기를 설정하여 항상 하단 중앙에 배치.

(3) 크기와 위치 동적 조정

• 전체 화면 배치:
  • 앵커를 (0, 0)에서 (1, 1)로 설정하여 위젯이 화면 크기에 맞게 확장되도록 설정.

(4) 특정 영역 제한

• 좌측 상단 코너에 미니맵 배치:
  • 앵커를 (0, 0)으로 설정하고 오프셋으로 위치와 크기를 세밀하게 조정.

---

5. 앵커와 해상도 대응

앵커는 다양한 해상도와 화면 비율에서 UI가 올바르게 표시되도록 지원합니다.

(1) 오프셋 조정

• Anchors와 Offsets을 조합하여 해상도에 따라 UI의 상대적 위치와 크기 유지.

(2) 스크린 크기 테스트

• 언리얼 엔진 에디터에서 Screen Size Preview를 사용하여 다양한 해상도에서 UI가 어떻게 표시되는지 미리 확인.

---

6. 앵커 사용 시 유의점

1. Canvas Panel이 필수:
   • 앵커는 캔버스 패널 내의 UI 요소에서만 사용할 수 있습니다.
2. 정확한 설정 필요:
   • 잘못된 앵커 설정은 UI가 의도하지 않은 위치에 나타날 수 있습니다.
3. 동작 확인:
   • 다양한 해상도에서 UI가 의도대로 표시되는지 반드시 테스트.

---

7. C++로 앵커 설정

앵커를 프로그래밍 방식으로 설정할 수도 있습니다.

예제

UCanvasPanelSlot* CanvasSlot = Cast<UCanvasPanelSlot>(MyWidget->Slot);
if (CanvasSlot)
{
    // 앵커 설정
    CanvasSlot->SetAnchors(FAnchors(0.5f, 0.5f)); // 중앙
    // 오프셋 설정
    CanvasSlot->SetOffsets(FMargin(-50.f, -50.f, 100.f, 100.f)); // 크기와 위치
}

---

8. 결론

앵커(Anchor)는 다양한 해상도와 화면 비율에 대응하기 위해 UI 요소의 위치와 크기를 동적으로 조정하는 데 필수적인 도구입니다. 올바른 앵커 설정을 통해 사용자 경험을 개선하고, 다양한 디바이스에서 일관된 UI를 제공합니다. Canvas Panel 내에서 설정하며, 미리보기와 테스트를 통해 원하는 UI 배치를 보장할 수 있습니다.

---

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---