Popover

Popover (팝오버)

팝오버는 사람이 어떤 컴포넌트와 상호작용할 때 나타나는 작은 서피스(surface)로, 필수는 아니지만 유용한 맥락 정보를 주면서도 화면을 막지 않는 요소예요. 마치 궁금한 부분에 마우스를 올리면 옆에 살짝 떠서 설명해 주는 작은 말풍선 같은 존재라고 생각하면 쉬워요.

팝오버는 구조화된 콘텐츠와 상호작용 가능한 컴포넌트를 담을 수 있어요. 더 복잡한 레이아웃을 보여주거나 뒤의 페이지를 막아야 한다면 dialog를, 구조 없는 일반 텍스트만 필요하다면 tooltip을 함께 고려해 보세요.

출처: React Popover 문서

본문

Layout (레이아웃)

Sizing and overflow (크기와 넘침)

기본적으로 팝오버에는 크기 제약이 없어요. 팝오버는 안에 담긴 콘텐츠에 맞춰 스스로 커지죠. 가장 좋은 사용자 경험을 위해서는, 팝오버의 크기가 메인 UI의 중요한 정보를 막지 않으면서도 레이아웃 요구에 맞게 조절되도록 팝오버의 치수에 제한을 두세요.

팝오버 안의 넘치는 콘텐츠는 overflow: scroll을 설정해서 숨겨진 콘텐츠에 접근할 수 있게 하세요.

Vertical scroll

콘텐츠가 팝오버의 가용 너비나 높이를 초과하면 넘치는 콘텐츠를 스크롤로 확인할 수 있어요. 스크롤바는 이상적으로는 한 축(가로 또는 세로)에서만 사용해야 해요. 다만 사용이나 의미를 위해 2차원 레이아웃이 필요한 콘텐츠 부분은 예외로 해요.

Horizontal scroll

Positioning (위치 지정)

팝오버가 어떤 정보에 관한 것인지 사람들이 알 수 있도록 위치를 정하세요. 팝오버 콘텐츠와 동시에 보면 도움이 되는 중요한 정보를 가리지 마세요.

Figma에서는 beak 컴포넌트 속성으로 beak 위치를 설정하고, 코드에서는 positioning prop과 positioning shorthand를 사용해요.

Popover positioning

Accessibility (접근성)

Nesting popovers (팝오버 중첩)

팝오버를 중첩하지 마세요. 팝오버가 너무 많으면 원래 맥락에서 주의가 분산되고, 사람들이 콘텐츠와 상호작용하기 어려워져요. 정보가 팝오버에 담기에 필수적이거나 너무 방대하다면, 메인 페이지나 패널 같은 다른 서피스에 넣으세요.

Trapping focus (포커스 가두기)

trapFocus prop을 사용하면 팝오버가 열려 있는 동안 부모 요소에 aria-hidden을 true로 설정해요. 키보드로 탐색하는 사람들은 Tab으로 브라우저 안팎을 오가며 여전히 상호작용할 수 있지만, 팝오버를 닫으려고 Esc를 누르지 않는 한 페이지의 다른 포커스 가능 요소에는 접근할 수 없어요.

Content (콘텐츠)

팝오버의 콘텐츠는 누군가 작업을 완료하는 데 결코 필수적이어서는 안 돼요. 또한 메인 UI에서 이미 제공하는 정보를 반복해서는 안 되고요. 팝오버는 작기 때문에 간결하고 도움이 되는 정보에 사용하세요. 짧은 문장이나 문장 조각이 가장 좋아요. 추가 맥락이나 더 상세한 설명이 필요하다면 팝오버 하단에 "Learn more" 링크를 배치해 보세요. 링크 대상은 새 창이나 새 패널에서 열려야 해요.

Popover with link

더 알아보기 (Learn more)