2024-09-25

---

반응형 UI

다양한 화면 크기와 해상도에서 UI 요소가 적절하게 배치되고 크기가 조정되도록 하는 설계

태블릿과 여러 기종간의 해상도에 따라 UI 요소가 길어지거나 줄어들고, 위치도 조정되게끔 유도한다.

Canvas 의 Canvas Scaler 속성, UI 요소의 Pivot 과 Anchors 를 조정하는 이유도 이러한 이유였다.

Anchors 와 Pivot

• Anchors : UI 요소의 위치와 크기를 부모 Canvas의 크기에 비례하여 설정한다.
  - 화면 크기가 변경될 때 요소의 위치가 자동으로 조정된다.

• Pivot : UI 요소의 회전과 스케일의 기준이 되는 점이다.

앵커 프리셋에서 Shift 와 Alt 키를 통해 쉽게 설정할 수도 있다.

Input	속성
Left Click	앵커 위치 변경
Alt + Left Click	앵커 위치, UI 요소의 위치 변경
Shift + Left Click	앵커 위치, UI 요소의 Pivot 위치 변경
Alt + shift + Left Click	앵커 위치, Pivot 위치 + UI 요소의 위치 변경

Layout Group

요소들을 수평이나 수직으로 쉽게 정렬할 수 있는 컴포넌트

• Horizontal Layout Group : 요소들을 수평으로 정렬
• Vertical Layout Group : 요소들을 수직으로 정렬

여러 버튼들을 Btns 라는 부모 오브젝트의 자식으로 넣고,
Horizontal Layout Group 컴포넌트를 추가해주었다.

해상도 확인해보기

Simulator 기능을 통해 여러 기종과 해상도에 따라 어떻게 화면이 적용되는지 알아볼 수 있다.

속성 알아보기

필드	속성
Fit to Screen	디스플레이를 확대/축소하여 창 내부에 맞춘다.
Rotate	기기의 물리적인 회전 시뮬레이션한다. 좌우 회전
Safe Area	노치(Notch) 영역을 확인할 수 있다.
(Notch)	디스플레이를 방해하는 부분을 제외하고 노란색 박스의 가이드를 보여준다. 해당 영역 안에서만 UI 를 배치하도록 하자.
Play Mode Behavior	플레이 모드에 진입할 때 무엇을 할지 선택한다.
(Play Focused)	시뮬레이터 뷰에 초점을 맞춘다.
(Play Maximized)	시뮬레이터 뷰에 초점을 맞추고 최대화한다.
(Play Unfocused)	시뮬레이터 뷰에 초점을 맞추지 않는다.

• Safe Area 활성화 시

• 기종 선택
  

활용도

추후 PC 뿐만 아니라 IOS, Android 등의 플랫폼에도 출시를 하게 된다면, 유용하게 사용될 것 같다.

특히 Notch 부분에 신경을 써, 터치가 되지 않는 부분에 UI 가 존재하는 일을 방지하는 데 사용될 수 있다.