[iOS 앱 개발 - Swift] 모달이 뭘까? ( Modal )

오늘은 새로운 뷰 컨트롤러 (새로운 화면)을 띄우는 방법을 공부해봤습니다. 원래는 간단하게 스토리보드(인터페이스빌더)에서 control 키를 누른채로 뷰 컨트롤러에서 드래그하여 이어주는 방법을 사용했었는데, 생각보다 좀 더 다양한 방법과 기능이 있는걸 알게되었네요. 해당 방법이 사용된 예시를 써봤던 앱들 중에서 떠올려보면서 공부를 하니 크게 거부감없이 잘 읽히는 내용들이였습니다.

---

[iOS 앱 개발 - Swift] 모달이 뭘까? ( Modal )

모달이란?

모달은 간단하게 말하면 사용자가 보고있던 화면 위에 다른 화면을 띄워서 시선을 끌게 만드는 방식이예요. 취소버튼, 확인버튼 등을 눌러야 다시 화면을 내리고 원래 보던 화면에 접근할 수 있기 때문에 모달에는 흐름을 이어지는 컨텐츠를 담기보다는 흐름이 끊어져서 딱 눈에 들어와야 하는 컨텐츠를 담는데 사용하면 좋아요. 또, 사용자의 입장에서는 화면 아래에 보고있던 내용을 계속 보고싶어 하기 때문에 길게 이어지는 컨텐츠보다는 짧게 처리할 수 있는 컨텐츠를 담는 것이 더욱 좋습니다.

이런 것도 모달의 일종!

프레젠테이션 스타일(Presentation Style)

뷰 컨트롤러가 화면 위에 나타나는 방식과 모양을 결정할 수 있습니다. 여러가지 표준 프레젠테이션 스타일과 사용자가 직접 디자인하는 커스텀 스타일 등을 통해서 새로운 뷰 컨트롤러를 화면위에 나타낼 수 있습니다. 앱에 가장 잘 어울리는 스타일을 골라서 modalPressentationStyle 프로퍼티에 상수값을 넣어주면 됩니다.

• UIModalPresentationFullScreen - 전체 화면을 완전히 덮어 화면 전체에 새로운 뷰를 보여주는 방식의 프레젠테이션 스타일. 제일 기본적인 방법이라고 생각하면 될 것 같네용.

• UIModalPresentationCurrentContext - FullScreen 스타일이 전체 화면을 덮는 방식이라면 ( 장치 스크린의 크기에 대응된다 ), CurrentContext 스타일은 현재 뷰에 대응해 새로운 뷰를 보여주는 방식입니다. 만약에 화면의 뷰를 작게 만들었다면, CurrentContext로 올려준 뷰도 작은 크기로 나오게 됩니다. 스플릿 뷰 등을 통해 화면을 분할한 상태여서 뷰가 스크린 크기보다 작을 때 사용하는 스타일인 것 같네요.

• UIModalPresentationOverFullScreen / OverCurrentContext - 새로 생성하는 뷰의 투명도(알파값)를 정해 기존의 뷰를 볼 수 있는 스타일. 위의 프레젠테이션 스타일들은 아래에 깔리는 뷰를 context에서 삭제해버리고 위에 새로운 뷰로 덮어버리지만, 이 두 스타일들은 기존 뷰를 그대로 남겨두고 위에 뷰를 덮기 때문에 투명도를 조절해 반투명 상태로 만들어주면 새로운 뷰 아래에 기존 뷰를 볼 수 있어요.

• UIModalPresentationPageSheet - 뷰의 가로를 늘이지 않고 그대로 보여주는 프레젠테이션 스타일.

• UIModalPresentationFormSheet - 화면 가장자리에서 상하좌우 모두 여백을 가지고 섬처럼 떠있는 방식의 프레젠테이션 스타일.

• UIModalPresentationPopover - 팝오버뷰로 새로운 뷰를 나타냅니다. 추가 정보, 선택한 것에 대한 추가 옵션 등을 나타내는데 주로 사용되어요. 참고로 이 스타일은 iPad 기기에서만 지원합니다.

• Creating Custom Presentation - 공식문서 참고

 

FullScreen 스타일 3개. 뒤 2개가 전체를 덮지 않는데도 FullScreen 인 이유는 뒷배경은 어둡거나 흐리게 처리되기 때문!

Popover 스타일. 이것도 배경이 어두워지기에 FullScreen 스타일입니다. 

Current Context 스타일이 이런 스플릿 뷰를 위해 사용된다고 하네요

전환 스타일 (Transition Style)

전환 스타일은 새로운 뷰를 골라준 스타일로 present 할 때, 어떤 애니메이션을 사용할 지를 결정하는 스타일입니다. 표시할 뷰 컨트롤러의 modalTransitionStyle 프로퍼티에 원하는 전환 스타일을 지정해 변경 가능합니다.

• Cover Vertical - 화면 하단에서부터 새로운 뷰가 수직으로 올라오는 트랜지션 스타일. 가장 익숙한 방법인 것 같아요.

• Flip Horizontal - 화면의 가운데 수직선을 기준으로 뷰를 뒤집는 듯한 트랜지션 스타일.

• Cross Dissolve - 화면 전체가 흐려지며 빠르게 전체화면이 새로운 뷰로 바뀌는 트랜지션 스타일.

• Partial Curl - 세로로 제본된 책의 한 페이지를 위로 넘기는 듯한 트랜지션 스타일.

 

이 중에서 쓰라고 하면 저는 Cover Vertical이랑 Cross Dissolve를 주로 사용할 것 같아요. 다른 두 애니메이션은 이펙트도 너무 화려해서 집중을 컨텐츠가 아니라 애니메이션이 오게 하고, 전환되는데 시간이 오래 걸리는 점 때문에 사용자 경험을 해칠 것 같다는 생각이 드네요.

 

뷰 컨트롤러, Presenting VS Showing

UIViewController 클래스에 두가지 메서드 presentViewController 와 showViewController 가 있습니다.

presentViewController는 새로운 뷰를 모달 방식으로 보여줍니다. 이와 비슷하게 showViewController를 이용하면 기본적으로는 모달 방식으로 새로운 뷰를 나타냅니다. 그러나 여러가지 유연한 방법을 제공하기 때문에 서브뷰로 보여주는 등의 넓은 선택지를 제공합니다.

 

1. Presenting 방식

인터페이스 빌더(스토리보드를 이용하는 걸 말하는 것 같네요)에서 세그웨이를 보면, 정보를 사용하여 뷰 컨트롤러를 인스턴스화해서 표시해줍니다.

또는, 뷰 컨트롤러 스크립트에서 showViewController, showDetailViewController메서드를 이용해서 뷰를 보여줄 수 있습니다. presentViewController를 이용하면 모달 방식으로 보여줄 수도 있습니다.

 

2. Showing 방식

show, showDetailViewController 메서드를 사용합니다. 나타낼 뷰 컨트롤러 인스턴스(object)를 한들고, modalPresentationStyle 프로퍼티, modalTransitionStyle 프로퍼티를 원하는 스타일로 골라줍니다. 그 다음 현재 뷰 컨트롤러에서 showViewController 또는showDetailViewController 를 이용해 인스턴스를 호출해 뷰를 화면에 나타내주면 됩니다.

show와 showDetail의 차이는 쉽게 말하면 전체화면이냐 스플릿뷰냐 인 것 같네요!

This segue is relevant only for view controllers embedded inside a UISplitViewController object. With this segue, a split view controller replaces its second child view controller (the detail controller) with the new content.

화면에 올린 뷰 컨트롤러 창닫기

간단하게, dismiss 메서드를 사용하면 됩니다. 주의할 점은, 뷰 컨트롤러를 닫으면 해당 뷰에서 작성하거나 만들어낸 데이터들이 함께 날아가기 때문에(조치를 취해두지 않으면 메모리도 free된다고 하네요) 반드시 닫기 전에 중요한 데이터의 저장이 필요하다고 합니다.

---

참고자료

https://magi82.github.io/ios-modal-presentation-style-01/

https://www.edwith.org/boostcourse-ios/lecture/16880/

[LECTURE] 3) 모달이란? : edwith

위에 강의가 함께 보면서 공부했던 iOS 개발 강좌입니다. iOS 개발에 대한 블로거인 '야곰'님이 가르쳐주는 강좌인데, 무료강의임에도 여러 프로젝트로 앱을 함께 만들어보면서 설명도 쉽게 해주고 꼭 읽어봐야 할 문서도 짚어주셔서 공부에 큰 도움이 되고 있습니다. 한 번 들어가서 강좌 수강을 고려해보세요!