[iOS BoostCourse] scaleAspectFill ? scaleAspectFit? scaleToFill
안녕하세요. 오늘은 뷰에 이미지 파일과 같이 컨텐츠를 올릴 때 한 번쯤은 만나게 되는 contentMode에 대해 공부해보았습니다. contentMode에는 scaleAspectFill, scaleAspectFit, scaleToFill 등의 여러 모드가 존재합니다. 저는 그저 하나씩 확인해보고 보기 괜찮다고 생각이 들면 사용했었는데요. contentMode에 대해 공부를 하고 이들의 차이점과 원리에 대해 알게 되어 이렇게 포스팅을 통해 기록을 하게 되었습니다. 바로 시작해보도록 하겠습니다.
공식 문서를 보고 이해한 것이라 번역투에 가까울 수 있으니 반드시 공식 문서를 참고하면서 같이 읽어주시면 좋겠습니다.
The View Drawing Cycle
먼저 contentMode를 이해하려면 컨텐츠라는 것이 뷰 위에 어떻게 그려지고 어떻게 사용되는지를 알아야 합니다. 처음 뷰가 화면에 나타나면 시스템은 뷰에게 그들이 갖고 있는 컨텐츠를 그리라고 합니다. 그다음 시스템은 해당 컨텐츠를 스크린샷처럼 스냅샷을 찍고 이것을 화면에 보이는 결과물로 사용합니다.
만일 뷰 위의 컨텐츠를 바꾸지 않는다면 뷰가 컨텐츠를 그리는 코드는 다시는 호출되지 않을 것입니다. 그 말인즉슨 시스템이 캡쳐한 스냅샷은 뷰와 관련된 여러 동작에 재사용된다는 것입니다. 만일 뷰 위의 컨텐츠를 바꾼다면 시스템은 뷰 위의 컨텐츠가 바뀐 것을 인지하고 새로운 컨텐츠를 위해 위와 같은 과정을 반복하게 됩니다.
실제로 사용자가 뷰 위의 컨텐츠 교체를 요구하면 그 즉시 반영되는 것이 아니라 현재 진행되고 있는 run loop가 끝난 후 반영됩니다. 이에 대해서는 [ios] setNeedsLayout vs layoutIfNeeded 포스팅을 참고해주세요.
이렇게 실제로는 컨텐츠가 시스템에 의해서 재사용된다는 것을 알았습니다.
Content Modes
모든 뷰는 뷰의 geometry(위치나 크기)의 변경에 따라 자신들의 컨텐츠를 어떻게 재활용할지와 재활용 자체의 여부를 결정하는 contentMode를 갖고 있습니다.
뷰가 처음 보여질 때 그들이 컨텐츠를 usual 하게 그려지고 캡쳐된 결과는 비트맵 위에 그려집니다. 그리고 이러한 비트맵은 geometry가 변경될 때마다 새로 만들어지지 않습니다. 대신 뷰의 contentMode라는 속성이 비트맵이 새 bounds에 맞추어 확장되어야 하는지, 항상 특정 코너에 위치해야 하는지 등을 결정하여 기존의 비트맵을 조절합니다.
즉 contentMode는 뷰의 frame, bounds 등이 변경될 때마다 해당 컨텐츠를 그리는 비트맵을 새로 만드는 것이 아니라 기존의 비트맵을 변형하는 역할을 합니다.
모든 뷰의 contentMode 기본 값은 scaleToFill입니다. 즉 뷰의 컨텐츠는 뷰의 frame에 맞추어집니다. contentMode의 예시는 다음과 같습니다.
실제로 contentMode에 따라 모든 컨텐츠가 온전하게 표현되지는 않습니다. 해당 뷰를 벗어나기도 하고 컨텐츠가 왜곡되기도 합니다. 간단히 위 예시의 모드들을 설명하자면 다음과 같습니다.
left: 뷰의 geometry가 어떻게 되든 컨텐츠 본연의 크기 그대로 항상 왼쪽 끝에 컨텐츠를 위치시킨다.scaleAspectFill: 컨텐츠 자체의 비율을 유지하여 뷰를 꽉 채운다. 이로 인해 컨텐츠의 일부가 잘려보일 수 있다.scaleAspectFit: 컨텐츠 자체의 비율을 유지하며 컨텐츠를 뷰에 온전히 보여주기 위해 맞춘다. 이로 인해 뷰 내부에 빈 공간이 생길 수 있다.scaleToFill: 컨텐츠 자체의 비율을 유지하지 않고 뷰 내부를 모두 채우기 위해 컨텐츠를 확대,축소한다. 왜곡 현상이 일어날 수 있다.
contentMode는 뷰의 컨텐츠를 재활용할 때 유용하게 사용됩니다. 하지만 위에서 언급한 것 처럼 컨텐츠를 재사용할지 안 할지의 여부도 선택할 수 있습니다. 컨텐츠를 재활용하지 않게 강제한다면 뷰의 geometry가 변경될 때마다 뷰는 컨텐츠를 새로 그려야 합니다.
하지만 일반적으로 컨텐츠를 매번 다시 그려주는 행위는 피해야 합니다. 뷰의 geometry가 변경될 때마다 컨텐츠를 새로 그려주는 것은 절대 가벼운 작업은 아니기 때문입니다.
마무리
오늘은 이렇게 contentMode에 대해 공부했고 기록을 해보았습니다. 예전에는 그냥 하나씩 맞추어 대충 사용하였습니다. 그로 인해 항상 어딘가 찜찜한 마음을 갖고 있었는데 이제는 각 contentMode의 특성을 알고 원리를 알게 되었으니 정확히 언제 어떤 모드를 사용해야 하는지 확실히 파악을 하고 사용할 수 있게 되어 마음의 짐을 내려놓은 것 같은 기분입니다.
boostcourse에서도 공식 문서를 반드시 읽는 것을 추천하는데 공식 문서를 읽으면 읽을수록 그 이유를 알 것 같습니다. 다음에는 더 알차고 유익한 내용으로 찾아뵙도록 하겠습니다. 감사합니다.
참고자료