[iOS] Safe Area 와 Layout Margins 이란?

안녕하세요🐶

 

이번 시간에는 Safe Area 와 Layout Margins 에 대해서 알아보겠습니다.

 

이전까지는 정확하게 모르고 사용하던 개념들을

이번 기회에 공부하면서 제대로 알아볼 수 있는 좋은 기회였는데요.

 

너무 뿌듯한 마음에 신나게 글을 적었습니다.

 

그럼 시작할게요~!!!!🔥🔥🔥

---

 

Layout Margins 의 개념

 

뷰의 역할 중 하나는 컨텐츠를 보여주는 것입니다.

뷰 속에는 컨텐츠가 있는데요.

 

이 컨텐츠의 위치를 Layout Margins 을 통해서 조정할 수 있습니다.

 

이렇게 하면 다른 뷰에 의해 컨텐츠가 겹치는 것을 막아줄 수 있습니다.

 

 

Layout Margins 는 컨텐츠와 뷰의 bounds 사이의 시각적인 버퍼입니다.

 

버퍼는 쉽게 완충재 역할을 하는 공간으로 생각하면 되는데요.

 

특징은 뷰 바깥이 아닌 안쪽으로 넓어지는 완충지역이라는 것이에요.

 

이 버퍼를 통해서 뷰 바깥의 콘텐츠와 겹치는 일을 방지할 수 있게 됩니다.

 

참고로 웹 분야에서 패딩이라고 부르는 부분과 유사하답니다~!

 

주황색 부분이 패딩 영역

 

 

 

Layout margin 은 각각의 모서리에 해당하는 inset 값으로 구성되어 있습니다.

 

결과적으로 총 4개 ( top, bottom, leading, trailing ) 의 inset 값을 가지고 있는데,

 

여기서 Inset 값은 각 모서리에서 뷰의 중심 방향으로 향하는 정도라고 이해하시면 되겠습니다.

 

다음 그림은 위 내용을 설명하고 있습니다.

제가 직접 그린 그림

 

---

 

코드로 접근하는 Layout Margins

 

 

코드에서는 layoutMargins 속성으로 접근하거나, 새로 설정해 줄수 있습니다.

 

UIEdgeInsets 인스턴스를 생성하여 넣어주면 되는데,

위 그림을 이해했하면 어떤 레이아웃 마진이 그려질지 바로 이해가 가는 부분이죠?

 

 

 

이렇게 생성한 인스턴스를 다시 넣어주면 레이아웃 마진이 새로 설정됩니다.

 

 

그런데 문서에서는 leading, trailing 인데

왜 바로 위 사진에서는  left, right 라는 argument label 을 가지는 생성자가 제공되었을까요.....?

 

 

---

 

 

라고 생각했는데, 문서에 이런 속성도 있네요...ㅎㅎㅎㅎ

iOS 11 부터는 directionalLayoutMargins 를 사용하라고 합니다.

leading, trailing 은 오른쪽부터 읽는 문화권을 고려해서 고안된 방향 개념이죠??

 

 

뷰, 특히 VC의 루트뷰인 컨텐트 뷰에는 기본적으로는 어떤 마진 값이 들어있을까요?????????

이건 아래 Safe Area 부분에서 다뤄보도록 하겠습니다.

---

 

 

Interface Builder 에서 만날 수 있는 Layout Margins

본론으로 돌아와서

Layout margins 은 'margins' 라는 단어로 Interface Builder 에서도 만나볼수 있는데요

 

Constrain to margins

 

 

위처럼 Constrain to margins 옵션을 체크한다면,

 

제약의 기준이 되는 뷰의 bounds 가 아니라

 

뷰의 margin 을 기준으로 제약을 잡게 됩니다.

 

직접 한번 해볼까요???

 

<기본 조건>

오렌지 뷰에 directionalLayoutMargins 의

leading, top, bottom, trailing 값을 각각 50씩 부여해줬어요!

 

이제 오렌지뷰의 하위뷰로 퍼플뷰를 추가하고, 오토레이아웃을 잡아주겠습니다.

 

 

< Constaint to margins 체크를 해제 >

< Constaint to margins 체크>

 

이렇게 우리는 직접 뷰에 Layout Margins 를 설정할 수 있게 되었습니다!!

 

 

단, 딱 한가지 경우!!!!!!!! 예외가 있는데요.

 

바로 View Controller 의 root view 입니다.

UIKit 은 root view 가 지켜야하는 최소한의 layout margins 값을 강제합니다.

~ 마진 값을 최소한 이만큼은 넣어줘야 한다~ 라는 의미

 

컨텐츠를 가리지 않고 제대로 보여주기 위해서 인데요.

 

그래서 만약 우리가 임의로 root view 의 마진을 (0,0,0,0) 으로 설정했다고 하더라도,

이것이 UIKit이 정해 놓은 최소값보다 작다면, 이 값을 무시하고 최소값으로 대체시켜버립니다....

 

그런데 무슨 이유 때문에 UIKit 이 루트뷰의 의 마진 값을 (0,0,0,0) 보다 큰 값으로 최소 값을 정해놓은 것일까요???

 

이것이 바로 이어서 말할 Safe Area 와 관련되어있습니다.

---

 

Safe Area 의 개념

 

SafeArea 는 핸드폰의 전체적인 UI를 통틀어서 컨텐츠가 제대로 보일수 있는 부분에만

우리 뷰를 놓을 수 있도록 도와주는 기능이에요.

 

 

예를 들면 네비게이션 컨트롤러는 우리의 뷰 위에 네비게이션 바를 띄워주는데요.

네비게이션 바 밑의 부분은 가려질 수 있습니다.

SafeArea 는 이런 뷰들을 반영해서 값을 계산해서 알려줍니다.

 

위 내용을 종합해서 아래 그림을 보면

하늘색으로 표현된 사각형이 Safe Area 에 해당하는 영역임을 쉽게 이해할 수 있습니다.

Status bar 와 네비게이션바, 툴바, Home Indicator 영역을 제외한 부분임을 확인할 수 있죠?

 

 

 

---

 

Interface Builder 에서 만나보는 Safe Area

우리는 이 값을 Interface Builder 에서 사용할 수 있고, 코드로도 사용할 수있는데요.

 

우선 Interface Builder 에서 보면 

Safe Area 을 기준으로 제약을 걸어주어서

내 뷰가 제대로 표현되는 것을 보장받을 수 있어요.

 

제약을 거는 방법은 이 글의 주제와 조금 거리가 있어서 사진으로만 넘어갈게요!

 

---

 

 

Code 에서 만나보는 Safe Area

 

코드에서는 UIView의 인스턴스 속성인  safeLayoutGuide 으로 접근할 수 있습니다.

 

Safe Area 가 기존 뷰에 얼마 만큼의 값을 패딩으로 주었는지는 

safeAreaInsets 속성으로 확인할 수 있습니다.

 

 

그런데!!!!!

위쪽의 Layout Margins 의 내용 중에서

 

UIKit 은 ViewController 의 Root View 에 최소 마진값 을 설정해 놓는다고 말씀드렸는데요.

여기서 최소 마진값이란, "마진 값이 최소한 이 값보다는 커야돼" 라는 의미

 

그 목적도 위에서 언급했어요.

( 루트 뷰의 컨텐츠가 가려지지 않고 정확하게 나오는 것을 보장)

 

이 최소 마진값이 적용된 사각형 영역이 Safe Area 의 영역과 정확하게 일치해요.

 

즉, 네비게이션 바와 같은 시스템뷰가 나오면 UIKit 이 이를 고려해서 최소 마진값을 설정한다는 것이죠!

그래서, 이 최소 마진값 = safeAreaInsets 입니다.

 

예전에는 systemMinimum 어쩌구하는 속성을 썼던것 같아요.

지금은 접근이 안되더라구요🛠

최소 마진값보다 작으면 UIKit 에 의해 무시된다

 

 

그런데 약간 이상하지 않나요?

저는 왜 이 값을 viewDidLoad 가 아니라 viewDidAppear 에서 확인했을까요????

 

바로 SafeLayout 문서의 이 부분 때문인데요!!!

If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the layout guide edges are equal to the edges of the view.

뷰가 뷰계층에 추가되지 않았거나, 아직 화면에 보이지 않을때는

아직 Safe Layout Guide 가 적용되기 전 상태이기 때문입니다.

( 이 시점에는 Guide 가 원본 뷰의 edge 와 일치 )

 

즉, ViewDidLoad 호출 시점에서는 메모리에 뷰 계층을 로딩한 상태이지만,

화면에는 아직 보이지 않기 때문에 Safe Layout Guide 가 적용되지 않은 상태인거죠.

확실히 하고 싶어서 로그도 찍어봤어요.

(가독성을 위해  safeLayoutInsets 값 를 프린트했습니다.)

 

viewDidAppear(_:) 부터 찍히는 것을 볼 수 있다.

 

 

 

 

 

결론적으로 우리는 이제 아래 그림을 이해할 수 있습니다

 

 

 

 

여기서 safeAreaLayoutGuide 는 UIView 의 인스턴스 속성으로서 모든 뷰에서 접근할 수 있는데요.

 

실제 의미 있는 값은 루트 뷰에만 담겨져 있다고 생각해도 무방합니다.

safeAreaInsets 도 마찬가지 입니다.

루트 뷰의 Safe Area 영역이 컨텐츠 보장이 된다면, 당연히 그 하위 뷰들은 루트 뷰의 Bounds 를 넘어가지 않는한

무조건 컨텐츠가 제대로 보여질 것이기 때문이에요.

---

 

이 글에서 다루지 않는 부분

내용이 너무 많아서 담지 않았지만, 찾아볼 수있는 키워드를 제시해드리려고합니다.

 

1. Safe Area 에 코드로 제약을 잡아주기

이 부분은 NSLayoutAnchor 의 개념에 대해서 알아야 합니다.

safeAreaLayoutGuide 가 Anchor 들로 이루어져 있기 때문인데요.

 

간단하게 엣지를 가리키는 선이라는 개념으로 이해하면 접근하기 쉽더라구요!

 

2. SafeArea 영역 추가로 넓히기

사용자 임의로 영역을 추가해줄 수 있습니다.

보통 화면을 덮는 커스텀 뷰를 따로 구현했을 때 필요하겠죠!

additionalSafeAreaInsets 을 사용합니다.

 

관련 내용은 링크 확인해 주세요!

---

 

여기까지 우선 제가 적고 싶은 것은 다 적은 것 같고, 추가할 내용이 생기면 수정하겠습니다~!!!

 

이제 스크롤뷰의 contentOffset 과 contentInset 에 대한 글을 적어야하는데,

저도 100% 이해한것이 아니라 쉽지 않네요....

하지만 스크롤 뷰는 정말정말 필요한 UI 컴포넌트이니 곧 끝낼 수 있을 것같아요.

 

그럼 다음에 봴게요~!!!

 

 

 

끝!

---

🤖🟢[우짱의 iOS 블로그]🔵💻

iOS를 공부하면서 배운 내용을 기록하고 있습니다.

참고자료 1: https://developer.apple.com/documentation/uikit/uiview/positioning_content_within_layout_margins

참고자료 2: https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area/