모달 vs. 팝오버
짧은 답변
모달은 작업이 끝날 때까지 화면을 멈춰요. 팝오버는 버튼 옆에 뜨고 화면은 계속 쓸 수 있어요.
먼저 완료해야 하는 한 가지 작업에는 모달(modal)을 사용하세요. 추가 정보나 작은 동작에는 팝오버(popover)를 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Modal Dialog
↗ 모달 대화상자
모달 창은 정신을 집중하게 해주는 창이에요. 누군가 닫거나 끝낼 때까지 현재 화면을 가로막아요.
계정 삭제의 경우, 키보드 포커스는 대화 상자 안에 머무릅니다. 사용자가 취소하면 포커스는 대화 상자를 연 버튼으로 돌아갑니다.
- 사용할 때
- 완전한 주의가 필요한 짧은 선택이나 작은 작업에 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 한 다이얼로그를 다른 다이얼로그 위에 열지 마세요 또는 일반적이고 저위험 정보에 다이얼로그를 사용하지 마세요.
- 코드에서 사용된 이름
<dialog> / role="dialog" aria-modal="true"
Popover
↗ 팝오버
팝오버는 여는 버튼에 딱 붙어 있는 작은 패널이에요. 화면을 막지 않고도 여러 내용과 버튼을 담을 수 있어요.
popover attribute / Popover아바타를 선택하여 작은 프로필을 엽니다. 사람의 역할, 연락처 세부 정보, 팔로우 동작을 보여줍니다.
- 사용할 때
- 내용이 트리거 옆에 있어야 하며 사람들이 페이지를 계속 사용할 수 있을 때 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 짧은 라벨 전용 힌트에 절대 사용하지 마세요. 대신 툴팁을 사용하세요.
- 코드에서 사용된 이름
popover attribute / Popover
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 모달 대화상자Modal Dialog | 완전한 주의가 필요한 짧은 선택이나 작은 작업에 사용하십시오. | 한 다이얼로그를 다른 다이얼로그 위에 열지 마세요 또는 일반적이고 저위험 정보에 다이얼로그를 사용하지 마세요. | <dialog> / role="dialog" aria-modal="true" |
| 팝오버Popover | 내용이 트리거 옆에 있어야 하며 사람들이 페이지를 계속 사용할 수 있을 때 사용하십시오. | 짧은 라벨 전용 힌트에 절대 사용하지 마세요. 대신 툴팁을 사용하세요. | popover attribute / Popover |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 모달 대화상자 (Modal Dialog)、팝오버 (Popover)에서 선택하세요. 이 규칙 사용: 모달은 작업이 끝날 때까지 화면을 멈춰요. 팝오버는 버튼 옆에 뜨고 화면은 계속 쓸 수 있어요. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.