[iOS / HIG] Sheets

Sheets

A sheet helps people perform a distinct task that’s related to the parent view without taking them away from their current context. For example, Mail uses a sheet to help people compose an email without leaving their mailboxes, and Translate uses a sheet to display a dictionary view that helps people define the word they want to translate.

시트를 통해 사용자는 현재 컨텍스트에서 사용자를 제거하지 않고 상위 보기와 관련된 고유한 작업을 수행할 수 있습니다. 예를 들어, 메일은 우편함을 남기지 않고 전자 메일을 작성하는 데 도움이 되는 시트를 사용하고, 번역은 사용자가 번역할 단어를 정의하는 데 도움이 되는 사전 보기를 표시합니다.

 

Mail compose sheet

Translate dictionary sheet

iPhone에서 진행 중인 이메일의 스크린샷입니다. 받은 문서 보기의 매우 작은 가로 줄무늬가 작성 시트 상단 위에 표시됩니다. 키보드가 화면 하단 절반에 표시됩니다.
메일 작성 시트입니다.

영어와 아랍어로 hello라는 단어를 보여주는 아이폰 번역 뷰 스크린샷입니다. 사전 시트는 화면 하단에 표시되며 두 언어로 hello의 정의를 제공합니다.
사전 시트를 번역합니다.

 

For developer guidance, see UISheetPresentationController.

개발자 지침은 UISheetPresentationController를 참조하십시오.

 

A sheet appears as a card that partially covers the underlying content. The card’s top corners are rounded to visually distinguish it from the parent view. You can customize a sheet’s corner radius to coordinate with the corner radii you use elsewhere in your app; for developer guidance, see preferredCornerRadius.

시트는 기본 내용을 부분적으로 다루는 카드로 나타납니다. 카드의 상단 모서리는 상위 보기와 시각적으로 구분되도록 둥글게 표시됩니다. 시트의 모서리 반지름을 사용자 정의하여 앱의 다른 위치에서 사용하는 모서리 반지름과 조정할 수 있습니다. 개발자 지침은 PreferenceCornerRadius를 참조하십시오.

 

People typically expect to resize a sheet when they scroll its contents or drag the grabber, which is a small horizontal indicator that can appear at the top edge of a sheet. In iOS 15 and later, sheets resize according to their detents, which are particular heights at which a sheet naturally rests. The system defines two detents: large is the height of a fully expanded sheet and medium is about half the fully expanded height.

일반적으로 사용자는 시트의 내용을 스크롤하거나 시트의 맨 위에 나타날 수 있는 작은 수평 표시기인 그래버를 끌 때 시트의 크기를 조정해야 합니다. iOS 15 이상에서는 시트가 자연스럽게 놓이는 특정 높이인 멈춤쇠에 따라 시트의 크기를 조정합니다. 시스템은 두 개의 멈춤쇠를 정의합니다. 큰 것은 완전히 확장된 시트의 높이이고 중간은 완전히 확장된 시트의 약 절반입니다.

 

 

큰 멈춤쇠입니다.

중간 멈춤쇠입니다.
왼쪽은 iPad이고 오른쪽은 iPhone입니다. iPad 화면 중앙에는 둥근 사각형이 있으며 그 주위에 파선 윤곽이 있습니다. 아이폰 화면에는 화면의 거의 대부분을 차지하는 파선 윤곽을 포함한 둥근 사각형이 있습니다. 두 솔리드 직사각형 모두 Large(크게)라는 레이블이 붙습니다.

 

Sheets automatically support the large detent. Adding the medium detent allows the sheet to rest at both heights, whereas specifying only medium prevents the sheet from expanding to full height. For developer guidance, see detents.

시트는 자동으로 큰 멈춤쇠를 지지합니다. 중간 멈춤쇠를 추가하면 시트가 두 높이에서 모두 놓일 수 있는 반면 중간만 지정하면 시트가 전체 높이로 확장되지 않습니다. 현상액 지침은 멈춤쇠를 참조하십시오.

 

By default, a sheet is modal, presenting a focused experience that dims the parent view and prevents interaction with it. After people finish interacting with a modal sheet, they dismiss it — or it dismisses automatically — before resuming their task in the parent view. In iOS 15 and later, a sheet can also be nonmodal. When a nonmodal sheet is onscreen, people can continue their task in the parent view while also interacting with the sheet.

기본적으로 시트는 모달이며 슈퍼 뷰를 어둡게 하고 슈퍼 뷰와의 상호 작용을 방지하는 집중된 경험을 제공합니다. 사용자가 모달 시트와 상호 작용을 마친 후 상위 보기에서 작업을 재개하기 전에 해당 시트 또는 모달 시트가 자동으로 해제됩니다. iOS 15 이상에서 시트는 모달이 아닐 수도 있습니다. 모달 시트가 아닌 시트가 화면에 있으면 사용자는 시트와 상호 작용하면서 상위 보기에서 작업을 계속할 수 있습니다.

 

Use a sheet for nonimmersive content and simple tasks. A sheet allows part of the parent view to remain visible behind it, helping people retain their original context as they interact with the sheet. Use a full-screen modal presentation to offer immersive content such as videos, photos, or camera views, or to enable a complex task such as marking up a document or editing a photo. The full-screen modal style covers the entire screen, minimizing visual distraction. For developer guidance, see UIModalPresentationStyle.fullScreen.

자극적이지 않은 내용 및 간단한 작업에 시트를 사용합니다. 시트를 사용하면 부모 뷰의 일부가 시트와 상호 작용할 때 원래 컨텍스트를 유지할 수 있습니다. 전체 화면 모달 프레젠테이션을 사용하여 비디오, 사진 또는 카메라 뷰와 같은 몰입감 있는 콘텐츠를 제공하거나 문서 표시 또는 사진 편집과 같은 복잡한 작업을 수행할 수 있습니다.시트입니다.

 

Consider supporting the medium detent to allow progressive disclosure of the sheet’s content. For example, a share sheet displays the most relevant items within the medium detent, where they’re visible without resizing. To view more items, people can scroll or expand the sheet.

시트 내용을 점진적으로 공개할 수 있도록 중간 멈춤쇠 지원을 고려해 보십시오. 예를 들어, 공유 시트는 중간 멈춤쇠 내에서 가장 관련성이 높은 항목을 표시하며 크기 조정 없이 볼 수 있습니다. 더 많은 항목을 보기 위해 시트를 스크롤하거나 확장할 수 있습니다.

 

Use a nonmodal sheet when you want to present supplementary items people can use without pausing the main task. When people choose an item in a nonmodal sheet, the parent view can update in response, providing feedback on the item’s effect and letting people continue their task while the sheet remains onscreen. For example, Notes uses a nonmodal sheet to help people apply different formatting to different text selections as they edit a note. To enable a nonmodal sheet experience, you support the medium detent and remove dimming from the parent view (for developer guidance, see largestUndimmedDetentIdentifier).

사람들이 주요 작업을 일시 중지하지 않고 사용할 수 있는 보조 항목을 제공하려면 비모달 시트를 사용하십시오. 사용자가 모달 시트가 아닌 시트에서 항목을 선택하면 상위 보기가 응답으로 업데이트되어 항목의 효과에 대한 피드백을 제공하고 시트가 화면에 남아 있는 동안 작업을 계속할 수 있습니다. 예를 들어, Notes는 비모달 시트를 사용하여 사용자가 노트를 편집할 때 서로 다른 텍스트 선택에 다른 형식을 적용할 수 있도록 도와줍니다. 비모달 시트 환경을 활성화하려면 중간 멈춤쇠를 지원하고 상위 뷰에서 조광을 제거합니다(개발자 지침은 가장 큰 UndimmedDetentIdentifier 참조).

 

The Notes format sheet lets people apply formatting to selected text in the editing view.

iPhone에서 진행 중인 노트의 스크린샷입니다. 두 단어가 선택되었으며 노란색으로 강조 표시됩니다. 화면 하단의 형식 시트에 선택한 단어가 본문 글꼴을 굵게 사용한다는 내용이 표시됩니다.

Notes 서식시트를 사용하여 편집 보기에서 선택한 텍스트에 서식을 적용할 수 있습니다.

Because the sheet is nonmodal, people can make additional text selections without dismissing the sheet.

iPhone에서 동일한 진행 중인 노트의 스크린샷입니다. 다른 단어가 선택되고 노란색으로 강조 표시됩니다. 서식 시트는 선택한 단어가 본문 글꼴을 기울임꼴로 사용함을 보여줍니다.
시트는 모달이 아니므로 시트를 해제하지 않고 추가 텍스트를 선택할 수 있습니다.

 

In general, include a grabber in a resizable sheet. A grabber shows people that they can drag the sheet to resize it; they can also tap it to cycle through the detents. In addition to providing a visual indicator of resizability, a grabber also works with VoiceOver so people can resize the sheet without seeing the screen. For developer guidance, see prefersGrabberVisible.

일반적으로 크기가 조정 가능한 시트에 그래버를 포함합니다. 그래버는 시트를 끌어서 크기를 조정할 수 있다는 것을 보여주고 멈춤쇠 사이를 순환하기 위해 누를 수도 있습니다.

그래버는 크기 조정에 대한 시각적 표시를 제공할 뿐만 아니라 VoiceOver와도 작동하므로 화면을 보지 않고도 시트 크기를 조정할 수 있습니다. 개발자 지침은 PreferGrabberVisible을 참조하십시오.

 

Don’t display a sheet on top of a popover. Although you can display a sheet within a popover, nothing should appear on top of a popover (except possibly an alert). In rare cases when you need to present a sheet after people take an action in a popover, close the popover before displaying the sheet.

팝업 맨 위에 시트를 표시하지 않습니다. 팝오버 내의 시트를 표시할 수 있지만, 팝오버 위에 아무것도 표시되지 않아야 합니다(경보 제외). 드문 경우이긴 하지만 사용자가 팝업오버에서 작업을 수행한 후 시트를 표시해야 할 경우 시트를 표시하기 전에 팝오버를 닫으십시오.

 

 

 

※ 참고 출처

 애플 개발자 문서

Sheets - Views - iOS - Human Interface Guidelines - Apple Developer