Modality

임시적인 창

💡 Modality는 상위 뷰와 상호 작용을 방지, 해제하려면 명시적인 동작이 필요한 별도의 집중 모드로 콘텐츠를 표시하는 디자인 기법입니다.

Modality | Apple Developer Documentation

Modality is a design technique that presents content in a separate, focused mode that prevents interaction with the parent view and requires an explicit action to dismiss.

developer.apple.com

언제 사용할까?

핵심 정보를 받고 필요한 경우 이에 대해 조치할 수 있도록 만들 것
최근 작업을 확인하거나 수정할 수 있는 옵션을 제공
사용자 이전 맥락을 연결해 특정 좁은 범위의 작업을 수행할 수 있도록 제공
사용자 몰입감 있는 경험을 제공하거나 복잡한 작업에 집중할 수 있도록 제공

Best practices

꼭 필요한 경우에만 모달 콘텐츠를 제공하세요.
⇒ 현재 맥락의 이탈과 닫는 액션을 요구하기 때문에 콘텐츠나 디바이스에 영향을 주는 선택을 하는 경우에만 모달 콘텐츠를 사용할 것
모달 작업은 간단하고 짧고 명확하게 유지 ⇒ 사용자가 이전 작업을 잊어버릴 수 있다.
⚠️ 앱 안의 다른 앱처럼 느껴지는 모달 경험은 피하세요.
⇒ 특히 모달 작업 내에서 뷰의 계층 구조를 표시하면 사용자가 어떻게 되돌아갈 수 있는지 잊을 수 있다.
⇒ 모달 작업 내에서 하위 뷰를 포함해야 하는 경우, 계층 구조 이용해 최대한 하나의 경로만 제공
⇒ 하위 뷰 내부에서 모달 뷰를 닫는 것으로 오인할 수 있는 버튼은 피하세요.
심층적인 콘텐츠나 복잡한 작업에 대해서는 전체 화면 모달 스타일을 고려하세요.
⇒ 비디오, 사진, 카메라 뷰를 제공하거나 문서를 마크업하거나 사진을 편집하는 등 멀티스텝 작업을 지원

💡 UIImagePickerController는 모달 스타일

UIImagePickerController | Apple Developer Documentation

A view controller that manages the system interfaces for taking pictures, recording movies, and choosing items from the user’s media library.

developer.apple.com

모달 뷰를 닫는 방법을 명확하게 제공하세요.
⇒ 일반적으로 플랫폼 규칙을 따르는 것이 좋습니다.
- iOS, iPadOS, watchOS 앱은 네비게이션 바에 있는 버튼, 아니면 아래로 스와이프 할 것으로 예상
- macOS와 tvOS 앱은 주로 본문 콘텐츠에 버튼이 있을 것으로 예상
필요한 경우, 모달 뷰를 닫기 전에 확인을 받아 데이터 손실을 방지
⇒ 모달 뷰를 닫을 때 사용자가 생성한 콘텐츠가 손실될 수 있는 경우, 상황을 설명하고 사용자가 문제를 해결할 수 있는 방법을 제공
⇒ 예를 들어, iOS에서는 저장 옵션을 포함한 액션 시트를 제공할 수 있음
모달 뷰의 작업을 쉽게 식별하도록 제작 ⇒ 제목 붙이기
⇒ 이전 상황에서 벗어나기 때문에 적절한 제목이나 설명하는 추가적인 텍스트를 제공할 필요
⚠️ 다른 모달 뷰 위에 모달 뷰를 표시하지 말 것
⇒ 동시에 여러 모달 뷰를 표시하면 사용자는 여러 이전 상황을 기억해야 하기 때문에 혼란스러울 수 있음
⇒ 경고 창은 모든 콘텐츠 위에 표시될 수 있지만, 동시에 둘 이상의 경고 창을 표시하는 것은 매우 혼란스러움

예전 HIG Modality 내용

Reserve alerts for delivering essential. ⇒ 에러 발생 / intterups발생 시 사용
Keep modal tasks simple, short and narrowly focused. ⇒ 모달은 간단하게 / Done은 하나만 존재
Always include a button that dismisses the modal view. ⇒ 언제든지 모달을 끌 수 있도록 만들어라
Don’t display a card that appears on top of popover. ⇒ 팝 오버 위에 나타나는 카드를 표시하지 X
Coordinate the modal view appearance with your app. ⇒ 앱 네비바(전체적인 경험)와 디자인을 일치

Modality를 지원하는 뷰 디자인 (컴포넌트)

1. Presentation 디자인

Alert sheet ⇒ back layer view가 사용 못하는 것을 인지하도록 만들자.
- Not immersive content일 때 가능
Full screen ⇒ Immersive (몰입형 경험에 사용), 버튼으로 뒤로가기를 조작하도록 만들어야한다.
Reserve alerts for delivering essential.
필수적인 것을 전달하기 위해 Alerts을 사용 ⇒ 에러 발생 / 인터럽트 발생 시 사용