Frame과 Bounds

iOS 개발을 하다보면 거의 무조건 접하는 것 중 하나가 바로 frame과 bounds입니다. 저는 사실 frame과 bounds가 어떤 차이가 있는지 잘 모르고 사용했는데, 모르고 사용하니까 너무 답답하더라구요. 네, 그래서 알아봤습니다!

 

먼저 Frame과 Bounds가 애플에서는 뭐라고 정의되고 있는지 한 번 볼게요.

 

Frame

The frame rectangle, which describes the view's location and size in its superview's coordinate system.

 

👉Frame은 SuperView(상위뷰)의 좌표 시스템 안에서의 View의 위치와 사이즈를 나타냅니다.

 

Bounds

The bounds rectangle, which describes the view's location and size in its own coordinate system.

 

👉Bound는 자기 자신의 좌표 시스템에서의 위치와 사이즈를 나타냅니다.

 

 

 

정의된 말을 보니, 각자 어떤 좌표 시스템에서의 위치와 사이즈를 나타내는지에 따라 frame과 bounds로 나뉘는 것 같습니다. 그럼 말을 풀어서 살펴볼까요?

 

저는 아래 사진 처럼 빨간 button을 가진 노란색 sub view를 추가해봤어요.

 

그리고 노란 sub view와 빨간 button의 frame과 bound를 출력해보았죠.

 

먼저 frame을 살펴보면, sub view는 super view에서 x가 50, y가 100만큼 떨어진 위치에 있다고 해요. 그리고 button은 button의 super view(노란 sub view)에서 x가 20, y가 20만큼 떨어진 위치에 있다고 합니다. 그럼 아래와 같이 나타낼 수 있겠죠?

 

 

자, 이렇게 frame은 자신이 속한 super view의 좌표 시스템에 의해 좌우됩니다.

 

 

 

그럼 Bounds는????

만약 위의 상황에서 노란 sub view의 bounds를 바꿔주면 어떻게 될까요?

저는 노란 sub view에 아래와 같은 코드를 넣어보았습니다.

self.bounds.origin.x = 30
self.bounds.origin.y = 10

 

그랬더니..

엥??? 아래와 같은 화면이 나왔어요.

도대체 왜?? 왜 빨간 버튼이 저기로 움직였지...??

 

 

아까 말했듯이 bound는 자기 자신의 좌표 시스템에 의해 좌우된다고 했죠?

 

그래서 방금 노란 sub view의 bound에 x는 30, y는 10을 주게 되면, 노란 sub view는 자기 자신의 좌표에서 (30, 10)만큼 화면을 이동하게 됩니다. 하지만 노란색 바탕은 super view의 좌표 시스템에 의존하고 있으니, 노란 sub view의 좌표 시스템에 의존 하고 있는 빨간 button의 위치가 바뀐거죠.

 

ㅎㅎ 사실 이렇게 말해도 잘 모르실 거예요... 제가 그랬거든요😂

 

음... 이게 글로 설명하려니 참 어려운데..

bound의 x, y를 변경한다는건 해당 view 화면의 위치를 변경한다고 할 수 있어요. 이 개념을 제가 아래의 그림으로 그려봤습니다.

 

먼저, 검은색 화면이 있습니다. 거기에 분홍색 view가 배치되어 있죠.

 

이 상태에서 검은 화면의 bound를 움직이게 되면, 우리가 ScrollView에서 화면을 스크롤 하는 것처럼 화면이 옮겨갑니다. 즉, 분홍색 view 입장에서는 검은 화면의 원래 위치에 그대로 있는거지만 우리가 보는 검은 화면이 움직이면서 분홍색 view가 움직이는 것처럼 보이게 되는 거죠.

 

무슨 말인지 조금 감이 잡히시나요?

 

그래서 위에서 노란 sub view의 bound를 (30, 10)만큼 움직였을 때, 빨간 버튼이 원래 위치에서 (-30, -10)으로 움직인 것처럼 보이는 거랍니다.

 

 

 

그럼 이 Frame과 Bounds는 언제 쓰일까??

사실상 Frame은 iOS 개발을 하다보면 너무 자주 접해서 언제 쓰이는지는 다들 감으로 알고 계실거예요. Frame은 보통 UIView의 위치나 크기를 설정하는 경우에 사용하게 되죠.

 

그런데 Bounds는 저도 처음에 어떤 상황에서 사용할 수 있는지 잘 몰랐습니다. 대부분 frame만 조정하면 해결이 됐었으니까요. 하지만 저도 모르는 사이에 Bounds의 개념을 사용하고 있었다는 사실❗️❗️ ScrollView에서 스크롤하는 것도 사실상 Bounds를 이용하는 하나의 예시였던 거죠...ㅋㅋㅋ

 

Bounds는 보통 View 내부에 그림을 그릴 때(drawRect)나 transformation 이후에 View의 크기를 알고 싶을 때 사용할 수 있습니다. 즉, sub view를 정렬하는 것과 같이 내부적으로 변경이 이루어지는 경우에 사용하게 되죠.

 

 

 

 

 

---

 

이제 어느정도 frame과 bounds에 대해 개념이 잡히셨나요?

저는 이 글을 작성하면서 좀 더 명확하게 개념이 잡힌 것 같아요. 역시 사람은 누군가에게 설명하거나 복습할 때 이해가 더 잘 되나봅니다. 혹시 이해가 가시지 않거나 수정할 부분이 있다면 댓글로 언제든지 알려주세요 :)