모달Modal

modal은 '모드(mode)를 만드는'이라는 뜻입니다. 모달이 떠 있는 동안 앱은 "이것부터 처리해야 하는 모드"에 들어가고, 뒤 화면은 어두워지며 클릭이 막힙니다. 이 차단성이 모달의 본질입니다.

언제 쓰나요

되돌리기 어려운 작업의 확인(삭제, 결제)이나 흐름을 끊고서라도 받아야 하는 입력에 씁니다. 차단은 강력한 만큼 비쌉니다. 사용자의 흐름을 강제로 멈추는 것이라 모달을 남발하는 앱은 금방 피곤해집니다. "이 순간 사용자가 다른 걸 하면 안 되는가?"에 예라고 답할 수 있을 때만 씁니다.

잘 만든 모달의 조건은 세 가지입니다. ESC로 닫히고, 오버레이를 클릭하면 닫히며(되돌릴 수 없는 작업의 확인은 예외), 열릴 때 포커스가 모달 안으로 옮겨집니다.

AI에게 시키기

삭제 버튼을 누르면 확인 모달을 띄워줘.
- 배경은 어두운 오버레이, 뒤 화면 클릭 차단
- 제목 "정말 삭제할까요?" + 되돌릴 수 없다는 안내 한 줄
- 취소(기본 포커스) / 삭제(빨간색) 버튼
- ESC로 닫기. 삭제 확인이므로 오버레이 클릭으로는 닫히지 않게

"확인창 띄워줘"라고만 하면 브라우저 기본 confirm()이 나오기 쉽습니다. 모달이라는 이름과 함께 오버레이·포커스·닫는 방법을 적어야 원하는 결과가 나옵니다.

혼동 주의

• 다이얼로그(Dialog): 더 넓은 개념입니다. 모달은 "차단하는 다이얼로그"이고, 차단하지 않는 논모달(non-modal) 다이얼로그도 있습니다. HTML <dialog> 요소는 둘 다 지원합니다.
• 팝업(Popup): 별도의 브라우저 창을 여는 것입니다. 요즘 UI에서는 거의 쓰지 않고 광고 차단기의 표적이 됩니다.
• 드로어·시트(Drawer·Sheet): 화면 옆이나 아래에서 밀려 들어오는 패널입니다. 차단할 수도, 하지 않을 수도 있습니다.
• 토스트: 정반대입니다. 차단하지 않고 알아서 사라집니다.