사실 이전까지 UI 담당을 많이하긴했지만 UI는 부수적인 작업이었고, 병합이나 기획담당을 위주로 작업해왔습니다.
그래서 막상 빌드를 하게되면 UI가 깨지거나 해상도 대응이 안되는 일이 잦았습니다. 이를 한번 잡기 위해서 이번에도 UI 담당자를 자진해서 맡았고 가장 중요하게 생각하는 UI 해상도 대응, 고정에 대해서 공부해 보았습니다.

🖥️ PC 해상도 대응

1. 일반적으로 대응할 해상도 비율

PC는 대부분 16:9 비율이 일반적이지만, 다양한 모니터와 창 크기 설정을 고려해 다음 해상도들을 대응하는 것이 좋습니다:

해상도	비율	설명
1920x1080	16:9	FHD, 가장 일반적인 해상도
2560x1440	16:9	QHD, 고해상도 모니터에서 사용
3840x2160	16:9	4K, 고사양 디스플레이
1600x900	16:9	저사양 환경 대응용
1280x720	16:9	최소 해상도 기준으로 적합
1280x1024	5:4	구형 모니터 대응
3440x1440	21:9	울트라 와이드 모니터

2. 비율 고정 & 레터박스 처리

• 목표 비율 고정 (예: 16:9)
  다양한 해상도에서 비율을 고정하려면, Camera.rect 값을 조정해 레터박스(Letterbox) 또는 필러박스(Pillarbox) 방식으로 검은 여백을 추가합니다.

void UpdateCameraRect(Camera cam, float targetAspect = 16f / 9f)
{
    float windowAspect = (float)Screen.width / Screen.height;
    float scaleHeight = windowAspect / targetAspect;

    if (scaleHeight < 1.0f)
    {
        cam.rect = new Rect(0, (1f - scaleHeight) / 2f, 1f, scaleHeight);
    }
    else
    {
        float scaleWidth = 1f / scaleHeight;
        cam.rect = new Rect((1f - scaleWidth) / 2f, 0, scaleWidth, 1f);
    }
}

3. UI 대응

🎛️ CanvasScaler 사용

• UI Scale Mode: Scale With Screen Size
• Reference Resolution: 1920 x 1080 (기준 해상도 설정)
• Screen Match Mode: Match Width Or Height
• Match (슬라이더): 해상도 비율에 따라 적절히 조절

  0.5 추천 (가로/세로 균형)

---

📱 모바일 해상도 대응

1. 주요 비율 및 해상도

해상도	비율	기기 예시
1080 x 1920	9:16	일반 세로형 스마트폰
1440 x 2560	9:16	고해상도 스마트폰
720 x 1280	9:16	저해상도 스마트폰
1125 x 2436	약 19.5:9	iPhone X 시리즈
1080 x 2340	19.5:9	최신 안드로이드 기기

---

2. UI 대응 (CanvasScaler)

• UI Scale Mode: Scale With Screen Size
• Reference Resolution: 1080 x 1920
• Match: Height (1.0) 권장 (세로형 게임 기준)

🔎 참고:

• 세로 기반 게임은 Height (1.0)
• 가로 기반 게임은 Width (0.0) 기준 설정

---

3. 해상도/비율 예외 대응

• Safe Area 처리 (iPhone X 이상)
  • Screen.safeArea 값을 기준으로 UI 여백 조정
• 고정 비율 유지 필요 시
  • Camera.rect 또는 비율 고정형 UI 배치 고려

---

🎮 공통 팁

• Screen.SetResolution()으로 해상도 테스트 가능 (PC)
• Application.platform으로 플랫폼별 분기 처리
• Game View에서 자주 사용하는 해상도 프리셋 추가해 테스트
• UI 및 카메라의 위치/비율 깨짐 방지를 위해 반응형 레이아웃 구현

---

✅ 결론

플랫폼	주요 고려사항
PC	다양한 창 크기 & 모니터 비율 대응, 레터박스 처리
모바일	세로/가로 고정 비율, Safe Area 고려, 해상도 대응 UI

---

사실상 PC 에서는 모바일처럼 아주 독특한 환경은 없기 때문에 크게 신경쓸것이 없습니다. 하지만 모바일의 경우 노치와 같이 UI를 완전히 가리는 부분이 있어서 더 신경써 주어야 합니다.
특히 모바일에서는 UI 위치가 해상도에 따라 크게 변형되지 않도록 앵커,피벗, 스트래치를 잘 사용해주어야 합니다.

🎯 Unity UI의 Anchor, Pivot, Stretch 완전 정리

📌 1. Anchor (앵커)

앵커는 부모(RectTransform) 기준으로 자식 UI 요소의 상대 위치를 결정합니다.

✅ 기능

• UI 요소가 화면 크기에 따라 자동으로 재배치되도록 함
• 앵커 위치를 기준으로 UI의 위치(anchoredPosition)가 정해짐

🔧 예시

• 앵커를 화면 좌상단에 두면, 해상도가 바뀌어도 해당 요소는 좌상단을 기준으로 유지
• 좌우 양쪽에 고정하면, 가로 길이에 따라 넓이가 자동 조정됨

🧭 앵커 종류

앵커 위치	설명
중앙 (0.5, 0.5)	부모의 중심 기준
왼쪽 상단 (0, 1)	부모의 좌상단 기준
스트레치 (Min ≠ Max)	길이나 위치를 부모에 맞춰 자동 조정

---

🎯 2. Pivot (피벗)

피벗은 UI 요소 자체의 기준점입니다.

✅ 기능

• 회전(Rotation), 크기(SizeDelta), 위치 이동의 기준이 됨
• 앵커는 부모 기준, 피벗은 자기 자신 기준!

🔧 예시

• 피벗이 (0, 0)이면 왼쪽 아래를 기준으로 회전/스케일 조정
• 피벗이 (0.5, 0.5)이면 중심 기준

---

↔️ 3. Stretch (스트레치)

앵커 Min과 Max가 다르면 스트레치 상태입니다.

✅ 기능

• 부모 영역에 맞춰 자동으로 늘어나거나 축소됨
• 주로 UI 배경, 전체 패널, 스크롤 영역 등에 사용

🔧 사용 방법

• 인스펙터의 앵커 프리셋에서 “Stretch” 선택
  • 상하 Stretch → 높이 자동 조정
  • 좌우 Stretch → 너비 자동 조정
  • 전체 Stretch → 폭과 높이 모두 자동 조정

---

🧪 실전 팁

📏 화면에 항상 고정된 UI 만들기

• 앵커를 고정하고 anchoredPosition만 사용
• 피벗은 회전/크기 변화 고려해서 조정

🔄 반응형 UI 만들기

• 스트레치 앵커 사용해서 부모 크기에 따라 자동 확장
• LayoutGroup, ContentSizeFitter와 함께 사용하면 효과적

---

✅ 요약 표

항목	기준 위치	용도
Anchor	부모 기준	위치 기준, 반응형 UI 배치
Pivot	자기 자신 기준	회전/스케일/이동 기준
Stretch	앵커 Min ≠ Max	크기 자동 조정