앵커

앵커를 사용하여 다른 종횡비에서도 UI 위젯을 고정된 위치에 유지하는 법입니다.

Windows
MacOS
Linux

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

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

앵커 작동 방식

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

AnchorMedallion.png

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

Button1.png

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

그래프의 화면 크기 버튼을 클릭하면 현재 사용되는 크기를 변경할 수 있습니다. UI 위젯이 다른 화면 크기나 종횡비에서 어떻게 보이는지 확인하고 알맞게 조정해 주는 습관을 들이는 것이 좋습니다.

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

InGameButton1.png

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

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

Button2.png

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

InGameButton2.png

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

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

프리셋 앵커

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

PresetAnchor.png

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

CenterCenter.png

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

HorizontalStretch.png

VerticalStretch.png

StretchBoth.png

가로 스트레치

세로 스트레치

양쪽 스트레치

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

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

ProgressBar3.png

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

메달의 핀 중 하나를 잡아당겨 나눌 수 있습니다.

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

ProgressBar4.png

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

ProgressBar5.png

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

ProgressBar6.png

수동 앵커

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

Manual1.png

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

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

Manual2.png

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

Manual3.png

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

Manual4.png

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

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

Manual5.png

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

Manual6.png

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

Manual7.png

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

Manual8.png

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

Manual9.png

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

Manual9b.png

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

Manual10.png

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

Select Skin
Light
Dark

새로운 언리얼 엔진 4 문서 사이트에 오신 것을 환영합니다!

문서 사이트에 대한 의견을 모을 수 있는 피드백 시스템을 포함해서 여러가지 새로운 기능을 준비하고 있습니다. 아래 Documentation Feedback 포럼(영문) 또는 언리얼 엔진 네이버 공식 카페(한글) 중 편하신 곳에 의견이나 문제점을 알려 주세요.

새 시스템이 준비되면 알려 드리겠습니다.

네이버 카페
공식 포럼