[iOS] ScaleToFill / AspectFit / AspectFill

2022년 9월 6일에 작성됨

contentMode

아마 작업을 하다가 본인도 모르게 contentMode를 사용을 해봤을 겁니다. 그럼 이 contentMode가 무엇이냐 ? 애플 문서에는 이렇게 정의되어 있습니다.
'A flag used to determine how a view lays out its content when its bounds change'
bounds가 변경될 때 뷰가 콘텐츠를 배치하는 방법을 결정하는 데 사용..? 이라고 합니다..

종류는 이렇게 많지만 사실 많이 사용하고 헷갈리는 친구는 ScaleToFill, AspectFit, AspectFill 이 3개입니다. 실제로 저는 이거 말고는 사용을 해보지도 않아서, 요 친구들을 한번 정리해보겠습니다.

---

테스트를 위한 원본 이미지입니다.

ScaleToFill

contentMode를 따로 설정안하면 default로 ScaleToFill가 세팅이 됩니다.
ScaleToFill는 원본 이미지의 비율을 무시하고 전체 이미지가 다 나올 수 있도록 이미지를 꽉 채우는 옵션입니다.

제 프로젝트에 들어가는 이미지인데, 원본과 비교해보면 모든 이미지를 다 나오게 하려고 약간 압축? 이 된 화면을 볼 수 있습니다.

AspectFit

AspectFit는 원본 이미지의 비율만을 맞추는 옵션입니다. 따라서 이미지가 뷰를 꽉 채우지 못하는 상황이 발생할 수 있습니다.

 

사진을 보면 원본 사진과의 비율은 맞추는데 뷰를 가득 채우지 못해서 빈 공간이 생긴 모습을 확인할 수 있습니다.

AspectFill

AspectFill는 원본 이미지의 비율을 맞추면서 이미지를 꽉 채우는 옵션입니다. 비율을 맞추면서 채우려다 보니 이미지가 잘리는 경우도 발생합니다.

 

원본 이미지랑 비교해보면 비율은 똑같지만 이미지가 잘린 부분이 있다는 것을 확인할 수 있습니다.

---

contentMode는 상황마다 쓰는 케이스가 다 달라서 이미지의 비율이 중요하다. 이미지가 잘리면 안된다. 이런 우선순위를 두고 contentMode를 잘 설정하면 될 거 같습니다. contentMode 말고도 clipsToBounds, masksToBounds 에 대한 부분도 상당히 중요한 개념인데 이 친구들은 다음 글에서 한번 정리해보겠습니다. :)