언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

Anchor , 앵커는 Canvas Panel , 캔버스 패널에 UI 위젯의 바람직한 위치를 정의하고, 화면 크기가 달라져도 그 위치를 유지하도록 하는 데 사용됩니다. 앵커는 좌상단 구석인 Min(0,0) , Max(0,0) 에서 우하단 구석인 Min(1,1) , Max(1,1) 범위로 정규화됩니다.

캔버스 패널에 다른 UI 위젯을 추가한 이후에는, 프리셋 앵커 위치 중 하나를 선택하거나 (보통 위젯을 특정 위치에 유지시키기 위해서만이라면 그걸로 충분합니다), 앵커 위치와 Min/Max 세팅 및 오프셋까지 수동 설정할 수도 있습니다.

앵커 작동 방식

아래 노랑 박스 안에 있는 것은 Anchor Medalliion 앵커 메달로, 캔버스 패널상의 앵커 위치를 나타냅니다.

아래 그림에서는 캔버스 패널에 버튼을 배치한 뒤 앵커를 기본 위치(좌상단)에 놔뒀습니다.

위의 세로 노랑 선은, 뷰포트 좌상단을 시작으로, 캔버스 크기에 따라 버튼이 앵커에서 Y 축으로 얼마만큼 움직이는가를 알려줍니다. 가로 노랑 선은, 마찬가지로 뷰포트 좌상단을 시작으로 캔버스 크기에 따라 버튼이 앵커에서 X 축으로 얼마만큼 움직이는가를 알려줍니다. 창 좌하단(노랑 박스 안)에는 작업중인 캔버스의 Screen Size (화면 크기)를 확인할 수 있습니다.

게임에서 플레이해 보면, 뷰포트 크기에 따라 아래 그림처럼 앵커 지점을 나타내는 노랑 상자가 보일 수 있습니다:

뷰포트 크기에 따라, 버튼이 화면 밖으로 밀려납니다.

대신 앵커를 우하단으로 옮기고...

다시 똑같은 뷰포트 크기로 게임에서 플레이해 보면...

우하단의 앵커 위치(노랑 박스)로 인해 버튼이 밀려 화면 밖으로 잘리는 것이 방지됩니다.

이 예제는 앵커 위치를 어떻게 정하는지, 그 위치가 화면 크기에 따라 위젯의 위치에 어떻게 영향을 끼치는지를 나타냅니다. 앵커 메달의 추가 옵션을 통해 다양한 화면 크기에 대한 위젯의 반응을 설정할 수 있습니다 (자세한 정보는 수동 앵커 섹션 참고).

프리셋 앵커

캔버스 패널 에 UI 위젯을 배치한 상태로, 그 위젯의 디테일 패널에서 프리셋 앵커를 선택할 수 있습니다.

위젯의 앵커 지점 설정에 가장 자주 쓰이는 방법을 것이며, 대부분의 경우 통할 것입니다. 은색 박스는 앵커 지점을 나타내며, 선택하면 앵커 메달이 그 위치로 이동됩니다. 즉 예를 들어 무언가를 화면 중앙에 항상 유지하고자 하는 경우, 캔버스 패널 중앙에 위젯을 배치한 다음 중앙/중앙 프리셋 옵션을 선택하면 됩니다.

프리셋 스트레칭 메서드 중 하나를 선택할 수도 있습니다:

뷰포트 크기에 맞게 무언가를 늘이고자 할 때 유용합니다 (아래 참고).

여기서는 캔버스 하단을 따라 가로로 늘어나도록 하는 앵커 배치를 선택했습니다.

스트레칭은 앵커 메달이 하나가 아닌 두 조각으로 나뉘는 것으로 반영됩니다.

이제 게임을 플레이해 보면, 진행상황 바가 (정상적인 경우) 이와 비슷하게 보입니다:

뷰포트 크기가 다른 경우 이렇게 보일 수도 있습니다:

심지어 이렇게도 보일 수가 있습니다:

수동 앵커

프리셋 사용에 추가로, 위젯 앵커를 달고자 하는 곳에 앵커 메달을 수동으로 배치할 수도 있습니다. 이는 한 위젯의 앵커를 다른 위젯을 기준으로 달고자 할 때 특히나 유용한데, 그 예제는 다음과 같습니다.

위 그림에서, 다른 캔버스 패널 안에 배치된 캔버스 패널 내 진행상황 바 위젯 옆에 이미지 위젯이 있습니다. 이미지/진행상황 바가 들어있는 캔버스 패널의 앵커는 화면 좌상단 구석으로 되어 있습니다. 이런 경우의 예라면, 생명력 바 옆에 플레이어 캐릭터 이미지를 들 수 있습니다.

아래는 (표시되지는 않았지만 이미지 포함) 진행상황 바의 앵커가 캔버스 패널 좌상단으로 되어있습니다.

진행상황 바가 늘어는 나되 오른편에서 고정된 간격을 유지하고 일정량만큼 밖으로 뻗어나가게 만들고 싶다 칩시다. 그럴 때는 앵커 메달의 중앙 왼쪽 부분을 아래와 같이 당겨 나눠놓으면 됩니다.

이제 아래 그림에서 캔버스 패널의 오른편을 늘이면 진행상황 바는 늘어나되 오른편에서 일정한 간격은 유지하고 중앙쪽 바깥으로 뻗어나가는 것을 볼 수 있습니다.

이제 위젯이 들어있는 캔버스 패널의 크기를 조정하려 하니까 문제가 생깁니다. 이미지 위젯이 처음 설정했던 위치에 그대로 (또는 바랬던 것처럼 진행상황 바 옆에) 있지 않는 것입니다.

이미지의 앵커를 그것이 들어있는 캔버스 패널의 좌상단 구석에 유지하는 대신, 수동으로 옮겨 새 앵커 지점을 설정할 수 있습니다.

위에서, 앵커를 진행상황 바 자체의 좌상단 구석으로 옮겼습니다. 즉 이제 두 위젯이 들어있는 캔버스 패널의 크기를 조절하면...

이미지 위젯이 진행상황 바와 고정된 간격을 유지합니다. 하지만 또다른 문제가 있는데, 캔버스 패널을 왼쪽으로 밀면...

이미지가 왼편에서 고정된 위치에 남아있도록 거리를 설정하지 않았기에 이미지가 잘립니다. 이럴땐 앵커 메달을 나눠주면 됩니다.

위에서 앵커 지점, 진행상황 바에서 이미지를 얼마나 멀리 확장시킬지, 왼편의 여백까지도 설정했습니다. 이제 크기를 조절해 보면...

이미지 왼편/오른편의 여백이 딱 맞게 유지됩니다만, 위/아래는 어떤가요? 캔버스 패널을 아래로 잡아당기니까, 이미지가 진행상황 바 중앙에 더이상 맞지 않습니다.

앵커 메달을 한 번 더 조정해 주면 고칠 수 있습니다. 여기서는 진행상황 바를 기준으로 이미지를 상/하단에서 얼마만큼 밀어줄 것인지 설정했습니다.

이제 캔버스 패널 크기를 어느 방향으로 조절해도, 이미지의 크기와 위치가 마찬가지로 늘어나는 진행상황 바를 기준으로 잘 유지됩니다.