Human Interface Guidelines - Modality

안다은·2022년 9월 9일
0
post-thumbnail

❗️본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다.
iOS 생태계 내에서 HIG를 읽으시는 분들이 언어가 영어이다보니 많은 불편함을 겪는 것을 보게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 5명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해주시되, 상업적인 용도로 이용하시는 것은 지양해주시기 바랍니다. 감사합니다.

Modality

모달리티는 Parent view 와의 상호 작용을 방지하고 해제하기 위해명시적인 작업을 별도의 집중 모드로 만들어 콘텐츠를 표시하는 디자인 기술입니다.

(역자설명

🦋 Dana
Parent view 란?
‘사용자가 처음으로 사용하고 있던 주요 맥락의 View’ 를 의미합니다. 앱을 사용하다가 기존과 달리 추가된 맥락이 필요하여 View Layer 가 Parent view 위에 덮혀지는 경우가 있기 때문에 구분하여 표현합니다.)

콘텐츠를 모달로 표시하면 다음을 수행할 수 있습니다.

  • 사람들이 중요한 정보를 받고 필요한 경우 조치를 취하도록 합니다.
  • 사람들이 가장 최근 작업을 확인하거나, 수정할 수 있는 옵션을 제공합니다.
  • 사람들이 이전의 컨텍스트를 추리하지 않고, 명확하고 좁은 범위의 작업을 수행할 수 있도록 지원합니다.
  • 사람들이 몰입형 경험을 가능하게 하거나, 복잡한 작업에 집중하도록 돕습니다.

플랫폼에 따라 다른 구성 요소를 사용하여 다음과 같은 유형의 모달 경험을 제공할 수 있습니다. 예를 들어 모든 플랫폼은 앱 또는 게임과 관련된 중요한 정보를 전달하는 Modal View 인 'alert'를 표시할 수 있습니다. 또한, 각 플랫폼은 activity views, sheets, and confirmation dialogs or action sheets (활동 보기, 시트 , 확인 대화 상자 또는 작업 시트)와 같은 상황별 옵션을 표시하기 위한 다양한 유형의 Modal View를 정의할 수 있습니다. 사람들이 고유한 작업을 수행할 수 있도록 iOS, iPadOS 및 macOS 앱은 sheet(시트) 또는 Popovers(팝오버)를 사용하는 경향이 있지만 macOS 및 iPadOS 앱은 별도의 창을 사용할 수도 있습니다.

미디어 View와 같은 일시적인 몰입 환경을 활성화하거나 콘텐츠 편집과 같은 별개의 다단계 작업에 집중할 수 있도록 앱에서 Full Screen Modal 환경을 제공할 수 있습니다. 이와 대조적으로 앱은 비모달 유형의 전체 화면 경험을 제공할 수도 있습니다. 가이드라인은 Going full screen을 참조하세요.

(역자설명

Modality Summary
예시 1 :

모든 플랫폼에서는 앱이나 게임과 관련된 중요한 정보를 전달하는 Modal View 인 경고창 'alert' .

예시 2 :
상황별 옵션을 표시하기 위해 다양한 유형의 Modal View로 하는 activity views, sheets, and confirmation dialogs or action sheets (활동 보기, 시트 , 확인 대화 상자 또는 작업 시트).

예시 3 :
사람들이 고유한 작업을 수행할 수 있도록 iOS, iPadOS 및 macOS 앱은 시트 또는 Popovers(팝오버)를 사용하는 경우가 있다. (macOS 및 iPadOS 앱은 별도의 창을 사용할 수도 있습니다.)

예시 4 :
Viewing media(미디어 보기)와 같은 일시적인 몰입 환경을 활성화하거나, 콘텐츠 편집과 같은 별개의 여러단계 작업에 집중할 수 있도록 앱에서 Full-screen modal(전체 화면 모달)환경을 제공할 수 있습니다. 대조적으로 앱은 비모달 유형의 Full-screen modal (전체 화면 모달)경험을 제공할 수도 있습니다. 지침은Going full screen (전체 화면으로 전환) 을 참조하십시오.

)


Best practices

분명한 이점이 있는 경우에만 콘텐츠를 모달로 표시합니다. 모달을 사용한다는 것은 사람들이 현재 상황에서 벗어나게 하거나 어떤 것을 해제할 조치가 필요한 것임으로, 사람들이 콘텐츠 또는 기기에 영향을 미치는 선택을 하거나 집중하는 데 도움이 되는 경우에만 모달을 사용하는 것이 중요합니다.

모달 작업을 단순하고 짧고 좁은 초점으로 유지하는 것을 목표로 합니다. 모달 작업이 너무 복잡하거나, 특히 모달 보기가 이전 컨텍스트를 가릴 경우, 모달뷰에 들어갔을 때 일시 중단한(원래 하고있던)작업을 인식하지 못할 수 있습니다.

앱 내에서 앱처럼 느껴지는 모달 환경을 만들지 않도록 주의하세요. 특히, 모달 작업 내에서 뷰의 계층 구조를 제시하면 사람들이 레이어 단계를 추적하거나 인식하기에 혼란스러울 수 있습니다. 모달 작업에 하위의 뷰가 포함되어야 하는 경우 계층을 통해 단일 경로를 제공하고, 사람들이 모달 보기를 닫는 버튼으로 착각할 수 있는 버튼을 포함하지 마세요.

몰입형 콘텐츠나 복잡한 작업에는 전체 화면 모달(full-screen modal)스타일을 사용하는 것이 좋습니다. 디스플레이 또는 창을 채우는 모달 환경은 방해를 최소화하므로 비디오, 사진 또는 카메라 보기를 표시하거나 문서에 마크업 또는 사진 편집과 같은 다단계 작업을 수행하는 데 적합합니다.

항상 사람들에게 모달 뷰를 무시할 수 있는 분명한 방법을 제공하세요. 일반적으로 사람들이 이미 알고 있는 플랫폼 규칙을 따르는 것이 좋습니다. 예를 들어 iOS, iPadOS 및 watchOS 앱에서 사람들은 일반적으로 탐색 모음에서 버튼을 찾거나 아래로 스와이프할 것으로 기대합니다. macOS 및 tvOS 앱에서 사람들은 기본 콘텐츠 보기에서 버튼을 찾을 것으로 기대합니다.

필요한 경우 모달 뷰를 닫기 전에 확인을 받아 데이터 손실을 방지할 수 있습니다. 닫기 제스처를 사용하든 버튼을 사용하든 관계없이, 뷰를 닫으면 사용자 생성 콘텐츠가 손실될 수 있는 경우, 상황을 설명하고 해결 방법을 제공해야 합니다. 예를 들어 iOS에서는 저장 옵션이 포함된 작업 시트를 표시할 수 있습니다.

모달 뷰의 작업을 쉽게 식별할 수 있습니다. 사람들이 모달 보기에 들어가면 이전 컨텍스트에서 벗어나 즉시 돌아가지 않을 수 있습니다. 모달 뷰의 작업 이름을 지정하는 제목 또는 작업을 설명하거나 지침을 제공하는 추가 텍스트를 제공하면 사람들이 앱에서 자신의 위치를 유지하도록 도울 수 있습니다.

다른 모달 뷰 위에 모달 뷰를 표시하지 마세요. 동시에 화면에 여러 모달 뷰가 표시되면 사람들이 이전 컨텍스트를 두 개 이상 기억해야 하기 때문에 혼동될 수 있습니다. Alert(알림)가 중요한 정보를 전달하기 위해 다른 모든 콘텐츠 위에 표시될 수 있지만 화면에 동시에 두 개 이상의 Alert(알림)를 표시하는 것은 매우 혼란스럽습니다.


Resources

Related
Popovers
Sheets
Alerts

Developer documentation
Presentation modifiers — SwiftUI
UIModalPresentationStyle — UIKit
Modal windows and panels — AppKit

Videos

What’s new in iPad app design
WWDC22

Explore navigation design for iOS
WWDC22

What's New in iOS Design
WWDC 2019

profile
디자이너

0개의 댓글