제약을 추가하지 않고, Prototyping으로 위치가 배치될 경우 화면을 돌렸을 때 의도하지 않은 위치로 배치된다.
safe area
![](https://velog.velcdn.com/images/rudin_/post/158c5846-e7c0-4f67-9abd-6db6ab5825b9/image.png)
- 모든 제약은 가장 인접한 대상을 기반으로 표시된다.
- safe area 기준으로 추가하면 시스템 UI와 겹치지 않게 추가할 수 있다.
- 보통 top, bottom은 layout margin을 선택했을 때 root view와 safe area 둘 다 current distance가 동일하게 나오지만, leading 과 trailing은 다르다.
![](https://velog.velcdn.com/images/rudin_/post/79f1898e-fa08-46ba-a65f-c1d9f3007108/image.png)
다른 대상을 기반으로 추가하고 싶은 경우
![](https://velog.velcdn.com/images/rudin_/post/8928911a-d35e-41b9-ba23-44c3a8e18aa7/image.png)
왼쪽 하단을 기준으로 배치하고 싶은 경우
![](https://velog.velcdn.com/images/rudin_/post/5f4c6ba6-4129-49fa-a779-fba362480ce8/image.png)
오른쪽 상단을 기준으로 배치하고 싶은 경우
![](https://velog.velcdn.com/images/rudin_/post/5a7674ad-bc6c-40c4-b686-ec4a62ca5b18/image.png)
layout Margin
![](https://velog.velcdn.com/images/rudin_/post/a075ef48-800b-46d0-b98b-73d148b50d64/image.png)
- 해당 옵션을 체크하면 항상
layout margin
을 기준으로 제약을 추가한다.
- 레이아웃 마진은 뷰의 가독성을 높이기 위해 사용되는 일종의 여백이다.
기본적인 규칙
![](https://velog.velcdn.com/images/rudin_/post/f7d36d25-1447-47a6-9ab4-6f98f57cdcf7/image.png)
- 배경이 아니라면, 상단바 영역을 침범해서는 안된다.
- layout margin, 또는 safe area를 기준으로 배치해야 한다.
제약 수정
![](https://velog.velcdn.com/images/rudin_/post/dab1f97d-288c-486f-8bed-b4b37d5c71b8/image.png)
- 제약 공식을 생각하여 수정하면 된다.
item1.attribute1 = multiplier x item2.attribute2 + constant
![](https://velog.velcdn.com/images/rudin_/post/55f6fcbb-69ec-4762-8a6d-fedf694c511d/image.png)
- item을 바꾸더라도 현재 화면상 배치대로 constant가 업데이트 되므로 반드시 constant값을 확인하고 바꾸어주어야한다.