애플은 iPhone X부터 화면의 경계에 위치한 홈버튼이 없는 디자인을 채택했습니다. 그러나 앱의 디자인이 여러 화면 크기와 디바이스에 맞추어져 있지 않으면 사용자 경험이 떨어질 수 있습니다. 따라서 Safe Area를 사용하여 올바른 오토레이아웃을 설정하는 것이 매우 중요합니다.

Safe Area가 무엇인가요?

Safe Area는 노치, 홈 버튼, 상태 바 등과 같이 콘텐츠가 표시될 수 있는 안전한 영역을 나타냅니다. Safe Area에 UI 요소를 배치하면 디바이스의 화면 크기나 형태에 따라 안전하게 표시되어 사용자에게 일관된 경험을 제공할 수 있습니다.

Safe Area는 safeAreaLayoutGuide를 통해 액세스할 수 있습니다.

오토레이아웃과 Safe Area

오토레이아웃에 Safe Area를 사용하면 뷰를 화면 경계에 맞춰 정렬할 수 있습니다.

myView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
myView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true
myView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
myView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true

위의 예시에서 myView는 Safe Area 내에 올바르게 정렬될 것입니다.

애플의 공식문서 에서 더 많은 정보를 확인할 수 있습니다.

이를 통해 Safe Area를 올바르게 활용하여 여러 디바이스에서 일관된 UI를 제공할 수 있게 됩니다.