[iOS - HIG] 6. Modality (modal, 임시 화면)

Modality란

• 사용자의 이전의 컨텍스트와 별개이며 종료하려면 명시적인 작업이 필요한 임시 모드로 컨텐츠를 표시하는 기술

Alert modal과 Modal View

Modal의 장점

• modal view - 사용자들이 독립적인 작업이나 밀접하게 관련된 내용에 집중할 수 있도록 분리하는 기능
• alert modal - 사용자들이 중요한 정보를 받고 필요한 경우, interaction할 수 있도록 하는 기능

Modal의 presentation style

• Sheet: 기존 콘텐츠를 부분적으로 덮고 커버되지 않은 모든 영역을 흐리게 처리하여, 기존 콘텐츠에 상호 작용을 방지하는 스타일
  • 사용하는 경우 - 복잡한 작업을 수행할 수 없는 비 몰입형 모달 컨튼츠
  • 버튼을 누르거나 swipe하여 modal view를 닫는 형태
• Full Screen: 이전 콘텐츠가 완전히 덮여있어서, 시작적으로 산만함을 최소화
  • 사용하는 경우 - 동영상, 사진, 문서, 사진 편집과 같은 몰입해야 하는 작업이 modal view로 띄워져야 할 경우
  • 버튼을 눌러서 modal view를 닫는 형태

Modal을 사용해야 하는 경우

• 현재 작업과 다른 선택을하거나 작업을 수행하는데 사람들의 주의를 집중하는 것이 중요한 경우에만 modal 사용
• modal은 현재 상황에서 벗어나게 하고 무시되도 될정도의 명확한 이점을 제공할 때만 사용

Modal은 단순 + 짧음 + 집중적

• modal 작업이 복잡해지면, 사용자가 modal에 들어갔을 때 일시 중단 한 작업을 보지 못할 수 있는 경우가 존재
• 사용자들이 화면의 길을 잃고 단계를 되돌리는 방법을 잊을 수 있는점이 존재
• modal띄운곳에 또다른 view들을 넣고 싶을경우에는 깊이가 1이 되도록 single path만 제공할 것
• Modal위에 Done버튼은 작업을 완료하는 곳 외에는 사용하지 말것

항상 Done이나 cancel같은 modal view를 닫는 버튼을 반드시 포함

• dismiss하는 방법을 swipe뿐 아니라 버튼으로도 접근 가능하다는 편의를 사용자에게 부여

Modal view가 dismiss되기 전에 확인을 받는 경험 제공

• swipe나 닫기 버튼, done 버튼을 통해 modal view를 닫기 전에 해당 작업으로 인해 사용자 생성 콘텐츠가 소실 될 수 있는 경우 상황을 미리 설명 ->  action sheet로 설명 부여

action sheet

popover는 iPad에만 적용, iPhone에는 full screen modal view 사용

popover

modal 작업을 식별할수 있게끔하는 제목을 표출

• 이전 컨텍스트에서 전환되므로 modal을 통한 작업의 내용을 명확하게 하기 위해서 제목을 표출

modal view를 이전 화면과 일관성있게 표출

• 예시) modal view가 NavigationBar를 포함하고 있을 때, 이 NavigationBar는 이전 화면에서 사용되는 NavigationBar와 동일한 스타일로 설계

* 참고

developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/