[iOS] Modality

Inwoo Hwang·2021년 8월 26일
0

iOS

목록 보기
3/13
post-thumbnail
post-custom-banner

Warning: 이해한 부분을 최대한 남기고 정리하려 남긴 글 입니다. 틀린 부분이 있을 수 있습니다. 이점 유의하고 읽어주시면 감사할 것 같습니다. 그리고 틀린 부분 알려주시면 바로바로 고치도록 하겠습니다.

Modality


모달은 유저의 전 화면에 컨텐츠로 부터 분리된 다른 컨텐츠를 화면에 보여주는 디자인 테크닉이다. 모달을 통해 보여지는 컨텐츠의 화면은 특정한 버튼을 눌러 모달을 해제시킬 수 도 있다.

iOS에서 모달은 사용자의 이목을 끌기위한 화면전환 기법입니다.

네비게이션 인터페이스와 달리 정보의 흐름이 아니라 사용자로부터 입력을 받기위해 이목을 끄는 방식입니다.

모달을 통해 컨텐츠를 보여주면 아래와 같은 이점이 있습니다.

  • 유저가 독립적인 컨텐츠에 집중할 수 있게 도와준다.
  • 유저가 보고있던 컨텐츠의 추가사항을 집중할 수 있게 도와준다.
  • 유저가 중요한 정보를 받았는지 인지하도록 보장한다.

iOS는 Alerts, Activity View(or Share sheets), 그리고 ActionSheet과 같은 모달을 상황에 맞게 제공합니다.

iOS 13 이후 유저의 커스텀 모달 컨텐츠를 제공하기 위해 아래와 같은 presentation style을 지원합니다.

FullScreen

  • 전체화면을 커버하는 modal

Full Screen Modal의 생명주기 [Life Cycle]

Screen Shot 2021-04-13 at 1 15 30 PM

/* FullScreen Present */
--------------- [SecondVC : viewDidLoad] ---------------
--------------- [FirstVc : viewWillDisappear] ---------------
--------------- [SecondVC : viewWillAppear] ---------------
--------------- [SecondVC : viewDidAppear] ---------------
--------------- [FirstVC : viewDidDisappear] ---------------

/* FullScreen Dismiss */
--------------- [SecondVC : viewWillDisappear] ---------------
--------------- [SecondVC : viewWillAppear] ---------------
--------------- [SecondVC : viewDidAppear] ---------------
--------------- [SecondVC : viewDidDisappear] ---------------

Sheet

  • 카드형태로 화면의 일부를 커버하는 modal

Sheet Screen Modal의 생명주기[Life Cycle]

Screen Shot 2021-04-13 at 1 15 47 PM

/* Sheet Present */
--------------- [SecondVC : viewDidLoad] ---------------
--------------- [SecondVC : viewWillAppear] ---------------
--------------- [SecondVC : viewDidAppear] ---------------

/* Sheet Dismiss */
--------------- [SecondVC : viewWillDisappear] ---------------
--------------- [SecondVC : viewDidDisappear] ---------------

[출처]:

Modality - App Architecture - iOS - Human Interface Guidelines - Apple Developer

[iOS] iOS13 Modal Style 및 Life Cycle :: jinnify 기술 블로그 (tistory.com)

[iOS] 모달 톺아보기 (tistory.com)

profile
james, the enthusiastic developer
post-custom-banner

0개의 댓글