오역이 있을 수 있습니다! 영문 문서를 기본으로 하고 이 글은 참고하는 느낌으로 봐주시면 좋을 것 같습니다. 😊
Human Interface Guidelines - Modality
Modality
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
모달리티는 임시적으로 콘텐츠를 표시하는 디자인 기법이며, 종료하기 위해서는 명시적인 액션이 필요합니다. 콘텐츠를 모달로 표시하면 다음을 수행할 수 있습니다.
- 사용자들이 독립적인 작업이나 밀접하게 관련된 옵션들에 집중할 수 있도록 돕습니다.
- 사용자들이 중요한 정보를 받고 필요에 따라 조취를 취할 수 있도록 보장합니다.
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.
- 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.
다양한 시스템 정의 모달을 경험할 수 있도록 하기 위해 iOS는 alert, activity views, share sheets, action sheets를 제공합니다. 앱에서 사용자 지정 모달 콘텐츠를 표시할 때 다음 프레젠테이션 스타일 중 하나를 사용할 수 있습니다.
- Automatic. 기본 프레젠테이션 스타일입니다. 일번적인 sheet에 사용됩니다.
- Fullscreen 이전 화면을 덮고, 취소하려면 버튼이 필요합니다.
- Popover 수평으로 규칙적인 환경에서 팝오버를 제공하고, 컴팩트한 환경에서는 시트를 제공합니다.
- Page sheet and form sheet. 이전 화면을 부분적으로 가립니다. 자세한 내용은? Sheets.
- Current context. 특정한 이전 화면을 가립니다.
- Custom. 사용자 정의 애니메이션을 사용해 사용자 정의 컨테이너에 콘텐츠를 표시합니다. 개발자를 위한 자세한 내용은? UIModalPresentationStyle.
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.
의미가 있을 때 모달리티를 사용하세요. 현재 작업과는 다른 작업을 선택하거나 수행하는 데 사용자들의 주의를 집중시키는 것이 중요할 때만 모달 환경을 만드세요. 모달 경험은 사용자들을 현재 상황에서 벗어나게 하고 해제할 때 조치가 필요하므로 명확한 이점을 제공할 때만 사용하는 것이 중요합니다.
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)를 예약합니다. 일반적으로 문제가 발생했을 때 경고가 표시됩니다. 경고는 사용자의 현재 경험을 방해하고, 무시하기 위해 탭을 해야 하기 때문에, 사용자들이 침입이 정당하다고 느끼게 하는 것이 중요합니다. 자세한 내용은? Alerts.
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.
몰입형 콘텐츠나 복잡한 작업에는 전체 화면(fullscreen) 모달 스타일을 사용을 고려하세요. 전체 화면 모달 환경은 산만함을 최소화합니다. 비디오, 사진 또는 카메라 보기를 표시하거나 문서에 마크업 또는 사진 편집과 같은 다단계 작업을 수행하는 데 적합합니다.
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.
필요한 경우 모달 뷰를 닫기 전에 확인을 받아 데이터 손실을 방지할 수 있습니다. 사용자들이 화면을 닫기 위해 닫기 제스처를 사용하던 버튼을 사용하던 상관없이, 만약 그 행동으로 인해 사용자 생성 콘텐츠의 손실이 일어날 수 있다면 상황을 설명하고 해결 방법을 제시하는 action sheet를 제공하세요.
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.
앱에 적합한 모달 전환 스타일을 선택하세요. 앱과 조화를 이루고 일시적인 맥락 이동에 대한 인식을 향상시키는 전환 스타일을 사용하세요. 기본 전환은 모달 화면을 화면 아래에서 위로 수직으로 슬라이드 하고 닫힐 때 다시 아래로 슬라이드 합니다. 앱 전체에서 일관된 모달 전환 스타일을 사용하세요.
개발자를 위한 자세한 내용은? UIViewController 와 UIPresentationController.
느낀점
엄청 길다.. 힘들었다...
모달은 앱에서 상당히 많이 쓰이는 녀석이다. 하지만 사용자가 진행 중인 작업을 중단시키기 때문에 맥락에 맞게 사용하지 않으면 사용자 경험을 해칠 수도 있다! 한번도 써보지 않은 여러 전환 스타일에 대해서도 알아볼 수 있어서 좋았다.
번역하면서 몰랐던 영단어들을 quizlet이라는 곳에 정리해두었어요. HIG 읽으면서 영어 실력까지 키우고 싶은 분들에게 도움이 됐으면 좋겠어요!
수정해야 할 부분이 있다면 알려주세요!
읽어 주셔서 감사합니다. 🙂
