[iOS의 모든것] (UIKit) Frame과 Bounds의 차이

안녕하세요 ~!

오늘은 늘 느낌으로만 알고 정확히 알지 못해 말로는 설명못했던
UIKit 프레임 워크의 UIView Instance Property인 frame과 bounds의 차이점에 대해 정확히 되짚어 보는 시간을 가져보려고 합니다.
어김없이 진리의 애플 개발자 문서를 살펴보도록 하겠습니다.

---

frame

먼저 frame !!
frame의 정의를 살펴보면 슈퍼뷰의 좌표 시스템 내에 있는 뷰의 위치와 사이즈를 설명하는 frame 직사각형 이라고 합니다.
즉 부모(상위) 뷰 안에 있는 직사각형 프레임의 위치와 사이즈...를 말하는거 같죠 ??

일단 그렇게 이해해두고 bounds의 정의도 한 번 살펴봅시다 !

bounds

bounds의 정의는... 자신만의 좌표 시스템 내에 있는 뷰의 위치와 사이즈를 설명하는 직사각형 bounds 직사각형 이라고 하네요.

음... 역시 정의를 읽어봐도 비슷한 말인거 같은데... 약간 차이가 있는 단어들이 눈에 띄죠...!?
슈퍼뷰의 좌표 시스템 vs 자신만의 좌표 시스템

위 단어들을 머리에 각인 시킨 채 좀 더 가시적으로 차이를 확인해봅시다 !

---

 < Frame >

위 스크린샷과 같이 상/좌/우 20씩 띄운 높이 300의 Yellow View와
그 하위 뷰로써 Yellow View로 부터 상/하/좌/우/ 20씩 띄운 Black View가 있습니다.

위 두 View들의 frame과 bounds를 print로 찍어보겠습니다 !

<frame>
yellowView.frame -> (20.0, 67.0, 335.0, 300.0)
blackView.frame -> (20.0, 20.0, 295.0, 260.0)
<bounds>
yellowView.bounds -> (0.0, 0.0, 335.0, 300.0)
blackView.bounds -> (0.0, 0.0, 295.0, 260.0)

역시 예상했던 대로(?) 위와 같이 나옵니다.
(yellowView의 y값이 67.0은 노치 영역의 높이 47을 포함한 값입니다.)
그렇다면 이제 yellowView와 blackView의 frame/bounds 값을 조절해보겠습니다.

먼저 yellowView의 frame y 값에 20을 더해본 뒤 출력해보겠습니다.

yellowView.frame.origin.y += 20
        
print("<frame>")
print("yellowView.frame -> \(yellowView.frame)")
print("blackView.frame -> \(blackView.frame)")
print("<bounds>")
print("yellowView.bounds -> \(yellowView.bounds)")
print("blackView.bounds -> \(blackView.bounds)")

그랬더니 결과는 !

yellowView.frame.origin.y += 20

위 스크린샷과 같이 Yellow View의 frame.y 값이 20만큼 늘어난 형태를 보입니다.
frame은 우리가 직관적으로 생각한 그대로인거 같죠 !?
(= 상위 뷰를 기준으로 얼마난 크기로 얼마나 멀어져있나)

---

 < Bounds >

이번엔 bounds의 y 값에 20을 더해보겠습니다 !!

yellowView.bounds.origin.y += 20
        
print("<frame>")
print("yellowView.frame -> \(yellowView.frame)")
print("blackView.frame -> \(blackView.frame)")
print("<bounds>")
print("yellowView.bounds -> \(yellowView.bounds)")
print("blackView.bounds -> \(blackView.bounds)")

그 결과

yellowView.bounds.origin.y += 20

위 스크린 샷과 같이 frame의 y값은 그대로이되 bounds의 y값이 20만큼 늘어났습니다.
그랬더니 yellowView와 blackView의 상단이 모두 잘렸네요...!
좀 더 쉬운 이해를 돕기위해서 bounds의 y값에 10만 더해보겠습니다.

yellowView.bounds.origin.y += 10

보니까 yellow 뷰가 위로 10만큼 올라가있는 듯한 형태로 보입니다 !
뭔가 감이 오시나요 ? ㅎㅎㅎ
위의 정의에서 얘기했던 자신만의 좌표 시스템이란...

해당 뷰 자체의 좌표계를 얘기합니다. (위 스크린샷의 빨간 영역)
저희가 여기서 bounds의 y값을 10만큼 추가해줬으니 자체 좌표계(빨간 영역)의 위치는

이렇게 10만큼 아래로 이동하게 되고 ! 자체 좌표계 내에서의 뷰는 저렇게 yellowView가 잘린 것 처럼 보이게 되는거죠...!
이해가 잘 되셨을지 모르겠네요 ㅠㅠ 혹시나 여쭤보실게 있다면 댓글로 남겨주시면 답변 드리겠습니다 !
저는 frame과 bounds를 이해하면서 이 자체 좌표계에 대해서 이해하는데에 시간이 걸렸답니다...(아직도 힘듦)

---

요약

[frame]
상위뷰(슈퍼뷰) 좌표 시스템 내에서의 위치와 사이즈를 나타내고,
위치 변경 시 상위뷰를 기준으로 이동
[bounds]
자체 좌표 시스템 (해당 뷰) 내에서의 위치와 사이즈를 나타내고,
위치 변경 시 해당뷰의 자체 좌표 시스템(viewport)를 이동