Safe Zone (세이프 존) 위젯은 게임 유저 인터페이스(UI)를 개발할 때 여러가지 디바이스에서 실행할 수 있는 핵심적인 부분입니다. 세이프 존은 TV 디스플레이의 테두리나 iPhoneX 의 노치와 홈 바 아래처럼 기술적으로 사용할 수는 있지만 플레이어가 볼 수는 없는 디스플레이 영역으로 UI 가 넘어가지 않도록 해줍니다. The UMG Designer(디자이너)를 사용하면 UI 에 세이프 존 위젯을 적용하여 디바이스의 해상도를 (또는 회전도) 테스트할 수 있습니다.
세이프 존 위젯을 디자이너 에 추가하면, Hierarchy (계층구조) 패널에서 그 자손이 된 다른 위젯의 스케일을 조절합니다. 이 자손 위젯은 "언세이프" 존이 있으면 스케일 및 다른 설정을 조절합니다.
이 예제에서 테스트 및 디버깅 용도로 1080p 디스플레이에 Uniform Safe Zone (균등 세이프 존) 영역을 0.9 (빨강) 설정했습니다. 어떤 위젯의 부모를 세이프 존 위젯으로 설정하면, 세이프 존 영역에 맞게 자손 위젯의 스케일을 조절합니다. 이렇게 하면 화면 가장자리 "언세이프" 존에 위젯이 잘리는 것을 방지할 수 있습니다. 예제에서 "My Menu" 제목 텍스트로 확인할 수 있습니다.
세이프 존 해상도 설정 및 테스트
UMG (또는 에디터에서 플레이 세팅)에서, 선택한 화면 크기는 이제 Device Profiles (디바이스 프로파일)과 연동되어 Mobile Content Scale Factor (모바일 콘텐츠 스케일 인수)도 고려합니다. 즉 최종 해상도와 DPI 스케일이 선택한 디바이스에 따라 바뀐다는 뜻입니다.
디바이스의 화면 해상도를 테스트하려면 UMG 디자이너 뷰포트에서 Screen Size (화면 크기) 드롭다운에 나열되는 디바이스를 선택하면 됩니다.
핸드폰이나 태블릿처럼 화면 방향을 지원하는 디바이스의 경우, Portrait/Landscape (가로모드/세로모드) 버튼으로 모드를 전환합니다. 선택한 디바이스가 방향 전환을 지원하지 않으면 이 옵션은 회색으로 나타납니다.
두 가지 뷰 모드 예:
왼쪽: 가로모드, 오른쪽: 세로모드
디바이스를 선택하면 관련 정보와 "언세이프" 존 마크가 디자이너 그래프에 나타납니다.
"언세이프" 존 마크 모바일 콘텐츠 스케일 인수나 디바이스 이름이나 균등 세이프 존, 화면 크기와 같은 디바이스 세부 정보 DPI 스케일
비균등 세이프 존의 경우, Flip (전환) 버튼으로 디바이스의 가로 모드 회전을 시뮬레이트할 수 있습니다.
이 옵션은 일부 디바이스 그리고 가로 모드에만 사용할 수 있습니다.
목록의 TV 와 모니터를 미리볼 때, 디버그 타이틀 세이프 존 을 1 미만 설정한 경우, Uniform Safe Zone (균등 세이프 존)에 그 크기가 표시됩니다. 디버그 세이프 존 영역은 캔버스 위젯 주변의 빨강 영역으로 나타납니다.
Debug Safe Zone (디버그 세이프 존) 모드는 UMG 에 기본으로 켜져있어 빨강 "언세이프" 존 영역을 나타낼 수 있습니다.
일부 디바이스의 경우, 디자이너 그래프 안에 커스텀 "언세이프" 존이 나타납니다. 디바이스의 하드웨어나 소프트웨어 지정 영역이 차지하는 화면 실제 공간을 표현하는 데 쓰입니다. 예를 들면 iPhoneX 에서 화면 상단의 노치와 홈 바 섹션을 나타내는 부분입니다.
이 iPhoneX 예제에서, 세이프 존 위젯은 메뉴와 버튼이 들어있는 위젯 계층구조 섹션을 부모로 설정합니다. "언세이프" 존인 경우, 캡슐화된 위젯의 스케일을 조절하여 그 영역을 피합니다 (위 예제 참고).
PIE 및 독립형 게임에서 UI 테스트
에디터에서 UI 를 테스트할 때, 디바이스에 콘텐츠를 디플로이하지 않고도 새 에디터 창 또는 독립형 게임 PIE 를 통해 일반적인 화면 크기에 따라 화면 크기를 설정할 수 있습니다. 에디터 개인설정 의 레벨 > 플레이 > Game Viewport Settings (게임 뷰포트 세팅) 아래에서 디바이스를 설정하여 일반적인 디바이스 해상도를 선택합니다.
Landscape/Portrait Orientation (가로/세로 모드) 버튼으로 사용할 방향을 바꿀 수 있습니다.
