[Apple HIG] Modality

안녕하세요 :) Joy 입니다.

 

우선.. 다들 새해 복 많이 받으세요!

핑계라면 핑계인데 정말 연말에 무슨 복이 터졌는지 담당 업무가 늘어나는 바람에

정말 퇴근하고 정신없이 시간을 보내왔어요ㅠ_ㅠ

얼마나 제 글을 봐주실지..모르지만

제 스스로와의 약속을 지키지 못해서 매우 속상했습니다.. (극한의 J 인간)

 

암튼 오늘은 Modality 라는 주제으 ㅣ문서를 읽어보려고 해요!

꼭 iOS 에서만이 아니라 다양한 상황에서 모달창을 적절히 활용하면 긍정적인 효과를 낼 수 있잖아요!

한번 같이 보자구요!

오늘도 좀 기네요....

 

 

Modality is a design technique that presents content in a temporary mode that requires an explicit action to exit. Presenting content modally can:

• Help people focus on a self-contained task or set of closely related options
• Ensure that people receive critical information and, if necessary, act on it

Modality는 명시적 작업이 필요한 임시 모드에서 콘텐츠를 표시하는 디자인 기술입니다. 콘텐츠를 모달로 표시하면 다음을 수행할 수 있습니다 :

• 사람들이 독립적인 작업 혹은 관련된 옵션 집합에 집중할 수 있도록 돕습니다.
• 사람들이 중요한 정보를 받고 필요한 경우 조치를 취하도록 합니다.

---

Alert vs Modal View

To enable various system-defined modal experiences, iOS provides alerts, activity views, share sheets, and action sheets. To present custom modal content in your app, you can use one of the following presentation styles.

다양한 시스템 정의 모달 경험을 가능하게 하기 위해 iOS 는 경고, 활동 뷰, 공유 시트 및 액션 시트를 제공합니다. 앱에서 사용자 지정 모달 콘텐츠를 표시하려면 다음 프레젠테이션 스타일 중 하나를 사용할 수 있습니다.

---

• Automatic.
• Uses the default presentation style, typically a sheet.
• 자동적인
• 기본 프레젠테이션 스타일 (일반적으로 시트)을 사용합니다.

---

• Fullscreen.
• Covers the previous view, and requires a button for dismissal.
• 전체 화면
• 이전 뷰를 덮고, 닫기 버튼을 요구합니다. (필요합니다.)

---

• Popover.
• Presents a popover in a horizontally regular environment and a sheet in compact environments.
• 팝오버
• 수평으로 규칙적인 환경에서는 팝오버를 제공하고, 컴팩트한 환경에서는 시트를 제공합니다.

---

• Page sheet and form sheet.
• Partially covers the previous view; for guidance, see Sheets.
• 페이지 시트 및 폼(양식) 시트
• 이전 뷰를 부분적으로 가립니다; 가이드를 위해서는 시트 문서를 참고하십시오.

---

• Current context.
• Covers a particular previous view.
• 현재 컨텍스트
• 특정 이전 뷰를 가립니다.

---

• Custom.
• Uses custom animation to present content in a custom container.
• 커스텀
• 사용자 정의 애니메이션을 사용하여 사용자 정의 컨테이너에 콘텐츠를 표시합니다.

For developer guidance, see UIModalPresentationStyle. 개발자 가이드는 링크된 문서를 확인하십시오.

---

NOTE

If you use the current context modal view style to display modal content within a split view pane, popover, or other view that isn’t fullscreen, switch to using a sheet when presenting modal content in a compact environment.

현재 컨텍스트 모달 뷰 스타일을 사용하여 분할 보기 창, 팝오버 혹은 전체화면이 아닌 기타 보기 내에서 모달 콘텐츠를 표시할 때 시트를 사용하도록 전환합니다.

---

Use modality when it makes sense.

Create a modal experience only when it’s critical to focus people’s attention on making a choice or performing a task that’s different from their current task. A modal experience takes people out of their current context and requires an action to dismiss, so it’s essential to use it only when it provides a clear benefit.

의미가 있을 때 Modality를 사용하십시오.

현재 작업과 다른 작업을 선택하거나 수행하는데 사람들의 주의를 집중시키는 것이 중요한 경우에만 모달 환경을 만듭니다. 모달 경험은 사람들을 현재 상황에서 벗어나게하고 해제할 조치가 필요하므로 명확한 이점을 제공할 때만 사용하는 것이 중요합니다.

---

Reserve alerts for delivering essential — and ideally actionable — information.

Typically, an alert appears because something has gone wrong. Because an alert interrupts the current experience and requires a tap to dismiss, it’s important for people to feel that the intrusion is warranted. For guidance, see Alerts.

필수적이고 이상적으로 실행 가능한 정보를 전달하기 위한 경고(Alert)을 에약합니다.

일반적으로 무언가 잘못되면 경고가 나타납니다. 왜냐하면 경고는 현재 경험을 방해하고 무시하기 위해 탭을 해야 하기 때문에, 사람들이 침입이 정당하다고 느끼게 하는 것이 중요합니다. 자세한 내용은 문서를 참고하십시오.

---

In general, keep modal tasks simple, short, and narrowly focused.

If a modal task is too complicated, people can lose sight of the task they suspended when they entered the modal context. Take care to avoid creating a modal experience that feels like an app within your app. In particular, be wary of presenting a hierarchy of views within a modal task, because people can forget how to retrace their steps to their original task. If a modal task must contain subviews, provide a single path through the hierarchy and a clear path to completion. Avoid using a Done button for anything other than completing the task.

일반적으로, 모달 작업은 단순하고, 짧고, 좁게 집중해야합니다.

모달 작업이 너무 복잡하면 사람들은 모달 컨텍스트에 들어갈 때 일시 중단한 작업을 보지 못할 수 있습니다. 당신이 앱 안에서 앱처럼 느껴지는 모달 경험을 만들지 않도록 주의하십시오. 특히 사람들은 원래 과업으로 돌아간느 방법을 잊어버릴 수 있기 때문에 모달 과제 내에서 관점의 위계를 제시하는 것을 경계해야 합니다. 모달 태스크에 하위 보기가 포함되어야 하는 경우 계층을 통과하는 단일 경로와 명확한 전체 경로를 제공하십시오. 태스크 완료 이외의 작업에는 완료 단추를 사용하지 않도록 하십시오.

---

Consider using a fullscreen modal style for immersive content or a complex task.

A fullscreen modal experience minimizes distractions, so it can work well for presenting videos, photos, or camera views, or to enable a multistep task like marking up a document or editing a photo.

몰입형 콘텐츠 또는 복잡한 작업에 전체 화면 모달 스타일을 사용하는 것을 고려해 보십시오.

풀 스크린 모달 경험은 산만함을 최소화하므로 비디오, 사진 혹은 카메라 뷰를 표시하거나 문서 표시 또는 사진 편집과 같은 다단계 작업을 수행할 수 있습니다.

---

Always include a button that dismisses the modal view.

For example, you might use Done or Cancel. Including a button ensures that the modal view is accessible to assistive technologies and provides an alternative to dismissal gestures.

모달 뷰를 닫는 버튼을 항상 포함하십시오.

예를 들어 완료 또는 취소를 사용할 수 있습니다. 버튼을 포함하면 모달 뷰가 보조 기술에 접근할 수 있고 무시 제스처에 대한 대안을 제공할 수 있습니다.

---

When necessary, help people avoid data loss by getting confirmation before closing a modal view.

Regardless of whether people use a dismiss gesture or a button to close the view, if the action could result in the loss of user-generated content, present an action sheet that explains the situation and gives people ways to resolve it.

필요한 경우 모달 뷰를 닫기 전에 확인을 받아 데이터 손실을 방지할 수 있습니다.

사람들이 화면을 닫기 위해 무시 제스처를 사용하든 버튼을 사용하든 상관없이, 만약 그 행동이 사용자 생성 콘텐츠의 손실을 초래할 수 있다면 상황을 설명하고 해결 방법을 사람들에게 제시하는 작업 시트를 제시하십시오.

---

Make it easy to identify a modal view’s task.

When people enter a modal view, they switch away from their previous context and might not return to it right away. When you provide a title that names the modal view’s task — or additional text that describes the task or provides guidance — you can help people keep their place in your app. 모달 뷰의 작업을 쉽게 식별할 수 있도록 하십시오.

사람들은 모달 뷰에 들어가면 이전 컨텍스트에서 벗어나 바로 되돌아가지 않을 수 있습니다. 모달 뷰의 태스크 이름을 지정하는 제목 혹은 태스크를 설명하거나 안내를 제공하는 추가 텍스트를 제공하면 사용자가 앱에서 자신의 위치(? 장소..?)를 유지할 수 있습니다.

---

Coordinate the modal view’s appearance with your app.

For example, when a modal view includes a navigation bar, it should use the same appearance as the navigation bar in your app.

모달 뷰의 모양을 앱으로 조정합니다.

예를 들어, 모달 뷰에 탐색 막대가 포함된 경우 앱의 탐색 막대와 동일한 모양을 사용해야 합니다.

---

Choose a modal transition style that makes sense in your app.

Use a transition style that coordinates with your app and enhances the awareness of the temporary context shift. The default transition vertically slides the modal view up from the bottom of the screen and back down when it’s dismissed. Use consistent modal transition styles throughout your app.

앱에서 적합한 모달 전환 스타일을 선택하십시오.

앱으로 조정하고 임시 컨텍스트 전환에 대한 인식을 향상시키는 전환 스타일을 사용합니다. 기본 전환은 모달 뷰를 화면 아래쪽에서 위로 수직으로 밀어 올렸다가 해제되면 뒤로 내립니다. 앱 전체에서 일관된 모달 전환 스타일을 사용합니다.

 

For developer guidance, see UIViewController and UIPresentationController.

개발자 가이드는 링크를 확인하십시오.

 

 

이야.. 정말 길다...!

모달 뷰를 활용할 때 지켜야 할(?) 것들에 대해서 아주 상세하게 알아본 것 같은 기분입니다..

presentation style도 여러가지가 있고.. 한가지씩 다 사용해보면서 차이점을 알아보는 것도 좋을 것 같아요!

아 그리고 제가 한가지 헷갈렸던게 모달 창을 닫을 때 (혹은 사용자의 실수로 창이 닫혀버리려고 할때) Alert를 또 띄워도 된다는 건지..

이 부분은 제가 알게 되면 하단에 추가해두도록 할게요! 

보통 모달창을 닫을때 안내 Alert를 또 나타나게 하는 경우를 본 것 같기도 하구... 뭐 예를 들어 사용자 정보 수정 후 저장 -> 정말 수정하시겠어요? 이런 느낌 있잖아요..! (어렵다..)

 

아무튼 새해 첫 블로그 글이 되었네요!

모두 새해 복 많이 받으시고 항상 건강하세요☺️

 

 

 

출처 : https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

 

언제나 오류에 대한 지적은 환영입니다.
의역/오역이 있을 수 있습니다. 문제시 댓글로 살짝쿵 알려주세요 :)