[Unity] 모바일 UI가 노치·카메라 홀에 가려질 때 레터박스 처리하기 (트러블 슈팅)

모바일 게임 빌드 후 테스트하던 중,
상단 UI가 기기의 카메라 홀(노치)에 가려지는 문제가 발생했습니다.

특히 상단 체력 바나 버튼이 중요한데, 이 영역이 일부 기기에서는 보이지 않게 되는 큰 문제였어요.
해상도 설정으로 해결되지 않아 찾아보다가 Unity Asset Store에서
Safe Area Helper 패키지를 발견했고,
이걸로 간단하게 문제를 해결할 수 있었습니다.

---

문제 상황

• 모바일 상단 UI가 카메라 홀, 노치, 소프트키 영역에 겹쳐서 보이지 않음
• 다양한 해상도와 기기를 고려할 때 수동 Anchor 조정으로는 한계
• 자동으로 Safe Area를 인식해서 UI를 조정할 필요가 있음

---

해결 방법: Safe Area Helper 사용

에셋스토어 패키지 설치

• Unity Asset Store에서 Safe Area Helper 검색
• 프로젝트에 임포트

적용 순서

1. Canvas 안에 빈 오브젝트 생성
   • 이름은 SafeAreaPanel, SafeArea, 또는 원하는 대로 설정
2. RectTransform을 풀스크린으로 설정
   • Anchor Preset을 오른쪽 하단의 stretch - stretch로 설정합니다.
3. SafeArea 컴포넌트 추가
   • 해당 오브젝트에 SafeArea.cs 컴포넌트를 추가하면 끝!
4. SafeArea 안에 UI 요소 배치
   • SafeArea 오브젝트 아래에 버튼, 텍스트 등 필요한 UI 요소를 넣으면
     자동으로 SafeArea 범위 안에만 표시됩니다.

---

적용 후 결과

•  상단 UI가 노치에 가려지지 않음
•  별도 코드 작성 없이 빠르게 적용 가능
•  다양한 기기에서도 안정적인 화면 구성 유지

---

마무리

이전에는 직접 Screen.safeArea를 계산해서 Anchor를 일일이 조정해야 했지만,
Safe Area Helper 덕분에 빈 오브젝트 하나, 컴포넌트 하나만 붙이면 해결되었습니다.

모바일 UI가 잘리거나 겹치는 문제가 있다면,
"Canvas 안에 빈 오브젝트 하나 만들고 SafeArea 붙이기"만으로 대부분 해결됩니다!