brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 19. 2024

[HIG] Popovers

콘텐츠 위에 표시되는 일시적인 뷰 팝오버

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

Introduction

팝오버는 사용자가 컨트롤이나 대화형 영역을 클릭하거나 탭할 때 화면의 다른 콘텐츠 위에 표시되는 일시적인 뷰입니다.

Best practices

소량의 정보나 기능을 노출할 때 팝오버를 사용하세요. 팝오버는 사람들과 상호 작용한 후에 사라지기 때문에, 팝오버의 기능을 몇 가지 관련된 작업으로 제한하는 것이 좋습니다. 예를 들어 캘린더의 이벤트 팝오버를 사용하면 사람들이 이벤트의 날짜나 시간을 쉽게 변경하거나 다른 캘린더로 이동할 수 있습니다. 변경 후에는 팝업이 사라지므로 캘린더에서 이벤트를 계속 검토할 수 있습니다.

역자설명 : 캘린더의 이벤트 팝오버 예시입니다.

출처 : 어크로스 캘린더 앱

콘텐츠를 위한 공간이 더 필요한 경우 팝오버를 사용하세요. 사이드바 및 패널과 같은 뷰는 많은 공간을 차지합니다. 콘텐츠가 일시적으로만 필요한 경우, 팝오버에 그 콘텐츠를 표시하면 인터페이스를 간소화하는 데 도움이 될 수 있습니다.

화면에 팝오버를 적절하게 배치하세요. 팝오버의 화살표가 팝오버를 노출하게 만든 요소를 가능한 한 직접 가리키도록 만드세요. 팝오버는 팝오버를 노출되게 만든 요소 또는 사람들이 팝오버를 사용하는 동안 봐야 할 필수 콘텐츠를 가리지 않는 것이 좋습니다.

닫기 버튼은 확인 및 안내용으로만 사용하세요. ‘닫기’ 버튼('취소’ 또는 ‘완료’ 포함)은 변경 내용을 저장하거나 저장하지 않고 종료하는 것과 같이 명확성을 제공하는 경우 포함할 가치가 있습니다. 그렇지 않으면, 팝오버는 사용자가 범위를 벗어나 클릭하거나 탭 하거나 팝오버에서 항목을 선택하면 일반적으로 닫힙니다. 여러 항목을 선택할 수 있는 경우에는 사용자가 명시적으로 해제하거나 범위 밖을 클릭하거나 탭할 때까지 팝오버가 열려 있어야 합니다.

논 모달 팝오버(모달이 아닌 팝오버)를 자동으로 닫을 때는 항상 작업을 저장하세요. 사용자가 화면의 다른 부분을 클릭하거나 탭 하여 의도치 않게 논모달 팝오버를 해제할 수 있습니다. 사용자가 명시적인 취소 버튼을 클릭하거나 탭할 때만 작업을 취소하세요.

한 번에 하나의 팝오버만 표시하세요. 여러 개의 팝오버를 표시하면 인터페이스가 복잡해지고 혼동을 유발합니다. 하나의 팝오버가 다른 팝오버에서 나오는 계단식 또는 계층형 팝오버는 표시하지 마세요. 새 팝오버를 표시해야 하는 경우 열려 있는 팝오버를 먼저 닫아야 합니다.

팝오버 위에 다른 뷰를 보여주지 마세요. 팝오버 위에 얼럿(alert)을 제외하고는 아무것도 표시되지 않도록 하세요.

가능하면 팝오버를 닫고 다른 팝오버를 열 때, 한 번의 클릭이나 탭으로 할 수 있도록 하세요. 특히 여러 개의 다른 bar 버튼들이 각각 팝오버를 여는 경우, 추가적인 제스처를 사용하지 않아도 되도록 하는 것은 중요합니다.

팝오버를 너무 크게 만들지 마세요. 팝오버는 화면 전체를 차지하지 않고 콘텐츠를 표시하고 팝오버가 발생한 위치를 가리킬 수 있을 정도로만 크게 만드세요. 팝오버가 화면에 잘 맞도록 시스템에서 팝오버의 크기를 조정할 수 있다는 점에 유의하세요.

팝오버의 크기를 변경할 때는 부드럽게 전환해야 합니다. 일부 팝오버는 동일한 정보를 압축된 보기와 확장된 보기로 모두 제공합니다. 팝오버의 크기를 조정하는 경우 새 팝오버가 이전 팝오버를 대체한 것처럼 보이지 않도록 변경 사항에 애니메이션을 적용합니다.

도움말 문서에서 팝오버라는 단어를 사용하지 마세요. 대신 특정 작업이나 선택 항목을 참조하세요. 예를 들어 "팝오버 하단의 표시 버튼을 선택하세요." 대신 "표시 버튼을 선택하세요."라고 쓸 수 있습니다.

팝오버를 사용하여 경고를 표시하지 마세요. 사람들은 쉽게 또는 실수로 팝오버를 해제할 수 있습니다. 대신 얼럿(alert)을 사용하여 사람들에게 경고하세요.

Platform considerations

tvOS 또는 watchOS에서는 지원되지 않습니다.

iOS, iPadOS

콤팩트 뷰에 팝오버를 표시하지 마세요. Content are의 size class에 따라 앱이나 게임의 레이아웃이 동적으로 조정되도록 만드세요. Wide view에는 팝오버를 사용하세요. Compact view에는 시트(sheet)와 같이 전체 화면 모달 뷰에 정보를 표시하여, 사용 가능한 화면 공간을 모두 사용하세요. 관련 지침은 Modality를 참고하세요.