-Today's Learning Content-

• 모달뷰에 대한 학습

---

1. ModalView의 배치?

내용 정리

팀 프로젝트를 진행하며 모달뷰를 구현하는 중 모달뷰는 항상 모든 UI보다 상단에 배치되는 것을 확인하여 왜 이런 현상이 있는지 학습을 진행해 보았다.

1) 문제 발견

팀 프로젝트를 진행하며 모달뷰의 구현을 하였는데, 한 가지 신기한 현상을 발견했다.
프로젝트에서 디렉토리와 파일 등을 분리해서 구현 중이었기 때문에 모달뷰와 뷰 컨트롤러 관계는 아래와 같았는데...

MainViewController // 탭바
├─ SearchViewController
│
├─ AddViewController // 모달뷰를 부르는 뷰
│	├─ ModalViewController // 모달의 UI를 가진 VC
│	└─ AddView
│
└─ MyPageViewController

위의 구조에서 모달뷰를 부르는 뷰는 AddViewController이고, 이 VC는 MainViewController에 속해있다.
이 때, MainViewController는 탭 바를 가지고 있어 AddViewController 는 탭 바의 사이즈만큼을 뺀 사이즈를 가지게 된다.

때문에 나는 AddViewController에서 모달을 pop 하면 탭 바가 가려지지 않을 것이라고 생각했으나 생각 외로 모달은 탭 바를 가리고 화면의 최상단에 위치하였다.

Hierarchy

예상과 다른 결과였기 때문에 왜 이런 결과가 출력되는지 궁금하여 한 번 공부해 보기로 하였다.

2) 모달 프레젠테이션의 동작 원리

모달은 UIKit에서 새로운 뷰 컨트롤러를 현재 뷰 컨트롤러 위에 추가하여 사용자와 상호작용을 제한하는 방식으로 설계되어 있다.
모달은 특정 조건을 충족할 때까지 상호작용을 차단하기 때문에 다음과 같은 특징을 가진다.

• 뷰 계층의 최상위에 표시: 모달 뷰는 항상 현재 활성화된 뷰 계층 위에 표시된다. 이는 사용자가 명확하게 모달과 상호작용하도록 설계된 UX 패턴이다.

• 프레젠팅 뷰 컨트롤러와 분리된 뷰 계층: 모달은 새로운 UIWindow가 아닌, 프레젠팅 뷰 컨트롤러의 상위에 오버레이된다. 따라서 동일한 창에서 항상 최상위로 보이게 된다.

그럼 모달뷰의 뷰 계층 구조는 어떻게 될까?

3) UIKit의 뷰 계층 구조

UIKit의 뷰 계층은 기본적으로 컨테이너 뷰와 하위 뷰로 구성된다.

• UIWindow: 앱의 최상위 컨테이너이며, 모든 뷰는 UIWindow 안에 존재한다
• RootViewController: 앱의 메인 화면을 관리한다.
• Child Views: 뷰 컨트롤러의 컨텐츠가 여기에 추가된다.

그리고 모달뷰가 표시될 때는 아래의 단계를 따른다.

1. UIKit은 현재 뷰 컨트롤러의 뷰 계층 위에 새로운 뷰를 추가한다.
2. 이 뷰는 프레젠팅 뷰 컨트롤러의 뷰 계층의 최상위에 위치한다.

이렇게 하면 모달이 항상 최상위에 위치하고, 뒤쪽 뷰와의 상호작용이 차단되게 된다.

그렇다면 어째서 Apple은 모달을 최상위에 표시되게 하였을까?

4) UIKit이 모달을 최상위로 표시하는 이유

UIKit에서 모달뷰를 항상 최상위로 표시하는 이유는 아래와 같다.

1. 사용자 집중

   • 모달은 사용자에게 특정 작업(예: 알림 확인, 데이터 입력, 설정 변경 등)을 집중적으로 수행하게 한다. 이를 위해 모달은 항상 최상위에 위치하게 하는 것이다.

2. 상호작용 차단

   • 모달이 활성화되면 다른 UI 요소와의 상호작용이 제한된다. 이는 사용자가 모달 외부를 터치하거나 상호작용하지 못하도록 설계된 보호 메커니즘이다.

3. 시각적 계층 유지

   • 모달은 UIModelPresentationStyle(예: .fullScreen, .pageSheet)에 따라 디자인되며, 시작적으로도 "앞에 있는 뷰"라는 인상을 준다.

5) 뷰 계층의 조작

모달 뷰가 항상 최상위에 표시되도록 보장하기 위해 UIKit은 내부적으로 다음 작업을 수행한다.

• present(_:animated:completion:)를 호출하면 UIKit은 새로운 컨테이너 뷰를 프레젠팅 뷰 컨트롤러의 뷰 계층에 추가한다.
• 이 컨테이너 뷰는 z-order(뷰 계층의 깊이)가 가장 높은 상태로 유지된다.

6) 결론

UIKit에서 모달 뷰가 항상 최상위에 표시되는 이유는 사용자의 경험을 극대화 하고, 모달을 통해 현재 뷰 컨트롤러의 상호작용 흐름을 차단하여 최상위에서 집중적으로 동작할 수 있도록 설계되었기 때문이다.

또, UIKit은 이를 프레젠테이션 스타일과 뷰 계층 관리를 통해 보장하므로, 개발자는 이런 면에서 편하게 개발을 진행할 수 있는 것이다.

만약 모달을 커스터마이징하고 싶다면 프레젠테이션 스타일을 조정하거나 모달을 사용하는 대신 별도의 뷰를 만들어 사용하는 것을 고려해볼 수 있다.

구현 결과물

---

-Today's Lesson Review-

오늘은 프로젝트에서 모달뷰 구현을 진행하였다.
이 과정에서 모달뷰를 부르는 뷰 컨트롤러가
하위 뷰 컨트롤러라고 해도 모달 뷰는 항상 최상위에 표시되는 것을 보고
왜 이런 현상이 있는지 공부해보고 싶어서 조금 공부해 보았다.
결론적으로 모달뷰는 UX를 위해, 그리고 편의성을 위해
항상 최상위 계층에 표시되는 것임을 알 수 있었고,
앞으로 모달뷰를 어떻게 활용하면 좋을지도 생각해볼 수 있는
유익한 시간이었던 것 같다.