[Unity] 동적 UI 적용

Unity에서 다양한 화면 비율에 맞게 UI를 효율적으로 배치하려면 RectTransform, Anchor, Pivot, 그리고 Canvas Scaler를 적절하게 사용해야 합니다. 다음은 화면 비율을 고려한 UI 배치에 대한 몇 가지 핵심 팁입니다.

1. Canvas 설정

• Canvas Scaler 설정:
  • Canvas 오브젝트를 선택하고, Canvas Scaler 컴포넌트를 찾습니다.
  • UI Scale Mode를 Scale With Screen Size로 설정합니다.
  • Reference Resolution을 설정합니다. 예를 들어, 1920x1080 (Full HD)로 설정하면 이 해상도를 기준으로 다른 해상도에서도 UI가 적절히 스케일링됩니다.
  • Screen Match Mode를 Match Width Or Height로 설정합니다.
  • Match 슬라이더를 조정하여 너비와 높이 중 어느 쪽에 더 비중을 둘 것인지 설정합니다. 대부분의 경우, 중앙(0.5)으로 설정하여 비율을 유지합니다.

2. RectTransform 사용

• Anchor 설정:

  • Anchor는 UI 요소가 부모(또는 Canvas) 내에서 어떻게 위치할지를 결정합니다.
  • UI 요소가 화면의 특정 위치(예: 상단, 하단, 좌우 모서리)에 고정되도록 하려면 Anchor를 해당 위치에 설정합니다.
  • Anchor Preset을 사용하여 미리 정의된 위치에 빠르게 설정할 수 있습니다.
  • 예를 들어, 버튼이 하단에 고정되도록 하려면 Anchor를 하단 중앙에 설정하고, 텍스트가 상단에 고정되도록 하려면 Anchor를 상단에 설정합니다.

• Pivot 설정:

  • Pivot은 UI 요소의 중심점입니다. 예를 들어, Pivot이 (0.5, 0.5)로 설정된 경우 요소의 중앙이 Anchor로 지정된 위치에 정렬됩니다.
  • UI 요소의 위치를 정확히 조정하려면 Pivot을 적절히 설정해야 합니다.

• Anchored Position 설정:

  • Anchored Position은 요소가 Anchor 위치에서 어느 정도 떨어져 있을지를 나타냅니다.
  • X와 Y 값을 사용하여 화면 비율에 따라 상대적인 위치를 조정할 수 있습니다.

3. 비율 유지

• Aspect Ratio Fitter 사용:
  • Aspect Ratio Fitter 컴포넌트를 사용하여 UI 요소가 일정한 비율을 유지하도록 할 수 있습니다. 이 컴포넌트는 주로 이미지나 비율이 중요한 UI 요소에 사용됩니다.
  • Aspect Mode를 Fit in Parent 또는 Envelope Parent로 설정하여 부모 요소 내에서 비율을 유지하면서 크기를 조정합니다.

4. 안전 영역 설정

• Safe Area 고려:
  • 특히 모바일 장치에서 Safe Area를 고려하여 UI를 배치해야 합니다. Notch나 Home Indicator 등이 있는 장치에서는 Safe Area를 벗어나지 않도록 해야 합니다.
  • Safe Area를 고려한 RectTransform의 Anchor와 Offset을 설정하면 이러한 문제를 피할 수 있습니다.

5. 패딩 및 간격 사용

• UI 요소 간의 패딩과 간격을 활용하여 화면 크기와 비율이 달라지더라도 요소 간의 관계가 유지되도록 합니다.
• Layout Group 컴포넌트를 사용하여 간격과 정렬을 자동으로 조정할 수 있습니다.

6. 테스트

• 다양한 화면 해상도와 비율에서 테스트하여 UI가 의도한 대로 표시되는지 확인합니다.
• Unity의 Game 뷰에서 여러 해상도를 시뮬레이션할 수 있습니다.

이러한 설정을 통해 다양한 화면 비율에서도 UI가 일관되고 보기 좋게 유지되도록 할 수 있습니다.
Unity에서 화면 비율이 변동되더라도 텍스트와 버튼의 위치를 원하는 대로 유지하려면 RectTransform의 Anchor와 Pivot 설정을 적절히 사용해야 합니다. 다음은 각 요소를 설정하는 방법입니다.

1. Text를 좌측 상단에 고정하기

1. Text 오브젝트 선택: Canvas > Panel > Text 오브젝트를 선택합니다.
2. RectTransform 설정:
   • Anchor Presets: RectTransform에서 Anchor Presets 버튼(십자 모양 아이콘)을 클릭하고, 왼쪽 상단으로 Anchor를 설정합니다. Shift와 Alt 키를 함께 누르면 Pivot과 Position도 자동으로 설정됩니다.
     • Anchor를 왼쪽 상단에 맞추면 텍스트가 부모의 왼쪽 상단에 고정됩니다.
   • Position 설정: Pos X와 Pos Y 값을 조정하여 텍스트가 정확히 원하는 위치에 배치되도록 합니다.
     • Pos X는 양수 값으로 설정하여 텍스트가 왼쪽에서 떨어진 위치를 조정하고, Pos Y는 음수 값으로 설정하여 텍스트가 상단에서 떨어진 위치를 조정합니다.

2. Button을 중앙 하단에서 살짝 떨어지게 배치하기

1. Button 오브젝트 선택: Canvas > Panel > Button 오브젝트를 선택합니다.
2. RectTransform 설정:
   • Anchor Presets: RectTransform에서 Anchor Presets 버튼을 클릭하고, 하단 중앙으로 Anchor를 설정합니다. Shift와 Alt 키를 함께 눌러 Pivot과 Position도 함께 설정할 수 있습니다.
     • Anchor를 하단 중앙에 맞추면 버튼이 부모의 하단 중앙에 고정됩니다.
   • Position 설정:
     • Pos X는 0으로 설정하여 버튼이 수평 중앙에 위치하도록 합니다.
     • Pos Y는 음수 값으로 설정하여 버튼이 하단에서 위로 약간 떨어지도록 조정합니다.

3. 크기 및 위치 조정

• Text 크기 조정: RectTransform의 Width와 Height를 조정하여 텍스트의 크기를 원하는 대로 설정합니다.
• Button 크기 조정: Button의 Width와 Height를 조정하여 버튼의 크기를 설정합니다.

4. Canvas 설정

• Canvas Scaler: Canvas의 Canvas Scaler 컴포넌트를 설정하여 UI가 다양한 화면 해상도에서 잘 동작하도록 합니다.
  • UI Scale Mode를 Scale With Screen Size로 설정하고, Reference Resolution을 적절한 해상도로 설정합니다.
  • Screen Match Mode를 Match Width Or Height로 설정하고, Match 값을 조정하여 화면 비율에 따라 요소 크기를 조정할 수 있습니다.

이 설정을 통해 화면 비율이 변동되더라도 텍스트는 패널의 좌측 상단에 고정되고, 버튼은 중앙 하단에서 일정 거리 떨어져 유지되도록 할 수 있습니다.