Tooltip, Popover, Dialog 비교: 올바른 UI 오버레이 선택하기

Tooltip은 컨트롤을 설명하고 popover는 작은 작업을 담으며 dialog는 현재 페이지를 멈추고 결정을 집중시킵니다. Pixso UI 디자인 메이커에서 오버레이의 일을 먼저 정의하세요.

1. 오버레이의 일을 먼저 적기

트리거와 카드 스타일을 먼저 만들고 나중에 패턴을 고르면 역할이 섞입니다. 무엇을 보여 주고 무엇을 조작하며 배경을 막아야 하는지 적습니다.

Workspace visibility 설명은 tooltip, 워크스페이스 선택은 popover, 삭제 확인은 dialog로 비교합니다.

2. 설명만 필요하면 tooltip

Tooltip은 트리거가 이미 작동하고 짧고 보조적인 설명이 필요할 때 사용합니다. 보이는 라벨이 기본 의미를 전달해야 합니다.

hover만 의존하지 말고 키보드 포커스와 터치에서도 제공합니다. 익숙한 모든 아이콘에 붙이면 지연과 소음이 늘어납니다.

3. 작은 맥락 작업이면 popover

Popover는 트리거에 붙어 검색, 목록, 현재 선택과 관리 링크를 담을 수 있습니다. 클릭, 바깥 클릭, Escape와 열고 닫을 때 포커스를 정합니다.

여러 섹션과 긴 검증이 필요해지면 dialog나 페이지로 이동합니다.

4. 결정을 가둬야 하면 dialog

Dialog는 별도의 상호작용 맥락을 만듭니다. 삭제처럼 대상과 결과를 이해하고 확인해야 할 때 적합합니다. modal은 배경을 inert로 만들고 포커스를 내부로 옮깁니다.

Tab, Shift+Tab, Escape, 제출 중, 실패와 닫힌 뒤 포커스 위치를 명세합니다. 단순 알림에 dialog를 쓰지 않습니다.

5. trigger, focus, dismissal과 placement

모든 오버레이에 접근 가능한 이름, 초기 포커스, 닫기 경로와 배치 규칙을 기록합니다. 좁은 화면에서는 bottom sheet가 될 수 있습니다.

6. Pixso에서 패턴 세트 만들기

Tooltip, popover, dialog를 별도 컴포넌트로 구성하고 search, no results, selected, loading 같은 실제 상태를 추가합니다. 행동 규칙을 주석으로 남깁니다.

7. 핸드오프 전 edge case

• 긴 번역과 200% 확대에서도 설명이 보인다.
• 키보드만으로 열기, 이동, 선택과 닫기가 된다.
• Popover에 검색, 결과 없음, loading이 있다.
• Dialog가 대상과 결과를 설명하고 실패를 유지한다.
• 서로 호환되지 않는 오버레이가 동시에 열리지 않는다.

캔버스의 연결은 브라우저 포커스 격리, 읽기 순서와 알림 시점을 증명하지 않습니다. 구현 테스트를 별도 게이트로 두세요.

결론

Tooltip은 짧은 설명, popover는 작은 작업, dialog는 페이지를 멈추는 결정을 위해 사용합니다. 오버레이의 일에 맞춰 선택하고 Pixso에서 상태와 동작을 핸드오프하세요.