brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 02. 2023

[HIG] Modality

새로운 콘텐츠를 보여주는 모달

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

Introduction

모달리티(Modality)는 새로운 콘텐츠를 보여주기 위한 디자인 기술입니다. 기존에 사용자가 사용하던 ‘부모 뷰(Parent view)’ 위에 새롭게 생성되어 사용자의 상호 작용을 끊고 새로운 뷰에서 작업을 할 수 있게 합니다.

역자설명 : ‘부모 화면(Parent view)’이란, 사용자가 처음에 사용하고 있었던 화면을 말합니다. 앱을 사용하다가 다른 맥락의 화면이 필요하여 새로 생성된 화면이 부모 뷰(Parent view) 위에 덮혀지는 경우가 있기 때문에 구분하여 표현합니다.

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

사람들이 중요한 정보를 받고 필요한 경우 조치를 취하도록 합니다.

사람들이 가장 최근 작업을 확인하거나, 수정할 수 있는 옵션을 제공합니다.

사람들이 이전의 작업이 무엇이었는지 고민하지 않고, 명확하고 디테일한 작업을 수행할 수 있도록 돕습니다.

사람들에게 몰입형 경험을 제공하거나, 복잡한 작업에 집중할 수 있게 돕습니다.

플랫폼에 따라 적절한 모달을 사용해 다음과 유형의 사용자 경험을 제공할 수 있습니다. 예를 들어 앱 또는 게임과 관련된 중요한 정보를 전달하는 모달 뷰(Modal View)인 '알림(Alert)'를 사용할 수 있습니다. 또한 ‘액티비티 뷰(Activity views)’, ’ 시트(Sheets)’ 그리고 ’ 확인 대화 상자(Confirmation dialogs) 또는 ‘액션 시트(Action sheets)’와 같은 상황에 따른 다양한 옵션을 사용자에게 보여주기 위한 다양한 모달 뷰(Modal view)를 제공할 수 있습니다. 사람들이 고유한 작업을 수행할 수 있도록 iOS, iPadOS 및 macOS 앱은 ’ 시트(Sheets)’ 또는 ‘팝오버(Popovers)’ 모달을 주로 사용하지만 macOS 및 iPadOS 앱은 별도의 창을 사용할 수도 있습니다.

‘미디어 보기(Viewing media)’와 같은 일시적인 몰입 환경을 제공하거나 콘텐츠 편집과 같은 작업에 집중할 수 있도록 앱에서 ‘풀 스크린 모달(Full Screen Modal)’ 환경을 제공할 수 있습니다. 이와 달리 앱은 모달이 아닌 전체 화면을 제공할 수도 있습니다. 가이드라인은 Going full screen을 참고하세요.

역자설명 : 하단의 이미지들은 위에서 설명한 모달의 예시입니다.

알림(Alert)

액티비티 뷰(Activity views), 시트(Sheets), 확인 대화 상자(Confirmation dialogs), 액션 시트(Action sheets)

시트(Sheets) 또는 팝오버(Popovers)

풀 스크린 모달(Full-screen modal)

Best practices

모달의 사용이 필요한 경우에만 콘텐츠를 모달로 표시합니다. 모달을 사용하면 사람들은 현재 작업에서 벗어나 새로운 콘텐츠를 접하게 됩니다. 따라서 사람들의 선택이나 집중하는 데 도움이 되는 경우에만 모달을 사용하는 것이 중요합니다.

모달은 단순하고 간단한 작업에 사용하는 것이 좋습니다. 모달에서 해야 하는 작업이 너무 복잡하거나 이전 콘텍스트를 가릴 경우, 모달 뷰에서 원래 뷰로 돌아왔을 때 원래 하던 작업이 무엇이었는지 사용자들은 헷갈릴 수 있습니다.

앱에서 모달을 사용할 때 모달이 또 다른 앱처럼 느껴지지 않게 해야 합니다. 특히 모달 작업에서 뷰의 계층 구조를 사용하면, 사람들이 어떤 단계를 통해 현재 작업에 도달했는지 혼란스러울 수 있습니다. 모달 작업에 또 다른 하위의 뷰가 포함되어야 하는 경우 계층을 통해 단일 경로를 제공하고, 사람들이 모달 뷰를 닫는 버튼으로 착각할 수 있는 버튼을 포함하지 마세요.

몰입형 콘텐츠나 복잡한 작업에는 ‘풀 스크린 모달(Full-screen modal)’을 사용하는 것이 좋습니다. 디스플레이 또는 창을 전부 채우는 풀 스크린 모달은 비디오, 사진 또는 카메라 보기를 보여주거나 문서에 마크업 또는 사진 편집과 같은 여러 단계가 있는 작업을 수행하는 데 적합합니다.

항상 사람들에게 모달 뷰를 사용할 수 있는 명확한 방법을 제공하세요. 사람들은 본인들에게 익숙한 방식으로 플랫폼을 사용하기를 원합니다. 예를 들어 iOS, iPadOS 및 watchOS 앱에서 사람들은 탐색 모음에서 버튼을 찾거나 아래로 스와이프 할 수 있기를 원합니다. macOS 및 tvOS 앱에서 사람들은 기본 콘텐츠 뷰에서 버튼을 찾을 수 있기를 원합니다.

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

모달의 작업을 사용자가 쉽게 이해할 수 있게 해야 합니다. 사람들이 모달에서 오래 작업을 할 수도 있습니다. 따라서 모달의 작업이 무엇인지 제목 또는 작업을 설명하는 텍스트를 제공하면 사람들이 앱에서 현재 자신이 어디에 위치해 있는지 쉽게 알 수 있습니다.

모달 위에 또 다른 모달을 표시하지 마세요. 화면에 여러 모달이 보이면 사람들은 이전 작업을 두 개 이상 기억해야 하는 번거로움이 있습니다. ’ 알림(Alert)’은 중요한 정보를 전달하기 위해 다른 모든 콘텐츠 위에 표시될 수 있지만 한 화면에 동시에 두 개 이상의 ‘알림(Alert)’을 표시하는 것은 좋지 않습니다.