[HIG] App Architecture : Modality, 모달리티

모달리티(Modality)란 임시적 형태 안에 컨텐츠를 표현하는 디자인 기술 중 하나다.
모달리티는 사용자의 이전 문맥과는 구별되어야 한다.
모달리티는 나가기(exit)를 할 수 있는 명시적인 행동을 할 수 있어야 한다.

왜 모달을 사용할까? 컨텐츠를 모달하게 표현하면 어떠한 장점이 있을까?

• 자기 충족(self-contained)적, 독립적인(앞선 문맥과 구별된) 작업에 집중할 수 있도록 한다.
• 사람들이 매우 중요한 정보를 받을 수 있도록 하거나, 중요한 정보에 대해 동작할 수 있도록 한다.

iOS는 알람(Alerts), 액티비티 뷰(또는 쉐어 시트), 그리고 액션 시트를 제공한다.

알람(Alert), 출처: https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality

액티비티 뷰(Acitivit View), 출처: https://developer.apple.com/design/human-interface-guidelines/ios/views/activity-views

액션 시트(Action Sheet), 출처: https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality

앱은 커스텀 모달을 보여줄 수도 있는데, iOS 13과 이후 버전은 아래의 표현 방식을 제공한다.

1. 시트, Sheet

• 시트는 카드처럼 생겨서, 기존 컨텐츠를 아래에 가리고 사용자가 기존 컨테츠를 동작할 수 없도록 한다.
• 부모 뷰나 이전 카드의 상단 모서리는 보여주게 함으로써, 현재 띄워준 모달 카드가 이전 태스크를 보류했음을 인지시킨다.

카드를 무시(dismiss)하는 방법을 여러가지로 제공할 수 있다.

• 스크린의 상단을 스와이프 다운한다.

• 스크린의 어느 지점에서든지 스와이프 다운했을 때

• 취소 버튼을 탭한다.

• 시트는 복잡하지 않은 작업을 요구하는 모달 컨텐츠에 사용하라.

2. 풀스크린, Fullscreen

• 풀스크린 방식은 전체 화면을 덮는다.
• 이전 화면은 완전히 보여지지 않으므로, 사람들은 버튼을 탭해서만 모달 뷰를 무시할 수 있다.

풀스크린 모달뷰는 어디에 사용하는 것이 좋을까?

• 시트뷰와 다르게 몰입이 더 필요한 컨텐츠에 사용한다.
• 예를 들어, 비디오나 포토, 카메라 뷰, 도큐먼트 작업 등이 있다.

주의 만약 현재 컨텍스트의 모달 뷰 방식이 스플릿 뷰 페인(split view pane), 팝오버(popover), 혹은 풀스크린이 아닌 뷰 안에서 표시된다면, 시트를 사용하는 것이 좋다.

모달을 사용해야할 때 주의할 점

1. 모달은 적합한 곳에서만 사용하라

• 모달은 현재 사용자가 작업 중인 것과는 다른 문맥으로 전환하도록 요구한다.
• 문맥을 바꾸는 이점이 확고할 때만 사용하는 것이 중요하다.

2. 필수적인 정보나 실용적인 정보를 위한 알람은 유보하라.

• 일반적으로 알람은 무엇인가 잘못되었을 때 보여져야 한다. 왜냐하면 알람은 사용자 경험에 방해가 되며 창을 닫기 위해 취소를 요구하기 때문이다.
• 알람의 개입이 정당한 이유가 있을 때만 사용하는 것이 좋다.

알람에 대한 자세한 정보는 Alerts를 참고하자.

3. 모달 작업은 간단해야 하며, 짧고, 집중적이여야 한다.

• 앱안에 앱을 만들지 마라.
• 만약 모달 작업이 너무 복잡하다면, 사람들은 모달에 진입하고서 이전에 보류한 작업들에 대해 시야를 잃는다.
• 뷰 계층에 개입되는 모달 작업을 만드는 것은 주의해야 한다. 왜냐하면 사람들이 단계를 따라가는 것을 잃어버릴 수 있기 때문이다.
• 만약 모달이 서브뷰를 반드시 포함해야 한다면, 그 계층을 향하는 통로는 단일해야 하며 완성되는 경로에 명확한 경로가 있어야 한다. 즉, 작업 완료 버튼 이외에는 어떠한 버튼도 두지 마라.

4. 항상 모달뷰를 무시할 수 있는 버튼을 포함하라.

• 모달 창에는 완료(Done) 혹은 취소(Cancel) 버튼이 포함되어야 한다.
• 모달 뷰의 버튼에는 접근성 기술(Accessibility)을 제공해야 한다.
• 모달 뷰를 무시하는 제스처에는 여러 방법을 제공해야 한다.

5. 필요하다면, 모달 뷰를 닫기 전에 데이터 손실에 대해 확인할 수 있는 창을 마련하라.

• 사람들이 뷰를 닫기 위해 취소 제스쳐나 버튼을 누를 때, 유저가 입력한 내용에 대해 저장하지 않고 손실되는 결과가 발생할 수 있다.
• 액션 시트는 사람들로 하여금 데이터 손실에 대해 인지할 수 있도록 하며 해결할 수 있는 방법을 마련해야 한다.

6. 팝오버 상단에 카드를 표시하지 마라.

• 팝오버 안에서 카드를 표시하는 방법은 존재하지마, 알람을 제외하고 팝오버 위에 표시되야할 것은 어떠한 것도 있어선 안된다.
• 아주 드문 경우로, 사람들이 어떤 동작을 하고나서 팝오버 위에 카드를 표현해야 한다면, 카드를 띄우기 전에 팝오버를 닫아라.

7. 모달 작업이 무엇인지 파악할 수 있는 제목을 표현하라.

• 사람들이 모달 작업에 들어서면, 앱의 문맥은 이전 작업과는 다른 문맥으로 전환된다.
• 따라서, 새로운 문맥을 명확하게 표현하는 것이 좋다.

8. 모달 뷰의 모습은 앱과 조화되어야 한다.

• 예를 들어, 모달 뷰가 네비게이션 바를 포함한다면, 앱의 네비게이션 바의 모습과 동일해야 한다.

9. 모달 전환 방식은 여러분의 앱에 맞게 선택하라.

• 적절한 모달 뷰 전환 방식을 선택하는 것은 앱의 컨텍스트를 바꾸는 것을 인지하는데 도움을 준다.
• 기본 전환 방식은 모달 뷰를 스크린의 바닥에서부터 위로 끌어올리는 수직 슬라이딩이다.
• 일관된 모달 전환 방식을 사용하라.

개발자를 위한 모달리티에 대한 문서는, UIViewController와, UIPresentationController를 참고하자.