Popover

Popover (팝오버)

팝오버는 페이지의 다른 모든 요소 위에 나타나는 레이어예요. 다양한 텍스트와 인터랙티브 요소를 담을 수 있으며, 툴팁·오버플로우 메뉴·드롭다운 메뉴 같은 일부 컴포넌트의 기본 레이어로 사용됩니다.

출처: Popover

본문

개요 (Overview)

팝오버는 페이지의 다른 모든 콘텐츠 위에 나타나는 레이어예요. 한 번에 하나의 팝오버만 나타날 수 있으며 다양한 텍스트와 인터랙티브 요소를 포함할 수 있습니다. 팝오버는 툴팁, 오버플로우 메뉴, 드롭다운 메뉴 같은 일부 컴포넌트의 기본 레이어로 사용됩니다.

언제 사용할까요 (When to use)

  • 링크, 버튼, 리치 미디어 같은 인터랙티브 요소를 배치해 컴포넌트를 더 접근 가능하게 만들 때 사용하세요. 인터랙티브 요소를 포함하는 공개(disclosure)는 이 접근성 표준을 달성하기 위해 팝오버를 기본 컨테이너 레이어로 사용합니다. 팝오버 안에서 콘텐츠를 표시하는 방법에 대한 추가 지침은 공개 패턴(disclosure pattern)을 참고하세요.
  • 페이지의 특정 요소에 대한 추가 세부 정보를 표시해야 할 때 사용하세요. 팝오버가 너비 4컬럼을 초과하면 모달을 대신 사용하세요.

언제 사용하지 말아야 할까요 (When not to use)

팝오버 안에 팝오버를 중첩하거나 다른 팝오버 안에 배치하는 것을 피하세요. 이는 혼란스러운 인터랙션과 접근성 문제를 만들 수 있어요. 대신 모달이나 다른 경험을 사용하는 것을 고려하세요.

변형 (Variants)

기본적으로 팝오버 구조는 추가 팁이 없는 컨테이너로 구성돼요. 사용 사례에 따라 캐럿 팁(caret tip)이나 탭 팁(tab tip)을 컨테이너에 추가해 팝오버와 트리거된 위치 사이의 관계를 보여줄 수 있어요.

변형 (Variant) 용도 (Purpose)
No tip 팁이 없는 팝오버는 보통 트리거 버튼에 시각적으로 정의된 눌림(down) 상태가 있을 때 사용.
Caret tip 캐럿 팁이 있는 팝오버는 팝오버와 트리거된 위치 사이의 관계를 보여주는 데 사용해야 함. 캐럿 팁은 보통 트리거 버튼에 시각적으로 정의된 눌림 상태가 없고 아이콘 버튼일 때 사용.
Tab tip 팝오버가 툴바나 헤더 영역에 연결될 때 탭 팁을 가질 수 있음.

포맷 (Formatting)

구조 (Anatomy)

  • UI 트리거 버튼(UI trigger button): 클릭, 호버, 포커스 시 팝오버가 열리도록 트리거하는 인터랙티브 요소.
  • 팁(Tip): 팝오버와 트리거된 위치 사이의 관계를 보여주기 위해 팝오버 컨테이너에 추가되는 표시.
  • 콘텐츠 영역(Content area): 텍스트와 인터랙티브 요소를 배치하는 영역.
  • 컨테이너(Container): 텍스트와 인터랙티브 요소를 배치하는 영역.

크기 (Sizing)

컨테이너 (Container)

팝오버 컨테이너의 너비와 높이는 그 안에 배치된 콘텐츠의 양에 따라 달라질 수 있어요. 팝오버 너비 크기를 4컬럼을 초과하지 않을 것을 권장합니다.

너비를 1~4컬럼으로 유지하세요.

4컬럼 너비를 초과하지 마세요.

트리거 버튼 (Trigger button)

팝오버는 트리거 버튼에 의해 제어돼요. 기본적으로 아이콘 버튼을 사용해 팝오버를 열도록 트리거합니다. 그러나 트리거 버튼이 인터랙티브하기만 하면 사용 사례에 따라 모양과 크기를 시각적으로 바꿀 수 있습니다.

트리거 버튼은 무엇에 사용되는지에 따라 클릭, 호버, 포커스 시 팝오버를 열 수 있어요. 트리거 버튼에 대한 자세한 내용은 공개 패턴(disclosure pattern)을 참고하세요.

콘텐츠 (Content)

주요 요소 (Main elements)

제목, 본문, 푸터 콘텐츠는 사용 사례에 따라 달라질 수 있어요. 팝오버에서 사용되는 콘텐츠의 예시를 보려면 공개 패턴(disclosure pattern)을 참고하세요.

넘침 콘텐츠 (Overflow content)

팝오버를 사용할 때는 보통 스크롤이 필요하지 않아요. 드롭다운 같은 상황처럼 스크롤이 필요하다면, 본문 섹션은 헤더와 푸터가 제자리에 고정된 채로 세로로 스크롤되어야 합니다. 가로로 스크롤하거나 콘텐츠가 페이지 밖으로 넘치게 하지 마세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

No tip (팁 없음)

팁이 없는 팝오버는 다양한 사용 사례에 사용할 수 있어요. No tip 팝오버는 보통 트리거 버튼에 시각적으로 정의된 눌림 상태가 있을 때 사용됩니다.

배치 (Placement)

팝오버 방향은 기본적으로 auto로 설정돼요. 팝오버는 열릴 때 브라우저의 가장자리를 감지해 컨테이너가 잘리지 않도록 뷰 안에 제대로 배치될 수 있습니다. 또는 팝오버는 특정 방향을 지정할 수도 있습니다. 방향 옵션은 팝오버 변형에 따라 달라집니다.

팝오버에 팁이 없을 때는 트리거 버튼이 팝오버의 측면에 딱 붙어야 해요. 팝오버는 트리거 버튼의 왼쪽, 오른쪽, 아래, 위에서 열릴 수 있습니다.

정렬 (Alignment)

트리거 버튼은 팝오버 컨테이너에서 4px 떨어진 곳에 배치되어야 하며, 어떤 크기의 버튼을 사용하든 팝오버 컨테이너와 항상 같은 거리여야 해요.

팝오버 가장자리를 트리거 버튼과 딱 붙게 정렬하세요.

트리거 버튼 근처에 팝오버를 임의로 배치하지 마세요.

Caret tip (캐럿 팁)

캐럿 팁은 팝오버와 트리거된 위치 사이의 관계를 보여주기 위해 팝오버에 추가되어야 해요. 캐럿 팁은 보통 트리거 버튼에 시각적으로 정의된 눌림 상태가 없고 아이콘 버튼일 때 사용됩니다.

배치 (Placement)

팝오버는 트리거 버튼의 왼쪽, 오른쪽, 아래, 위에서 열릴 수 있어요. 캐럿 팁을 사용할 때 트리거 버튼과 캐럿 팁은 서로 세로 중앙 정렬되어야 합니다.

정렬 (Alignment)

팝오버의 컨테이너는 페이지 밖으로 넘치거나 중요한 정보를 덮지 않도록 start, center, end 중 하나에 정렬될 수 있어요.

no tip 팝오버와 마찬가지로 캐럿 팁 팝오버와 짝을 이루는 트리거 버튼은 팝오버 컨테이너에서 4px 떨어져 배치되어야 합니다.

캐럿 팁 중심을 트리거 버튼과 정렬하세요.

캐럿 팁을 트리거 버튼과 어긋나게 하지 마세요.

Tab tip (탭 팁)

팝오버는 트리거 버튼이 있는 툴바나 헤더 영역에 연결될 때 탭 팁을 가질 수 있어요.

배치 (Placement)

탭 팁 팝오버는 페이지의 다른 레이어 안에 중첩됩니다. 탭 팁은 컨테이너의 왼쪽과 오른쪽에 나타날 수 있으며, 가장자리는 그것이 들어있는 레이어의 가장자리와 딱 붙어야 해요.

정렬 (Alignment)

탭 팁이 있는 팝오버는 서로 연결되어 있으므로 트리거 버튼과 컨테이너 사이에 0px 공간이 있습니다.

탭 팁을 뒤의 레이어와 위쪽 정렬하세요.

탭 팁을 뒤의 레이어와 어긋나게 하지 마세요.

공통 동작 (Universal behaviors)

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 사용 사례에 따라 트리거 버튼을 클릭하거나 호버해 팝오버를 열고 닫습니다.

클릭(Click): 트리거 버튼을 클릭해 팝오버를 엽니다. 트리거 버튼을 다시 클릭하거나 열린 팝오버 컨테이너 밖 아무 곳이나 클릭해 팝오버를 닫습니다.

호버(Hover): 트리거 버튼을 호버해 팝오버를 엽니다. 팝오버 밖으로 호버를 옮기거나 열린 팝오버 컨테이너 밖 아무 곳이나 클릭해 팝오버를 닫습니다.

키보드 (Keyboard)

포커스(Focus): 팝오버 컨트롤에 포커스가 있을 때 Enter 또는 Space는 팝오버 컨트롤을 활성화하고 팝오버 콘텐츠의 가시성을 토글합니다.

스크린 리더 (Screen readers)

VoiceOver: 버튼에 포커스가 있는 동안 Enter 또는 Space를 눌러 팝오버를 여는 버튼을 트리거할 수 있어요. JAWS: 버튼에 포커스가 있는 동안 Enter 또는 Space를 눌러 팝오버를 여는 버튼을 트리거할 수 있어요. NVDA: 버튼에 포커스가 있는 동안 Enter 또는 Space를 눌러 팝오버를 여는 버튼을 트리거할 수 있어요.

중첩 (Nesting)

팝오버 안에 다른 팝오버를 배치하면 혼란스러운 인터랙션과 접근성 문제를 일으킬 수 있어요. 대신 모달이나 다른 경험 사용을 고려하세요.

팝오버 안의 인터랙티브 요소에는 툴팁을 사용할 수 있지만 배치를 신중히 고려하세요. 툴팁이 팝오버 컨테이너 안에서 잘리지 않도록 배치되게 하세요.

팝오버 안의 툴팁 예시

수정자 (Modifiers)

색상 (Colors)

팝오버는 $layer-01, $layer-02, $background-inverse의 세 가지 다른 컨테이너 색상으로 가장 흔히 사용됩니다.

모서리 (Corners)

팝오버 컨테이너는 기본적으로 둥근 모서리를 가지며 코너 반경은 2px로 설정돼요. 팝오버 구조에 탭 팁이 포함되어 툴바나 헤더에 연결될 때는 팝오버와 아래 레이어 사이의 깨끗한 선을 유지하기 위해 직각 모서리를 사용하세요.

폼 컴포넌트 (Form components)

드롭다운처럼 메뉴가 있는 폼 컴포넌트는 팝오버를 기본 레이어로 사용해요.

공개 (Disclosures)

공개는 팝오버를 기본 레이어로 사용해요. 공개는 팝오버 컨테이너, 텍스트, 인터랙티브 요소로 구성됩니다. 자세한 지침은 Carbon의 공개 패턴(disclosure pattern)을 참고하세요.

오버플로우 메뉴 (Overflow menus)

오버플로우 메뉴는 팝오버를 기본 레이어로 사용해요. 오버플로우 메뉴 아이콘 버튼이 트리거되면 메뉴가 열리고 탭 팁 팝오버를 기본으로 사용합니다. 자세한 지침은 Carbon의 오버플로우 메뉴(overflow menu)를 참고하세요.

토글팁 (Toggletips)

토글팁은 팝오버를 기본 레이어로 사용하며, 접근 가능하면서도 팝오버 컨테이너 안에서 인터랙티브 요소를 허용합니다. 자세한 지침은 Carbon의 토글팁 컴포넌트(toggletip component)를 참고하세요.

툴팁 (Tooltips)

툴팁은 팝오버를 기본 레이어로 사용해요. 툴팁은 트리거 버튼, 팝오버 컨테이너, 텍스트로 구성됩니다. 자세한 지침은 Carbon의 툴팁 컴포넌트(tooltip component)를 참고하세요.

참고 자료 (References)

더 알아보기 (Learn more)

팝오버는 페이지 위에 떠서 추가 정보나 인터랙티브 요소를 보여주는 레이어예요. No tip·Caret tip·Tab tip 변형을 트리거 버튼의 상태와 위치에 맞춰 고르고, 너비를 4컬럼 이내로 유지하세요. 팝오버 중첩을 피하고, 툴팁·토글팁·오버플로우 메뉴 등이 팝오버를 기본 레이어로 활용한다는 점을 기억하세요.