brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 21. 2024

[HIG] Sheets

지정된 범위의 작업을 돕는 시트

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

Introduction

시트(sheet)는 사람들이 현재 컨텍스트와 밀접하게 관련된 범위 지정 태스크를 수행하는 것을 도와줍니다.

기본적으로 시트(sheet)는 모달이며 사람들이 시트(sheet)를 해지할 때까지 상위(parent) 뷰와 상호 작용하지 못하도록 집중된 경험을 제공합니다(모달 프레젠테이션에 대한 자세한 내용은 Modality를 참고하세요). 모달 시트(sheet)는 사람들에게 특정 정보를 요청하거나 상위(parent) 뷰로 돌아가기 전에 완료할 수 있는 간단한 태스크를 실행할 때 유용합니다. 예를 들어 시트(sheet)는 사람들이 파일 첨부, 이동 또는 저장 위치 선택, 선택 형식 지정과 같은 작업을 완료하기 위해 필요한 정보를 제공할 수 있습니다.

macOS나 watchOS에서 시트(sheet)는 항상 모달이지만 iOS나 iPadOS에서는 모달이 아닐 수도 있습니다. 비모달 시트가 화면에 나타나면 사용자는 해당 기능을 사용하여 시트(sheet)를 해지하지 않고 상위(parent) 뷰의 현재 작업에 직접 영향을 줍니다. 예를 들어 iPhone 및 iPad의 Notes는 비모달 시트(sheet)를 사용하여 사람들이 메모를 편집할 때 다양한 텍스트 선택에 다른 형식을 적용할 수 있습니다.

Best practices

시트(sheet)를 사용하여 비몰입형 콘텐츠를 표시하거나 간단한 작업을 수행할 수 있습니다. 시트(sheet)는 상위(parent) 뷰의 일부를 볼 수 있어 사람들이 시트와 상호작용할 때 기존의 콘텐츠를 유지할 수 있습니다.

몰입형 콘텐츠를 표시하거나 복잡한 작업을 가능하게 하려면 시트(sheet)에 대한 대안을 고려해 보세요. 예를 들어 iOS 및 iPadOS는 동영상, 사진 또는 카메라 뷰와 같은 몰입형 콘텐츠 또는 문서나 사진 편집과 같은 다단계 작업을 표시하는데 적합한 전체 화면 스타일의 모달 뷰를 제공합니다. macOS 환경에서는 새 창을 열거나 사람들이 시트(sheet)를 사용하는 대신 전체 화면 모드(full-screen mode)로 전환하도록 할 수 있습니다. 예를 들어 문서 편집과 같은 독립적인 작업은 별도의 창에서 잘 작동하는 경향이 있는 반면, 전체 화면으로 전환(going full screen)하면 사람들이 미디어를 보는 데 도움이 될 수 있습니다. 비전 OS에서는 사람들이 콘텐츠나 작업에 몰입할 수 있는 전체 공간으로 앱을 전환할 수 있는 방법을 제공할 수 있으며, 자세한 내용은 몰입형 환경(Immersive experiences)을 참고하세요.

메인 인터페이스에서 한 번에 하나의 시트(sheet)만 표시합니다. 사람들이 시트(sheet)를 닫을 때는 상위(parent) 뷰나 기존 창으로 돌아가는 것을 예상합니다. 만약 시트(sheet)를 닫을 때 다른 시트(sheet)로 돌아간다면 사람들은 앱에서 작업 중인 화면의 위치를 혼란스러워 할 수 있습니다. 만약 시트(sheet) 내에서 수행한 작업으로 인해 다른 시트(sheet)가 나타나는 경우 새로운 시트(sheet)를 표시하기 전에 첫 번째 시트(sheet)를 닫으세요. 필요하다면 두 번째 시트(sheet)를 닫은 후 첫 번째 시트(sheet)를 다시 표시할 수도 있습니다.

상위(parent) 뷰에서 주 작업에 영향을 주는 보조 항목을 표시하려면 모달이 아닌 뷰(view)를 사용하세요. 사람들이 기본 창과 계속 상호 작용하면서 필요한 정보 및 작업에 액세스 할 수 있도록 하려면 비전 OS에서는 분할 보기(split view)를, macOS에서는 패널(panel)을 사용하고, iOS 및 iPadOS에서는 이 워크플로에 모달이 아닌 시트를 사용할 수 있습니다. 가이드라인은 iOS, iPadOS를 참고하세요.

Platform considerations

No additional considerations for tvOS.

iOS, iPadOS

크기를 조정할 수 있는 시트(sheet)는 사용자가 콘텐츠를 스크롤하거나 그래버(grabber)를 드래그하면 확장됩니다. 그래버(grabber)는 시트(sheet)의 맨 상단에 표시되는 작은 수평 인디케이터입니다. 시트(sheet)는 디텐트(detents)에 따라 크기가 조정됩니다. 디텐트(detents)는 시트가 자연스럽게 놓이는 특정 높이입니다. iPhone용으로 디자인된 디텐트(detents)는 시트가 자연스럽게 놓이는 특정 높이를 명시합니다. 시스템에는 두 개의 디텐트(detents)가 정의됩니다. 라지(large)는 완전히 확장된 시트(sheet)의 높이이고, 미디엄(medium)은 완전히 확장된 높이의 절반입니다.

시트(sheet)는 자동으로 라지 디텐트(large detents)를 지원합니다. 미디엄 디텐트(medium detents)를 추가하면 두 가지 높이가 모두 적용되지만 미디엄만 지정한다면 전체 높이로 확장되지 않습니다. 개발자 가이드라인은 detents를 참고하세요.

iPhone 앱에서는 시트(sheet)의 콘텐츠를 단계적으로 공개할 수 있도록 미디엄 디텐트(medium detents)를 제공하는 것을 고려해 보세요. 예를 들어 공유 시트는 미디엄 디텐트(medium detents) 내에서 가장 관련성이 높은 항목들을 표시하며 크기 조정 없이 볼 수 있습니다. 더 많은 항목을 보러면 시트(sheet)를 스크롤하거나 확장할 수 있습니다. 반면 시트(sheet)의 콘텐츠가 전체 높이로 표시될 때 더 유용한 경우 미디엄 디텐트(medium detents)를 지원하지 않을 수 있습니다. 예를 들어 Messages와 Mail의 작성 시트는 내용을 작성하기에 충분한 공간을 제공하기 위해 전체 높이로만 표시됩니다.

크기 조정이 가능한 시트(sheet)에 그래버(grabber)를 포함합니다. 그래버(grabber)를 드래그하여 시트(sheet)의 크기를 조정할 수 있습니다. 또한 시트(sheet)를 탭 하여 디텐트(detents)를 변경할 수도 있습니다. 그래버(grabber)는 크기를 조정할 수 있는 시각적 인디케이터뿐만 아니라 VoiceOver와 함께 작동하므로 사람들은 스크린을 보지 않고도 시트(sheet)의 크기를 조정할 수 있습니다. 개발자 가이드라인은 prefersGrabberVisible를 참고하세요.

시트(sheet)를 닫기 위한 스와이핑을 지원합니다. 사람들은 닫기 버튼을 누르지 않고 세로로 스와이핑 하여 시트(sheet)를 닫는 것을 예상합니다. 만약 사람들이 스와이핑 하여 시트(sheet)를 닫았을 때 저장되지 않은 변경 사항이 있을 경우에는 액션 시트(action sheet)를 사용하여 작업을 확인합니다.

완료 버튼과 취소 버튼은 사람들의 예상대로 배치합니다. 일반적으로 완료나 닫기 버튼은 시트(sheet)의 오른쪽 상단 모서리(왼쪽에서 오른쪽 레이아웃) 또는 왼쪽 상단 모서리(오른쪽에서 왼쪽 레이아웃)에 표시됩니다. 취소 버튼은 시트(sheet)의 왼쪽 상단(왼쪽에서 오른쪽 레이아웃) 또는 오른쪽 상단(오른쪽에서 왼쪽 레이아웃)에 표시됩니다.

macOS

MacOS에서 시트(sheet)는 상위(parent) 뷰 위에 둥근 모서리가 있는 카드 뷰입니다. 상위(parent) 뷰는 시트(sheet)가 화면에 표시되는 동안 흐리게 보이므로 시트(sheet)를 닫을 때까지 상호 작용 할 수 없지만, 사람들은 시트(sheet)를 닫기 전에 다른 창과 상호 작용하는 것을 예상합니다.

적절한 기본 크기로 시트(sheet)를 표시합니다. 사람들은 일반적으로 시트(sheet) 크기를 조정하지 않으므로 표시하는 콘텐츠에 적합한 크기를 사용하는 것이 중요합니다. 하지만 더 명확하게 보기 위해 콘텐츠를 확장해야 하는 경우와 같이 크기 조정이 가능한 시트(sheet)를 선호하는 경우도 있으므로 크기 조정 기능을 지원하는 것이 좋습니다.

사람들이 시트(sheet)를 먼저 닫지 않고도 다른 앱 창과 상호 작용할 수 있도록 하세요. 시트(sheet)가 열리면 상위 창을 앞으로 가져오고, 상위(parent) 뷰가 문서 창인 경우 모델 없는 문서 관련 패널도 앞으로 가져옵니다. 사람들이 앱의 다른 창과 상호 작용하려면 아직 시트를 닫지 않았더라도 해당 창을 앞으로 가져올 수 있어야 합니다.

사람들이 예상하는 대로 시트의 닫기 버튼을 배치하세요. 사람들은 완료, 확인 및 취소를 포함하여 시트(sheet)를 닫는 모든 단추를 뷰의 맨 아래, 뒤쪽 모서리에 배치하기를 기대합니다.

사람들이 반복적으로 입력을 제공하고 결과를 관찰해야 하는 경우 시트 대신 패널을 사용하세요. 예를 들어, 찾기 및 바꾸기 패널을 사용하면 사람들이 개별적으로 바꾸기를 시작할 수 있으므로 각 검색의 결과가 올바른지 관찰할 수 있습니다. 가이드라인은 Panels을 참고하세요.

시트(sheet)를 먼저 닫지 않아도 다른 창과 상호 작용할 수 있도록 하세요. 시트(sheet)가 열리면 상위(parent) 뷰를 앞으로 가져옵니다. 상위(parent) 뷰가 문서 창인 경우에는 모달리스(modeless) 문서 관련 패널도 앞으로 가져옵니다. 앱의 다른 창과 상호 작용하기를 원할 경우, 아직 시트를 닫지 않았더라도 해당 창을 앞으로 가져올 수 있는지 확인해 보세요.

역자설명 : 모달리스(modeless), 대화상자(dialog)가 실행될 때 제어권을 독점하지 않으므로 부모 창과 상호 작용이 가능합니다.

visionOS

시트가 비전 OS 앱에 표시되는 동안에는 상위 창 앞에 떠서 흐리게 표시되고 앱과 사람들의 상호 작용 대상이 됩니다.

창 하단 가장자리에서 시트가 나오도록 표시하지 마세요. 사람들이 시트를 보기 쉽도록 시야 중앙(field of view)에 시트를 배치하는 것이 좋습니다.

사람들이 컨텍스트를 유지하는 데 도움이 되는 기본 크기로 시트를 표시합니다. 창의 대부분 또는 전부를 덮는 시트는 표시하지 말고 원하는 경우 사용자가 시트 크기를 조정할 수 있도록 하세요.

watchOS

watchOS에서 시트는 앱의 현재 콘텐츠 위로 슬라이드되는 전체 화면 보기입니다. 시트는 현재 컨텍스트를 유지하는 데 도움이 되도록 반투명하지만, 시스템은 덮여 있는 콘텐츠를 흐리게 하고 채도를 낮추는 재질을 배경에 적용합니다.

모달 작업에 사용자 지정 제목이나 사용자 지정 콘텐츠 표시가 필요한 경우에만 시트를 사용하세요. 사람들에게 중요한 정보를 제공하거나 일련의 선택 사항을 제시해야 하는 경우에는 경고(alert) 또는 작업 시트(action sheet)를 사용하는 것이 좋습니다.

시트 상호 작용은 짧고 가끔씩만 하세요. 시트는 현재 워크플로우를 일시적으로 중단하고 중요한 작업을 원활하게 진행할 때만 사용하세요. 사람들이 앱의 콘텐츠를 탐색하는 데 시트를 사용하지 마세요.

앱에 적합한 경우에만 해제 컨트롤의 기본 레이블을 변경하세요. 기본적으로 시트에는 왼쪽 위 모서리에 둥근 취소 버튼이 표시됩니다. 시트에서 사람들이 앱의 동작 또는 데이터를 변경할 수 있도록 허용하는 경우 이 버튼을 사용합니다. 시트에서 작업을 활성화하지 않고 단순히 정보만 표시하는 경우에는 대신 완료 또는 취소를 사용합니다. 도구 모음을 사용하여 여러 개의 버튼을 표시할 수 있습니다.

기본 레이블을 변경하는 경우 대체 레이블을 혼동하지 않도록 하세요. 사람들이 시트가 계층적 탐색 인터페이스의 일부라고 오해할 수 있는 레이블을 사용하지 마세요. 또한 상단 상단 모서리의 텍스트가 페이지나 앱 제목처럼 보이거나 버튼 레이블을 제공하지 않으면 사람들이 시트를 해제하는 방법을 모르게 됩니다.