HIG - Popover

[ffalswo2]

Popovers

A popover is a transient view that appears above other content onscreen when people click or tap a control or interactive area.

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

Best practices

팝오버를 사용하여 소량의 정보나 기능을 노출할 수 있습니다.

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

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

화면에서 팝오버를 적절하게 배치합니다.

팝오버의 화살표가 가능한 한 팝오버를 표시한 요소를 직접 가리키도록 하세요. 팝오버가 팝오버를 표시한 요소나 사람들이 팝오버를 사용하는 동안 확인해야 할 필수 콘텐츠를 가리지 않는 것이 가장 이상적입니다.

닫기 버튼은 확인 및 안내용으로만 사용하세요.

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

(닫기 버튼은 명확한 수정사항이 생길 때에나 포함할 가치가 있고 팝오버는 일시적인 콘텐츠가 필요한 경우에 주로 사용하므로 닫기 버튼이 포함될 필요가 없다는 뜻이라고 해석했다. 팝오버를 닫고싶다면 화면 밖을 터치하면 된다)

모달이 아닌 팝오버를 자동으로 닫을 때는 항상 작업을 저장하세요.

사용자가 화면의 다른 부분을 클릭하거나 탭하여 모달이 아닌 팝업창을 실수로 해제할 수 있습니다. 사용자가 명시적인 취소 버튼을 클릭하거나 탭할 때만 작업을 취소하세요.

한 번에 하나의 팝오버만 표시합니다.

여러 개의 팝오버를 표시하면 인터페이스가 복잡해지고 혼동을 일으킬 수 있습니다. 하나의 팝오버가 다른 팝오버에서 나오는 cascade 또는 계층 구조는 표시하지 마세요. 새 팝오버를 표시해야 하는 경우 열려 있는 팝오버를 먼저 닫아야 합니다.

팝오버 위에 다른 보기를 표시하지 마세요.

팝오버 위에 알림을 제외하고는 아무것도 표시되지 않도록 합니다.

가능하면 한 번의 클릭이나 탭으로 하나의 팝오버를 닫고 다른 팝오버를 열 수 있도록 하세요. 여러 개의 다른 막대 버튼이 각각 팝오버를 열 때 추가 제스처를 피하는 것이 특히 바람직합니다.

팝오버를 너무 크게 만들지 마세요.

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

팝오버의 크기를 변경할 때는 부드럽게 전환해야 합니다.

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

도움말 문서에서 팝오버라는 단어를 사용하지 마세요.

대신 특정 작업이나 선택 항목을 참조하세요. 예를 들어 "팝오버 하단의 표시 버튼을 선택하세요." 대신 "표시 버튼을 선택하세요."라고 쓸 수 있습니다.

팝오버를 사용하여 경고를 표시하지 마세요.

사람들은 쉽게 또는 실수로 팝오버를 해제할 수 있습니다. 대신 [alerts](https://github.com/SOPT-HIG-WWDC/HIG/issues/6)를 사용하여 사람들에게 경고하세요.